Restore workspace header controls and polish tab management

packages/app/src/components/agent-status-dot.tsx

@@ -1,25 +1,41 @@
 import { View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import {
+  AGENT_LIFECYCLE_STATUSES,
+  type AgentLifecycleStatus,
+} from "@server/shared/agent-lifecycle";
+import { deriveSidebarStateBucket } from "@/utils/sidebar-agent-state";
+import { getStatusDotColor } from "@/utils/status-dot-color";
 
 export function AgentStatusDot({
   status,
   requiresAttention,
+  attentionReason,
+  pendingPermissionCount,
   showInactive = false,
 }: {
   status: string | null | undefined;
   requiresAttention: boolean | null | undefined;
+  attentionReason?: "finished" | "error" | "permission" | null;
+  pendingPermissionCount?: number;
   showInactive?: boolean;
 }) {
   const { theme } = useUnistyles();
 
-  const isRunning = status === "running";
-  const color = isRunning
-    ? theme.colors.palette.blue[500]
-    : requiresAttention
-      ? theme.colors.success
-      : showInactive
-        ? theme.colors.border
-        : null;
+  if (!status) {
+    return null;
+  }
+  if (!isAgentLifecycleStatus(status)) {
+    return null;
+  }
+
+  const bucket = deriveSidebarStateBucket({
+    status,
+    requiresAttention: Boolean(requiresAttention),
+    attentionReason: attentionReason ?? null,
+    pendingPermissionCount: pendingPermissionCount ?? 0,
+  });
+  const color = getStatusDotColor({ theme, bucket, showDoneAsInactive: showInactive });
 
   if (!color) {
     return null;
@@ -28,6 +44,10 @@ export function AgentStatusDot({
   return <View style={[styles.dot, { backgroundColor: color }]} />;
 }
 
+function isAgentLifecycleStatus(value: string): value is AgentLifecycleStatus {
+  return AGENT_LIFECYCLE_STATUSES.some((status) => status === value);
+}
+
 const styles = StyleSheet.create((theme) => ({
   dot: {
     width: 8,