@aion0/forge 0.9.12 → 0.9.13

package/components/ScheduleCreateModal.tsx

@@ -2,17 +2,16 @@
 
 /**
  * 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.
+ *   1. Pick body (kind: pipeline | prompt, then ref)
+ *   2. Fill input (schema-driven for pipeline; project + agent + skills for prompt)
+ *   3. Trigger (period / cron / once / manual + name) + action (none / chat / email / telegram)
  */
 
 import { useEffect, useState } from 'react';
 
-type BodyKind = 'pipeline' | 'skill' | 'connector_tool';
+type BodyKind = 'pipeline' | 'prompt';
+
+interface AgentInfo { id: string; label?: string; backendType?: string; }
 
 interface Workflow { name: string; description?: string; }
 interface SkillItem { name: string; displayName?: string; description?: string; installedGlobal?: boolean; installedProjects?: string[]; }
@@ -28,52 +27,6 @@ interface PipelineInputField {
   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 {
@@ -128,37 +81,37 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
   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('');
+
+  // Step 2 — for prompt body (V3). prompt text + agent + skills are
+  // persisted in prompts/<body_ref>.yaml; the schedule row only carries
+  // body_ref + input.project. In edit mode we GET the yaml to seed these.
+  const [promptProject, setPromptProject] = useState(() => {
+    if (existing?.body_kind !== 'prompt') return '';
+    const p = String(existing.input?.project ?? '');
+    // Backend stores 'scratch' for prompts that opted into the default. Map
+    // it back to '' so the "— scratch (default) —" placeholder option matches.
+    return p === 'scratch' ? '' : p;
+  });
+  const [promptText, setPromptText] = useState('');
+  const [promptAgent, setPromptAgent] = useState<string>('');
+  const [promptSkills, setPromptSkills] = useState<string[]>(['ai-orchestration']);
+  const [agents, setAgents] = useState<AgentInfo[]>([]);
+  const [promptLoadedRef, setPromptLoadedRef] = useState<string>('');
 
   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).
+  // Extra skills attached to the dispatched body (pipeline tasks).
   // Parallel to Job.skills — forwarded as --append-system-prompt; auto-installed
-  // into the target project on dispatch. Not meaningful for connector_tool.
+  // into the target project on dispatch.
   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`).
+  // Auto-install handles missing ones — list ALL skills.
   const [allSkills, setAllSkills] = useState<SkillItem[]>([]);
 
   // Step 3
@@ -209,25 +162,22 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
   useEffect(() => {
     (async () => {
       try {
-        const [wfR, skR, cnR, csR] = await Promise.all([
+        const [wfR, skR, csR, agR] = 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: [] })),
+          fetch('/api/agents?include=all').then((r) => r.json()).catch(() => ({ agents: [] })),
         ]);
+        if (Array.isArray(agR?.agents)) setAgents(agR.agents);
         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));
       }
@@ -266,13 +216,27 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bodyKind, bodyRef]);
 
-  // Auto-suggest name for skill body
+  // Edit mode: load existing prompt yaml so Step 2 form is pre-filled.
+  // For new schedules nothing to load; user types the prompt fresh.
   useEffect(() => {
-    if (bodyKind === 'skill' && bodyRef && !name) {
-      setName(`${bodyRef}`);
-    }
+    if (!editing) return;
+    if (existing?.body_kind !== 'prompt') return;
+    if (promptLoadedRef === existing.body_ref) return;
+    (async () => {
+      try {
+        const r = await fetch(`/api/prompts/${encodeURIComponent(existing.body_ref)}`);
+        if (!r.ok) { setErr(`failed to load prompt definition: ${r.status}`); return; }
+        const j = await r.json();
+        setPromptText(j.prompt ?? '');
+        setPromptAgent(j.executor?.agent ?? '');
+        setPromptSkills(Array.isArray(j.executor?.skills) ? j.executor.skills : []);
+        setPromptLoadedRef(existing.body_ref);
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : String(e));
+      }
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bodyKind, bodyRef]);
+  }, [editing, existing?.body_kind, existing?.body_ref]);
 
   // Reset body_ref when body_kind switches
   function onBodyKindChange(k: BodyKind) {
@@ -283,7 +247,13 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
   }
 
   function canProceed(): boolean {
-    if (step === 1) return !!bodyRef;
+    if (step === 1) {
+      // prompt body has no body_ref picker — the schedule name doubles as
+      // the prompt name, derived at submit time. Let user proceed past
+      // Step 1 just by picking the tab.
+      if (bodyKind === 'prompt') return true;
+      return !!bodyRef;
+    }
     if (step === 2) {
       if (bodyKind === 'pipeline') {
         if (!pipelineSchema) return false;
@@ -292,11 +262,9 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
         }
         return true;
       }
-      if (bodyKind === 'skill') {
-        return !!skillProject && !!skillUserPrompt.trim();
-      }
-      if (bodyKind === 'connector_tool') {
-        return !toolInputJsonErr;
+      if (bodyKind === 'prompt') {
+        // project is optional — empty falls back to the synthetic 'scratch' project
+        return !!promptText.trim();
       }
       return false;
     }
@@ -316,17 +284,52 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
     setSubmitting(true);
     try {
       let body_input: Record<string, unknown>;
+      let promptNameToUse: string | null = null;
       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;
+      } else if (bodyKind === 'prompt') {
+        // Create/update the prompts/<name>.yaml first; schedule references it by name.
+        // In edit mode body_ref is locked and refers to the existing yaml — PATCH it.
+        // In create mode derive name from schedule name (slugify) and POST with
+        // automatic suffix retry on 409.
+        const skillsClean = promptSkills.filter((s) => s && s.trim());
+        const executor = { agent: promptAgent || null, skills: skillsClean };
+        if (editing && existing?.body_kind === 'prompt') {
+          promptNameToUse = existing.body_ref;
+          const r = await fetch(`/api/prompts/${encodeURIComponent(existing.body_ref)}`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ prompt: promptText, executor }),
+          });
+          if (!r.ok) {
+            const j = await r.json().catch(() => ({}));
+            setErr(j.error || `prompt yaml save failed (${r.status})`);
+            return;
+          }
+        } else {
+          const base = slugifyName(name) || `prompt-${Date.now().toString(36).slice(-6)}`;
+          let candidate = base;
+          for (let i = 2; i <= 50; i++) {
+            const r = await fetch('/api/prompts', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ name: candidate, prompt: promptText, executor }),
+            });
+            if (r.ok) { promptNameToUse = candidate; break; }
+            if (r.status === 409) { candidate = `${base}-${i}`; continue; }
+            const j = await r.json().catch(() => ({}));
+            setErr(j.error || `prompt yaml create failed (${r.status})`);
+            return;
+          }
+          if (!promptNameToUse) {
+            setErr(`couldn't pick a free prompt name starting from "${base}"`);
+            return;
+          }
         }
+        body_input = { project: promptProject };
+      } else {
+        setErr(`unsupported body_kind: ${bodyKind}`);
+        return;
       }
       const action_config: Record<string, unknown> = {};
       if (actionKind === 'chat') {
@@ -344,9 +347,7 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
       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,
+        skills: extraSkills,
         action_kind: actionKind,
         action_config,
         schedule_kind: trigger,
@@ -357,7 +358,7 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
       };
       if (!editing) {
         body.body_kind = bodyKind;
-        body.body_ref = bodyRef;
+        body.body_ref = bodyKind === 'prompt' ? promptNameToUse! : bodyRef;
         body.enabled = true;
       }
       const url = editing ? `/api/schedules/${encodeURIComponent(existing!.id)}` : '/api/schedules';
@@ -395,35 +396,25 @@ export default function ScheduleCreateModal({ onClose, onCreated, existing }: Pr
             <Step1
               bodyKind={bodyKind} onBodyKindChange={onBodyKindChange}
               bodyRef={bodyRef} onBodyRefChange={setBodyRef}
-              workflows={workflows} skills={skills} connectors={connectors}
-              projects={projects}
-              skillProject={skillProject} onSkillProject={setSkillProject}
+              workflows={workflows}
             />
           )}
           {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 === 'prompt' && (
+            <Step2Prompt
+              projects={projects}
+              project={promptProject} onProject={setPromptProject}
+              promptText={promptText} onPromptText={setPromptText}
+              agent={promptAgent} onAgent={setPromptAgent}
+              agents={agents}
+              skills={promptSkills} onSkills={setPromptSkills}
+              allSkills={allSkills}
+              editing={editing}
             />
           )}
-          {step === 2 && bodyKind !== 'connector_tool' && (
+          {step === 2 && bodyKind === 'pipeline' && (
             <ExtraSkillsSection
               skills={extraSkills}
               onChange={setExtraSkills}
@@ -514,14 +505,11 @@ function Stepper({ step }: { step: 1 | 2 | 3 }) {
 function Step1({
   bodyKind, onBodyKindChange,
   bodyRef, onBodyRefChange,
-  workflows, skills, connectors,
-  projects, skillProject, onSkillProject,
+  workflows,
 }: {
   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;
+  workflows: Workflow[];
 }) {
   return (
     <div>
@@ -529,7 +517,7 @@ function Step1({
 
       {/* Body kind tabs */}
       <div className="flex gap-1 mb-3 border-b border-[var(--border)]">
-        {(['pipeline', 'skill', 'connector_tool'] as BodyKind[]).map((k) => (
+        {(['pipeline', 'prompt'] as BodyKind[]).map((k) => (
           <button
             key={k}
             onClick={() => onBodyKindChange(k)}
@@ -539,9 +527,7 @@ function Step1({
                 : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
             }`}
           >
-            {k === 'pipeline' ? '📋 Pipeline'
-              : k === 'skill' ? '🧩 Skill'
-              : '🔌 Connector Tool'}
+            {k === 'pipeline' ? '📋 Pipeline' : '💬 Prompt'}
           </button>
         ))}
       </div>
@@ -558,108 +544,12 @@ function Step1({
             ))}
           </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 className="text-[11px] text-[var(--text-secondary)] p-3 border border-dashed border-[var(--border)] rounded">
+          Prompt mode runs a one-shot Claude task with your prompt text + chosen agent + skills.
+          You&apos;ll author the prompt on the next step. The schedule&apos;s name becomes the prompt&apos;s
+          filename (<code className="font-mono">prompts/&lt;name&gt;.yaml</code>) so future edits stay
+          in one place.
         </div>
       )}
     </div>
@@ -812,335 +702,145 @@ function PipelineInputControl({ field, value, onChange }: {
   );
 }
 
-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>
-  );
+// Lower-case, alphanumeric + dash. Used to derive the prompts/<name>.yaml
+// filename from the schedule's display name. The store's name regex is
+// `[a-zA-Z0-9][a-zA-Z0-9._-]{0,63}` so this is a strict subset.
+function slugifyName(s: string): string {
+  return s.toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 50);
 }
 
-function Step2ConnectorTool({ connectors, toolRef, json, onJsonChange, jsonErr }: {
-  connectors: ConnectorPayload[]; toolRef: string;
-  json: string; onJsonChange: (v: string) => void; jsonErr: string;
+function Step2Prompt({
+  projects, project, onProject,
+  promptText, onPromptText,
+  agent, onAgent, agents,
+  skills, onSkills, allSkills,
+  editing,
+}: {
+  projects: ProjectInfo[];
+  project: string; onProject: (v: string) => void;
+  promptText: string; onPromptText: (v: string) => void;
+  agent: string; onAgent: (v: string) => void;
+  agents: AgentInfo[];
+  skills: string[]; onSkills: (v: string[]) => void;
+  allSkills: SkillItem[];
+  editing: boolean;
 }) {
-  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));
+  function toggleSkill(name: string) {
+    onSkills(skills.includes(name) ? skills.filter((s) => s !== name) : [...skills, name]);
   }
-
+  // Surface a small curated subset by default; the picker further down
+  // lets the user add anything. ai-orchestration is the V3 default so a
+  // prompt task can call connectors.
+  const featured = ['ai-orchestration', 'temper-memory', 'knowledge-base'];
+  const featuredAvailable = featured.filter((n) =>
+    skills.includes(n) || allSkills.some((s) => s.name === n)
+  );
+  const extras = skills.filter((s) => !featured.includes(s));
   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.
+        Step 2 / 3 — Author the prompt task.{' '}
+        {editing && <span>(Editing existing prompt definition.)</span>}
       </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}
+      <label className="block mb-3">
+        <div className="text-[11px] mb-0.5"><span className="font-mono">project</span></div>
         <select
-          value={cur}
-          onChange={(e) => onChange(e.target.value || undefined)}
+          value={project}
+          onChange={(e) => onProject(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>
-          {param.enum.map((opt) => (
-            <option key={String(opt)} value={String(opt)}>{String(opt)}</option>
+          <option value="">— scratch (default) —</option>
+          {projects.filter((p) => p.name !== 'scratch').map((p) => (
+            <option key={p.name} value={p.name}>{p.name}</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>}
+        <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+          Working directory for the Claude task. Leave on default for prompts that just talk to connectors / APIs and don&apos;t need a real project on disk.
+        </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)]"
+      <label className="block mb-3">
+        <div className="flex items-baseline gap-1 text-[11px] mb-0.5">
+          <span className="font-mono">prompt</span>
+          <span className="text-[var(--red)]">*</span>
+        </div>
+        <textarea
+          value={promptText}
+          onChange={(e) => onPromptText(e.target.value)}
+          rows={8}
+          placeholder="e.g. 查一下我今天分到的 bug"
+          className="w-full text-[11px] font-mono px-2 py-1.5 border border-[var(--border)] rounded bg-[var(--bg-secondary)] resize-y"
         />
-        {hint && <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">{hint}</div>}
+        <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+          Sent to the agent verbatim. Keep your own wording — Forge won&apos;t rewrite it.
+        </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' ? '[ ]' : '{ }'}
+      <label className="block mb-3">
+        <div className="text-[11px] mb-0.5"><span className="font-mono">agent</span></div>
+        <select
+          value={agent}
+          onChange={(e) => onAgent(e.target.value)}
           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>}
+        >
+          <option value="">— system default —</option>
+          {agents.map((a) => (
+            <option key={a.id} value={a.id}>
+              {a.label || a.id}{a.backendType ? ` (${a.backendType})` : ''}
+            </option>
+          ))}
+        </select>
       </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>
+      <div className="block mb-1">
+        <div className="text-[11px] mb-1"><span className="font-mono">skills</span></div>
+        <div className="flex flex-wrap gap-1.5">
+          {featuredAvailable.map((name) => (
+            <label
+              key={name}
+              className={`text-[10px] font-mono px-2 py-1 border rounded cursor-pointer ${
+                skills.includes(name)
+                  ? 'border-[var(--accent)] bg-[var(--accent)]/10 text-[var(--accent)]'
+                  : 'border-[var(--border)] hover:bg-[var(--bg-secondary)]/50'
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={skills.includes(name)}
+                onChange={() => toggleSkill(name)}
+                className="mr-1"
+              />
+              {name}
+            </label>
+          ))}
+          {extras.map((name) => (
+            <span
+              key={name}
+              className="text-[10px] font-mono px-2 py-1 border border-[var(--accent)] bg-[var(--accent)]/10 text-[var(--accent)] rounded inline-flex items-center gap-1"
+            >
+              {name}
+              <button
+                type="button"
+                onClick={() => toggleSkill(name)}
+                className="hover:opacity-70"
+                aria-label="remove"
+              >×</button>
+            </span>
+          ))}
+        </div>
+        <div className="text-[10px] text-[var(--text-secondary)] mt-1">
+          <code className="font-mono">ai-orchestration</code> lets the agent discover + call your installed connectors.
+        </div>
+      </div>
+    </div>
   );
 }
 
+
 function Step3({
   name, onName,
   trigger, onTrigger,