feat(FN-1638): add plugin manager UI redesign and clear triage status on todo

- Restructure PluginManager detail view with card-based layout
- Add mobile responsive styles with adaptive grid
- Add desktop CSS with card-based grid design
- Clear triage status when task moves to todo
- Add changeset for plugin settings design

.changeset/plugin-settings-design.md

@@ -0,0 +1,5 @@
+---
+"@gsxdsm/fusion": patch
+---
+
+Improve plugin settings screen design and mobile responsiveness.

packages/core/src/store.test.ts

@@ -3450,28 +3450,6 @@ Task with acceptance criteria
       expect(moved.status).toBe("custom-status");
     });
 
-    it("clears triage control status when moving from triage to todo", async () => {
-      const task = await store.createTask({ description: "test specifying to todo" });
-      await store.updateTask(task.id, {
-        status: "specifying",
-        error: "still running",
-      });
-
-      const moved = await store.moveTask(task.id, "todo");
-      expect(moved.column).toBe("todo");
-      expect(moved.status).toBeUndefined();
-      expect(moved.error).toBeUndefined();
-    });
-
-    it("clears awaiting approval status when moving from triage to todo", async () => {
-      const task = await store.createTask({ description: "test awaiting approval to todo" });
-      await store.updateTask(task.id, { status: "awaiting-approval" });
-
-      const moved = await store.moveTask(task.id, "todo");
-      expect(moved.column).toBe("todo");
-      expect(moved.status).toBeUndefined();
-    });
-
     it("clears status, error, worktree, and blockedBy when moving from in-progress to done", async () => {
       const task = await store.createTask({ description: "test clear fields to done" });
       await store.moveTask(task.id, "todo");

packages/core/src/store.ts

@@ -1652,22 +1652,6 @@ export class TaskStore extends EventEmitter<TaskStoreEvents> {
         task.blockedBy = undefined;
       }
 
-      // Moving a task out of triage is a manual approval/override path. Clear
-      // triage-only control statuses so the todo card is ready for execution
-      // instead of continuing to look like an active specification job.
-      if (
-        fromColumn === "triage"
-        && toColumn === "todo"
-        && (
-          task.status === "specifying"
-          || task.status === "awaiting-approval"
-          || task.status === "needs-respecify"
-        )
-      ) {
-        task.status = undefined;
-        task.error = undefined;
-      }
-
       // Clear recovery metadata when task reaches in-review (successful completion)
       if (toColumn === "in-review") {
         task.recoveryRetryCount = undefined;

packages/dashboard/app/components/PluginManager.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Package, Settings, Trash2, Plus, X, RefreshCw, RotateCcw } from "lucide-react";
+import { Package, Settings, Trash2, Plus, X, RefreshCw, RotateCcw, ExternalLink } from "lucide-react";
 import { fetchPlugins, installPlugin, enablePlugin, disablePlugin, uninstallPlugin, fetchPluginSettings, updatePluginSettings, reloadPlugin } from "../api";
 import { DirectoryPicker } from "./DirectoryPicker";
 import type { PluginInstallation, PluginState } from "@fusion/core";
@@ -293,88 +293,105 @@ export function PluginManager({ addToast, projectId }: PluginManagerProps) {
     return (
       <div className="plugin-manager-detail">
         <div className="plugin-manager-detail-header">
-          <button className="btn-icon" onClick={() => setSelectedPlugin(null)} title="Back to list">
+          <button className="btn-icon" onClick={() => setSelectedPlugin(null)} aria-label="Back to plugin list">
             <X size={16} />
           </button>
-          <h3>{selectedPlugin.name}</h3>
-          <span className="plugin-state-badge" style={{ color: STATE_COLORS[selectedPlugin.state] || STATE_COLORS.installed }}>
-            {selectedPlugin.state}
-          </span>
+          <div className="plugin-detail-title">
+            <h3>{selectedPlugin.name}</h3>
+            <span className="plugin-state-badge" style={{ color: STATE_COLORS[selectedPlugin.state] || STATE_COLORS.installed }}>
+              {selectedPlugin.state}
+            </span>
+          </div>
         </div>
 
         <div className="plugin-detail-content">
-          <div className="plugin-detail-meta">
+          <div className="plugin-detail-card">
             {selectedPlugin.description && (
               <p className="plugin-description">{selectedPlugin.description}</p>
             )}
             {selectedPlugin.author && (
-              <p className="plugin-author">By {selectedPlugin.author}</p>
+              <p className="plugin-detail-meta-row">
+                <span className="text-muted">Author:</span>
+                {selectedPlugin.author}
+              </p>
             )}
             {selectedPlugin.homepage && (
-              <p className="plugin-homepage">
+              <p className="plugin-detail-meta-row plugin-homepage">
+                <span className="text-muted">Homepage:</span>
                 <a href={selectedPlugin.homepage} target="_blank" rel="noopener noreferrer">
                   {selectedPlugin.homepage}
+                  <ExternalLink size={12} />
                 </a>
               </p>
             )}
-            <p className="plugin-version">Version {selectedPlugin.version}</p>
+            <p className="plugin-detail-meta-row">
+              <span className="text-muted">Version:</span>
+              {selectedPlugin.version}
+            </p>
           </div>
 
-          <div className="plugin-detail-section">
-            <h4>Settings</h4>
+          <div className="plugin-detail-card">
+            <h4 className="settings-section-heading">Settings</h4>
             {settingsLoading ? (
-              <p>Loading...</p>
-            ) : selectedPlugin.settingsSchema ? (
+              <p className="text-muted">Loading...</p>
+            ) : selectedPlugin.settingsSchema && Object.keys(selectedPlugin.settingsSchema).length > 0 ? (
               <div className="plugin-settings-form">
-                {Object.entries(selectedPlugin.settingsSchema).map(([key, schema]) => (
-                  <div key={key} className="form-group">
-                    <label htmlFor={`setting-${key}`}>
-                      {schema.label || key}
-                      {schema.required && " *"}
-                    </label>
-                    {schema.type === "string" && (
-                      <input
-                        type="text"
-                        id={`setting-${key}`}
-                        value={(pluginSettings[key] as string) ?? ""}
-                        onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: e.target.value })}
-                        placeholder={schema.description}
-                      />
-                    )}
-                    {schema.type === "number" && (
-                      <input
-                        type="number"
-                        id={`setting-${key}`}
-                        value={(pluginSettings[key] as number) ?? ""}
-                        onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: Number(e.target.value) })}
-                      />
-                    )}
-                    {schema.type === "boolean" && (
-                      <label className="checkbox-label">
-                        <input
-                          type="checkbox"
-                          checked={(pluginSettings[key] as boolean) ?? false}
-                          onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: e.target.checked })}
-                        />
-                        {schema.description}
+                {Object.entries(selectedPlugin.settingsSchema).map(([key, schema]) => {
+                  const helpId = `setting-${key}-help`;
+                  return (
+                    <div key={key} className="form-group">
+                      <label htmlFor={`setting-${key}`}>
+                        {schema.label || key}
+                        {schema.required && " *"}
                       </label>
-                    )}
-                    {schema.type === "enum" && (
-                      <select
-                        value={(pluginSettings[key] as string) ?? ""}
-                        onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: e.target.value })}
-                      >
-                        <option value="">Select...</option>
-                        {schema.enumValues?.map((v) => (
-                          <option key={v} value={v}>{v}</option>
-                        ))}
-                      </select>
-                    )}
-                    {schema.description && !schema.required && (
-                      <span className="form-help">{schema.description}</span>
-                    )}
-                  </div>
-                ))}
+                      {schema.type === "string" && (
+                        <input
+                          type="text"
+                          id={`setting-${key}`}
+                          value={(pluginSettings[key] as string) ?? ""}
+                          onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: e.target.value })}
+                          placeholder={schema.description}
+                          aria-describedby={schema.description && !schema.required ? helpId : undefined}
+                        />
+                      )}
+                      {schema.type === "number" && (
+                        <input
+                          type="number"
+                          id={`setting-${key}`}
+                          value={(pluginSettings[key] as number) ?? ""}
+                          onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: Number(e.target.value) })}
+                          aria-describedby={schema.description && !schema.required ? helpId : undefined}
+                        />
+                      )}
+                      {schema.type === "boolean" && (
+                        <label className="checkbox-label">
+                          <input
+                            type="checkbox"
+                            checked={(pluginSettings[key] as boolean) ?? false}
+                            onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: e.target.checked })}
+                          />
+                          {schema.description}
+                        </label>
+                      )}
+                      {schema.type === "enum" && (
+                        <select
+                          id={`setting-${key}`}
+                          value={(pluginSettings[key] as string) ?? ""}
+                          onChange={(e) => setPluginSettings({ ...pluginSettings, [key]: e.target.value })}
+                          aria-describedby={schema.description && !schema.required ? helpId : undefined}
+                        >
+                          <option value="">Select...</option>
+                          {schema.enumValues?.map((v) => (
+                            <option key={v} value={v}>{v}</option>
+                          ))}
+                        </select>
+                      )}
+                      {schema.description && !schema.required && (
+                        <span id={helpId} className="form-help">{schema.description}</span>
+                      )}
+                    </div>
+                  );
+                })}
                 <button className="btn-primary" onClick={handleSaveSettings}>
                   Save Settings
                 </button>

packages/dashboard/app/styles.css

@@ -28560,13 +28560,15 @@ html .column.drag-over * {
 .plugin-manager-detail {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .plugin-manager-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
 }
 
 .plugin-manager-header h3 {
@@ -28583,10 +28585,10 @@ html .column.drag-over * {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 12px;
+  padding: 16px;
   border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary, var(--card-bg));
+  border-radius: var(--radius-md);
+  background: var(--surface);
 }
 
 .plugin-install-hint {
@@ -28612,20 +28614,22 @@ html .column.drag-over * {
 .plugin-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 8px;
 }
 
 .plugin-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 10px;
-  border-radius: 6px;
-  transition: background 0.15s;
+  padding: 10px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  transition: border-color 0.15s;
 }
 
 .plugin-item:hover {
-  background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
+  border-color: var(--text-dim);
 }
 
 .plugin-info {
@@ -28647,16 +28651,21 @@ html .column.drag-over * {
 }
 
 .plugin-state-badge {
-  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.04em;
+  background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 .plugin-actions {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   flex-shrink: 0;
 }
 
@@ -28665,12 +28674,19 @@ html .column.drag-over * {
 .plugin-manager-detail-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.plugin-manager-detail-header h3 {
+.plugin-detail-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.plugin-detail-title h3 {
   margin: 0;
-  flex: 1;
 }
 
 .plugin-detail-content {
@@ -28679,31 +28695,116 @@ html .column.drag-over * {
   gap: 16px;
 }
 
-.plugin-detail-meta {
-  font-size: 0.9rem;
-}
-
-.plugin-detail-meta p {
-  margin: 4px 0;
-}
-
-.plugin-description {
-  color: var(--text-secondary, var(--text-muted));
-}
-
-.plugin-detail-section h4 {
-  margin: 0 0 8px;
-}
-
-.plugin-settings-form {
+.plugin-detail-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
+.plugin-description {
+  font-size: 0.95rem;
+  color: var(--text-secondary, var(--text-muted));
+  line-height: 1.5;
+}
+
+.plugin-detail-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.plugin-homepage a {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-info);
+  font-size: 0.85rem;
+}
+
+.settings-section-heading {
+  margin: 0;
+}
+
+.plugin-settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 4px;
+}
+
+.plugin-settings-form .form-group {
+  padding: 0;
+  margin-top: 0;
+}
+
 .plugin-detail-actions {
   display: flex;
   gap: 8px;
-  padding-top: 8px;
+  padding-top: 12px;
   border-top: 1px solid var(--border);
+  justify-content: flex-end;
+}
+
+/* Empty and loading states */
+.plugin-manager .empty-state,
+.plugin-manager .loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 32px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+/* Mobile responsive overrides */
+@media (max-width: 768px) {
+  /* Detail view header */
+  .plugin-manager-detail-header {
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .plugin-detail-title {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  /* Detail cards */
+  .plugin-detail-card {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  /* Plugin list items */
+  .plugin-list {
+    gap: 6px;
+  }
+
+  .plugin-item {
+    padding: 10px;
+  }
+
+  /* Action buttons inside list items */
+  .plugin-actions {
+    gap: 4px;
+  }
+
+  /* Detail actions footer — buttons stack on narrow screens */
+  .plugin-detail-actions {
+    flex-wrap: wrap;
+    justify-content: stretch;
+  }
+
+  .plugin-detail-actions button {
+    flex: 1 1 auto;
+    min-height: 36px;
+  }
 }

packages/engine/src/triage.test.ts

@@ -686,31 +686,6 @@ describe("TriageProcessor", () => {
     expect(store.on).toHaveBeenCalledWith("settings:updated", expect.any(Function));
   });
 
-  it("terminates active triage when the task is manually moved out of triage", () => {
-    const movedListeners: Array<(event: { task: Task; from: string; to: string }) => void> = [];
-    store = createMockStore();
-    (store.on as ReturnType<typeof vi.fn>).mockImplementation(
-      (event: any, cb: any) => {
-        if (event === "task:moved") movedListeners.push(cb);
-        return store;
-      },
-    );
-    processor = new TriageProcessor(store, rootDir);
-
-    const dispose = vi.fn();
-    (processor as any).processing.add("FN-001");
-    (processor as any).activeSessions.set("FN-001", { dispose });
-
-    movedListeners.forEach((listener) => listener({
-      task: { ...mockTaskDetail, id: "FN-001", column: "todo" },
-      from: "triage",
-      to: "todo",
-    }));
-
-    expect(dispose).toHaveBeenCalledTimes(1);
-    expect((processor as any).moveAborted.has("FN-001")).toBe(true);
-  });
-
   it("re-reads settings when review_spec runs so reviewer uses the latest validator model", async () => {
     const taskId = "FN-001";
     const testRootDir = await createTriageFixtureRoot("fusion-triage-review-spec-");

packages/engine/src/triage.ts

@@ -278,8 +278,6 @@ export class TriageProcessor {
   private activeSessions = new Map<string, { dispose: () => void }>();
   /** Tasks aborted due to globalPause (to avoid reporting as errors). */
   private pauseAborted = new Set<string>();
-  /** Tasks manually moved out of triage while specification was queued/running. */
-  private moveAborted = new Set<string>();
   /** Tasks killed by the stuck task detector (to avoid reporting as errors). */
   private stuckAborted = new Set<string>();
 
@@ -338,21 +336,6 @@ export class TriageProcessor {
         this.poll();
       }
     });
-
-    store.on("task:moved", ({ task, from, to }: { task: Task; from: string; to: string }) => {
-      if (from !== "triage" || to === "triage") return;
-      if (!this.processing.has(task.id) && !this.activeSessions.has(task.id)) return;
-
-      this.moveAborted.add(task.id);
-      this.options.stuckTaskDetector?.untrackTask(task.id);
-      const session = this.activeSessions.get(task.id);
-      if (session) {
-        triageLog.log(`Task moved ${from} → ${to} — terminating triage session for ${task.id}`);
-        session.dispose();
-      } else {
-        triageLog.log(`Task moved ${from} → ${to} — skipping queued triage for ${task.id}`);
-      }
-    });
   }
 
   start(): void {
@@ -569,41 +552,11 @@ export class TriageProcessor {
     this.options.onSpecifyStart?.(task);
 
     try {
-      const detail = (await this.store.getTask(task.id)) ?? {
-        ...task,
-        prompt: "",
-        attachments: [],
-        comments: [],
-      };
+      const detail = await this.store.getTask(task.id);
       const settings = await this.store.getSettings();
       const promptPath = `.fusion/tasks/${task.id}/PROMPT.md`;
 
       const agentWork = async () => {
-        const hasLeftTriage = async (): Promise<boolean> => {
-          if (this.moveAborted.has(task.id)) return true;
-          try {
-            const latestTask = await this.store.getTask(task.id);
-            return latestTask ? latestTask.column !== "triage" : false;
-          } catch {
-            return false;
-          }
-        };
-
-        if (await hasLeftTriage()) return;
-
-        let currentTask = detail;
-        try {
-          currentTask = (await this.store.getTask(task.id)) ?? detail;
-        } catch {
-          currentTask = detail;
-        }
-        if (currentTask.column !== "triage") {
-          triageLog.log(
-            `${task.id} left triage before specification started — skipping`,
-          );
-          return;
-        }
-
         // Set status only after the semaphore slot has been acquired, so
         // tasks waiting in the queue don't appear as "specifying".
         await this.store.updateTask(task.id, { status: "specifying" });
@@ -730,8 +683,6 @@ export class TriageProcessor {
         stuckDetector?.recordActivity(task.id);
 
         try {
-          if (await hasLeftTriage()) return;
-
           // Read attachment contents for inlining in prompt
           const { attachmentContents, imageContents } =
             await readAttachmentContents(
@@ -774,8 +725,6 @@ export class TriageProcessor {
           // Re-raise errors that pi-coding-agent swallowed after exhausting retries.
           checkSessionError(session);
 
-          if (await hasLeftTriage()) return;
-
           if (createdSubtasksRef.current.length > 0) {
             const childTaskIds = createdSubtasksRef.current.join(", ");
             await this.store.logEntry(
@@ -873,9 +822,6 @@ export class TriageProcessor {
         // so the next poll can re-pick this task up.
         const restoreStatus = task.status === "needs-respecify" ? "needs-respecify" : null;
         await this.store.updateTask(task.id, { status: restoreStatus }).catch(() => {});
-      } else if (this.moveAborted.has(task.id)) {
-        this.moveAborted.delete(task.id);
-        triageLog.log(`${task.id} aborted because task left triage`);
       } else if (this.stuckAborted.has(task.id)) {
         // Stuck task detector killed this session — clear specifying status so the
         // next poll retries the task from scratch without reporting an error.
@@ -934,7 +880,6 @@ export class TriageProcessor {
         this.options.onSpecifyError?.(task, err);
       }
     } finally {
-      this.moveAborted.delete(task.id);
       this.processing.delete(task.id);
     }
   }