fix(cortex): pixel-perfect CortexActivityBar matching Figma Sidebar Container

- Reorder DEFAULT_ITEMS to Figma order: home, folder, search, git, play,
  plugins, users, grid, book, map, brush (11 items)
- Active state: bg #BFFF00, icon #141415
- Inactive icon #8C8D8F, hover #FCFCFC
- Border: 1px solid #2E2F31
- Settings icon: settings-02, hover color #FCFCFC
- Avatar: 24x24 with 6x6 green (#34D399) status dot
- Remove bottom section border-top divider
- Badge colors: #BFFF00/#141415
- Update cortex-tokens: icon-active #141415
- Update both test files for new item count/order

Author: echobt

src/components/__tests__/CortexActivityBar.test.tsx

@@ -57,21 +57,20 @@ describe("CortexActivityBar Component Logic", () => {
 
     const DEFAULT_ITEMS: ActivityBarItem[] = [
       { id: "home", icon: "home", label: "Home" },
-      { id: "new", icon: "plus", label: "New" },
       { id: "files", icon: "folder", label: "Explorer" },
+      { id: "search", icon: "search", label: "Search" },
       { id: "git", icon: "git", label: "Source Control" },
       { id: "debug", icon: "play", label: "Run & Debug" },
-      { id: "extensions", icon: "box", label: "Extensions" },
+      { id: "plugins", icon: "plugins", label: "Plugins" },
       { id: "agents", icon: "users", label: "AI Agents" },
-      { id: "packages", icon: "cube", label: "Packages" },
-      { id: "factory", icon: "grid", label: "Factory" },
+      { id: "extensions", icon: "grid", label: "Extensions" },
       { id: "docs", icon: "book", label: "Documentation" },
-      { id: "maps", icon: "map", label: "Code Maps" },
-      { id: "themes", icon: "paintbrush", label: "Themes" },
+      { id: "factory", icon: "map", label: "Factory" },
+      { id: "themes", icon: "brush", label: "Themes" },
     ];
 
-    it("should have 12 default items", () => {
-      expect(DEFAULT_ITEMS).toHaveLength(12);
+    it("should have 11 default items", () => {
+      expect(DEFAULT_ITEMS).toHaveLength(11);
     });
 
     it("should start with home item", () => {
@@ -86,8 +85,8 @@ describe("CortexActivityBar Component Logic", () => {
       const ids = DEFAULT_ITEMS.map(item => item.id);
 
       expect(ids).toContain("home");
-      expect(ids).toContain("new");
       expect(ids).toContain("files");
+      expect(ids).toContain("search");
       expect(ids).toContain("git");
       expect(ids).toContain("debug");
       expect(ids).toContain("extensions");

src/components/cortex/CortexActivityBar.tsx

@@ -1,9 +1,10 @@
 /**
  * CortexActivityBar - Pixel-perfect activity bar matching Figma Sidebar Container (37:893)
- * Width: 40px, border-radius 12px, sidebar bg/border from tokens
+ * Width: 40px, border-radius 12px, bg #1C1C1D, border 1px solid #2E2F31
  * Items: 32×32 containers, 20×20 icons, 8px gap, 4px padding
- * Active state: sidebar-selected bg (#252628) with white icon (#FCFCFC)
- * Bottom section: settings + avatar pinned to bottom
+ * Active state: lime accent bg (#BFFF00) with dark icon (#141415), border-radius 8px
+ * Inactive: #8C8D8F, hover: #FCFCFC
+ * Bottom section: settings (settings-02) + avatar circle (24×24) with green status dot
  */
 
 import { Component, JSX, splitProps, createSignal, For, Show } from "solid-js";
@@ -36,11 +37,12 @@ const DEFAULT_ITEMS: ActivityBarItem[] = [
   { id: "search", icon: "search", label: "Search" },
   { id: "git", icon: "git", label: "Source Control" },
   { id: "debug", icon: "play", label: "Run & Debug" },
-  { id: "extensions", icon: "grid", label: "Extensions" },
+  { id: "plugins", icon: "plugins", label: "Plugins" },
   { id: "agents", icon: "users", label: "AI Agents" },
+  { id: "extensions", icon: "grid", label: "Extensions" },
+  { id: "docs", icon: "book", label: "Documentation" },
   { id: "factory", icon: "map", label: "Factory" },
-  { id: "plugins", icon: "puzzle-piece", label: "Plugins" },
-  { id: "themes", icon: "paintbrush", label: "Themes" },
+  { id: "themes", icon: "brush", label: "Themes" },
 ];
 
 export const CortexActivityBar: Component<CortexActivityBarProps> = (props) => {
@@ -67,7 +69,7 @@ export const CortexActivityBar: Component<CortexActivityBarProps> = (props) => {
           "margin-bottom": "var(--cortex-space-2)",
           background: "var(--cortex-sidebar-bg)",
           "border-radius": "var(--cortex-sidebar-radius)",
-          border: "1px solid var(--cortex-sidebar-border)",
+          border: "1px solid #2E2F31",
           padding: "var(--cortex-space-1)",
           "flex-shrink": "0",
           ...local.style,
@@ -104,7 +106,6 @@ export const CortexActivityBar: Component<CortexActivityBarProps> = (props) => {
           "align-items": "center",
           padding: "0",
           gap: "var(--cortex-space-2)",
-          "border-top": "1px solid var(--cortex-sidebar-border)",
         }}>
           <ActivityBarSettingsButton onClick={local.onSettingsClick} />
           <AvatarButton
@@ -134,14 +135,15 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
   const [isHovered, setIsHovered] = createSignal(false);
 
   const bg = () => {
-    if (props.isActive) return "var(--cortex-sidebar-selected)";
+    if (props.isActive) return "#BFFF00";
     if (isHovered()) return "var(--cortex-sidebar-selected)";
     return "transparent";
   };
 
   const iconColor = () => {
-    if (props.isActive) return "var(--cortex-text-on-surface)";
-    return "var(--cortex-icon-inactive)";
+    if (props.isActive) return "#141415";
+    if (isHovered()) return "#FCFCFC";
+    return "#8C8D8F";
   };
 
   return (
@@ -185,8 +187,8 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
             "align-items": "center",
             "justify-content": "center",
             padding: "0 var(--cortex-space-1)",
-            background: "var(--cortex-accent-primary)",
-            color: "var(--cortex-accent-text)",
+            background: "#BFFF00",
+            color: "#141415",
             "font-family": "var(--cortex-font-sans)",
             "font-size": "9px",
             "font-weight": "var(--cortex-font-semibold)",
@@ -231,11 +233,9 @@ const ActivityBarSettingsButton: Component<{ onClick?: () => void }> = (props) =
         aria-label="Settings"
       >
         <CortexIcon
-          name="gear"
+          name="settings-02"
           size={20}
-          color={isHovered()
-            ? "var(--cortex-accent-primary)"
-            : "var(--cortex-icon-inactive)"}
+          color={isHovered() ? "#FCFCFC" : "#8C8D8F"}
           style={{ transition: "color var(--cortex-transition-fast)" }}
         />
       </button>
@@ -250,18 +250,19 @@ const AvatarButton: Component<{ avatarUrl?: string; onClick?: () => void }> = (p
     <CortexTooltip content="Account" position="right">
       <button
         style={{
-          width: "var(--cortex-space-8)",
-          height: "var(--cortex-space-8)",
+          position: "relative",
+          width: "24px",
+          height: "24px",
           "border-radius": "var(--cortex-radius-full)",
           background: "var(--cortex-bg-tertiary)",
           border: isHovered()
-            ? "2px solid var(--cortex-accent-primary)"
-            : "2px solid var(--cortex-border-default)",
+            ? "2px solid #BFFF00"
+            : "2px solid transparent",
           cursor: "pointer",
           display: "flex",
           "align-items": "center",
           "justify-content": "center",
-          overflow: "hidden",
+          overflow: "visible",
           transition: "border-color var(--cortex-transition-fast)",
           padding: "0",
         }}
@@ -275,8 +276,8 @@ const AvatarButton: Component<{ avatarUrl?: string; onClick?: () => void }> = (p
           fallback={
             <CortexIcon
               name="user"
-              size={18}
-              color="var(--cortex-text-muted)"
+              size={14}
+              color="#8C8D8F"
             />
           }
         >
@@ -287,9 +288,20 @@ const AvatarButton: Component<{ avatarUrl?: string; onClick?: () => void }> = (p
               width: "100%",
               height: "100%",
               "object-fit": "cover",
+              "border-radius": "var(--cortex-radius-full)",
             }}
           />
         </Show>
+        <span style={{
+          position: "absolute",
+          bottom: "-1px",
+          right: "-1px",
+          width: "6px",
+          height: "6px",
+          "border-radius": "var(--cortex-radius-full)",
+          background: "#34D399",
+          border: "1px solid var(--cortex-sidebar-bg)",
+        }} />
       </button>
     </CortexTooltip>
   );

src/components/cortex/__tests__/CortexActivityBar.test.tsx

@@ -65,7 +65,7 @@ describe("CortexActivityBar", () => {
     it("should render with default items when no items provided", () => {
       const { container } = render(() => <CortexActivityBar />);
       const buttons = container.querySelectorAll('button[aria-label]');
-      expect(buttons.length).toBeGreaterThanOrEqual(12);
+      expect(buttons.length).toBeGreaterThanOrEqual(13);
     });
 
     it("should render custom items when provided", () => {

src/styles/cortex-tokens.css

@@ -206,7 +206,7 @@
   --cortex-text-on-surface: #FCFCFC;                          /* Text on dark surfaces */
   --cortex-card-border: rgba(255, 255, 255, 0.15);            /* Standard card border */
   --cortex-icon-inactive: #8C8D8F;                            /* Inactive sidebar icons (Figma exact) */
-  --cortex-icon-active: #000000;                              /* Active icon on accent bg */
+  --cortex-icon-active: #141415;                              /* Active icon on accent bg (Figma exact) */
 
   /* Font Sizes (Figma: 10, 12, 14, 16) */
   --cortex-text-2xs: 10px;          /* Figma smallest text */