@aion0/forge 0.9.0 → 0.9.2

package/components/ScheduleCreateModal.tsx

@@ -0,0 +1,1507 @@
+'use client';
+
+/**
+ * ScheduleCreateModal — 3-step wizard:
+ *   1. Pick body (kind: pipeline | skill, then ref)
+ *   2. Fill input (schema-driven for pipeline; project + user_prompt for skill)
+ *   3. Trigger (period / cron / once / manual + name)
+ *
+ * V2 Phase 2: pipeline + skill body. connector_tool + action types
+ * (chat / email / telegram) land in phases 3-6.
+ */
+
+import { useEffect, useState } from 'react';
+
+type BodyKind = 'pipeline' | 'skill' | 'connector_tool';
+
+interface Workflow { name: string; description?: string; }
+interface SkillItem { name: string; displayName?: string; description?: string; installedGlobal?: boolean; installedProjects?: string[]; }
+interface ProjectInfo { path: string; name: string; }
+interface PipelineInputField {
+  name: string;
+  description: string;
+  label?: string;
+  required: boolean;
+  type: 'string' | 'integer' | 'number' | 'boolean' | 'enum';
+  enum?: string[] | null;
+  default?: string | number | boolean | null;
+  multiline?: boolean;
+}
+interface PipelineSchema { name: string; description: string | null; input: PipelineInputField[]; }
+interface ConnectorToolParam {
+  type?: 'string' | 'number' | 'integer' | 'boolean' | 'object' | 'array' | string;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  default?: unknown;
+  enum?: unknown[];
+}
+interface ConnectorTool {
+  name: string;
+  description?: string;
+  parameters?: Record<string, ConnectorToolParam>;
+  input_schema?: any;
+  destructive?: boolean;
+}
+interface ConnectorEntry { id?: string; tools?: Record<string, ConnectorTool>; }
+interface ConnectorPayload {
+  plugin_id: string; name: string; description?: string;
+  installed: boolean;
+  entries?: ConnectorEntry[];
+}
+
+/** Flatten connector → list of {ref, tool} for the picker.
+ *  ref = "<plugin_id>.<tool_name>" — matches the body_ref shape the
+ *  scheduler / dispatchTool expect. */
+function flattenConnectorTools(connectors: ConnectorPayload[]): Array<{
+  pluginId: string; pluginName: string; toolName: string; ref: string; tool: ConnectorTool;
+}> {
+  const out: Array<{ pluginId: string; pluginName: string; toolName: string; ref: string; tool: ConnectorTool }> = [];
+  for (const c of connectors) {
+    if (!c.installed) continue;
+    for (const e of c.entries || []) {
+      const tools = e.tools || {};
+      for (const [toolName, t] of Object.entries(tools)) {
+        out.push({
+          pluginId: c.plugin_id,
+          pluginName: c.name || c.plugin_id,
+          toolName,
+          ref: `${c.plugin_id}.${toolName}`,
+          tool: { ...t, name: toolName },
+        });
+      }
+    }
+  }
+  return out;
+}
+
+/** Subset of Schedule fields needed to seed the modal in edit mode. */
+export interface EditableSchedule {
+  id: string;
+  name: string;
+  body_kind: BodyKind;
+  body_ref: string;
+  input: Record<string, unknown>;
+  skills?: string[];
+  action_kind: 'none' | 'chat' | 'email' | 'telegram';
+  action_config: Record<string, unknown>;
+  schedule_kind: 'period' | 'once' | 'cron' | 'manual';
+  schedule_interval_minutes: number;
+  schedule_at: string | null;
+  schedule_cron: string | null;
+}
+
+interface Props {
+  onClose: () => void;
+  onCreated: () => void;
+  /** When set, the modal opens in edit mode: body_kind/body_ref locked,
+   *  submit issues PATCH instead of POST, title/button labels swap. */
+  existing?: EditableSchedule | null;
+}
+
+// Cast Schedule.input (Record<string, unknown>) into the modal's string-keyed
+// form. The form coerces everything back to strings anyway; numbers/booleans
+// stringify cleanly.
+function inputToStrings(v: Record<string, unknown> | undefined): Record<string, string> {
+  if (!v) return {};
+  const out: Record<string, string> = {};
+  for (const [k, val] of Object.entries(v)) out[k] = val == null ? '' : String(val);
+  return out;
+}
+
+// Convert an ISO-UTC string ("2026-05-23T12:00:00.000Z") into the YYYY-MM-DDTHH:MM
+// local form <input type="datetime-local"> requires. Strips seconds + tz.
+function toLocalDatetimeInput(iso: string): string {
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return '';
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+export default function ScheduleCreateModal({ onClose, onCreated, existing }: Props) {
+  const editing = !!existing;
+
+  // In edit mode skip past Step 1 (body_kind / body_ref are immutable).
+  const [step, setStep] = useState<1 | 2 | 3>(editing ? 2 : 1);
+
+  // Step 1
+  const [bodyKind, setBodyKind] = useState<BodyKind>(existing?.body_kind ?? 'pipeline');
+  const [bodyRef, setBodyRef] = useState<string>(existing?.body_ref ?? '');
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [skills, setSkills] = useState<SkillItem[]>([]);
+  const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [connectors, setConnectors] = useState<ConnectorPayload[]>([]);
+
+  // Step 2 — for pipeline body
+  const [pipelineSchema, setPipelineSchema] = useState<PipelineSchema | null>(null);
+  // Step 2 — for skill body (free-form)
+  const [skillProject, setSkillProject] = useState(
+    existing?.body_kind === 'skill' ? String(existing.input?.project ?? '') : ''
+  );
+  const [skillUserPrompt, setSkillUserPrompt] = useState(
+    existing?.body_kind === 'skill' ? String(existing.input?.user_prompt ?? '') : ''
+  );
+  // Step 2 — for connector_tool body
+  const [toolInputJson, setToolInputJson] = useState(
+    existing?.body_kind === 'connector_tool' ? JSON.stringify(existing.input ?? {}, null, 2) : '{}'
+  );
+  const [toolInputJsonErr, setToolInputJsonErr] = useState('');
+
+  const [input, setInput] = useState<Record<string, string>>(
+    existing?.body_kind === 'pipeline' ? inputToStrings(existing.input) : {}
+  );
+
+  // Extra skills attached to the dispatched body (pipeline tasks / skill task).
+  // Parallel to Job.skills — forwarded as --append-system-prompt; auto-installed
+  // into the target project on dispatch. Not meaningful for connector_tool.
+  const [extraSkills, setExtraSkills] = useState<string[]>(Array.isArray(existing?.skills) ? existing!.skills! : []);
+  const [extraSkillsPickerOpen, setExtraSkillsPickerOpen] = useState(false);
+  // /api/skills returns installedGlobal/installedProjects; we list ALL for the
+  // picker (auto-install handles missing ones) but body_kind=skill picker uses
+  // a filtered list (separate state `skills`).
+  const [allSkills, setAllSkills] = useState<SkillItem[]>([]);
+
+  // Step 3
+  const [name, setName] = useState(existing?.name ?? '');
+  const [trigger, setTrigger] = useState<'period' | 'cron' | 'once' | 'manual'>(existing?.schedule_kind ?? 'period');
+  const [interval, setInterval] = useState(existing?.schedule_interval_minutes ?? 10);
+  const [cron, setCron] = useState(existing?.schedule_cron ?? '*/15 * * * *');
+  const [scheduleAt, setScheduleAt] = useState(
+    // <input type=datetime-local> expects YYYY-MM-DDTHH:MM (local), not ISO Z.
+    existing?.schedule_at ? toLocalDatetimeInput(existing.schedule_at) : ''
+  );
+  const [actionKind, setActionKind] = useState<'none' | 'chat' | 'email' | 'telegram'>(existing?.action_kind ?? 'none');
+  const [chatSessionId, setChatSessionId] = useState(
+    existing?.action_kind === 'chat' ? String(existing.action_config?.session_id ?? '') : ''
+  );
+  const [chatPrefix, setChatPrefix] = useState(
+    existing?.action_kind === 'chat' ? String(existing.action_config?.prefix ?? '') : ''
+  );
+  const [chatSessions, setChatSessions] = useState<Array<{ id: string; title: string }>>([]);
+  const [emailTo, setEmailTo] = useState(
+    existing?.action_kind === 'email'
+      ? (Array.isArray(existing.action_config?.to)
+          ? (existing.action_config.to as string[]).join(', ')
+          : String(existing.action_config?.to ?? ''))
+      : ''
+  );
+  const [emailSubjectTpl, setEmailSubjectTpl] = useState(
+    existing?.action_kind === 'email'
+      ? String(existing.action_config?.subject_template ?? 'Forge schedule — {date}')
+      : 'Forge schedule — {date}'
+  );
+  const [emailBodyTpl, setEmailBodyTpl] = useState(
+    existing?.action_kind === 'email'
+      ? String(existing.action_config?.body_template ?? '{body_output}')
+      : '{body_output}'
+  );
+  const [telegramChatId, setTelegramChatId] = useState(
+    existing?.action_kind === 'telegram' ? String(existing.action_config?.chat_id ?? '') : ''
+  );
+  const [telegramPrefix, setTelegramPrefix] = useState(
+    existing?.action_kind === 'telegram' ? String(existing.action_config?.prefix ?? '') : ''
+  );
+
+  const [submitting, setSubmitting] = useState(false);
+  const [err, setErr] = useState('');
+
+  // Load source lists on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const [wfR, skR, cnR, csR] = await Promise.all([
+          fetch('/api/pipelines?type=workflows').then((r) => r.json()),
+          fetch('/api/skills').then((r) => r.json()),
+          fetch('/api/connectors').then((r) => r.json()).catch(() => ({ connectors: [] })),
+          fetch('/api/chat-proxy/sessions').then((r) => r.json()).catch(() => ({ sessions: [] })),
+        ]);
+        if (Array.isArray(csR?.sessions)) setChatSessions(csR.sessions);
+        if (Array.isArray(wfR)) setWorkflows(wfR);
+        else if (wfR?.workflows) setWorkflows(wfR.workflows);
+        if (Array.isArray(skR?.skills)) {
+          // Body picker only shows installed skills (forces user to install first).
+          setSkills(skR.skills.filter((s: SkillItem) => s.installedGlobal || (s.installedProjects?.length ?? 0) > 0));
+          // Extra-skills picker lists everything — Forge auto-installs missing
+          // ones into the target project at dispatch time.
+          setAllSkills(skR.skills);
+        }
+        if (skR?.projects) setProjects(skR.projects);
+        const conns: ConnectorPayload[] = Array.isArray(cnR) ? cnR : (cnR?.connectors || []);
+        setConnectors(conns.filter((c) => c.installed));
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : String(e));
+      }
+    })();
+  }, []);
+
+  // Load pipeline schema when pipeline body picked
+  useEffect(() => {
+    if (bodyKind !== 'pipeline' || !bodyRef) { setPipelineSchema(null); return; }
+    (async () => {
+      try {
+        const r = await fetch(`/api/pipelines/${encodeURIComponent(bodyRef)}/schema`);
+        if (!r.ok) {
+          const j = await r.json().catch(() => ({}));
+          setErr(j.error || `Schema fetch failed (${r.status})`);
+          return;
+        }
+        const j = (await r.json()) as PipelineSchema;
+        setPipelineSchema(j);
+        const initial: Record<string, string> = {};
+        for (const f of j.input) {
+          // Prefer existing user-typed value, then the schema-declared
+          // default (so v2 multiline defaults like user_prompt / mr_body_template
+          // pre-fill the textarea instead of being empty placeholder hints).
+          initial[f.name] = input[f.name] ?? (f.default != null ? String(f.default) : '');
+        }
+        setInput(initial);
+        if (!name) {
+          const firstVal = Object.values(initial).find((v) => v.length > 0);
+          setName(`${bodyRef}${firstVal ? ' · ' + firstVal : ''}`);
+        }
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : String(e));
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyKind, bodyRef]);
+
+  // Auto-suggest name for skill body
+  useEffect(() => {
+    if (bodyKind === 'skill' && bodyRef && !name) {
+      setName(`${bodyRef}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyKind, bodyRef]);
+
+  // Reset body_ref when body_kind switches
+  function onBodyKindChange(k: BodyKind) {
+    setBodyKind(k);
+    setBodyRef('');
+    setInput({});
+    setPipelineSchema(null);
+  }
+
+  function canProceed(): boolean {
+    if (step === 1) return !!bodyRef;
+    if (step === 2) {
+      if (bodyKind === 'pipeline') {
+        if (!pipelineSchema) return false;
+        for (const f of pipelineSchema.input) {
+          if (f.required && !input[f.name]?.trim()) return false;
+        }
+        return true;
+      }
+      if (bodyKind === 'skill') {
+        return !!skillProject && !!skillUserPrompt.trim();
+      }
+      if (bodyKind === 'connector_tool') {
+        return !toolInputJsonErr;
+      }
+      return false;
+    }
+    if (step === 3) {
+      if (!name.trim()) return false;
+      if (trigger === 'cron' && !cron.trim()) return false;
+      if (trigger === 'once' && !scheduleAt) return false;
+      if (actionKind === 'chat' && !chatSessionId) return false;
+      if (actionKind === 'email' && !emailTo.trim()) return false;
+      return true;
+    }
+    return false;
+  }
+
+  async function submit() {
+    setErr('');
+    setSubmitting(true);
+    try {
+      let body_input: Record<string, unknown>;
+      if (bodyKind === 'pipeline') {
+        body_input = input;
+      } else if (bodyKind === 'skill') {
+        body_input = { project: skillProject, user_prompt: skillUserPrompt };
+      } else { // connector_tool
+        try {
+          body_input = JSON.parse(toolInputJson || '{}');
+        } catch (e) {
+          setErr(`Tool input is not valid JSON: ${(e as Error).message}`);
+          return;
+        }
+      }
+      const action_config: Record<string, unknown> = {};
+      if (actionKind === 'chat') {
+        action_config.session_id = chatSessionId;
+        if (chatPrefix) action_config.prefix = chatPrefix;
+      } else if (actionKind === 'email') {
+        const to = emailTo.split(/[,;]\s*/).map((s) => s.trim()).filter(Boolean);
+        action_config.to = to.length > 1 ? to : (to[0] || '');
+        if (emailSubjectTpl) action_config.subject_template = emailSubjectTpl;
+        if (emailBodyTpl) action_config.body_template = emailBodyTpl;
+      } else if (actionKind === 'telegram') {
+        if (telegramChatId.trim()) action_config.chat_id = telegramChatId.trim();
+        if (telegramPrefix) action_config.prefix = telegramPrefix;
+      }
+      const body: any = {
+        name: name.trim(),
+        input: body_input,
+        // connector_tool ignores skills (no Claude task spawned); send [] so
+        // PATCH doesn't preserve a stale value from before kind switch.
+        skills: bodyKind === 'connector_tool' ? [] : extraSkills,
+        action_kind: actionKind,
+        action_config,
+        schedule_kind: trigger,
+        // Reset stale trigger fields so a kind change wipes the old one.
+        schedule_interval_minutes: trigger === 'period' ? interval : null,
+        schedule_cron: trigger === 'cron' ? cron.trim() : null,
+        schedule_at: trigger === 'once' ? new Date(scheduleAt).toISOString() : null,
+      };
+      if (!editing) {
+        body.body_kind = bodyKind;
+        body.body_ref = bodyRef;
+        body.enabled = true;
+      }
+      const url = editing ? `/api/schedules/${encodeURIComponent(existing!.id)}` : '/api/schedules';
+      const r = await fetch(url, {
+        method: editing ? 'PATCH' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!r.ok) {
+        const j = await r.json().catch(() => ({}));
+        setErr(j.error || `HTTP ${r.status}`);
+        return;
+      }
+      onCreated();
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[12vh]">
+      <div className="bg-[var(--bg-primary)] border border-[var(--border)] rounded shadow-2xl w-[680px] max-w-[95vw] max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="px-4 py-3 border-b border-[var(--border)] flex items-center gap-3">
+          <h2 className="text-[13px] font-semibold flex-1">{editing ? `✎ Edit Schedule — ${existing?.name}` : '+ Schedule'}</h2>
+          <Stepper step={step} />
+          <button onClick={onClose} className="text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] w-6 h-6">✕</button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-4">
+          {step === 1 && (
+            <Step1
+              bodyKind={bodyKind} onBodyKindChange={onBodyKindChange}
+              bodyRef={bodyRef} onBodyRefChange={setBodyRef}
+              workflows={workflows} skills={skills} connectors={connectors}
+              projects={projects}
+              skillProject={skillProject} onSkillProject={setSkillProject}
+            />
+          )}
+          {step === 2 && bodyKind === 'pipeline' && pipelineSchema && (
+            <Step2Pipeline schema={pipelineSchema} input={input} onChange={setInput} />
+          )}
+          {step === 2 && bodyKind === 'skill' && (
+            <Step2Skill
+              project={skillProject}
+              userPrompt={skillUserPrompt} onUserPrompt={setSkillUserPrompt}
+              skillName={bodyRef}
+            />
+          )}
+          {step === 2 && bodyKind === 'connector_tool' && (
+            <Step2ConnectorTool
+              connectors={connectors}
+              toolRef={bodyRef}
+              json={toolInputJson}
+              onJsonChange={(v) => {
+                setToolInputJson(v);
+                try { JSON.parse(v || '{}'); setToolInputJsonErr(''); }
+                catch (e) { setToolInputJsonErr((e as Error).message); }
+              }}
+              jsonErr={toolInputJsonErr}
+            />
+          )}
+          {step === 2 && bodyKind !== 'connector_tool' && (
+            <ExtraSkillsSection
+              skills={extraSkills}
+              onChange={setExtraSkills}
+              allSkills={allSkills}
+              onOpenPicker={() => setExtraSkillsPickerOpen(true)}
+            />
+          )}
+          {step === 3 && (
+            <Step3
+              name={name} onName={setName}
+              trigger={trigger} onTrigger={setTrigger}
+              interval={interval} onInterval={setInterval}
+              cron={cron} onCron={setCron}
+              scheduleAt={scheduleAt} onScheduleAt={setScheduleAt}
+              bodyKind={bodyKind} bodyRef={bodyRef}
+              actionKind={actionKind} onActionKind={setActionKind}
+              chatSessionId={chatSessionId} onChatSessionId={setChatSessionId}
+              chatPrefix={chatPrefix} onChatPrefix={setChatPrefix}
+              chatSessions={chatSessions}
+              emailTo={emailTo} onEmailTo={setEmailTo}
+              emailSubjectTpl={emailSubjectTpl} onEmailSubjectTpl={setEmailSubjectTpl}
+              emailBodyTpl={emailBodyTpl} onEmailBodyTpl={setEmailBodyTpl}
+              telegramChatId={telegramChatId} onTelegramChatId={setTelegramChatId}
+              telegramPrefix={telegramPrefix} onTelegramPrefix={setTelegramPrefix}
+            />
+          )}
+          {err && <div className="text-[11px] text-[var(--red)] bg-[var(--red)]/10 rounded p-2 mt-3">{err}</div>}
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 py-3 border-t border-[var(--border)] flex items-center justify-between">
+          <button onClick={onClose} className="text-[11px] px-3 py-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)]">Cancel</button>
+          <div className="flex gap-2">
+            {step > 1 && !(editing && step === 2) && (
+              <button
+                onClick={() => setStep((step - 1) as 1 | 2 | 3)}
+                disabled={submitting}
+                className="text-[11px] px-3 py-1 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)] disabled:opacity-50"
+              >← Back</button>
+            )}
+            {step < 3 ? (
+              <button
+                onClick={() => setStep((step + 1) as 1 | 2 | 3)}
+                disabled={!canProceed()}
+                className="text-[11px] px-3 py-1 bg-[var(--text-primary)] text-[var(--bg-primary)] rounded disabled:opacity-50"
+              >Next →</button>
+            ) : (
+              <button
+                onClick={() => void submit()}
+                disabled={!canProceed() || submitting}
+                className="text-[11px] px-3 py-1 bg-[var(--accent)] text-[var(--bg-primary)] rounded font-semibold disabled:opacity-50"
+              >{submitting ? (editing ? 'Saving…' : 'Creating…') : (editing ? 'Save' : 'Create')}</button>
+            )}
+          </div>
+        </div>
+      </div>
+      {extraSkillsPickerOpen && (
+        <MultiSkillPickerModal
+          all={allSkills.filter((s) => !s.name.startsWith('_'))}
+          selected={extraSkills}
+          onClose={() => setExtraSkillsPickerOpen(false)}
+          onChange={setExtraSkills}
+        />
+      )}
+    </div>
+  );
+}
+
+function Stepper({ step }: { step: 1 | 2 | 3 }) {
+  return (
+    <div className="flex items-center gap-1 text-[10px]">
+      {[1, 2, 3].map((n) => (
+        <div key={n} className="flex items-center">
+          <div className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold ${
+            n < step ? 'bg-[var(--accent)] text-[var(--bg-primary)]' :
+            n === step ? 'bg-[var(--text-primary)] text-[var(--bg-primary)]' :
+            'bg-[var(--bg-secondary)] text-[var(--text-secondary)]'
+          }`}>
+            {n < step ? '✓' : n}
+          </div>
+          {n < 3 && <span className={`w-4 h-px ${n < step ? 'bg-[var(--accent)]' : 'bg-[var(--border)]'} mx-0.5`} />}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Step1({
+  bodyKind, onBodyKindChange,
+  bodyRef, onBodyRefChange,
+  workflows, skills, connectors,
+  projects, skillProject, onSkillProject,
+}: {
+  bodyKind: BodyKind; onBodyKindChange: (k: BodyKind) => void;
+  bodyRef: string; onBodyRefChange: (n: string) => void;
+  workflows: Workflow[]; skills: SkillItem[]; connectors: ConnectorPayload[];
+  projects: ProjectInfo[];
+  skillProject: string; onSkillProject: (n: string) => void;
+}) {
+  return (
+    <div>
+      <div className="text-[11px] text-[var(--text-secondary)] mb-2">Step 1 / 3 — Pick what this schedule runs.</div>
+
+      {/* Body kind tabs */}
+      <div className="flex gap-1 mb-3 border-b border-[var(--border)]">
+        {(['pipeline', 'skill', 'connector_tool'] as BodyKind[]).map((k) => (
+          <button
+            key={k}
+            onClick={() => onBodyKindChange(k)}
+            className={`text-[11px] px-3 py-1.5 border-b-2 ${
+              bodyKind === k
+                ? 'border-[var(--text-primary)] font-semibold'
+                : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+            }`}
+          >
+            {k === 'pipeline' ? '📋 Pipeline'
+              : k === 'skill' ? '🧩 Skill'
+              : '🔌 Connector Tool'}
+          </button>
+        ))}
+      </div>
+
+      {/* Body ref list */}
+      {bodyKind === 'pipeline' ? (
+        workflows.length === 0 ? (
+          <div className="text-[11px] text-[var(--text-secondary)]">Loading pipelines…</div>
+        ) : (
+          <div className="space-y-1.5">
+            {workflows.map((w) => (
+              <Card key={w.name} title={w.name} desc={w.description}
+                    checked={bodyRef === w.name} onPick={() => onBodyRefChange(w.name)} />
+            ))}
+          </div>
+        )
+      ) : bodyKind === 'skill' ? (
+        // Skill body: project first (required), then skill list scoped to that project (or global).
+        <SkillPicker
+          skills={skills} projects={projects}
+          skillProject={skillProject} onSkillProject={onSkillProject}
+          bodyRef={bodyRef} onBodyRefChange={onBodyRefChange}
+        />
+      ) : (
+        // connector_tool — flattened plugin.tool list. Source shape is
+        // { connectors: [{plugin_id, name, installed, entries:[{tools:{name:tool}}] }] }
+        (() => {
+          const all = flattenConnectorTools(connectors);
+          if (all.length === 0) {
+            return (
+              <div className="text-[11px] text-[var(--text-secondary)]">
+                No installed connectors with tools. Install one from Settings → Connectors first.
+              </div>
+            );
+          }
+          // Group by plugin for nice section headers.
+          const byPlugin = new Map<string, { name: string; tools: typeof all }>();
+          for (const x of all) {
+            if (!byPlugin.has(x.pluginId)) byPlugin.set(x.pluginId, { name: x.pluginName, tools: [] });
+            byPlugin.get(x.pluginId)!.tools.push(x);
+          }
+          return (
+            <div className="space-y-3">
+              {Array.from(byPlugin.entries()).map(([pluginId, group]) => (
+                <div key={pluginId}>
+                  <div className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-1">{group.name}</div>
+                  <div className="space-y-1.5">
+                    {group.tools.map(({ ref, tool }) => (
+                      <Card key={ref}
+                            title={ref}
+                            desc={(tool.description || '') + (tool.destructive ? ' ⚠ destructive' : '')}
+                            checked={bodyRef === ref}
+                            onPick={() => onBodyRefChange(ref)} />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          );
+        })()
+      )}
+    </div>
+  );
+}
+
+function SkillPicker({ skills, projects, skillProject, onSkillProject, bodyRef, onBodyRefChange }: {
+  skills: SkillItem[]; projects: ProjectInfo[];
+  skillProject: string; onSkillProject: (n: string) => void;
+  bodyRef: string; onBodyRefChange: (n: string) => void;
+}) {
+  // Filter skills to those installed globally OR in the chosen project.
+  // If no project selected yet, show nothing in the list (prompt user to pick project first).
+  const visibleSkills = skillProject
+    ? skills.filter((s) => s.installedGlobal || (s.installedProjects || []).includes(skillProject)
+        || (s.installedProjects || []).some((p) => p.endsWith('/' + skillProject) || p === skillProject))
+    : [];
+  return (
+    <div>
+      <label className="block mb-3">
+        <div className="flex items-baseline gap-1 text-[11px] mb-0.5">
+          <span className="font-mono">project</span>
+          <span className="text-[var(--red)]">*</span>
+        </div>
+        <select
+          value={skillProject}
+          onChange={(e) => { onSkillProject(e.target.value); onBodyRefChange(''); }}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        >
+          <option value="">— pick a project —</option>
+          {projects.map((p) => (
+            <option key={p.name} value={p.name}>{p.name}</option>
+          ))}
+        </select>
+        <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+          Working directory for the Claude task. Skills installed in this project + global skills will appear below.
+        </div>
+      </label>
+
+      <div className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-1">
+        Skill
+        {skillProject && visibleSkills.length > 0 && (
+          <span className="ml-2 normal-case text-[var(--text-secondary)] font-normal">
+            ({visibleSkills.length} available in <code className="font-mono">{skillProject}</code>)
+          </span>
+        )}
+      </div>
+      {!skillProject ? (
+        <div className="text-[11px] text-[var(--text-secondary)] italic">Pick a project first.</div>
+      ) : visibleSkills.length === 0 ? (
+        <div className="text-[11px] text-[var(--text-secondary)]">
+          No skills installed globally or in <code className="font-mono">{skillProject}</code>. Install one from Settings → Skills.
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          {visibleSkills.map((s) => (
+            <Card key={s.name} title={s.name} desc={s.description}
+                  checked={bodyRef === s.name} onPick={() => onBodyRefChange(s.name)} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Card({ title, desc, checked, onPick }: {
+  title: string; desc?: string | null; checked: boolean; onPick: () => void;
+}) {
+  return (
+    <label
+      className={`block cursor-pointer rounded border p-2.5 ${
+        checked
+          ? 'border-[var(--text-primary)] bg-[var(--bg-secondary)]'
+          : 'border-[var(--border)] hover:bg-[var(--bg-secondary)]/50'
+      }`}
+    >
+      <div className="flex items-baseline gap-2">
+        <input type="radio" name="body-ref" checked={checked} onChange={onPick} />
+        <span className="text-[12px] font-mono font-semibold">{title}</span>
+      </div>
+      {desc && <div className="text-[10px] text-[var(--text-secondary)] mt-1 ml-5">{desc}</div>}
+    </label>
+  );
+}
+
+function Step2Pipeline({ schema, input, onChange }: {
+  schema: PipelineSchema; input: Record<string, string>; onChange: (v: Record<string, string>) => void;
+}) {
+  function update(k: string, v: string) {
+    onChange({ ...input, [k]: v });
+  }
+  return (
+    <div>
+      <div className="text-[11px] text-[var(--text-secondary)] mb-2">
+        Step 2 / 3 — Fill pipeline input. Pipeline: <code className="font-mono">{schema.name}</code>.
+      </div>
+      {schema.description && (
+        <div className="text-[10px] text-[var(--text-secondary)] mb-3 italic">{schema.description}</div>
+      )}
+      <div className="space-y-3">
+        {schema.input.map((f) => (
+          <PipelineInputControl
+            key={f.name} field={f}
+            value={input[f.name] ?? (f.default != null ? String(f.default) : '')}
+            onChange={(v) => update(f.name, v)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function PipelineInputControl({ field, value, onChange }: {
+  field: PipelineInputField; value: string; onChange: (v: string) => void;
+}) {
+  const labelEl = (
+    <div className="flex items-baseline gap-1 text-[11px] mb-0.5">
+      <span className="font-mono">{field.name}</span>
+      {field.required && <span className="text-[var(--red)]">*</span>}
+      {field.label && <span className="text-[10px] text-[var(--text-secondary)]">— {field.label}</span>}
+    </div>
+  );
+  const descEl = field.description ? (
+    <div className="text-[10px] text-[var(--text-secondary)] mt-0.5 whitespace-pre-wrap">{field.description}</div>
+  ) : null;
+
+  // enum → select
+  if (field.type === 'enum' && Array.isArray(field.enum) && field.enum.length > 0) {
+    return (
+      <label className="block">
+        {labelEl}
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        >
+          <option value="">— pick —</option>
+          {field.enum.map((opt) => (
+            <option key={opt} value={opt}>{opt}</option>
+          ))}
+        </select>
+        {descEl}
+      </label>
+    );
+  }
+
+  // boolean → checkbox; value is "true"/"false" string (pipeline templates do string substitution)
+  if (field.type === 'boolean') {
+    const checked = value === 'true' || value === '1';
+    return (
+      <label className="block">
+        {labelEl}
+        <label className="flex items-center gap-2 text-[11px]">
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={(e) => onChange(e.target.checked ? 'true' : 'false')}
+          />
+          <span className="text-[11px] text-[var(--text-secondary)]">{checked ? 'true' : 'false'}</span>
+        </label>
+        {descEl}
+      </label>
+    );
+  }
+
+  // number / integer
+  if (field.type === 'number' || field.type === 'integer') {
+    return (
+      <label className="block">
+        {labelEl}
+        <input
+          type="number"
+          step={field.type === 'integer' ? 1 : 'any'}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+        {descEl}
+      </label>
+    );
+  }
+
+  // string (default) — multiline if field declares it OR fallback to heuristic
+  const isMultiLine = field.multiline === true ||
+    (field.multiline === undefined && (
+      /multi-line|multiline|focus|prompt|description|text|body|template/i.test(field.description || '') ||
+      /_text$|_focus$|_prompt$|_body$|_template$/.test(field.name)
+    ));
+  return (
+    <label className="block">
+      {labelEl}
+      {isMultiLine ? (
+        <textarea
+          rows={3}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+      ) : (
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+      )}
+      {descEl}
+    </label>
+  );
+}
+
+function Step2Skill({ project, userPrompt, onUserPrompt, skillName }: {
+  project: string;
+  userPrompt: string; onUserPrompt: (v: string) => void; skillName: string;
+}) {
+  return (
+    <div>
+      <div className="text-[11px] text-[var(--text-secondary)] mb-3">
+        Step 2 / 3 — Skill <code className="font-mono">/{skillName}</code> in
+        project <code className="font-mono">{project}</code>.
+      </div>
+
+      <label className="block">
+        <div className="flex items-baseline gap-1 text-[11px] mb-0.5">
+          <span className="font-mono">user_prompt</span>
+          <span className="text-[var(--red)]">*</span>
+        </div>
+        <textarea
+          rows={6}
+          value={userPrompt}
+          onChange={(e) => onUserPrompt(e.target.value)}
+          placeholder="e.g. Fetch all my open Mantis bugs, summarize by category"
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+        <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+          The user message sent to Claude. The skill's SKILL.md prompts Claude on how to handle it.
+        </div>
+      </label>
+    </div>
+  );
+}
+
+function Step2ConnectorTool({ connectors, toolRef, json, onJsonChange, jsonErr }: {
+  connectors: ConnectorPayload[]; toolRef: string;
+  json: string; onJsonChange: (v: string) => void; jsonErr: string;
+}) {
+  const found = flattenConnectorTools(connectors).find((x) => x.ref === toolRef);
+  const tool = found?.tool;
+  const params = tool?.parameters || {};
+  const paramNames = Object.keys(params);
+
+  // Parse json → object for the form to read. If json is invalid the
+  // form shows current "field" values from whatever we last parsed
+  // successfully (the editor is the source of truth either way).
+  const parsed: Record<string, unknown> = (() => {
+    try { const v = JSON.parse(json || '{}'); return v && typeof v === 'object' && !Array.isArray(v) ? v : {}; }
+    catch { return {}; }
+  })();
+
+  // Toggle: form vs raw json. Default to form if the tool declares
+  // parameters; fall back to raw JSON for tools without a schema.
+  const [showRaw, setShowRaw] = useState(paramNames.length === 0);
+
+  // Test result panel — populated by the Test button below the form.
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<null | {
+    ok: boolean;
+    is_error: boolean;
+    content: string;
+    duration_ms: number;
+    error?: string;
+  }>(null);
+  const pluginId = toolRef.split('.')[0] || '';
+  const toolName = toolRef.split('.').slice(1).join('.');
+  async function runTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const r = await fetch('/api/connectors/tool-test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plugin_id: pluginId, tool: toolName, input: parsed }),
+      });
+      const j = await r.json();
+      setTestResult(j);
+    } catch (e) {
+      setTestResult({ ok: false, is_error: true, content: '', duration_ms: 0, error: (e as Error).message });
+    } finally { setTesting(false); }
+  }
+
+  function updateField(name: string, value: unknown) {
+    const next = { ...parsed };
+    // Drop empty optional fields so they don't pollute the payload.
+    if (value === '' || value === null || value === undefined) delete next[name];
+    else next[name] = value;
+    onJsonChange(JSON.stringify(next, null, 2));
+  }
+
+  return (
+    <div>
+      <div className="text-[11px] text-[var(--text-secondary)] mb-3">
+        Step 2 / 3 — Tool: <code className="font-mono">{toolRef}</code>. Dispatched
+        directly (no LLM); the response becomes the body output.
+      </div>
+
+      {tool?.description && (
+        <div className="text-[10px] text-[var(--text-secondary)] italic mb-3 whitespace-pre-wrap">{tool.description}</div>
+      )}
+      {tool?.destructive && (
+        <div className="text-[10px] text-[var(--yellow)] bg-[var(--yellow)]/10 rounded p-2 mb-3">
+          ⚠ This tool is marked <code className="font-mono">destructive</code>. Schedule will invoke it
+          every trigger — make sure that's what you want.
+        </div>
+      )}
+
+      {/* mode toggle */}
+      {paramNames.length > 0 && (
+        <div className="flex gap-2 mb-3 text-[10px]">
+          <button
+            onClick={() => setShowRaw(false)}
+            className={`px-2 py-0.5 rounded border ${!showRaw ? 'border-[var(--text-primary)] bg-[var(--bg-secondary)]' : 'border-[var(--border)] text-[var(--text-secondary)]'}`}
+          >Form</button>
+          <button
+            onClick={() => setShowRaw(true)}
+            className={`px-2 py-0.5 rounded border ${showRaw ? 'border-[var(--text-primary)] bg-[var(--bg-secondary)]' : 'border-[var(--border)] text-[var(--text-secondary)]'}`}
+          >Raw JSON</button>
+        </div>
+      )}
+
+      {/* form mode */}
+      {!showRaw && paramNames.length > 0 && (
+        <div className="space-y-3">
+          {paramNames.map((name) => {
+            const p = params[name];
+            const cur = parsed[name];
+            return (
+              <ConnectorToolField
+                key={name}
+                name={name}
+                param={p}
+                value={cur}
+                onChange={(v) => updateField(name, v)}
+              />
+            );
+          })}
+          {jsonErr && (
+            <div className="text-[10px] text-[var(--red)]">underlying JSON is invalid: {jsonErr}</div>
+          )}
+        </div>
+      )}
+
+      {/* raw json mode (or fallback when tool has no parameters) */}
+      {(showRaw || paramNames.length === 0) && (
+        <label className="block">
+          <div className="flex items-baseline gap-1 text-[11px] mb-0.5">
+            <span className="font-mono">input (JSON)</span>
+          </div>
+          <textarea
+            rows={8}
+            value={json}
+            onChange={(e) => onJsonChange(e.target.value)}
+            placeholder='{ "bug_id": 1213844 }'
+            spellCheck={false}
+            className={`w-full text-[11px] font-mono px-2 py-1 border rounded bg-[var(--bg-secondary)] ${
+              jsonErr ? 'border-[var(--red)]' : 'border-[var(--border)]'
+            }`}
+          />
+          {jsonErr && (
+            <div className="text-[10px] text-[var(--red)] mt-0.5">JSON parse error: {jsonErr}</div>
+          )}
+          <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+            Passed verbatim as the tool's input. Leave as <code className="font-mono">{`{}`}</code> if the tool takes no args.
+          </div>
+        </label>
+      )}
+
+      {/* Test button + result — actually dispatch the tool with the current
+          input so the user can validate before saving. */}
+      <div className="mt-3 pt-3 border-t border-[var(--border)]">
+        <div className="flex items-center gap-2 mb-2">
+          <button
+            onClick={() => void runTest()}
+            disabled={testing || !!jsonErr}
+            className="text-[11px] px-3 py-1 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)] disabled:opacity-50"
+          >{testing ? 'Testing…' : '▶ Test'}</button>
+          <span className="text-[10px] text-[var(--text-secondary)]">
+            Dispatch the tool once with the current input. Read-only check — doesn't save the schedule.
+          </span>
+        </div>
+        {testResult && (
+          <div className={`text-[10px] rounded p-2 ${
+            testResult.ok ? 'bg-[var(--green)]/10' : 'bg-[var(--red)]/10'
+          }`}>
+            <div className={testResult.ok ? 'text-[var(--green)]' : 'text-[var(--red)]'}>
+              {testResult.ok ? '✓ ok' : '✗ failed'} · {testResult.duration_ms}ms
+              {testResult.error && <> · {testResult.error}</>}
+            </div>
+            {testResult.content && (
+              <pre className="mt-1 font-mono whitespace-pre-wrap break-words max-h-60 overflow-auto text-[var(--text-primary)]">
+                {testResult.content}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ConnectorToolField({ name, param, value, onChange }: {
+  name: string; param: ConnectorToolParam; value: unknown;
+  onChange: (v: unknown) => void;
+}) {
+  const label = param.label || name;
+  const type = (param.type || 'string').toLowerCase();
+  const required = !!param.required;
+  const hint = param.description;
+
+  const labelEl = (
+    <div className="flex items-baseline gap-1 text-[11px] mb-0.5">
+      <span className="font-mono">{name}</span>
+      {required && <span className="text-[var(--red)]">*</span>}
+      {param.label && <span className="text-[10px] text-[var(--text-secondary)]">— {label}</span>}
+    </div>
+  );
+
+  // enum → select
+  if (Array.isArray(param.enum) && param.enum.length > 0) {
+    const cur = value == null ? '' : String(value);
+    return (
+      <label className="block">
+        {labelEl}
+        <select
+          value={cur}
+          onChange={(e) => onChange(e.target.value || undefined)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        >
+          <option value="">— pick —</option>
+          {param.enum.map((opt) => (
+            <option key={String(opt)} value={String(opt)}>{String(opt)}</option>
+          ))}
+        </select>
+        {hint && <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">{hint}</div>}
+      </label>
+    );
+  }
+
+  // boolean → checkbox
+  if (type === 'boolean') {
+    return (
+      <label className="block">
+        {labelEl}
+        <label className="flex items-center gap-2 text-[11px]">
+          <input
+            type="checkbox"
+            checked={!!value}
+            onChange={(e) => onChange(e.target.checked || undefined)}
+          />
+          <span className="text-[11px] text-[var(--text-secondary)]">{value ? 'true' : 'false'}</span>
+        </label>
+        {hint && <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">{hint}</div>}
+      </label>
+    );
+  }
+
+  // number / integer → number input
+  if (type === 'number' || type === 'integer') {
+    const cur = value == null ? '' : String(value);
+    return (
+      <label className="block">
+        {labelEl}
+        <input
+          type="number"
+          step={type === 'integer' ? 1 : 'any'}
+          value={cur}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (v === '') onChange(undefined);
+            else {
+              const n = type === 'integer' ? parseInt(v, 10) : parseFloat(v);
+              onChange(Number.isFinite(n) ? n : undefined);
+            }
+          }}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+        {hint && <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">{hint}</div>}
+      </label>
+    );
+  }
+
+  // object / array → JSON textarea
+  if (type === 'object' || type === 'array') {
+    const cur = value == null ? '' : (typeof value === 'string' ? value : JSON.stringify(value, null, 2));
+    return (
+      <label className="block">
+        {labelEl}
+        <textarea
+          rows={3}
+          value={cur}
+          onChange={(e) => {
+            const raw = e.target.value;
+            if (!raw.trim()) { onChange(undefined); return; }
+            try { onChange(JSON.parse(raw)); }
+            catch { onChange(raw); /* keep raw text; underlying json becomes invalid */ }
+          }}
+          spellCheck={false}
+          placeholder={type === 'array' ? '[ ]' : '{ }'}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+        {hint && <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">{hint}</div>}
+      </label>
+    );
+  }
+
+  // string (default) → text input
+  const cur = value == null ? '' : String(value);
+  const isMultiLine = !!hint && hint.length > 80;
+  return (
+    <label className="block">
+      {labelEl}
+      {isMultiLine ? (
+        <textarea
+          rows={2}
+          value={cur}
+          onChange={(e) => onChange(e.target.value || undefined)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+      ) : (
+        <input
+          type="text"
+          value={cur}
+          onChange={(e) => onChange(e.target.value || undefined)}
+          className="w-full text-[11px] font-mono px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+      )}
+      {hint && <div className="text-[10px] text-[var(--text-secondary)] mt-0.5 whitespace-pre-wrap">{hint}</div>}
+    </label>
+  );
+}
+
+function Step3({
+  name, onName,
+  trigger, onTrigger,
+  interval, onInterval,
+  cron, onCron,
+  scheduleAt, onScheduleAt,
+  bodyKind, bodyRef,
+  actionKind, onActionKind,
+  chatSessionId, onChatSessionId,
+  chatPrefix, onChatPrefix,
+  chatSessions,
+  emailTo, onEmailTo,
+  emailSubjectTpl, onEmailSubjectTpl,
+  emailBodyTpl, onEmailBodyTpl,
+  telegramChatId, onTelegramChatId,
+  telegramPrefix, onTelegramPrefix,
+}: {
+  name: string; onName: (v: string) => void;
+  trigger: 'period' | 'cron' | 'once' | 'manual'; onTrigger: (v: 'period' | 'cron' | 'once' | 'manual') => void;
+  interval: number; onInterval: (v: number) => void;
+  cron: string; onCron: (v: string) => void;
+  scheduleAt: string; onScheduleAt: (v: string) => void;
+  bodyKind: BodyKind; bodyRef: string;
+  actionKind: 'none' | 'chat' | 'email' | 'telegram'; onActionKind: (v: 'none' | 'chat' | 'email' | 'telegram') => void;
+  chatSessionId: string; onChatSessionId: (v: string) => void;
+  chatPrefix: string; onChatPrefix: (v: string) => void;
+  chatSessions: Array<{ id: string; title: string }>;
+  emailTo: string; onEmailTo: (v: string) => void;
+  emailSubjectTpl: string; onEmailSubjectTpl: (v: string) => void;
+  emailBodyTpl: string; onEmailBodyTpl: (v: string) => void;
+  telegramChatId: string; onTelegramChatId: (v: string) => void;
+  telegramPrefix: string; onTelegramPrefix: (v: string) => void;
+}) {
+  return (
+    <div>
+      <div className="text-[11px] text-[var(--text-secondary)] mb-3">Step 3 / 3 — Name, trigger, action.</div>
+
+      <label className="block mb-3">
+        <div className="text-[11px] mb-0.5">Name</div>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => onName(e.target.value)}
+          placeholder={`${bodyKind} · ${bodyRef}`}
+          className="w-full text-[11px] px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+        />
+      </label>
+
+      <div className="text-[11px] mb-1.5">Trigger</div>
+      <div className="space-y-1.5 mb-3">
+        <Radio label="Every N minutes" v="period" trigger={trigger} onChange={onTrigger}>
+          <input
+            type="number"
+            min={1}
+            value={interval}
+            onChange={(e) => onInterval(Math.max(1, Number(e.target.value) || 1))}
+            disabled={trigger !== 'period'}
+            className="text-[11px] font-mono px-2 py-0.5 w-16 border border-[var(--border)] rounded bg-[var(--bg-secondary)] disabled:opacity-50"
+          />
+          <span className="text-[11px] text-[var(--text-secondary)]">min</span>
+        </Radio>
+        <Radio label="Cron" v="cron" trigger={trigger} onChange={onTrigger}>
+          <input
+            type="text"
+            value={cron}
+            onChange={(e) => onCron(e.target.value)}
+            disabled={trigger !== 'cron'}
+            placeholder="*/15 * * * *"
+            className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)] disabled:opacity-50"
+          />
+        </Radio>
+        <Radio label="Once at" v="once" trigger={trigger} onChange={onTrigger}>
+          <input
+            type="datetime-local"
+            value={scheduleAt}
+            onChange={(e) => onScheduleAt(e.target.value)}
+            disabled={trigger !== 'once'}
+            className="text-[11px] font-mono px-2 py-0.5 border border-[var(--border)] rounded bg-[var(--bg-secondary)] disabled:opacity-50"
+          />
+        </Radio>
+        <Radio label="Manual only (Fire button)" v="manual" trigger={trigger} onChange={onTrigger}>
+          <span className="text-[10px] text-[var(--text-secondary)]">— won't auto-trigger</span>
+        </Radio>
+      </div>
+
+      <div className="text-[11px] mb-1.5 mt-4">Action (when body finishes)</div>
+      <div className="space-y-1.5 mb-3">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="radio" name="action" checked={actionKind === 'none'} onChange={() => onActionKind('none')} />
+          <span className="text-[11px] w-44">None</span>
+          <span className="text-[10px] text-[var(--text-secondary)]">— body self-handles output</span>
+        </label>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="radio" name="action" checked={actionKind === 'chat'} onChange={() => onActionKind('chat')} />
+          <span className="text-[11px] w-44">Send to Chat session</span>
+          <select
+            value={chatSessionId}
+            onChange={(e) => onChatSessionId(e.target.value)}
+            disabled={actionKind !== 'chat'}
+            className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)] disabled:opacity-50"
+          >
+            <option value="">— pick session —</option>
+            {chatSessions.map((s) => (
+              <option key={s.id} value={s.id}>{s.title || s.id.slice(0, 8)}</option>
+            ))}
+          </select>
+        </label>
+        {actionKind === 'chat' && (
+          <label className="flex items-center gap-2 cursor-pointer">
+            <span className="text-[11px] w-44 ml-6">prefix (optional)</span>
+            <input
+              type="text"
+              value={chatPrefix}
+              onChange={(e) => onChatPrefix(e.target.value)}
+              placeholder="📋 Daily report:\n\n"
+              className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+            />
+          </label>
+        )}
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="radio" name="action" checked={actionKind === 'email'} onChange={() => onActionKind('email')} />
+          <span className="text-[11px] w-44">Send Email (SMTP)</span>
+          <input
+            type="text"
+            value={emailTo}
+            onChange={(e) => onEmailTo(e.target.value)}
+            disabled={actionKind !== 'email'}
+            placeholder="to@example.com, …"
+            className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)] disabled:opacity-50"
+          />
+        </label>
+        {actionKind === 'email' && (
+          <>
+            <label className="flex items-center gap-2">
+              <span className="text-[11px] w-44 ml-6">subject template</span>
+              <input
+                type="text"
+                value={emailSubjectTpl}
+                onChange={(e) => onEmailSubjectTpl(e.target.value)}
+                placeholder="{date} — Forge schedule"
+                className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+              />
+            </label>
+            <label className="flex items-baseline gap-2">
+              <span className="text-[11px] w-44 ml-6">body template</span>
+              <textarea
+                rows={3}
+                value={emailBodyTpl}
+                onChange={(e) => onEmailBodyTpl(e.target.value)}
+                placeholder="{body_output}"
+                className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+              />
+            </label>
+            <div className="text-[10px] text-[var(--text-secondary)] ml-[12.4rem]">
+              Placeholders: {'{date}'} (YYYY-MM-DD) and {'{body_output}'}. SMTP host configured in Settings → SMTP.
+            </div>
+          </>
+        )}
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="radio" name="action" checked={actionKind === 'telegram'} onChange={() => onActionKind('telegram')} />
+          <span className="text-[11px] w-44">Send Telegram</span>
+          <input
+            type="text"
+            value={telegramChatId}
+            onChange={(e) => onTelegramChatId(e.target.value)}
+            disabled={actionKind !== 'telegram'}
+            placeholder="chat id (blank = settings.telegramChatId)"
+            className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)] disabled:opacity-50"
+          />
+        </label>
+        {actionKind === 'telegram' && (
+          <label className="flex items-center gap-2 cursor-pointer">
+            <span className="text-[11px] w-44 ml-6">prefix (optional)</span>
+            <input
+              type="text"
+              value={telegramPrefix}
+              onChange={(e) => onTelegramPrefix(e.target.value)}
+              placeholder="📋 Daily bugs:"
+              className="text-[11px] font-mono px-2 py-0.5 flex-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+            />
+          </label>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Radio({ label, v, trigger, onChange, children }: {
+  label: string;
+  v: 'period' | 'cron' | 'once' | 'manual';
+  trigger: 'period' | 'cron' | 'once' | 'manual';
+  onChange: (v: 'period' | 'cron' | 'once' | 'manual') => void;
+  children?: React.ReactNode;
+}) {
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <input type="radio" name="trigger" value={v} checked={trigger === v} onChange={() => onChange(v)} />
+      <span className="text-[11px] w-44">{label}</span>
+      {children}
+    </label>
+  );
+}
+
+// ─── Extra-skills section (Step 2) ─────────────────────────
+//
+// Multi-select for skills the dispatched body should use, in addition
+// to whatever the body itself loads (body=skill's own /skill ref or a
+// pipeline node's prompt). Forwarded as --append-system-prompt; Forge
+// auto-installs missing skills into the target project at dispatch.
+
+function ExtraSkillsSection({
+  skills, onChange, allSkills, onOpenPicker,
+}: {
+  skills: string[];
+  onChange: (v: string[]) => void;
+  allSkills: SkillItem[];
+  onOpenPicker: () => void;
+}) {
+  const empty = allSkills.length === 0;
+  return (
+    <div className="mt-4 pt-3 border-t border-[var(--border)]">
+      <div className="flex items-baseline gap-2 mb-1">
+        <span className="text-[11px] font-semibold">Skills <span className="text-[var(--text-secondary)] font-normal">(optional)</span></span>
+      </div>
+      <div className="text-[10px] text-[var(--text-secondary)] mb-1.5 leading-relaxed">
+        Forge skills the dispatched task should use. Auto-installed into the
+        target project before each run; appended as "use /&lt;skill&gt; as appropriate"
+        to the task's system prompt.
+      </div>
+      <div className="flex items-center gap-1.5 flex-wrap">
+        {skills.length === 0 ? (
+          <span className="text-[10px] text-[var(--text-secondary)]">(none selected)</span>
+        ) : (
+          skills.map((name) => (
+            <span
+              key={name}
+              className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] rounded font-mono bg-[var(--accent)]/15 text-[var(--accent)]"
+            >
+              /{name}
+              <button
+                type="button"
+                onClick={() => onChange(skills.filter((x) => x !== name))}
+                title="Remove"
+                className="leading-none text-[11px] hover:opacity-70"
+              >×</button>
+            </span>
+          ))
+        )}
+        <button
+          type="button"
+          onClick={onOpenPicker}
+          disabled={empty}
+          title={empty ? 'No skills synced yet — open the Skills tab' : 'Pick skills'}
+          className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)] disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {empty ? 'No skills synced' : skills.length > 0 ? '+ Add / edit' : '+ Pick skills'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Centered modal — search box + scrollable list of toggles. Clicking
+// outside / Esc closes. Mirrors the extension JobsTab's SkillPicker
+// shape so behavior is consistent across surfaces.
+function MultiSkillPickerModal({
+  all, selected, onClose, onChange,
+}: {
+  all: SkillItem[];
+  selected: string[];
+  onClose: () => void;
+  onChange: (v: string[]) => void;
+}) {
+  const [q, setQ] = useState('');
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const filtered = (() => {
+    const needle = q.trim().toLowerCase();
+    if (!needle) return all;
+    return all.filter((s) => {
+      const hay = `${s.name} ${s.displayName || ''} ${s.description || ''}`.toLowerCase();
+      return hay.includes(needle);
+    });
+  })();
+
+  function toggle(name: string) {
+    onChange(selected.includes(name) ? selected.filter((x) => x !== name) : [...selected, name]);
+  }
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/45"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="bg-[var(--bg-primary)] border border-[var(--border)] rounded shadow-2xl w-[520px] max-w-[92vw] max-h-[80vh] flex flex-col"
+      >
+        <div className="flex items-center px-3 py-2 border-b border-[var(--border)]">
+          <div className="text-[12px] font-semibold flex-1">
+            Pick skills
+            <span className="ml-2 text-[10px] font-normal text-[var(--text-secondary)]">
+              {selected.length} of {all.length} selected
+            </span>
+          </div>
+          <button onClick={onClose} className="text-[11px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]">Done</button>
+        </div>
+        <div className="px-3 py-2 border-b border-[var(--border)]">
+          <input
+            autoFocus
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search by name or description…"
+            className="w-full text-[12px] px-2 py-1 border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+          />
+          {selected.length > 0 && (
+            <div className="flex items-center gap-1.5 flex-wrap mt-1.5">
+              <span className="text-[10px] text-[var(--text-secondary)]">Selected:</span>
+              {selected.map((name) => (
+                <span key={name} className="px-1.5 py-px text-[10px] rounded font-mono bg-[var(--accent)]/15 text-[var(--accent)]">/{name}</span>
+              ))}
+              <button
+                type="button"
+                onClick={() => onChange([])}
+                className="ml-auto text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]"
+              >Clear all</button>
+            </div>
+          )}
+        </div>
+        <div className="overflow-auto flex-1">
+          {filtered.length === 0 ? (
+            <div className="text-[11px] text-[var(--text-secondary)] text-center py-6">No skills match "{q}"</div>
+          ) : (
+            filtered.map((s) => {
+              const isSel = selected.includes(s.name);
+              return (
+                <label
+                  key={s.name}
+                  onClick={() => toggle(s.name)}
+                  className={`flex items-start gap-2 px-3 py-1.5 border-b border-[var(--border)] cursor-pointer hover:bg-[var(--bg-secondary)] ${isSel ? 'bg-[var(--accent)]/10' : ''}`}
+                >
+                  <input type="checkbox" checked={isSel} readOnly className="mt-1" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[11px] font-mono">{s.name}</div>
+                    {s.description && (
+                      <div className="text-[10px] text-[var(--text-secondary)] truncate">{s.description}</div>
+                    )}
+                  </div>
+                  {(s.installedGlobal || (s.installedProjects?.length ?? 0) > 0) && (
+                    <span className="text-[9px] text-[var(--text-secondary)] mt-0.5">installed</span>
+                  )}
+                </label>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}