TheGreenCedar · TheGreenCedar · Feb 28, 2026 · Feb 28, 2026
diff --git a/codestory-ui/index.html b/codestory-ui/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
   </head>

diff --git a/codestory-ui/package-lock.json b/codestory-ui/package-lock.json
diff --git a/codestory-ui/package.json b/codestory-ui/package.json
@@ -26,6 +26,7 @@
     "@monaco-editor/react": "4.7.0",
     "@xyflow/react": "12.10.1",
     "html-to-image": "^1.11.13",
+    "lucide-react": "^0.575.0",
     "mermaid": "11.12.3",
     "monaco-editor": "0.55.1",
     "react": "19.2.4",

diff --git a/codestory-ui/src/App.tsx b/codestory-ui/src/App.tsx
@@ -8,7 +8,6 @@ import {
   toMonacoModelPath,
   type AgentConnectionState,
 } from "./app/layoutPersistence";
-import { loadFeatureFlags, saveFeatureFlags, type FeatureFlagState } from "./app/featureFlags";
 import { trackAnalyticsEvent } from "./app/analytics";
 import { UI_CONTRACT, UI_LAYOUT_SCHEMA_STORAGE_KEY } from "./app/uiContract";
 import type { PendingSymbolFocus } from "./app/types";
@@ -107,7 +106,6 @@ export default function App() {
   const [bookmarkSeed, setBookmarkSeed] = useState<{ nodeId: string; label: string } | null>(null);
   const [activeSection, setActiveSection] = useState<AppShellSection>("investigate");
   const [commandPaletteOpen, setCommandPaletteOpen] = useState<boolean>(false);
-  const [featureFlags, setFeatureFlags] = useState<FeatureFlagState>(() => loadFeatureFlags());
   const [investigateMode, setInvestigateMode] = useState<InvestigateFocusMode>(() => {
     if (typeof window === "undefined") {
       return "graph";
@@ -164,10 +162,6 @@ export default function App() {
     window.localStorage.setItem(UI_LAYOUT_SCHEMA_STORAGE_KEY, String(UI_CONTRACT.schemaVersion));
   }, [investigateMode]);
 
-  useEffect(() => {
-    saveFeatureFlags(featureFlags);
-  }, [featureFlags]);
-
   useEffect(() => {
     const previous = previousIndexProgressRef.current;
     if (previous !== null && indexProgress === null) {
@@ -591,13 +585,6 @@ export default function App() {
     }));
   }, []);
 
-  const updateFeatureFlag = useCallback((flag: keyof FeatureFlagState, value: boolean) => {
-    setFeatureFlags((previous) => ({
-      ...previous,
-      [flag]: value,
-    }));
-  }, []);
-
   const refreshSpaces = useCallback(() => {
     setSpaces(listSpaces());
   }, []);
@@ -848,29 +835,16 @@ export default function App() {
         label: "Save Investigation Space",
         detail: "Store current prompt and focus for reuse",
         keywords: ["space", "save", "library"],
-        disabled: !featureFlags.spacesLibrary,
         run: () =>
           invokeCommand("save-space", () => {
             createSpaceFromCurrentContext("", "");
             setActiveSection("library");
           }),
       },
-      {
-        id: "toggle-ux-reset",
-        label: featureFlags.uxResetV2 ? "Disable UX Reset" : "Enable UX Reset",
-        detail: "Rollback switch for staged rollout",
-        keywords: ["feature flag", "rollback", "shell"],
-        run: () =>
-          invokeCommand("toggle-ux-reset", () => {
-            updateFeatureFlag("uxResetV2", !featureFlags.uxResetV2);
-          }),
-      },
     ],
     [
       activeSection,
       createSpaceFromCurrentContext,
-      featureFlags.spacesLibrary,
-      featureFlags.uxResetV2,
       focusGraphSearchInput,
       handleInvestigateModeChange,
       handlePrompt,
@@ -883,7 +857,6 @@ export default function App() {
       prompt,
       runIndexFromUi,
       trailDisabledReason,
-      updateFeatureFlag,
     ],
   );
 
@@ -1034,14 +1007,6 @@ export default function App() {
     />
   );
 
-  const legacyWorkspaceView = (
-    <div className="workspace">
-      {responsePaneView}
-      {graphPaneView}
-      {codePaneView}
-    </div>
-  );
-
   const focusedPane =
     investigateMode === "graph"
       ? graphPaneView
@@ -1051,31 +1016,29 @@ export default function App() {
 
   const focusedWorkspaceView = (
     <div className="investigate-layout">
-      {featureFlags.onboardingStarter ? (
-        <StarterCard
-          className="starter-card"
-          projectPath={projectPath}
-          projectOpen={projectOpen}
-          indexComplete={hasCompletedIndex || rootSymbols.length > 0}
-          askedFirstQuestion={askedFirstQuestion}
-          inspectedSource={inspectedSource}
-          onOpenProject={openProjectFromUi}
-          onRunIndex={runRecommendedIndex}
-          onSeedQuestion={seedFirstQuestion}
-          onInspectSource={jumpToSourceInspection}
-          onPrimaryAction={(action) => {
-            trackAnalyticsEvent(
-              "starter_card_cta_clicked",
-              {
-                action,
-              },
-              {
-                projectPath,
-              },
-            );
-          }}
-        />
-      ) : null}
+      <StarterCard
+        className="starter-card"
+        projectPath={projectPath}
+        projectOpen={projectOpen}
+        indexComplete={hasCompletedIndex || rootSymbols.length > 0}
+        askedFirstQuestion={askedFirstQuestion}
+        inspectedSource={inspectedSource}
+        onOpenProject={openProjectFromUi}
+        onRunIndex={runRecommendedIndex}
+        onSeedQuestion={seedFirstQuestion}
+        onInspectSource={jumpToSourceInspection}
+        onPrimaryAction={(action) => {
+          trackAnalyticsEvent(
+            "starter_card_cta_clicked",
+            {
+              action,
+            },
+            {
+              projectPath,
+            },
+          );
+        }}
+      />
 
       <div className="investigate-toolbar">
         <InvestigateFocusSwitcher
@@ -1089,7 +1052,6 @@ export default function App() {
               createSpaceFromCurrentContext("", "");
               setActiveSection("library");
             }}
-            disabled={!featureFlags.spacesLibrary}
           >
             Save Space
           </button>
@@ -1108,26 +1070,17 @@ export default function App() {
     </div>
   );
 
-  const workspaceView = featureFlags.singlePaneInvestigate
-    ? focusedWorkspaceView
-    : legacyWorkspaceView;
-
   const sectionContent: Partial<Record<AppShellSection, ReactNode>> = {
-    library: featureFlags.spacesLibrary ? (
+    library: (
       <SpacesPanel
         spaces={spaces}
         activeSpaceId={activeSpaceId}
         onCreateSpace={createSpaceFromCurrentContext}
         onLoadSpace={loadSpaceIntoWorkspace}
         onDeleteSpace={removeSpaceById}
       />
-    ) : (
-      <section className="shell-card">
-        <h3>Spaces Disabled</h3>
-        <p>Enable spaces in Settings to save and reopen investigations.</p>
-      </section>
     ),
-    settings: <SettingsPage featureFlags={featureFlags} onUpdateFlag={updateFeatureFlag} />,
+    settings: <SettingsPage />,
   };
 
   return (
@@ -1147,16 +1100,12 @@ export default function App() {
 
       <StatusStrip status={status} indexProgress={indexProgress} />
 
-      {featureFlags.uxResetV2 ? (
-        <AppShell
-          activeSection={activeSection}
-          onSelectSection={setActiveSection}
-          workspace={workspaceView}
-          sectionContent={sectionContent}
-        />
-      ) : (
-        legacyWorkspaceView
-      )}
+      <AppShell
+        activeSection={activeSection}
+        onSelectSection={setActiveSection}
+        workspace={focusedWorkspaceView}
+        sectionContent={sectionContent}
+      />
 
       <BookmarkManager
         open={bookmarkManagerOpen}

diff --git a/codestory-ui/src/app/featureFlags.ts b/codestory-ui/src/app/featureFlags.ts
diff --git a/codestory-ui/src/app/useEditorDecorations.ts b/codestory-ui/src/app/useEditorDecorations.ts
@@ -3,6 +3,7 @@ import { type Monaco, type OnMount } from "@monaco-editor/react";
 
 import type { CodeEdgeContext } from "../components/CodePane";
 import type { NodeDetailsDto, SourceOccurrenceDto } from "../generated/api";
+import { GRAPH_THEME } from "../theme/tokens";
 
 type UseEditorDecorationsArgs = {
   saveCurrentFile: () => Promise<boolean>;
@@ -120,7 +121,7 @@ export function useEditorDecorations({
           isWholeLine: true,
           className: "monaco-focus-line",
           overviewRuler: {
-            color: "#f0b42988",
+            color: GRAPH_THEME.editorOverview,
             position: monaco.editor.OverviewRulerLane.Center,
           },
         },

diff --git a/codestory-ui/src/components/InvestigateFocusSwitcher.tsx b/codestory-ui/src/components/InvestigateFocusSwitcher.tsx
@@ -3,30 +3,40 @@ import {
   investigateFocusModeLabel,
   type InvestigateFocusMode,
 } from "../layout/layoutPresets";
+import { Bolt, Code2, Orbit } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "../ui/primitives";
 
 type InvestigateFocusSwitcherProps = {
   mode: InvestigateFocusMode;
   onModeChange: (mode: InvestigateFocusMode) => void;
 };
 
 export function InvestigateFocusSwitcher({ mode, onModeChange }: InvestigateFocusSwitcherProps) {
+  const modeIcons: Record<InvestigateFocusMode, ReactNode> = {
+    ask: <Bolt size={14} strokeWidth={2.5} aria-hidden />,
+    graph: <Orbit size={14} strokeWidth={2.5} aria-hidden />,
+    code: <Code2 size={14} strokeWidth={2.5} aria-hidden />,
+  };
   return (
     <div className="focus-switcher" role="tablist" aria-label="Investigate focus mode">
       {INVESTIGATE_FOCUS_MODES.map((candidate) => {
         const isActive = candidate === mode;
         return (
-          <button
+          <Button
             key={candidate}
-            type="button"
             role="tab"
             aria-selected={isActive}
+            variant={isActive ? "primary" : "ghost"}
             className={
               isActive ? "focus-switcher-item focus-switcher-item-active" : "focus-switcher-item"
             }
             onClick={() => onModeChange(candidate)}
           >
+            {modeIcons[candidate]}
             {investigateFocusModeLabel(candidate)}
-          </button>
+          </Button>
         );
       })}
     </div>

diff --git a/codestory-ui/src/components/StatusStrip.tsx b/codestory-ui/src/components/StatusStrip.tsx
@@ -7,11 +7,11 @@ export function StatusStrip({ status, indexProgress }: StatusStripProps) {
   return (
     <div className="status-strip">
       <span>{status}</span>
-      {indexProgress && (
+      {indexProgress ? (
         <span>
           Indexing {indexProgress.current}/{indexProgress.total}
         </span>
-      )}
+      ) : null}
     </div>
   );
 }