frontend: render queued agents distinctly (was collapsed into idle)

The orchestrator emits status=queued for risk + advisor while the
5 data agents are still running. Previously the frontend mapped
queued → idle, so users saw 'IDLE' next to risk/advisor and
assumed they wouldn't run, even though they did and produced
output. Now queued is its own visible state — amber dot, amber
text, an explanatory line ('queued — waiting for upstream agents').

Also added explicit error styling (coral dot + text) which was
missing.

static/index.html

@@ -195,12 +195,16 @@
   .agent-item:last-child { border-bottom: 0; }
   .agent-head { display: flex; align-items: center; gap: 10px; }
   .agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; }
+  .agent-dot.queued { background: var(--amber); opacity: 0.55; }
   .agent-dot.working { background: var(--accent); animation: pulseSoft 1.1s infinite; box-shadow: 0 0 0 4px var(--accent-soft); }
   .agent-dot.done { background: var(--teal); }
+  .agent-dot.error { background: var(--coral); }
   .agent-name { font-size: 13.5px; font-weight: 500; flex: 1; }
   .agent-status { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; }
+  .agent-status.queued { color: var(--amber); }
   .agent-status.working { color: var(--accent); }
   .agent-status.done { color: var(--teal); }
+  .agent-status.error { color: var(--coral); }
   .agent-finding { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; padding-left: 18px; }
   .agent-finding .mono { color: var(--ink-3); font-size: 11.5px; }
 
@@ -838,10 +842,11 @@ const AgentsScreen = ({ address, onComplete, dark }) => {
         <div className="agent-list">
           {AGENTS.map((a, i) => {
             const live = agentState[a.id];
-            // Map backend statuses (working/done/error/queued) to the UI's
-            // visual states. Anything unreported is "idle".
-            const raw = live?.status || "idle";
-            const status = raw === "queued" ? "idle" : raw;
+            // Backend statuses: queued, working, done, error.
+            // Unreported = idle (the agent hasn't been registered yet,
+            // which happens briefly before the orchestrator's initial
+            // round of agent_update events arrives).
+            const status = live?.status || "idle";
             const summary = live?.summary;
             return (
               <div key={a.id} className="agent-item">
@@ -850,10 +855,12 @@ const AgentsScreen = ({ address, onComplete, dark }) => {
                   <span className="agent-name">{a.name}</span>
                   <span className={`agent-status ${status}`}>{status}</span>
                 </div>
-                {(status === "done" || status === "working" || status === "error") && (
+                {(status === "done" || status === "working" || status === "error" || status === "queued") && (
                   <div className="agent-finding">
                     {status === "working"
                       ? <span style={{color:"var(--ink-3)"}}>{summary || cute[i % cute.length]}</span>
+                      : status === "queued"
+                      ? <span style={{color:"var(--ink-3)"}}>{summary || "queued — waiting for upstream agents"}</span>
                       : (summary || a.finding)}
                   </div>
                 )}