Use shield icon for permission status

Replace permission dots with a shield indicator and adjust permission colors to stand out from working/compacting.

packages/ui/src/components/instance-tab.tsx

@@ -1,7 +1,7 @@
 import { Component, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
-import { FolderOpen, X } from "lucide-solid"
+import { FolderOpen, ShieldAlert, X } from "lucide-solid"
 
 interface InstanceTabProps {
   instance: Instance
@@ -63,7 +63,11 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
           title={statusTitle()}
           aria-label={`Instance status: ${statusTitle()}`}
         >
-          <span class="status-dot" />
+          {aggregatedStatus() === "permission" ? (
+            <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
+          ) : (
+            <span class="status-dot" />
+          )}
         </span>
         <span
           class="tab-close"

packages/ui/src/components/session-list.tsx

@@ -1,7 +1,7 @@
 import { Component, For, Show, createSignal, createMemo, JSX } from "solid-js"
 import type { Session, SessionStatus } from "../types/session"
 import { getSessionStatus } from "../stores/session-status"
-import { MessageSquare, Info, X, Copy, Trash2, Pencil } from "lucide-solid"
+import { MessageSquare, Info, X, Copy, Trash2, Pencil, ShieldAlert } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
 import Kbd from "./kbd"
 import SessionRenameDialog from "./session-rename-dialog"
@@ -172,7 +172,11 @@ const SessionList: Component<SessionListProps> = (props) => {
           </div>
           <div class="session-item-row session-item-meta">
             <span class={`status-indicator session-status session-status-list ${statusClassName()}`}>
-              <span class="status-dot" />
+              {pendingPermission() ? (
+                <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
+              ) : (
+                <span class="status-dot" />
+              )}
               {statusText()}
             </span>
             <div class="session-item-actions">

packages/ui/src/styles/tokens.css

@@ -42,8 +42,8 @@
   --session-status-compacting-bg: rgba(109, 40, 217, 0.18);
   --session-status-idle-fg: #15803d;
   --session-status-idle-bg: rgba(22, 163, 74, 0.16);
-  --session-status-permission-fg: #c2410c;
+  --session-status-permission-fg: #b91c1c;
-  --session-status-permission-bg: rgba(251, 191, 36, 0.25);
+  --session-status-permission-bg: rgba(239, 68, 68, 0.16);
   --list-item-highlight-bg: rgba(0, 102, 255, 0.1);
   --list-item-highlight-bg-solid: #e5f0ff;
   --list-item-highlight-border: rgba(0, 102, 255, 0.25);
@@ -191,8 +191,8 @@
     --session-status-compacting-bg: rgba(192, 132, 252, 0.28);
     --session-status-idle-fg: #4ade80;
     --session-status-idle-bg: rgba(74, 222, 128, 0.22);
-    --session-status-permission-fg: #fbbf24;
+    --session-status-permission-fg: #f87171;
-    --session-status-permission-bg: rgba(251, 191, 36, 0.35);
+    --session-status-permission-bg: rgba(248, 113, 113, 0.22);
   --list-item-highlight-bg: rgba(0, 128, 255, 0.2);
   --list-item-highlight-bg-solid: #15324e;
   --list-item-highlight-border: rgba(0, 128, 255, 0.4);
@@ -345,8 +345,8 @@
   --session-status-compacting-bg: rgba(192, 132, 252, 0.28);
   --session-status-idle-fg: #4ade80;
   --session-status-idle-bg: rgba(74, 222, 128, 0.22);
-  --session-status-permission-fg: #fbbf24;
+  --session-status-permission-fg: #f87171;
-  --session-status-permission-bg: rgba(251, 191, 36, 0.35);
+  --session-status-permission-bg: rgba(248, 113, 113, 0.22);
   --list-item-highlight-bg: rgba(0, 128, 255, 0.2);
   --list-item-highlight-bg-solid: #15324e;
   --list-item-highlight-border: rgba(0, 128, 255, 0.4);