feat(web): step export/import, sync defaults, auto outputs, default badge

web/components/workflows/EditStepModal.tsx

@@ -13,9 +13,7 @@ export function EditStepModal({ open, step, onClose }: { open: boolean; step: Wo
   const [name, setName] = useState(step?.name ?? "");
   const [interpreter, setInterpreter] = useState<"bash" | "powershell">(step?.interpreter ?? "bash");
   const [script, setScript] = useState(step?.script ?? "");
-  const [outputs, setOutputs] = useState<string[]>(step?.declared_outputs ?? []);
   const [inputs, setInputs] = useState<InputParam[]>(step?.declared_inputs ?? []);
-  const [newOut, setNewOut] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -27,7 +25,7 @@ export function EditStepModal({ open, step, onClose }: { open: boolean; step: Wo
     try {
       const payload: Partial<WorkflowStep> = {
         name: name.trim(), description: step?.description ?? "", interpreter, script,
-        declared_outputs: outputs, declared_inputs: inputs.filter((i) => i.name.trim() !== ""),
+        declared_inputs: inputs.filter((i) => i.name.trim() !== ""),
         secret_refs: step?.secret_refs ?? [],
       };
       if (step) await api.updateStep(step.step_id, payload);
@@ -71,17 +69,17 @@ export function EditStepModal({ open, step, onClose }: { open: boolean; step: Wo
         </div>
         <div>
           <label className="mb-1 block text-xs uppercase text-text-secondary">Outputs</label>
-          <div className="mb-2 flex flex-wrap gap-1">
-            {outputs.map((o) => (
+          <div className="mb-1 flex flex-wrap gap-1">
+            {(step?.declared_outputs ?? []).length === 0 && (
+              <p className="text-xs text-text-secondary">No declared outputs.</p>
+            )}
+            {(step?.declared_outputs ?? []).map((o) => (
               <span key={o} className="flex items-center gap-1 rounded bg-signal px-2 py-0.5 font-mono text-[11px] text-signal-ink">
-                {o}<button onClick={() => setOutputs(outputs.filter((x) => x !== o))}>✕</button>
+                {o}
               </span>
             ))}
           </div>
-          <div className="flex gap-2">
-            <input className={inputClass} placeholder="OUTPUT_NAME" value={newOut} onChange={(e) => setNewOut(e.target.value)} />
-            <Button variant="ghost" size="sm" onClick={() => { if (newOut.trim()) { setOutputs([...outputs, newOut.trim()]); setNewOut(""); } }}>Add</Button>
-          </div>
+          <p className="text-xs text-text-secondary">Outputs are detected automatically from lines writing to $WORKFLOW_ENV.</p>
         </div>
         <div>
           <label className="mb-1 block text-xs uppercase text-text-secondary">Inputs</label>