Add Calibrate AI persona presets with per-mode system prompts

server/web/src/components/CalibrationAIControl.tsx

@@ -3,6 +3,11 @@ import type { ServerSettings } from '../types';
 import { api } from '../api/client';
 import { HelpTip, FieldHint } from './HelpTip';
 import { ADAPTIVE_STRATEGY_HELP } from '../help/lotlOnionTiers';
+import {
+  AI_PERSONA_CHIPS,
+  DEFAULT_AI_PERSONA,
+  normalizeAIPersona,
+} from '../help/aiPersonas';
 
 export const DEFAULT_AI_LOCAL_ENDPOINT = 'http://127.0.0.1:11434/v1';
 export const DEFAULT_AI_INTERVAL_SEC = 60;
@@ -25,6 +30,7 @@ export default function CalibrationAIControl({ server, onUpdate }: Props) {
   const endpoint = readEndpoint(server);
   const model = server.ai_model?.trim() || '';
   const intervalSec = readIntervalSec(server);
+  const persona = normalizeAIPersona(server.ai_persona);
 
   const [models, setModels] = useState<string[]>([]);
   const [refreshing, setRefreshing] = useState(false);
@@ -87,6 +93,31 @@ export default function CalibrationAIControl({ server, onUpdate }: Props) {
             <em>your</em> machines only. Complete fleet control stays on your LAN.
           </p>
 
+          <div className="form-group">
+            <span className="label">AI persona</span>
+            <div
+              className="calibration-persona-chips"
+              role="group"
+              aria-label="AI persona preset"
+            >
+              {AI_PERSONA_CHIPS.map((chip) => (
+                <div key={chip.id} className="calibration-persona-chip-wrap">
+                  <button
+                    type="button"
+                    className={`calibration-persona-chip${persona === chip.id ? ' calibration-persona-chip--selected' : ''}`}
+                    style={{ ['--chip-accent' as string]: chip.color }}
+                    aria-pressed={persona === chip.id}
+                    onClick={() => onUpdate('server.ai_persona', chip.id)}
+                  >
+                    <span className="calibration-persona-chip-label">{chip.label}</span>
+                  </button>
+                  <HelpTip field={chip.helpField} />
+                </div>
+              ))}
+            </div>
+            <FieldHint field="ai_persona" />
+          </div>
+
           <div className="form-group">
             <label htmlFor="cal-ai-endpoint" className="label">
               Local API URL <HelpTip field="ai_local_endpoint" />