🤖 feat: add colored borders to runtime badges for better discrimination

ammar-agent · ammar-agent · commit d2132e36ae69 · 2025-12-02T11:11:55.000-06:00
- SSH: blue theme (idle and working)
- Worktree: purple theme (idle and working)
- Local: gray theme (idle and working)

Each runtime type maintains consistent coloring, with working state
showing brighter colors and pulse animation.

Added RuntimeBadgeVariations story showing all 6 states.
Added createLocalWorkspace helper to mockFactory.

_Generated with `mux`_
diff --git a/src/browser/components/RuntimeBadge.tsx b/src/browser/components/RuntimeBadge.tsx
@@ -78,31 +78,42 @@ function LocalIcon() {
   );
 }
 
+// Runtime-specific color schemes - each type has consistent colors in idle/working states
+const RUNTIME_STYLES = {
+  ssh: {
+    idle: "bg-blue-500/10 text-blue-400/70 border-blue-500/40",
+    working: "bg-blue-500/20 text-blue-400 border-blue-500/50 animate-pulse",
+  },
+  worktree: {
+    idle: "bg-purple-500/10 text-purple-400/70 border-purple-500/40",
+    working: "bg-purple-500/20 text-purple-400 border-purple-500/50 animate-pulse",
+  },
+  local: {
+    idle: "bg-muted/20 text-muted/70 border-muted/40",
+    working: "bg-muted/30 text-muted border-muted/50 animate-pulse",
+  },
+} as const;
+
 /**
  * Badge to display runtime type information.
  * Shows icon-only badge with tooltip describing the runtime type.
- * - SSH: server icon with hostname
- * - Worktree: git branch icon (isolated worktree)
- * - Local: folder icon (project directory)
+ * - SSH: server icon with hostname (blue theme)
+ * - Worktree: git branch icon (purple theme)
+ * - Local: folder icon (gray theme)
  *
- * When isWorking=true, badges show blue color with pulse animation.
- * When idle, badges show gray styling.
+ * When isWorking=true, badges brighten and pulse within their color scheme.
  */
 export function RuntimeBadge({ runtimeConfig, className, isWorking = false }: RuntimeBadgeProps) {
-  // Dynamic styling based on working state
-  const workingStyles = isWorking
-    ? "bg-blue-500/20 text-blue-400 border-blue-500/40 animate-pulse"
-    : "bg-muted/30 text-muted border-muted/50";
-
   // SSH runtime: show server icon with hostname
   if (isSSHRuntime(runtimeConfig)) {
     const hostname = extractSshHostname(runtimeConfig);
+    const styles = isWorking ? RUNTIME_STYLES.ssh.working : RUNTIME_STYLES.ssh.idle;
     return (
       <TooltipWrapper inline>
         <span
           className={cn(
             "inline-flex items-center rounded px-1 py-0.5 border transition-colors",
-            workingStyles,
+            styles,
             className
           )}
         >
@@ -115,12 +126,13 @@ export function RuntimeBadge({ runtimeConfig, className, isWorking = false }: Ru
 
   // Worktree runtime: show git branch icon
   if (isWorktreeRuntime(runtimeConfig)) {
+    const styles = isWorking ? RUNTIME_STYLES.worktree.working : RUNTIME_STYLES.worktree.idle;
     return (
       <TooltipWrapper inline>
         <span
           className={cn(
             "inline-flex items-center rounded px-1 py-0.5 border transition-colors",
-            workingStyles,
+            styles,
             className
           )}
         >
@@ -133,12 +145,13 @@ export function RuntimeBadge({ runtimeConfig, className, isWorking = false }: Ru
 
   // Local project-dir runtime: show folder icon
   if (isLocalProjectRuntime(runtimeConfig)) {
+    const styles = isWorking ? RUNTIME_STYLES.local.working : RUNTIME_STYLES.local.idle;
     return (
       <TooltipWrapper inline>
         <span
           className={cn(
             "inline-flex items-center rounded px-1 py-0.5 border transition-colors",
-            workingStyles,
+            styles,
             className
           )}
         >
diff --git a/src/browser/stories/App.sidebar.stories.tsx b/src/browser/stories/App.sidebar.stories.tsx
@@ -5,8 +5,12 @@
 import { appMeta, AppWithMocks, type AppStory } from "./meta.js";
 import {
   NOW,
+  STABLE_TIMESTAMP,
   createWorkspace,
   createSSHWorkspace,
+  createLocalWorkspace,
+  createUserMessage,
+  createStreamingChatHandler,
   groupWorkspacesByProject,
   createMockAPI,
   installMockAPI,
@@ -175,3 +179,118 @@ export const GitStatusVariations: AppStory = {
     />
   ),
 };
+
+/**
+ * All runtime badge variations showing different runtime types.
+ * Each type has distinct colors:
+ * - SSH: blue theme
+ * - Worktree: purple theme
+ * - Local: gray theme
+ *
+ * The streaming workspaces show the "working" state with pulse animation.
+ */
+export const RuntimeBadgeVariations: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        // Idle workspaces (one of each type)
+        const sshIdle = createSSHWorkspace({
+          id: "ws-ssh-idle",
+          name: "ssh-idle",
+          projectName: "runtime-demo",
+          host: "dev.example.com",
+          createdAt: new Date(NOW - 3600000).toISOString(),
+        });
+        const worktreeIdle = createWorkspace({
+          id: "ws-worktree-idle",
+          name: "worktree-idle",
+          projectName: "runtime-demo",
+          createdAt: new Date(NOW - 7200000).toISOString(),
+        });
+        const localIdle = createLocalWorkspace({
+          id: "ws-local-idle",
+          name: "local-idle",
+          projectName: "runtime-demo",
+          createdAt: new Date(NOW - 10800000).toISOString(),
+        });
+
+        // Working workspaces (streaming - shows pulse animation)
+        const sshWorking = createSSHWorkspace({
+          id: "ws-ssh-working",
+          name: "ssh-working",
+          projectName: "runtime-demo",
+          host: "prod.example.com",
+          createdAt: new Date(NOW - 1800000).toISOString(),
+        });
+        const worktreeWorking = createWorkspace({
+          id: "ws-worktree-working",
+          name: "worktree-working",
+          projectName: "runtime-demo",
+          createdAt: new Date(NOW - 900000).toISOString(),
+        });
+        const localWorking = createLocalWorkspace({
+          id: "ws-local-working",
+          name: "local-working",
+          projectName: "runtime-demo",
+          createdAt: new Date(NOW - 300000).toISOString(),
+        });
+
+        const workspaces = [
+          sshIdle,
+          worktreeIdle,
+          localIdle,
+          sshWorking,
+          worktreeWorking,
+          localWorking,
+        ];
+
+        // Create streaming handlers for working workspaces
+        const workingMessage = createUserMessage("msg-1", "Working on task...", {
+          historySequence: 1,
+          timestamp: STABLE_TIMESTAMP,
+        });
+
+        const chatHandlers = new Map([
+          [
+            "ws-ssh-working",
+            createStreamingChatHandler({
+              messages: [workingMessage],
+              streamingMessageId: "stream-ssh",
+              model: "claude-sonnet-4-20250514",
+              historySequence: 2,
+              streamText: "Processing SSH task...",
+            }),
+          ],
+          [
+            "ws-worktree-working",
+            createStreamingChatHandler({
+              messages: [workingMessage],
+              streamingMessageId: "stream-worktree",
+              model: "claude-sonnet-4-20250514",
+              historySequence: 2,
+              streamText: "Processing worktree task...",
+            }),
+          ],
+          [
+            "ws-local-working",
+            createStreamingChatHandler({
+              messages: [workingMessage],
+              streamingMessageId: "stream-local",
+              model: "claude-sonnet-4-20250514",
+              historySequence: 2,
+              streamText: "Processing local task...",
+            }),
+          ],
+        ]);
+
+        installMockAPI(
+          createMockAPI({
+            projects: groupWorkspacesByProject(workspaces),
+            workspaces,
+            chatHandlers,
+          })
+        );
+      }}
+    />
+  ),
+};
diff --git a/src/browser/stories/mockFactory.ts b/src/browser/stories/mockFactory.ts
@@ -77,6 +77,16 @@ export function createSSHWorkspace(
   });
 }
 
+/** Create local project-dir workspace (no isolation, uses project path directly) */
+export function createLocalWorkspace(
+  opts: Partial<WorkspaceFixture> & { id: string; name: string; projectName: string }
+): FrontendWorkspaceMetadata {
+  return createWorkspace({
+    ...opts,
+    runtimeConfig: { type: "local" },
+  });
+}
+
 /** Create workspace with incompatible runtime (for downgrade testing) */
 export function createIncompatibleWorkspace(
   opts: Partial<WorkspaceFixture> & {
