From 440642880c269d20ebf559340762dd9da0ed55f5 Mon Sep 17 00:00:00 2001
From: jessicat <8797119+jess-cat@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:53:41 +0100
Subject: [PATCH] Navigation IA overhaul: native apps under APPLICATIONS, GSV
 ship menu (OVERVIEW/AGENTS/MODELS/TASKS), collapsed-first reveal rail,
 connect nomenclature, external-app provenance tags

---
 web/src/app/components/ui/AgentToolsPanel.tsx |   2 +-
 web/src/app/components/ui/IconMenu.tsx        |  63 ++--
 .../chat/components/ChatAgentPanel.tsx        |   2 +-
 .../files/components/FilesSurfaceSummary.tsx  |   4 +-
 .../CardListTemplateMockPage.tsx              |   2 +-
 .../gsv-console/components/GsvConsole.tsx     |  41 ++-
 .../connect-flows/applicationConnectMock.tsx  |  10 +-
 .../IntegrationOnboardingFlow.tsx             |   2 +-
 .../integrations/IntegrationsPage.tsx         |   2 +-
 .../gsv-console/library/LibraryPage.tsx       |   2 +-
 .../list-template/ListTemplateMockPage.tsx    |   6 +-
 .../gsv-console/machines/MachinesPage.tsx     |   2 +-
 .../packages/ApplicationImportFlow.tsx        |   8 +-
 .../gsv-console/packages/PackageListPage.tsx  |  41 ++-
 .../gsv-console/pages/ConsoleCrewPage.tsx     |   2 +-
 .../pages/ConsoleOverviewPanels.tsx           |   6 +-
 .../gsv-console/runtime/RuntimePage.tsx       |   2 +-
 web/src/app/features/gsv-shell/GsvShell.tsx   | 126 +++----
 .../features/gsv-shell/desktop/GsvDesktop.tsx | 176 +++++-----
 .../gsv-shell/domain/desktopObjects.test.ts   |  48 ++-
 .../gsv-shell/domain/desktopObjects.ts        |  34 +-
 .../features/gsv-shell/domain/shellModel.ts   |  83 +++--
 .../gsv-shell/hooks/useGsvShellState.ts       |  73 ++--
 .../gsv-shell/navigation/ShellRail.tsx        | 140 +++++---
 .../gsv-shell/routing/shellRoutes.test.ts     |  22 ++
 .../features/gsv-shell/routing/shellRoutes.ts |   1 +
 .../features/gsv-shell/styles/gsvShell.css    | 172 +++------
 web/src/design-system/catalog.tsx             |   2 +
 web/src/design-system/previews.tsx            |   4 +-
 .../stories/DesktopHint.story.tsx             |   4 +-
 .../stories/ExternalApplicationTile.story.tsx | 331 ++++++++++++++++++
 .../design-system/stories/IconMenu.story.tsx  |  29 +-
 32 files changed, 917 insertions(+), 525 deletions(-)
 create mode 100644 web/src/design-system/stories/ExternalApplicationTile.story.tsx

diff --git a/web/src/app/components/ui/AgentToolsPanel.tsx b/web/src/app/components/ui/AgentToolsPanel.tsx
index 56fb1171b..1e249c688 100644
--- a/web/src/app/components/ui/AgentToolsPanel.tsx
+++ b/web/src/app/components/ui/AgentToolsPanel.tsx
@@ -319,7 +319,7 @@ export function AgentToolsPanel({
         <div class="gsv-tools-bar-actions">
           <Button
             variant="secondary"
-            label="ADD OVERRIDE"
+            label="+ ADD OVERRIDE"
             disabled={disabled}
             onClick={() => onChange(addRule(policy))}
           />
diff --git a/web/src/app/components/ui/IconMenu.tsx b/web/src/app/components/ui/IconMenu.tsx
index adf372400..52a533b9c 100644
--- a/web/src/app/components/ui/IconMenu.tsx
+++ b/web/src/app/components/ui/IconMenu.tsx
@@ -1,7 +1,17 @@
 import { useEffect, useRef } from "preact/hooks";
-import { Icon } from "./Icon";
+import { Icon, type DotIconMatrix } from "./Icon";
 import "./IconMenu.css";
 
+export interface IconMenuCell {
+  /** Icon name (gsv family, or a doticons/… path with `dotMatrix`). */
+  icon: string;
+  label: string;
+  onClick?: () => void;
+  /** Highlighted cell (the brighter purple used by the old SETTINGS cell). */
+  accent?: boolean;
+  dotMatrix?: DotIconMatrix;
+}
+
 export interface IconMenuProps {
   title?: string;
   /** Popover width in px (280–480). */
@@ -10,25 +20,17 @@ export interface IconMenuProps {
    *  menu doesn't steal focus from another control just by being shown. */
   autoFocus?: boolean;
   onClose?: () => void;
-  onFiles?: () => void;
-  onRepositories?: () => void;
-  onLibrary?: () => void;
-  onTerminal?: () => void;
-  onSettings?: () => void;
+  cells: IconMenuCell[];
 }
 
 /** IconMenu — ported from IconMenu.dc.html. GSV control popover: a header bar
- *  with a pulsing live dot + title + close affordance, over a grid of GSV controls. */
+ *  with a pulsing live dot + title + close affordance, over a grid of cells. */
 export function IconMenu({
   title = "GSV // CONTROL",
   width = 386,
   autoFocus = true,
   onClose,
-  onFiles,
-  onRepositories,
-  onLibrary,
-  onTerminal,
-  onSettings,
+  cells,
 }: IconMenuProps) {
   const rootRef = useRef<HTMLDivElement>(null);
 
@@ -105,32 +107,27 @@ export function IconMenu({
       <div
         style={{
           display: "grid",
-          gridTemplateColumns: "repeat(5,minmax(0,1fr))",
+          gridTemplateColumns: `repeat(${Math.max(cells.length, 1)},minmax(0,1fr))`,
           gap: "1px",
           background: "var(--rule-inner)",
           padding: "1px",
         }}
       >
-        <button type="button" disabled={!onFiles} onClick={onFiles} class="gsv-im-cell" style={{ color: "var(--accent-bright)" }}>
-          <Icon name="folder" size={22} />
-          <span class="gsv-sublabel" style={{ letterSpacing: ".16em", color: "#7d78b8" }}>FILES</span>
-        </button>
-        <button type="button" disabled={!onLibrary} onClick={onLibrary} class="gsv-im-cell" style={{ color: "var(--accent-bright)" }}>
-          <Icon name="pencil" size={22} />
-          <span class="gsv-sublabel" style={{ letterSpacing: ".16em", color: "#7d78b8" }}>LIBRARY</span>
-        </button>
-        <button type="button" disabled={!onTerminal} onClick={onTerminal} class="gsv-im-cell" style={{ color: "var(--accent-bright)" }}>
-          <Icon name="terminal" size={22} />
-          <span class="gsv-sublabel" style={{ letterSpacing: ".16em", color: "#7d78b8" }}>TERMINAL</span>
-        </button>
-        <button type="button" disabled={!onRepositories} onClick={onRepositories} class="gsv-im-cell" style={{ color: "var(--accent-bright)" }}>
-          <Icon name="doticons/branch" size={22} dotMatrix={16} />
-          <span class="gsv-sublabel" style={{ letterSpacing: ".16em", color: "#7d78b8" }}>REPOS</span>
-        </button>
-        <button type="button" disabled={!onSettings} onClick={onSettings} class="gsv-im-cell" style={{ color: "#b6b1ff" }}>
-          <Icon name="cog" size={22} />
-          <span class="gsv-sublabel" style={{ letterSpacing: ".16em", color: "#b6b1ff" }}>SETTINGS</span>
-        </button>
+        {cells.map((cell) => (
+          <button
+            key={cell.label}
+            type="button"
+            disabled={!cell.onClick}
+            onClick={cell.onClick}
+            class="gsv-im-cell"
+            style={{ color: cell.accent ? "#b6b1ff" : "var(--accent-bright)" }}
+          >
+            <Icon name={cell.icon} size={22} dotMatrix={cell.dotMatrix} />
+            <span class="gsv-sublabel" style={{ letterSpacing: ".16em", color: cell.accent ? "#b6b1ff" : "#7d78b8" }}>
+              {cell.label}
+            </span>
+          </button>
+        ))}
       </div>
     </div>
   );
diff --git a/web/src/app/features/chat/components/ChatAgentPanel.tsx b/web/src/app/features/chat/components/ChatAgentPanel.tsx
index a148ffb32..395dbca40 100644
--- a/web/src/app/features/chat/components/ChatAgentPanel.tsx
+++ b/web/src/app/features/chat/components/ChatAgentPanel.tsx
@@ -126,7 +126,7 @@ export function ChatAgentPanel({
             onChange={setQuery}
           />
           <Button
-            label="NEW TASK"
+            label="+ NEW TASK"
             disabled={!canStartNewTask}
             onClick={() => {
               onStartNewTask();
diff --git a/web/src/app/features/files/components/FilesSurfaceSummary.tsx b/web/src/app/features/files/components/FilesSurfaceSummary.tsx
index dbe4b1e77..24c41dff0 100644
--- a/web/src/app/features/files/components/FilesSurfaceSummary.tsx
+++ b/web/src/app/features/files/components/FilesSurfaceSummary.tsx
@@ -58,7 +58,7 @@ import { useFilesMutations, useFilesPath, useFilesSearch, useFilesTargets } from
 import "./FilesSurfaceSummary.css";
 
 /** Sentinel appended to the machine Select so the user can jump to provisioning. */
-const ADD_MACHINE_OPTION = "+ ADD MACHINE";
+const ADD_MACHINE_OPTION = "+ CONNECT NEW MACHINE";
 
 /** Navigate to the machine-provisioning route. The shell has no nav context that
  *  reaches this deeply-nested console page, so we push the route + dispatch a
@@ -921,7 +921,7 @@ export function FilesSurfaceSummary() {
     tabs.some((tab) => draftDirty(tab)) ||
     (createState.open && (createState.pathInput.trim() !== "" || createState.content !== "")),
   );
-  // "+ ADD MACHINE" leaves the Files surface for the provisioning route, so
+  // "+ CONNECT NEW MACHINE" leaves the Files surface for the provisioning route, so
   // route it through the guard to prompt before discarding a dirty draft.
   const requestLeave = useUnsavedGuardLeave();
 
diff --git a/web/src/app/features/gsv-console/card-template/CardListTemplateMockPage.tsx b/web/src/app/features/gsv-console/card-template/CardListTemplateMockPage.tsx
index 274bfd9cb..a270b16ea 100644
--- a/web/src/app/features/gsv-console/card-template/CardListTemplateMockPage.tsx
+++ b/web/src/app/features/gsv-console/card-template/CardListTemplateMockPage.tsx
@@ -131,7 +131,7 @@ export function CardListTemplateMockPage({ onOpenChat }: { onOpenChat?: () => vo
         listMeta={listMeta}
         emptyObject={listTitle}
         isEmpty={cards.length === 0}
-        connectLabel={isCrew ? "NEW AGENT" : "CONNECT MESSENGER"}
+        connectLabel={isCrew ? "+ NEW AGENT" : "CONNECT MESSENGER"}
         onConnect={onOpenChat}
         search={showSearch ? { value: search, placeholder: "Search…", onChange: setSearch } : undefined}
         filters={showFilter ? (
diff --git a/web/src/app/features/gsv-console/components/GsvConsole.tsx b/web/src/app/features/gsv-console/components/GsvConsole.tsx
index 85c0d555f..c63fc8a2b 100644
--- a/web/src/app/features/gsv-console/components/GsvConsole.tsx
+++ b/web/src/app/features/gsv-console/components/GsvConsole.tsx
@@ -65,7 +65,10 @@ function surfaceTail(surface: ShellSurfaceId): string {
     return "GSV · CONSOLE";
   }
   if (surface === "runtime") {
-    return "GSV · RUNTIME";
+    return "GSV · TASKS";
+  }
+  if (surface === "models") {
+    return "GSV · MODELS";
   }
   if (surface === "messengers") {
     return "GSV · MESSENGERS";
@@ -106,7 +109,7 @@ function listKindForSurface(surface: SettingsListSurface): ConsoleListKind {
 
 function settingsRouteLabel(route: SettingsRoute): string {
   if (route.view === "overview") {
-    return "SETTINGS";
+    return "OVERVIEW";
   }
   if (route.view === "crew") {
     return "CREW";
@@ -169,7 +172,7 @@ function libraryPageName(path: string): string {
 
 function settingsRouteTail(route: SettingsRoute): string {
   if (route.view === "overview") {
-    return "GSV · CONTROL";
+    return "GSV · OVERVIEW";
   }
   if (route.view === "crew" || route.view === "agent") {
     return "GSV · CREW";
@@ -304,7 +307,7 @@ export function GsvConsole({
       );
     }
     if (isPackageSettingsKind(kind)) {
-      return <PackageListPage {...options} kind={kind} onOpenApp={onOpenApp} />;
+      return <PackageListPage {...options} kind={kind} onOpenApp={onOpenApp} onOpenSurface={onOpenSurface} />;
     }
     return null;
   };
@@ -313,20 +316,22 @@ export function GsvConsole({
       navigateSettingsRoute({ view: "overview" });
       return;
     }
-    if (surface === "model-default") {
-      navigateSettingsRoute({ view: "config", kind: "models", select: "default" });
+    // Crew, models, and tasks are promoted nav surfaces — the overview links
+    // open the top-level pages rather than the legacy /settings/* nesting.
+    if (surface === "models" || surface === "model-default") {
+      onOpenSurface?.("models");
       return;
     }
-    if (surface === "models" || surface === "overrides") {
-      navigateSettingsRoute({ view: "config", kind: surface });
+    if (surface === "overrides") {
+      navigateSettingsRoute({ view: "config", kind: "overrides" });
       return;
     }
     if (surface === "crew") {
-      navigateSettingsRoute({ view: "crew" });
+      onOpenSurface?.("crew");
       return;
     }
     if (surface === "tasks") {
-      navigateSettingsRoute({ view: "list", kind: "tasks" });
+      onOpenSurface?.("runtime");
       return;
     }
     if (surface === "new-agent") {
@@ -363,7 +368,7 @@ export function GsvConsole({
     ? [
         { label: "GSV", onClick: onBackToDesktop, notLast: true },
         {
-          label: "SETTINGS",
+          label: "OVERVIEW",
           onClick: inNestedSettings ? () => guardedSettingsNavigate({ view: "overview" }) : undefined,
           notLast: inNestedSettings,
         },
@@ -399,6 +404,14 @@ export function GsvConsole({
         { label: "CREW", onClick: backToCrew, notLast: true },
         { label: shellSurfaceLabel(activeSurface) },
       ]
+    : activeSurface === "models" && settingsConfigDetail
+    ? [
+        // Standalone models surface with an open detail: GSV → MODELS → [detail],
+        // same shape as the settings config trail.
+        { label: "GSV", onClick: onBackToDesktop, notLast: true },
+        { label: shellSurfaceLabel("models"), onClick: settingsConfigDetail.onExit, notLast: true },
+        { label: settingsConfigDetail.label },
+      ]
     : activeSurface === "library" && libraryDetail
     ? [
         // Top-level Library: GSV → LIBRARY (→ index) → [page/view].
@@ -440,6 +453,8 @@ export function GsvConsole({
     ? goLibraryIndex
     : activeSurface === "agent"
     ? backToCrew
+    : activeSurface === "models" && settingsConfigDetail
+    ? settingsConfigDetail.onExit
     : surfaceDetail
     ? clearSurfaceDetail
     : onBackToDesktop;
@@ -492,6 +507,8 @@ export function GsvConsole({
           )
         ) : activeSurface === "runtime" ? (
           <RuntimePage key={surfaceDetailSeq} onNewTask={onNewTask ?? onOpenChat} onSelectionChange={setSurfaceDetail} />
+        ) : activeSurface === "models" ? (
+          <ConsoleConfigPage kind="models" onDetailChange={setSettingsConfigDetail} />
         ) : activeSurface === "crew" ? (
           <ConsoleCrewPage onManageAgent={openAgent} onCreateAgent={openNewAgent} />
         ) : activeSurface === "agent" ? (
@@ -508,7 +525,7 @@ export function GsvConsole({
         ) : activeSurface === "integrations" ? (
           <IntegrationsPage key={surfaceDetailSeq} onSelectionChange={setSurfaceDetail} />
         ) : activeSurface === "applications" ? (
-          <PackageListPage key={surfaceDetailSeq} kind="applications" onOpenApp={onOpenApp} onSelectionChange={setSurfaceDetail} />
+          <PackageListPage key={surfaceDetailSeq} kind="applications" onOpenApp={onOpenApp} onOpenSurface={onOpenSurface} onSelectionChange={setSurfaceDetail} />
         ) : activeSurface === "library" ? (
           <LibraryPage
             route={libraryRoute}
diff --git a/web/src/app/features/gsv-console/connect-flows/applicationConnectMock.tsx b/web/src/app/features/gsv-console/connect-flows/applicationConnectMock.tsx
index 336157327..c99ebd573 100644
--- a/web/src/app/features/gsv-console/connect-flows/applicationConnectMock.tsx
+++ b/web/src/app/features/gsv-console/connect-flows/applicationConnectMock.tsx
@@ -6,7 +6,7 @@ import { Tag } from "../../../components/ui/Tag";
 import { TextInput } from "../../../components/ui/TextInput";
 import type { ConnectFlowDef } from "./connectFlowTypes";
 
-// Static mock of the real 2-step "Add application" import → review → enable
+// Static mock of the real 2-step "Connect application" import → review → enable
 // wizard (see packages/ApplicationImportFlow.tsx). No hooks/mutations — the
 // footer buttons just drive the shared connect-flow stepper. Running example:
 // a "Weather" web-ui package from team/weather.
@@ -15,14 +15,14 @@ export const applicationConnectFlow: ConnectFlowDef = {
   navLabel: "APPLICATIONS",
   parentLabel: "APPLICATIONS",
   icon: "satellite",
-  title: "Add application",
+  title: "Connect application",
   blurb:
     "Import a package from a public repo, review it, then enable it · git-clone, agent review, install.",
   steps: [
     {
       key: "import",
       label: "IMPORT",
-      title: "IMPORT FROM REPO",
+      title: "CONNECT FROM REPO",
       meta: "STEP 1 / 2",
       status: "NOT IMPORTED",
       tone: "idle",
@@ -75,7 +75,7 @@ export const applicationConnectFlow: ConnectFlowDef = {
           <div class="gsv-cf-footer">
             <Button variant="secondary" label="CANCEL" onClick={nav.onBack} />
             <span class="gsv-cf-footer-spacer" />
-            <Button variant="primary" label="IMPORT APPLICATION" onClick={nav.onNext} />
+            <Button variant="primary" label="+ CONNECT APPLICATION" onClick={nav.onNext} />
           </div>
         </>
       ),
@@ -123,7 +123,7 @@ export const applicationConnectFlow: ConnectFlowDef = {
           <div class="gsv-cf-footer">
             <Button variant="secondary" label="BACK" onClick={nav.onBack} />
             <span class="gsv-cf-footer-spacer" />
-            <Button variant="secondary" label="IMPORT WITHOUT ENABLING" />
+            <Button variant="secondary" label="CONNECT WITHOUT ENABLING" />
             <Button variant="primary" label="APPROVE & ENABLE" />
           </div>
         </>
diff --git a/web/src/app/features/gsv-console/integrations/IntegrationOnboardingFlow.tsx b/web/src/app/features/gsv-console/integrations/IntegrationOnboardingFlow.tsx
index 8f74de21e..8ba7636d3 100644
--- a/web/src/app/features/gsv-console/integrations/IntegrationOnboardingFlow.tsx
+++ b/web/src/app/features/gsv-console/integrations/IntegrationOnboardingFlow.tsx
@@ -101,7 +101,7 @@ function HeaderFields({
         </div>
       ))}
       <div class="gsv-integration-header-actions">
-        <Button variant="secondary" label="ADD HEADER" onClick={onAdd} />
+        <Button variant="secondary" label="+ ADD HEADER" onClick={onAdd} />
       </div>
     </div>
   );
diff --git a/web/src/app/features/gsv-console/integrations/IntegrationsPage.tsx b/web/src/app/features/gsv-console/integrations/IntegrationsPage.tsx
index f0ae9b4a2..bb2e02011 100644
--- a/web/src/app/features/gsv-console/integrations/IntegrationsPage.tsx
+++ b/web/src/app/features/gsv-console/integrations/IntegrationsPage.tsx
@@ -71,7 +71,7 @@ function IntegrationsConsoleSection({
       listMeta={refreshing ? "REFRESHING" : `${ready.length}/${servers.length} READY`}
       emptyObject="INTEGRATIONS"
       rows={rows}
-      connectLabel="NEW INTEGRATION"
+      connectLabel="+ CONNECT NEW INTEGRATION"
       onConnect={onOpenCreate}
       search={{ value: query, placeholder: "Search integrations…", onChange: setQuery }}
     />
diff --git a/web/src/app/features/gsv-console/library/LibraryPage.tsx b/web/src/app/features/gsv-console/library/LibraryPage.tsx
index ca19d0609..0da264886 100644
--- a/web/src/app/features/gsv-console/library/LibraryPage.tsx
+++ b/web/src/app/features/gsv-console/library/LibraryPage.tsx
@@ -197,7 +197,7 @@ function LibraryCollectionBar({ library }: { library: LibraryRuntime }) {
         <div class="gsv-library-collection-actions">
           <Button
             variant="primary"
-            label={library.createCollectionOpen ? "CLOSE" : "NEW COLLECTION"}
+            label={library.createCollectionOpen ? "CLOSE" : "+ NEW COLLECTION"}
             onClick={() => library.createCollectionOpen
               ? library.closeCreateCollection()
               : library.setCreateCollectionOpen(true)}
diff --git a/web/src/app/features/gsv-console/list-template/ListTemplateMockPage.tsx b/web/src/app/features/gsv-console/list-template/ListTemplateMockPage.tsx
index 68742c6ca..4cc0a1335 100644
--- a/web/src/app/features/gsv-console/list-template/ListTemplateMockPage.tsx
+++ b/web/src/app/features/gsv-console/list-template/ListTemplateMockPage.tsx
@@ -27,7 +27,7 @@ const MOCK_SURFACES: readonly MockSurface[] = [
     key: "machines",
     listTitle: "MACHINES",
     emptyObject: "MACHINES",
-    connectLabel: "CONNECT NEW MACHINE",
+    connectLabel: "+ CONNECT NEW MACHINE",
     connect: { kind: "section", section: "machines" },
     state: "ONLINE",
     rows: [
@@ -40,7 +40,7 @@ const MOCK_SURFACES: readonly MockSurface[] = [
     key: "integrations",
     listTitle: "INTEGRATIONS",
     emptyObject: "INTEGRATIONS",
-    connectLabel: "NEW INTEGRATION",
+    connectLabel: "+ CONNECT NEW INTEGRATION",
     connect: { kind: "section", section: "integrations" },
     state: "READY",
     rows: [
@@ -53,7 +53,7 @@ const MOCK_SURFACES: readonly MockSurface[] = [
     key: "tasks",
     listTitle: "TASKS",
     emptyObject: "TASKS",
-    connectLabel: "NEW TASK",
+    connectLabel: "+ NEW TASK",
     connect: { kind: "chat" },
     state: "ACTIVE",
     rows: [
diff --git a/web/src/app/features/gsv-console/machines/MachinesPage.tsx b/web/src/app/features/gsv-console/machines/MachinesPage.tsx
index 2ce3419ff..40ee81985 100644
--- a/web/src/app/features/gsv-console/machines/MachinesPage.tsx
+++ b/web/src/app/features/gsv-console/machines/MachinesPage.tsx
@@ -65,7 +65,7 @@ function MachinesConsoleSection({
       listMeta={refreshing ? "REFRESHING" : `${onlineCount}/${targets.length} ONLINE`}
       emptyObject="MACHINES"
       rows={rows}
-      connectLabel="CONNECT NEW MACHINE"
+      connectLabel="+ CONNECT NEW MACHINE"
       onConnect={onOpenCreate}
       search={{ value: query, placeholder: "Search machines…", onChange: setQuery }}
     />
diff --git a/web/src/app/features/gsv-console/packages/ApplicationImportFlow.tsx b/web/src/app/features/gsv-console/packages/ApplicationImportFlow.tsx
index fe83b7688..3b9285167 100644
--- a/web/src/app/features/gsv-console/packages/ApplicationImportFlow.tsx
+++ b/web/src/app/features/gsv-console/packages/ApplicationImportFlow.tsx
@@ -244,7 +244,7 @@ export function ApplicationImportFlow({
         <span class="gsv-cf-footer-spacer" />
         <Button
           variant="primary"
-          label={flow.importMutation.isPending ? "IMPORTING" : "IMPORT APPLICATION"}
+          label={flow.importMutation.isPending ? "CONNECTING" : "+ CONNECT APPLICATION"}
           disabled={!importReady || flow.importMutation.isPending}
           onClick={handleImport}
         />
@@ -339,7 +339,7 @@ export function ApplicationImportFlow({
           <span class="gsv-cf-footer-spacer" />
           <Button
             variant="secondary"
-            label="IMPORT WITHOUT ENABLING"
+            label="CONNECT WITHOUT ENABLING"
             disabled={!pkg || flow.enableMutation.isPending}
             onClick={() => openImportedPackage(pkg)}
           />
@@ -370,14 +370,14 @@ export function ApplicationImportFlow({
     navLabel: "APPLICATIONS",
     parentLabel: "APPLICATIONS",
     icon: "satellite",
-    title: "Add application",
+    title: "Connect application",
     blurb:
       "Import a package from a public repo, review it, then enable it · git-clone, agent review, install.",
     steps: [
       {
         key: "import",
         label: APPLICATION_IMPORT_STEP_LABELS[0],
-        title: "IMPORT PACKAGE",
+        title: "CONNECT PACKAGE",
         meta: "STEP 1 / 2",
         status: "NOT IMPORTED",
         tone: "idle",
diff --git a/web/src/app/features/gsv-console/packages/PackageListPage.tsx b/web/src/app/features/gsv-console/packages/PackageListPage.tsx
index 49f228138..5408aace7 100644
--- a/web/src/app/features/gsv-console/packages/PackageListPage.tsx
+++ b/web/src/app/features/gsv-console/packages/PackageListPage.tsx
@@ -10,6 +10,10 @@ import {
   type PackageListKind,
 } from "../domain/consoleListTypes";
 import type { ConsolePackage, ConsoleResourceState } from "../domain/consoleModels";
+import {
+  NATIVE_APP_ENTRIES,
+  type NativeAppSurfaceId,
+} from "../../gsv-shell/domain/shellModel";
 import { useConsolePackages } from "../hooks/useConsoleData";
 import { useConsoleListSelection } from "../hooks/useConsoleListSelection";
 import { ApplicationImportFlow } from "./ApplicationImportFlow";
@@ -30,6 +34,8 @@ type PackageListPageProps = {
   initialDetailLabel?: string | null;
   kind: PackageListKind;
   onOpenApp?: (appId: string, title?: string) => void;
+  /** Opens a native app surface (FILES, LIBRARY, TERMINAL, REPOS row click). */
+  onOpenSurface?: (surface: NativeAppSurfaceId) => void;
   onSelectionChange?: (selection: ConsoleListSelection | null) => void;
 };
 
@@ -45,12 +51,14 @@ function PackageConsoleSection({
   kind,
   onOpenCreate,
   onOpenDetail,
+  onOpenSurface,
   packages,
   refreshing,
 }: {
   kind: PackageListKind;
   onOpenCreate?: () => void;
   onOpenDetail: (pkg: ConsolePackage) => void;
+  onOpenSurface?: (surface: NativeAppSurfaceId) => void;
   packages: readonly ConsolePackage[];
   refreshing: boolean;
 }) {
@@ -62,19 +70,40 @@ function PackageConsoleSection({
   const noun = packageListNoun(kind);
   const rows = useMemo(() => {
     const q = query.trim().toLowerCase();
-    return packages
+    // Native GSV apps lead the list, unlabeled; the count in the header stays
+    // a package count (natives are surfaces, not packages).
+    const nativeRows = kind === "applications"
+      ? NATIVE_APP_ENTRIES
+          .filter((entry) => !q || entry.label.toLowerCase().includes(q))
+          .map((entry) => ({
+            id: `native:${entry.surface}`,
+            icon: entry.icon,
+            label: entry.label,
+            sub: entry.blurb,
+            tone: "online" as const,
+            statusLabel: "SYSTEM",
+            onOpen: onOpenSurface ? () => onOpenSurface(entry.surface) : undefined,
+          }))
+      : [];
+    // Imported packages carry the EXTERNAL marker (a pending review keeps the
+    // tag slot — that state is actionable) and PUBLIC/PRIVATE provenance in
+    // the sub line.
+    const packageRows = packages
       .filter((pkg) => !q || pkg.name.toLowerCase().includes(q))
       .map((pkg) => ({
         id: pkg.packageId,
         icon: iconForPackage(pkg, kind),
         label: pkg.name,
-        sub: packageSub(pkg),
+        sub: `${packageSub(pkg)} · ${pkg.sourcePublic ? "PUBLIC" : "PRIVATE"}`,
         tone: toneForPackage(pkg),
         statusLabel: statusForPackage(pkg),
-        tag: pkg.reviewPending ? { label: "UPDATE", tone: "update" as const } : undefined,
+        tag: pkg.reviewPending
+          ? { label: "UPDATE", tone: "update" as const }
+          : { label: "EXTERNAL", tone: "info" as const },
         onOpen: () => onOpenDetail(pkg),
       }));
-  }, [packages, query, kind, onOpenDetail]);
+    return [...nativeRows, ...packageRows];
+  }, [packages, query, kind, onOpenDetail, onOpenSurface]);
 
   return (
     <ListTemplate
@@ -82,7 +111,7 @@ function PackageConsoleSection({
       listMeta={refreshing ? "REFRESHING" : `${packages.length} ${noun}${packages.length === 1 ? "" : "S"}`}
       emptyObject={`${noun}S`}
       rows={rows}
-      connectLabel={`NEW ${noun}`}
+      connectLabel={`+ CONNECT NEW ${noun}`}
       onConnect={onOpenCreate}
       search={{ value: query, placeholder: `Search ${noun.toLowerCase()}s…`, onChange: setQuery }}
     />
@@ -106,6 +135,7 @@ export function PackageListPage({
   initialDetailLabel = null,
   kind,
   onOpenApp,
+  onOpenSurface,
   onSelectionChange,
 }: PackageListPageProps) {
   const packages = useConsolePackages({ enabled: true });
@@ -150,6 +180,7 @@ export function PackageListPage({
                 ? () => selectDetail({ kind, id: NEW_DETAIL_ID, createNew: true })
                 : undefined}
               onOpenDetail={(pkg) => selectDetail({ kind, id: pkg.packageId, label: pkg.name })}
+              onOpenSurface={onOpenSurface}
               packages={scopedPackages}
               refreshing={packages.resource.isRefreshing}
             />
diff --git a/web/src/app/features/gsv-console/pages/ConsoleCrewPage.tsx b/web/src/app/features/gsv-console/pages/ConsoleCrewPage.tsx
index 891f6aecf..c048acefe 100644
--- a/web/src/app/features/gsv-console/pages/ConsoleCrewPage.tsx
+++ b/web/src/app/features/gsv-console/pages/ConsoleCrewPage.tsx
@@ -126,7 +126,7 @@ function CrewRoster({
       listMeta={crewMeta}
       emptyObject="CREW"
       isEmpty={visibleCards.length === 0}
-      connectLabel={onCreateAgent ? "NEW AGENT" : undefined}
+      connectLabel={onCreateAgent ? "+ NEW AGENT" : undefined}
       onConnect={onCreateAgent}
       search={{ value: query, placeholder: "Search crew…", onChange: setQuery }}
     >
diff --git a/web/src/app/features/gsv-console/pages/ConsoleOverviewPanels.tsx b/web/src/app/features/gsv-console/pages/ConsoleOverviewPanels.tsx
index 904183444..537d0c7f4 100644
--- a/web/src/app/features/gsv-console/pages/ConsoleOverviewPanels.tsx
+++ b/web/src/app/features/gsv-console/pages/ConsoleOverviewPanels.tsx
@@ -741,7 +741,7 @@ function FleetPanel({
             {integrationRows.length === 0 ? <EmptyRow label="NO INTEGRATIONS" /> : rowLimit(integrationRows, 2).map((row) => (
               <MiniRow key={row.id} row={row} onClick={openDetail("integrations", row, "integrations")} />
             ))}
-            <AddRow label="NEW INTEGRATION" onClick={openCreate("integrations", "integrations")} />
+            <AddRow label="CONNECT NEW INTEGRATION" onClick={openCreate("integrations", "integrations")} />
           </div>
         )}
       />
@@ -779,7 +779,7 @@ function ApplicationsPanel({
         {rows.length === 0 ? <EmptyRow label="NO APPLICATIONS" /> : rowLimit(rows, 5).map((row) => (
           <MiniRow key={row.id} row={row} onClick={openDetail(row)} />
         ))}
-        <AddRow label="NEW APPLICATION" onClick={openCreate} />
+        <AddRow label="CONNECT NEW APPLICATION" onClick={openCreate} />
       </div>
     </section>
   );
@@ -805,7 +805,7 @@ export function SettingsOverviewDashboard({
 
   return (
     <div class="gsv-settings-overview-frame">
-      <div class="gsv-settings-overview" aria-label="GSV settings overview">
+      <div class="gsv-settings-overview" aria-label="GSV overview">
         <div class="gsv-settings-left">
         <ShipPanel
           config={data.config}
diff --git a/web/src/app/features/gsv-console/runtime/RuntimePage.tsx b/web/src/app/features/gsv-console/runtime/RuntimePage.tsx
index db21ea3b3..45202178d 100644
--- a/web/src/app/features/gsv-console/runtime/RuntimePage.tsx
+++ b/web/src/app/features/gsv-console/runtime/RuntimePage.tsx
@@ -63,7 +63,7 @@ function RuntimeConsoleSection({
       listMeta={refreshing ? "REFRESHING" : `${processes.filter(isActiveProcess).length}/${processes.length} ACTIVE`}
       emptyObject="TASKS"
       rows={rows}
-      connectLabel="NEW TASK"
+      connectLabel="+ NEW TASK"
       onConnect={onNewTask}
       search={{ value: query, placeholder: "Search tasks…", onChange: setQuery }}
     />
diff --git a/web/src/app/features/gsv-shell/GsvShell.tsx b/web/src/app/features/gsv-shell/GsvShell.tsx
index 47557ea6d..20c09d3bd 100644
--- a/web/src/app/features/gsv-shell/GsvShell.tsx
+++ b/web/src/app/features/gsv-shell/GsvShell.tsx
@@ -1,7 +1,5 @@
 import type { JSX } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { IconMenu } from "../../components/ui/IconMenu";
-import { StatusDot } from "../../components/ui/StatusDot";
 import type { StatusTone } from "../../components/ui/StatusDot";
 import { AppFramePage } from "../apps/components/AppFramePage";
 import { ChatDock, type StartedChatProcess } from "../chat/components/ChatDock";
@@ -18,10 +16,7 @@ import type {
 } from "../gsv-console/domain/consoleModels";
 import { useConsoleConfig, useConsoleOverview } from "../gsv-console/hooks/useConsoleData";
 import type { NotificationSurface } from "../notifications/types";
-import {
-  GsvConsole,
-  type SettingsRouteTarget,
-} from "../gsv-console/components/GsvConsole";
+import { GsvConsole } from "../gsv-console/components/GsvConsole";
 import { GsvDesktop, type DesktopInventoryState } from "./desktop/GsvDesktop";
 import { ShellRail } from "./navigation/ShellRail";
 import { ShellStatusBar } from "./navigation/ShellStatusBar";
@@ -33,6 +28,7 @@ import {
   type ShellSettingsRoute,
   type ShellSurfaceId,
 } from "./domain/shellModel";
+import { isConsoleAgentAccount } from "../gsv-console/domain/agentPresentation";
 import { buildShellChatAgent } from "./domain/chatAgentModel";
 import { buildDesktopObjectsFromConsole } from "./domain/desktopObjects";
 import { useGsvShellState } from "./hooks/useGsvShellState";
@@ -152,19 +148,6 @@ function CollapsedDesktop() {
   );
 }
 
-function shellSettingsRouteForTarget(target: SettingsRouteTarget): ShellSettingsRoute {
-  if (target === "overview") {
-    return { view: "overview" };
-  }
-  if (target === "crew") {
-    return { view: "crew" };
-  }
-  if (target === "tasks") {
-    return { view: "list", kind: "tasks" };
-  }
-  return { view: "config", kind: target };
-}
-
 export function GsvShell({
   notificationOpenSurface,
   notificationUnreadCount,
@@ -186,6 +169,11 @@ export function GsvShell({
     () => buildDesktopObjectsFromConsole(consoleOverview.data),
     [consoleOverview.data],
   );
+  // Crew agents (machine accounts) for the desktop HUD count.
+  const agentCount = useMemo(
+    () => (consoleOverview.data?.accounts ?? []).filter(isConsoleAgentAccount).length,
+    [consoleOverview.data],
+  );
   const inventoryState = desktopInventoryState(consoleOverview.resource);
   const inventoryMessage = desktopInventoryMessage(consoleOverview.resource, desktopObjects);
   const shell = useGsvShellState({ rootRef, desktopObjects });
@@ -351,9 +339,6 @@ export function GsvShell({
   const guardedBackToDesktop = (): void => {
     guard.requestLeave(shell.backToDesktop);
   };
-  const guardedRevealDesktop = (): void => {
-    guard.requestLeave(shell.revealDesktop);
-  };
   const closeActiveScreen = (): void => {
     guard.requestLeave(shell.closeActiveScreen);
   };
@@ -363,9 +348,6 @@ export function GsvShell({
   const createSectionObject = (section: DesktopObjectId): void => {
     guard.requestLeave(() => shell.openSettingsRoute({ view: "list", kind: section, createNew: true }));
   };
-  const openSettingsRoute = (target: SettingsRouteTarget): void => {
-    guard.requestLeave(() => shell.openSettingsRoute(shellSettingsRouteForTarget(target)));
-  };
   const openAppById = (appId: string, title?: string): void => {
     guard.requestLeave(() => shell.openAppRoute({
       appId,
@@ -374,6 +356,38 @@ export function GsvShell({
       hash: "",
     }, title));
   };
+  // Rail-originated navigation collapses the rail back to its default: the
+  // expanded rail is a transient reveal menu — pick a destination, it closes.
+  // The collapse rides inside the guarded callback so cancelling an unsaved-
+  // changes prompt leaves the rail open.
+  const railOpenSurface = (surface: ShellSurfaceId): void => {
+    guard.requestLeave(() => {
+      shell.openSurface(surface);
+      shell.collapseRail();
+    });
+  };
+  const railOpenObject = (child: Parameters<typeof shell.openObject>[0]): void => {
+    guard.requestLeave(() => {
+      shell.openObject(child);
+      shell.collapseRail();
+    });
+  };
+  const railCreateObject = (section: DesktopObjectId): void => {
+    guard.requestLeave(() => {
+      shell.openSettingsRoute({ view: "list", kind: section, createNew: true });
+      shell.collapseRail();
+    });
+  };
+  const railBackToDesktop = (): void => {
+    guard.requestLeave(() => {
+      if (shell.desktopCollapsed) {
+        shell.revealDesktop();
+      } else {
+        shell.backToDesktop();
+      }
+      shell.collapseRail();
+    });
+  };
   const activeSettingsRoute: ShellSettingsRoute = shell.activeSurface === "settings"
     ? shell.activePageTab?.settingsRoute ?? { view: "overview" }
     : { view: "overview" };
@@ -408,11 +422,11 @@ export function GsvShell({
     // which would be a no-op there. (On the home menu the control is hidden via
     // CSS, since there is nothing to return to behind it.)
     onToggleCollapsed: shell.mobileLayout ? shell.closeMobilePanels : shell.toggleRailCollapsed,
-    onBackToDesktop: shell.desktopCollapsed ? guardedRevealDesktop : guardedBackToDesktop,
-    onOpenControlMenu: shell.openControlMenu,
-    onOpenSurface: openShellSurface,
-    onOpenObject: guardedOpenObject,
-    onCreateObject: createSectionObject,
+    onBackToDesktop: railBackToDesktop,
+    canExpand: !shell.autoRailCollapsed,
+    onOpenSurface: railOpenSurface,
+    onOpenObject: railOpenObject,
+    onCreateObject: railCreateObject,
   };
 
   // Mobile layout: the center panel is the home screen; the menu (rail) and chat
@@ -547,19 +561,13 @@ export function GsvShell({
               <>
                 <GsvDesktop
                   desktopObjects={desktopObjects}
+                  agentCount={agentCount}
                   inventoryMessage={inventoryMessage}
                   inventoryState={inventoryState}
                   selectedObjectId={shell.selectedObjectId}
-                  gsvOpen={shell.gsvOpen}
                   onSelectObject={(id) => {
                     shell.setSelectedObjectId(id);
-                    shell.setGsvOpen(false);
-                  }}
-                  onToggleGsv={() => {
-                    shell.setGsvOpen((value) => !value);
-                    shell.setSelectedObjectId(null);
                   }}
-                  onCloseGsv={() => shell.setGsvOpen(false)}
                   onCreateObject={(id) => {
                     shell.openSettingsRoute({ view: "list", kind: id, createNew: true });
                   }}
@@ -572,44 +580,6 @@ export function GsvShell({
               </>
             )}
 
-            {shell.pickerId ? (
-              <div
-                class={`gsv-picker-overlay${shell.pickerId === "gsv" ? " is-control-picker" : ""}`}
-                role="dialog"
-                aria-modal="true"
-                aria-label={shell.pickerTitle}
-                onClick={() => shell.setPickerId(null)}
-              >
-                <div class="gsv-picker-panel" onClick={(event) => event.stopPropagation()}>
-                  <header>
-                    <div>
-                      <span>{shell.pickerTitle}</span>
-                      <small>
-                        <StatusDot tone="online" size={7} />
-                        {shell.pickerSubtitle}
-                      </small>
-                    </div>
-                    <button type="button" onClick={() => shell.setPickerId(null)} aria-label="Close picker">
-                      x
-                    </button>
-                  </header>
-                  {shell.pickerId === "gsv" ? (
-                    <div class="gsv-picker-control">
-                      <IconMenu
-                        title="GSV // CONTROL"
-                        width={386}
-                        onClose={() => shell.setPickerId(null)}
-                        onFiles={() => openShellSurface("files")}
-                        onRepositories={() => openShellSurface("repositories")}
-                        onLibrary={() => openShellSurface("library")}
-                        onTerminal={() => openShellSurface("terminal")}
-                        onSettings={() => openShellSurface("settings")}
-                      />
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-            ) : null}
           </section>
         </main>
 
@@ -624,9 +594,9 @@ export function GsvShell({
           onResizeStart={shell.startChatDrag}
           onToggleOpen={() => shell.setChatOpen((value) => !value)}
           onToggleMax={shell.toggleChatMax}
-          onOpenCrew={() => openSettingsRoute("crew")}
-          onOpenModels={() => openSettingsRoute("models")}
-          onOpenTasks={() => openSettingsRoute("tasks")}
+          onOpenCrew={() => openShellSurface("crew")}
+          onOpenModels={() => openShellSurface("models")}
+          onOpenTasks={() => openShellSurface("runtime")}
           onProcessStarted={selectStartedChatProcess}
           onSelectConversation={setSelectedChatConversationId}
           title={activeChatProcess?.title ?? "Chat"}
diff --git a/web/src/app/features/gsv-shell/desktop/GsvDesktop.tsx b/web/src/app/features/gsv-shell/desktop/GsvDesktop.tsx
index 3cd12382a..49065a601 100644
--- a/web/src/app/features/gsv-shell/desktop/GsvDesktop.tsx
+++ b/web/src/app/features/gsv-shell/desktop/GsvDesktop.tsx
@@ -3,9 +3,10 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { AddAction } from "../../../components/ui/AddAction";
 import { GsvMark } from "../../../components/ui/GsvMark";
 import { DesktopHint } from "./DesktopHint";
-import { IconMenu } from "../../../components/ui/IconMenu";
+import { Icon } from "../../../components/ui/Icon";
 import { ObjectCard } from "../../../components/ui/ObjectCard";
 import { StatusDot } from "../../../components/ui/StatusDot";
+import { Tag } from "../../../components/ui/Tag";
 import { Tile } from "../../../components/ui/Tile";
 import {
   type DesktopChildObject,
@@ -17,18 +18,17 @@ import {
 
 export type DesktopInventoryState = "ready" | "loading" | "offline" | "error";
 
-const DESKTOP_HINT = ["> CLICK A NODE TO EXPLORE", "> CLICK GSV FOR CONTROLS"];
-const DESKTOP_HINT_MIN = "CLICK A NODE TO EXPLORE · CLICK GSV FOR CONTROLS";
+const DESKTOP_HINT = ["> CLICK A NODE TO EXPLORE", "> CLICK GSV FOR SHIP OVERVIEW"];
+const DESKTOP_HINT_MIN = "CLICK A NODE TO EXPLORE · CLICK GSV FOR SHIP OVERVIEW";
 
 type GsvDesktopProps = {
   desktopObjects: readonly DesktopObject[];
+  /** Crew agents (machine accounts) — shown in the HUD beside the machine count. */
+  agentCount: number;
   inventoryMessage: string;
   inventoryState: DesktopInventoryState;
   selectedObjectId: DesktopObjectId | null;
-  gsvOpen: boolean;
   onSelectObject: (id: DesktopObjectId | null) => void;
-  onToggleGsv: () => void;
-  onCloseGsv: () => void;
   onCreateObject: (id: DesktopObjectId) => void;
   onOpenObject: (child: DesktopChildObject) => void;
   onOpenSurface: (surface: ShellSurfaceId) => void;
@@ -87,33 +87,33 @@ function addObjectLabel(id: DesktopObjectId): string {
     return "CONNECT NEW MACHINE";
   }
   if (id === "integrations") {
-    return "NEW INTEGRATION";
+    return "CONNECT NEW INTEGRATION";
   }
-  return "NEW APPLICATION";
+  return "CONNECT NEW APPLICATION";
 }
 
-function inventoryTitle(state: DesktopInventoryState, totalObjects: number): string {
-  if (state === "loading") {
-    return "GSV · LOADING";
-  }
+/** HUD title while the live inventory is not ready (ready shows counts). */
+function inventoryTitle(state: DesktopInventoryState): string {
   if (state === "offline") {
     return "GSV · OFFLINE";
   }
   if (state === "error") {
     return "GSV · ERROR";
   }
-  return `GSV · ${totalObjects} OBJECTS`;
+  return "GSV · LOADING";
+}
+
+function countLine(count: number, noun: string): string {
+  return `${count} ${noun}${count === 1 ? "" : "S"}`;
 }
 
 export function GsvDesktop({
   desktopObjects,
+  agentCount,
   inventoryMessage,
   inventoryState,
   selectedObjectId,
-  gsvOpen,
   onSelectObject,
-  onToggleGsv,
-  onCloseGsv,
   onCreateObject,
   onOpenObject,
   onOpenSurface,
@@ -137,42 +137,15 @@ export function GsvDesktop({
     ? desktopObjects.find((object) => object.id === activeObjectId) ?? null
     : null;
 
-  // Hovering the GSV mark previews the controls; clicking persists them. A short
-  // grace delay lets the pointer travel from the mark into the popover.
-  const [gsvHovered, setGsvHovered] = useState(false);
-  const gsvHoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const openGsvHover = () => {
-    if (gsvHoverTimer.current) clearTimeout(gsvHoverTimer.current);
-    setGsvHovered(true);
-  };
-  const closeGsvHover = () => {
-    if (gsvHoverTimer.current) clearTimeout(gsvHoverTimer.current);
-    gsvHoverTimer.current = setTimeout(() => setGsvHovered(false), 140);
-  };
-  const closeGsvControls = () => {
-    if (gsvHoverTimer.current) clearTimeout(gsvHoverTimer.current);
-    setGsvHovered(false);
-    // Idempotent close — not the functional toggle. Outside-click also calls
-    // onSelectObject(null), which already clears gsvOpen in the parent; a toggle
-    // here would flip it back open within the same batched update.
-    if (gsvOpen) onCloseGsv();
-  };
-  useEffect(() => () => {
-    if (gsvHoverTimer.current) clearTimeout(gsvHoverTimer.current);
-  }, []);
-  const gsvActive = gsvOpen || gsvHovered;
-
   const branchCount = Math.max(desktopObjects.length, 1);
-  const totalObjects = desktopObjects.reduce((sum, object) => sum + object.children.length, 0);
-  const desktopStateClass = `${selectedObject ? " has-selected-object" : ""}${gsvOpen ? " has-gsv-open" : ""}`;
+  const machineCount = desktopObjects.find((object) => object.id === "machines")?.children.length ?? 0;
+  const desktopStateClass = selectedObject ? " has-selected-object" : "";
   const inventoryReady = inventoryState === "ready";
   const hudStatus = selectedObject
     ? selectedObject.statusLabel
-    : gsvOpen
-      ? "GSV / CONTROL"
-      : inventoryReady
-        ? "SYSTEM MAP"
-        : inventoryState.toUpperCase();
+    : inventoryReady
+      ? "SYSTEM MAP"
+      : inventoryState.toUpperCase();
 
   // When a node is selected, settle the view so its objects are readable: scroll
   // up to centre the strip, but never past the point where the tiles row sits at
@@ -253,7 +226,6 @@ export function GsvDesktop({
       aria-label="GSV desktop"
       onClick={() => {
         onSelectObject(null);
-        closeGsvControls();
       }}
     >
       <div class="gsv-space-grid" aria-hidden="true" />
@@ -264,11 +236,19 @@ export function GsvDesktop({
       <header class="gsv-space-hud">
         <div>
           <span>DESKTOP // GSV</span>
-          <strong>{selectedObject ? `GSV / ${selectedObject.label}` : inventoryTitle(inventoryState, totalObjects)}</strong>
+          <strong>
+            {selectedObject
+              ? `GSV / ${selectedObject.label}`
+              : inventoryReady
+                ? countLine(machineCount, "MACHINE")
+                : inventoryTitle(inventoryState)}
+          </strong>
           <small>
             {selectedObject
               ? `${selectedObject.meta} · ${selectedObject.statusLabel}`
-              : inventoryMessage}
+              : inventoryReady
+                ? countLine(agentCount, "AGENT")
+                : inventoryMessage}
           </small>
         </div>
         <p>{hudStatus}</p>
@@ -279,17 +259,14 @@ export function GsvDesktop({
             bubble to the section handler to deselect. Interactive children below
             stop propagation so they don't trigger a deselect. */}
         <div class="gsv-space-tree">
-          <div
-            class="gsv-space-gsv"
-            onMouseEnter={openGsvHover}
-            onMouseLeave={closeGsvHover}
-          >
+          <div class="gsv-space-gsv">
             <button
               type="button"
-              class={`gsv-space-gsv-button${gsvActive ? " is-open" : ""}`}
+              class="gsv-space-gsv-button"
+              title="SHIP OVERVIEW"
               onClick={(event) => {
                 event.stopPropagation();
-                onToggleGsv();
+                onOpenSurface("settings");
               }}
             >
               <span class="gsv-space-gsv-cross" aria-hidden="true" />
@@ -298,35 +275,10 @@ export function GsvDesktop({
             <div class="gsv-space-gsv-label gsv-section">GSV</div>
           </div>
 
-          {gsvActive ? (
-            <>
-              <span class="gsv-space-control-line" aria-hidden="true" />
-              <div
-                class="gsv-space-control-popover"
-                aria-label="GSV controls"
-                onMouseEnter={openGsvHover}
-                onMouseLeave={closeGsvHover}
-                onClick={(event) => event.stopPropagation()}
-              >
-                <IconMenu
-                  title="GSV // CONTROL"
-                  width={386}
-                  autoFocus={gsvOpen}
-                  onClose={closeGsvControls}
-                  onFiles={() => onOpenSurface("files")}
-                  onRepositories={() => onOpenSurface("repositories")}
-                  onLibrary={() => onOpenSurface("library")}
-                  onTerminal={() => onOpenSurface("terminal")}
-                  onSettings={() => onOpenSurface("settings")}
-                />
-              </div>
-            </>
-          ) : null}
-
           {inventoryReady ? (
             <>
               <div
-                class={`gsv-space-connectors${gsvOpen ? " is-control-open" : ""}`}
+                class="gsv-space-connectors"
                 style={branchCountStyle(branchCount)}
                 aria-hidden="true"
               >
@@ -386,18 +338,50 @@ export function GsvDesktop({
                 {/* No empty state: an object with no children simply shows the
                     "connect new" card below. Messengers always lists Telegram
                     and Discord, so it is never empty. */}
-                {activeObject.children.map((child) => (
-                  <ObjectCard
-                    key={child.id}
-                    label={child.label}
-                    type={child.type}
-                    blurb={child.blurb}
-                    glyph={child.glyph}
-                    status={objectCardStatus(child.status)}
-                    width={236}
-                    onClick={() => onOpenObject(child)}
-                  />
-                ))}
+                {activeObject.children.map((child) => {
+                  // External (imported) applications carry a provenance band
+                  // above the card; native and non-application children keep
+                  // an empty band so card tops stay aligned across the grid.
+                  const external = activeObject.id === "applications" && !child.native;
+                  return (
+                    <div key={child.id} class="gsv-object-strip-item">
+                      <div class="gsv-object-strip-prov">
+                        {external ? (
+                          <>
+                            <Tag label="EXTERNAL" tone="info" boxed />
+                            <Tag
+                              label={child.sourcePublic ? "PUBLIC" : "PRIVATE"}
+                              tone={child.sourcePublic ? "online" : "idle"}
+                              boxed
+                            />
+                            {child.sourceRepo ? (
+                              <span class="gsv-object-strip-prov-repo gsv-sublabel" title={child.sourceRepo}>
+                                {child.sourceRepo}
+                              </span>
+                            ) : null}
+                          </>
+                        ) : null}
+                      </div>
+                      <ObjectCard
+                        label={child.label}
+                        type={child.type}
+                        blurb={child.blurb}
+                        glyph={child.glyph}
+                        icon={child.iconName ? (
+                          <Icon
+                            name={child.iconName}
+                            size={20}
+                            color="var(--accent-bright)"
+                            dotMatrix={child.iconName.startsWith("doticons/") ? 16 : undefined}
+                          />
+                        ) : undefined}
+                        status={objectCardStatus(child.status)}
+                        width={236}
+                        onClick={() => onOpenObject(child)}
+                      />
+                    </div>
+                  );
+                })}
                 {canCreateObject(activeObject.id) ? (
                   <div class="gsv-object-strip-add">
                     <AddAction
diff --git a/web/src/app/features/gsv-shell/domain/desktopObjects.test.ts b/web/src/app/features/gsv-shell/domain/desktopObjects.test.ts
index c323424db..0de25273b 100644
--- a/web/src/app/features/gsv-shell/domain/desktopObjects.test.ts
+++ b/web/src/app/features/gsv-shell/domain/desktopObjects.test.ts
@@ -155,19 +155,61 @@ describe("buildDesktopObjectsFromConsole", () => {
       kind: "integrations",
       detailId: "custom-mcp",
     });
-    expect(objects.find((object) => object.id === "applications")?.children[0]?.route).toEqual({
+    // Applications leads with the four native GSV apps, then imported packages.
+    const applications = objects.find((object) => object.id === "applications");
+    expect(applications?.children).toHaveLength(5);
+    expect(applications?.children.slice(0, 4).map((child) => child.id)).toEqual([
+      "native:files",
+      "native:library",
+      "native:terminal",
+      "native:repositories",
+    ]);
+    expect(applications?.children[0]).toMatchObject({
+      label: "FILES",
+      type: "APPLICATION · GSV",
+      surface: "files",
+      iconName: "folder",
+      native: true,
+      status: "online",
+      statusLabel: "SYSTEM",
+    });
+    expect(applications?.children[0]?.route).toBeUndefined();
+    expect(applications?.children[4]?.route).toEqual({
       kind: "applications",
       detailId: "space-simulation",
     });
-    expect(objects.find((object) => object.id === "applications")?.children[0]?.appRoute).toEqual({
+    // External provenance drives the EXTERNAL / PUBLIC·PRIVATE strip tags.
+    expect(applications?.children[4]).toMatchObject({
+      sourceRepo: "gsv/space-simulation",
+      sourcePublic: true,
+    });
+    expect(applications?.children[0]?.sourceRepo).toBeUndefined();
+    expect(applications?.children[4]?.appRoute).toEqual({
       appId: "Space Simulation",
       suffix: "/",
       search: "",
       hash: "",
     });
-    expect(objects.find((object) => object.id === "applications")?.children).toHaveLength(1);
     expect(objects.find((object) => object.id === "integrations")?.children).toHaveLength(1);
   });
+
+  it("excludes native apps from the applications count and status roll-up", () => {
+    const objects = buildDesktopObjectsFromConsole(overview);
+    const applications = objects.find((object) => object.id === "applications");
+
+    // One imported web package: the meta and status describe it alone, not the
+    // four always-online native apps.
+    expect(applications?.meta).toBe("1 web package");
+    expect(applications?.statusLabel).toBe("1/1 ONLINE");
+    expect(applications?.status).toBe("online");
+
+    const withoutPackages = buildDesktopObjectsFromConsole({ ...overview, packages: [] });
+    const emptyApplications = withoutPackages.find((object) => object.id === "applications");
+    expect(emptyApplications?.children).toHaveLength(4);
+    expect(emptyApplications?.meta).toBe("0 web packages");
+    expect(emptyApplications?.statusLabel).toBe("0 OBJECTS");
+    expect(emptyApplications?.status).toBe("idle");
+  });
 });
 
 describe("shellTabForDesktopChild", () => {
diff --git a/web/src/app/features/gsv-shell/domain/desktopObjects.ts b/web/src/app/features/gsv-shell/domain/desktopObjects.ts
index d6efb6985..fa11d0e54 100644
--- a/web/src/app/features/gsv-shell/domain/desktopObjects.ts
+++ b/web/src/app/features/gsv-shell/domain/desktopObjects.ts
@@ -12,6 +12,7 @@ import type {
   ShellAppRoute,
   ShellStatus,
 } from "./shellModel";
+import { NATIVE_APP_ENTRIES } from "./shellModel";
 import { isNativeWebPackageName } from "../../packages/nativePackages";
 import {
   messengerFamilies,
@@ -111,26 +112,47 @@ export function buildDesktopObjectsFromConsole(data: ConsoleOverviewData | null
     },
     applications: {
       id: "applications",
-      children: applicationChildren,
+      children: [...nativeApplicationChildren(), ...applicationChildren],
     },
   };
 
   return BRANCH_ORDER.map((id) => buildObject(branches[id]));
 }
 
+/** The built-in GSV apps, rendered ahead of imported packages under
+ *  APPLICATIONS. They open system surfaces rather than object details. */
+function nativeApplicationChildren(): DesktopChildObject[] {
+  return NATIVE_APP_ENTRIES.map((entry) => ({
+    id: `native:${entry.surface}`,
+    label: entry.label,
+    type: "APPLICATION · GSV",
+    blurb: entry.blurb,
+    status: "online" as ShellStatus,
+    statusLabel: "SYSTEM",
+    glyph: "applications" as DesktopGlyph,
+    iconName: entry.icon,
+    surface: entry.surface,
+    native: true,
+  }));
+}
+
 function buildObject(branch: DesktopObjectBranch): DesktopObject {
   const spec = SPECS[branch.id];
-  const status = statusForChildren(branch.children);
+  // Native children are fixed system apps: they render in the strip/drawer but
+  // stay out of the count and status roll-up so "N web packages" and the
+  // section dot keep describing the imported inventory.
+  const countable = branch.children.filter((child) => !child.native);
+  const status = statusForChildren(countable);
 
   return {
     id: spec.id,
     label: spec.label,
     glyph: spec.glyph,
-    meta: countLabel(branch.children.length, spec.singular, spec.plural),
+    meta: countLabel(countable.length, spec.singular, spec.plural),
     x: spec.x,
     y: spec.y,
     status,
-    statusLabel: statusLabelForChildren(branch.children),
+    statusLabel: statusLabelForChildren(countable),
     children: branch.children,
   };
 }
@@ -199,6 +221,10 @@ function packageToChild(pkg: ConsolePackage, branchId: PackageBranchId): Desktop
     statusLabel: status.label,
     glyph: branchId,
     appRoute: branchId === "applications" ? appRouteForPackage(pkg) : undefined,
+    // External-application provenance (drives the EXTERNAL / PUBLIC·PRIVATE
+    // tags on the desktop strip cards).
+    sourceRepo: branchId === "applications" ? firstNonEmpty(pkg.sourceRepo) ?? undefined : undefined,
+    sourcePublic: branchId === "applications" ? pkg.sourcePublic === true : undefined,
     route: {
       kind: branchId,
       detailId: pkg.packageId,
diff --git a/web/src/app/features/gsv-shell/domain/shellModel.ts b/web/src/app/features/gsv-shell/domain/shellModel.ts
index d281eafec..523317c2c 100644
--- a/web/src/app/features/gsv-shell/domain/shellModel.ts
+++ b/web/src/app/features/gsv-shell/domain/shellModel.ts
@@ -9,6 +9,7 @@ export type ShellSurfaceId =
   | "integrations"
   | "applications"
   | "runtime"
+  | "models"
   | "files"
   | "repositories"
   | "library"
@@ -77,7 +78,17 @@ export type DesktopChildObject = {
   statusLabel: string;
   glyph: DesktopGlyph;
   appRoute?: ShellAppRoute;
-  route: DesktopChildRoute;
+  /** Object-detail route. Absent on native (surface-backed) children. */
+  route?: DesktopChildRoute;
+  /** Set on native children: the system surface this child opens. */
+  surface?: NativeAppSurfaceId;
+  /** Explicit card/row icon for native children (e.g. folder, terminal). */
+  iconName?: string;
+  /** Native children are fixed system apps — excluded from status/count aggregation. */
+  native?: boolean;
+  /** Provenance for external (imported) applications: source repo + visibility. */
+  sourceRepo?: string;
+  sourcePublic?: boolean;
 };
 
 export type DesktopObject = {
@@ -92,49 +103,41 @@ export type DesktopObject = {
   children: DesktopChildObject[];
 };
 
-export type SystemDockItem = {
-  id: Exclude<ShellSurfaceId, "desktop" | "app" | "agent" | "machines">;
+export type NativeAppSurfaceId = "files" | "library" | "terminal" | "repositories";
+
+export type NativeAppEntry = {
+  surface: NativeAppSurfaceId;
   label: string;
   icon: string;
-  description: string;
+  blurb: string;
 };
 
-export const SYSTEM_DOCK_ITEMS: SystemDockItem[] = [
+/** The built-in GSV apps, listed under APPLICATIONS ahead of imported packages
+ *  (rail subitems, desktop object strip, and the applications list page). */
+export const NATIVE_APP_ENTRIES: NativeAppEntry[] = [
   {
-    id: "files",
+    surface: "files",
     label: "FILES",
     icon: "folder",
-    description: "Ship filesystem, datasets, logs, and build artifacts.",
+    blurb: "Ship filesystem, datasets, logs, and build artifacts.",
   },
   {
-    id: "library",
+    surface: "library",
     label: "LIBRARY",
     icon: "pencil",
-    description: "Repo-backed markdown knowledge, source notes, and durable memory.",
+    blurb: "Repo-backed markdown knowledge, source notes, and durable memory.",
   },
   {
-    id: "terminal",
+    surface: "terminal",
     label: "TERMINAL",
     icon: "terminal",
-    description: "Direct shell access to GSV and connected machines.",
+    blurb: "Direct shell access to GSV and connected machines.",
   },
   {
-    id: "repositories",
+    surface: "repositories",
     label: "REPOS",
     icon: "doticons/branch",
-    description: "Browse ripgit repositories, source history, search, and diffs.",
-  },
-  {
-    id: "settings",
-    label: "SETTINGS",
-    icon: "cog",
-    description: "Crew, machines, integrations, access, and system configuration.",
-  },
-  {
-    id: "crew",
-    label: "CREW",
-    icon: "chat",
-    description: "Agents, models, task ownership, and permissions.",
+    blurb: "Browse ripgit repositories, source history, search, and diffs.",
   },
 ];
 
@@ -148,7 +151,7 @@ export function getDesktopObject(objects: readonly DesktopObject[], id: DesktopO
 export function shellSurfaceLabel(surface: ShellSurfaceId): string {
   switch (surface) {
     case "settings":
-      return "SETTINGS";
+      return "SHIP OVERVIEW";
     case "app":
       return "APP";
     case "crew":
@@ -164,7 +167,9 @@ export function shellSurfaceLabel(surface: ShellSurfaceId): string {
     case "applications":
       return "APPLICATIONS";
     case "runtime":
-      return "RUNTIME";
+      return "TASKS";
+    case "models":
+      return "MODELS";
     case "files":
       return "FILES";
     case "repositories":
@@ -194,7 +199,7 @@ export function shellTabForSurface(surface: ShellPageSurfaceId): ShellPageTab {
       title,
       kind: "settings",
       icon: "cog",
-      type: "GSV · SETTINGS",
+      type: "GSV · OVERVIEW",
       settingsRoute: { view: "overview" },
     };
   }
@@ -255,6 +260,16 @@ export function shellTabForSurface(surface: ShellPageSurfaceId): ShellPageTab {
       },
     };
   }
+  if (surface === "models") {
+    return {
+      key: "surface:models",
+      surface,
+      title,
+      kind: "inventory",
+      icon: "stars",
+      type: "GSV · MODELS",
+    };
+  }
   return {
     key: `surface:${surface}`,
     surface,
@@ -368,8 +383,14 @@ export function normalizeShellAppRoute(route: ShellAppRoute): ShellAppRoute {
 }
 
 export function shellTabForDesktopChild(child: DesktopChildObject): ShellPageTab {
+  const route = child.route;
+  if (!route) {
+    // Native children carry a `surface` instead of an object route and are
+    // opened via openSurface before this factory is ever consulted.
+    throw new Error(`shellTabForDesktopChild: child ${child.id} has no object route`);
+  }
   return {
-    key: `obj:${child.route.kind}:${child.route.detailId}`,
+    key: `obj:${route.kind}:${route.detailId}`,
     surface: "settings",
     title: child.label,
     kind: "object",
@@ -377,8 +398,8 @@ export function shellTabForDesktopChild(child: DesktopChildObject): ShellPageTab
     type: child.type,
     settingsRoute: {
       view: "list",
-      kind: child.route.kind,
-      detailId: child.route.detailId,
+      kind: route.kind,
+      detailId: route.detailId,
       detailLabel: child.label,
     },
   };
diff --git a/web/src/app/features/gsv-shell/hooks/useGsvShellState.ts b/web/src/app/features/gsv-shell/hooks/useGsvShellState.ts
index ac177ad20..28a65a473 100644
--- a/web/src/app/features/gsv-shell/hooks/useGsvShellState.ts
+++ b/web/src/app/features/gsv-shell/hooks/useGsvShellState.ts
@@ -25,7 +25,6 @@ import {
   shellRouteFromLocation,
 } from "../routing/shellRoutes";
 
-export type PickerId = "gsv";
 
 const MIN_CHAT_WIDTH = 380;
 const DEFAULT_CHAT_WIDTH = 460;
@@ -130,10 +129,10 @@ export function useGsvShellState({
     return initialTab ? upsertTab(persistedTabs, initialTab) : persistedTabs;
   });
   const [activeTabKey, setActiveTabKey] = useState<string | null>(() => initialTab?.key ?? null);
-  const [manualRailCollapsed, setManualRailCollapsed] = useState(false);
+  // The rail starts collapsed by design; expanding is an explicit user action
+  // (icon click / toggle / divider drag) and lasts for the session.
+  const [manualRailCollapsed, setManualRailCollapsed] = useState(true);
   const [selectedObjectId, setSelectedObjectId] = useState<DesktopObjectId | null>(null);
-  const [pickerId, setPickerId] = useState<PickerId | null>(null);
-  const [gsvOpen, setGsvOpen] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
   const [chatWidth, setChatWidth] = useState(DEFAULT_CHAT_WIDTH);
   const [chatDragging, setChatDragging] = useState(false);
@@ -210,10 +209,7 @@ export function useGsvShellState({
     if (route.surface === "desktop") {
       setActiveSurface("desktop");
       setActiveTabKey(null);
-      setSelectedObjectId(null);
-      setPickerId(null);
-      setGsvOpen(false);
-      return;
+      setSelectedObjectId(null);      return;
     }
 
     const tab = shellTabForRoute(route);
@@ -224,10 +220,7 @@ export function useGsvShellState({
     setOpenTabs((current) => upsertTab(current, tab));
     setActiveTabKey(tab.key);
     setActiveSurface(route.surface);
-    setSelectedObjectId(null);
-    setPickerId(null);
-    setGsvOpen(false);
-  };
+    setSelectedObjectId(null);  };
 
   useEffect(() => {
     const onPopState = () => {
@@ -266,10 +259,7 @@ export function useGsvShellState({
     setOpenTabs((current) => upsertTab(current, tab));
     setActiveTabKey(tab.key);
     setActiveSurface("app");
-    setSelectedObjectId(null);
-    setPickerId(null);
-    setGsvOpen(false);
-    return tab.key;
+    setSelectedObjectId(null);    return tab.key;
   };
 
   const syncActiveSettingsRoute = (route: ShellSettingsRoute): void => {
@@ -304,10 +294,7 @@ export function useGsvShellState({
     if (!shouldKeepObjectTab) {
       setActiveTabKey(settingsTab.key);
     }
-    setSelectedObjectId(null);
-    setPickerId(null);
-    setGsvOpen(false);
-  };
+    setSelectedObjectId(null);  };
 
   const syncActiveLibraryRoute = (route: ShellLibraryRoute): void => {
     if (activeSurface !== "library") {
@@ -318,12 +305,16 @@ export function useGsvShellState({
     const libraryTab = shellTabForLibraryRoute(route);
     setOpenTabs((current) => upsertTab(current, libraryTab));
     setActiveTabKey(libraryTab.key);
-    setSelectedObjectId(null);
-    setPickerId(null);
-    setGsvOpen(false);
-  };
+    setSelectedObjectId(null);  };
 
   const openObject = (child: DesktopChildObject): void => {
+    // Native children open their system surface (files, library, terminal,
+    // repositories) rather than an object-detail tab.
+    if (child.surface) {
+      openSurface(child.surface);
+      return;
+    }
+
     if (child.appRoute) {
       openAppRoute(child.appRoute, child.label);
       return;
@@ -334,10 +325,7 @@ export function useGsvShellState({
     setOpenTabs((current) => upsertTab(current, tab));
     setActiveTabKey(tab.key);
     setActiveSurface(tab.surface);
-    setSelectedObjectId(null);
-    setPickerId(null);
-    setGsvOpen(false);
-  };
+    setSelectedObjectId(null);  };
 
   const backToDesktop = (): void => {
     activateRoute({ surface: "desktop" });
@@ -359,17 +347,6 @@ export function useGsvShellState({
     activateRoute({ surface: "desktop" });
   };
 
-  const openControlMenu = (): void => {
-    setSelectedObjectId(null);
-    setGsvOpen(false);
-    if (railCollapsed && autoRailCollapsed) {
-      setPickerId("gsv");
-      return;
-    }
-    setManualRailCollapsed(false);
-    setPickerId(null);
-  };
-
   const startChatDrag = (event: JSX.TargetedMouseEvent<HTMLDivElement>): void => {
     event.preventDefault();
     const rect = rootRef.current?.getBoundingClientRect();
@@ -440,6 +417,12 @@ export function useGsvShellState({
     setManualRailCollapsed((value) => !value);
   };
 
+  /** Return the rail to its collapsed default — called after navigating from
+   *  the expanded rail, which acts as a transient reveal menu. */
+  const collapseRail = (): void => {
+    setManualRailCollapsed(true);
+  };
+
   const toggleChatMax = (): void => {
     if (resolvedChatWidth >= maxChatWidth - 1) {
       setChatWidth(DEFAULT_CHAT_WIDTH);
@@ -460,9 +443,6 @@ export function useGsvShellState({
     setChatOpen(false);
   };
 
-  const pickerTitle = "GSV // CONTROL";
-  const pickerSubtitle = "System surfaces";
-
   const statusContext = activeSurface !== "desktop"
     ? activePageTab?.title ?? shellSurfaceLabel(activeSurface)
     : selectedObject
@@ -473,33 +453,28 @@ export function useGsvShellState({
     activeSurface,
     activePageTab,
     activeTabKey,
+    autoRailCollapsed,
     backToDesktop,
     chatDragging,
     chatOpen,
     closeActiveScreen,
     closeMobilePanels,
+    collapseRail,
     desktopCollapsed,
-    gsvOpen,
     maxChatWidth,
     mobileLayout,
     mobileMenuOpen,
-    openControlMenu,
     openMobileMenu,
     openObject,
     openAppRoute,
     openSettingsRoute,
     openSurface,
     openTabs,
-    pickerId,
-    pickerSubtitle,
-    pickerTitle,
     railCollapsed,
     revealDesktop,
     resolvedChatWidth,
     selectedObjectId,
     setChatOpen,
-    setGsvOpen,
-    setPickerId,
     setSelectedObjectId,
     showRail,
     startChatDrag,
diff --git a/web/src/app/features/gsv-shell/navigation/ShellRail.tsx b/web/src/app/features/gsv-shell/navigation/ShellRail.tsx
index 9f7bb334f..46fd8bcd5 100644
--- a/web/src/app/features/gsv-shell/navigation/ShellRail.tsx
+++ b/web/src/app/features/gsv-shell/navigation/ShellRail.tsx
@@ -28,43 +28,50 @@ type ShellRailProps = {
   settingsDetailId: string | null;
   desktopObjects: readonly DesktopObject[];
   collapsed: boolean;
+  /** Whether expanding is currently possible — false while width pressure
+   *  auto-collapses the rail. Collapsed icon clicks then navigate instead of
+   *  revealing a drawer that cannot appear. */
+  canExpand: boolean;
   onToggleCollapsed: () => void;
   onBackToDesktop: () => void;
-  onOpenControlMenu: () => void;
   onOpenSurface: (surface: ShellSurfaceId) => void;
   onOpenObject: (child: DesktopChildObject) => void;
   onCreateObject: (section: DesktopObjectId) => void;
 };
 
 
-/** Sections that show a "create" entry in their drawer. The label is the same
- *  for every section. Messengers are intentionally absent — connecting a
- *  messenger is done from its dedicated platform page. Applications are absent —
- *  they route to the applications list page instead of a drawer. */
+/** Sections that show a "create" entry in their drawer. The rail keeps the
+ *  untyped label (the section provides the type; typed labels wrap at rail
+ *  width). Messengers are intentionally absent — connecting a messenger is
+ *  done from its dedicated platform page. */
 const CREATE_LABEL: Record<string, string> = {
   machines: "+ CONNECT NEW",
   integrations: "+ CONNECT NEW",
+  applications: "+ CONNECT NEW",
 };
 
-/** Drawer id for the GSV system-surfaces section (the one non-object section). */
+/** Drawer id for the GSV ship section (the one non-object section). */
 const GSV_DRAWER = "gsv";
 
-/** Unambiguous GSV system surfaces. "settings" is handled separately because it
- *  is overloaded (crew/tasks/config/object-detail all route through it). */
-const GSV_PLAIN_SURFACES: ShellSurfaceId[] = ["files", "repositories", "library", "terminal"];
+/** Unambiguous GSV ship surfaces. "settings" is handled separately because it
+ *  is overloaded (config/object-detail routes also travel through it); "agent"
+ *  is here so the AGENTS item stays lit while drilled into an agent. */
+const GSV_PLAIN_SURFACES: ShellSurfaceId[] = ["crew", "agent", "runtime", "models"];
 
 const GSV_RAIL_ITEMS: { label: string; surface: ShellSurfaceId }[] = [
-  { label: "FILES", surface: "files" },
-  { label: "LIBRARY", surface: "library" },
-  { label: "TERMINAL", surface: "terminal" },
-  { label: "REPOS", surface: "repositories" },
-  { label: "SETTINGS", surface: "settings" },
+  { label: "OVERVIEW", surface: "settings" },
+  { label: "AGENTS", surface: "crew" },
+  { label: "MODELS", surface: "models" },
+  { label: "TASKS", surface: "runtime" },
 ];
 
-/** Stable tab key for an object child — mirrors shellTabForDesktopChild so the
- *  rail can match the active tab against a child without importing the factory. */
+/** Stable key for a drawer subitem — mirrors shellTabForDesktopChild for
+ *  object children; native children key off the surface they open. */
 function childKey(child: DesktopChildObject): string {
-  return `obj:${child.route.kind}:${child.route.detailId}`;
+  if (child.surface) {
+    return `native:${child.surface}`;
+  }
+  return child.route ? `obj:${child.route.kind}:${child.route.detailId}` : child.id;
 }
 
 function statusColor(status: string): string {
@@ -92,14 +99,13 @@ export function ShellRail({
   settingsDetailId,
   desktopObjects,
   collapsed,
+  canExpand,
   onToggleCollapsed,
   onBackToDesktop,
-  onOpenControlMenu,
   onOpenSurface,
   onOpenObject,
   onCreateObject,
 }: ShellRailProps) {
-  const totalObjects = desktopObjects.reduce((sum, object) => sum + object.children.length, 0);
 
   // A settings list/detail route surfaces as activeSurface="settings" with a
   // generic activeTabKey, so re-derive the object key it points at (matching
@@ -108,11 +114,22 @@ export function ShellRail({
   const settingsObjectKey = settingsKind && settingsDetailId
     ? `obj:${settingsKind}:${settingsDetailId}`
     : null;
+  // Native subitems light by the surface they open; object subitems by tab key.
+  const childIsActive = (child: DesktopChildObject): boolean => {
+    if (child.surface) {
+      return child.surface === activeSurface;
+    }
+    const key = childKey(child);
+    return key === activeTabKey || key === settingsObjectKey;
+  };
   const ownsActiveObject = (object: DesktopObject): boolean =>
     object.id === activeSurface ||
     object.id === createSection ||
     object.id === settingsKind ||
     object.children.some((child) => {
+      if (child.surface) {
+        return child.surface === activeSurface;
+      }
       const key = childKey(child);
       return key === activeTabKey || key === settingsObjectKey;
     });
@@ -130,38 +147,48 @@ export function ShellRail({
     }
     // Any "settings" route not owned by a data section above (overview, crew,
     // agent, config, and tasks/library lists whose kind is not a data object)
-    // belongs to the GSV drawer, which then lights its SETTINGS subitem.
+    // belongs to the GSV drawer, which then lights its SHIP OVERVIEW subitem.
     if (activeSurface === "settings") {
       return GSV_DRAWER;
     }
     return null;
   }, [desktopObjects, activeSurface, activeTabKey, settingsView, createSection, settingsKind, settingsObjectKey]);
 
-  // Accordion: exactly one drawer open, derived purely from the active route.
-  // GSV is the only drawer that opens without navigating (it is not a surface),
-  // so a manual toggle overrides the route-following selection until the active
-  // section next changes.
-  const [gsvManualOpen, setGsvManualOpen] = useState(false);
+  // Accordion: exactly one drawer open, derived from the active route — except
+  // right after a collapsed icon click, which expands the rail and reveals that
+  // section's drawer WITHOUT navigating. The manual pick overrides the
+  // route-following selection until the active section next changes.
+  const [manualSection, setManualSection] = useState<string | null>(null);
   useEffect(() => {
-    setGsvManualOpen(false);
+    setManualSection(null);
   }, [activeSectionId]);
-  const effectiveOpen = gsvManualOpen ? GSV_DRAWER : activeSectionId;
+  const effectiveOpen = manualSection ?? activeSectionId;
 
   const isSectionActive = ownsActiveObject;
   const gsvActive = activeSectionId === GSV_DRAWER;
 
-  // Shared by both the expanded rows and the collapsed icon dots so collapsed
-  // navigation follows the same per-object flow.
+  // Expanded rail: a main row navigates to its section's list page. Drilling
+  // into a specific object is done from the list itself or the drawer
+  // subitems — never by auto-opening the first child on a section click.
   const openSection = (object: DesktopObject): void => {
     if (isSectionActive(object)) {
       return; // already in this section — leave the current object alone
     }
-    // Every section routes to its own list page. Drilling into a specific
-    // object is done from the list itself or the expanded drawer subitems —
-    // never by auto-opening the first child on a section click.
     onOpenSurface(object.id);
   };
 
+  // Collapsed rail: an icon click expands the rail and reveals that section's
+  // drawer (no navigation). When width pressure keeps the rail collapsed,
+  // expanding is impossible, so fall back to navigating.
+  const revealSection = (drawerId: string, fallback: () => void): void => {
+    if (!canExpand) {
+      fallback();
+      return;
+    }
+    setManualSection(drawerId);
+    onToggleCollapsed();
+  };
+
   if (collapsed) {
     return (
       <aside class="gsv-shell-rail is-collapsed" aria-label="GSV navigation">
@@ -175,13 +202,18 @@ export function ShellRail({
             type="button"
             class={`gsv-rail-dot-button${isSectionActive(object) ? " is-active" : ""}`}
             title={object.label}
-            onClick={() => openSection(object)}
+            onClick={() => revealSection(object.id, () => openSection(object))}
           >
             <Icon name={OBJECT_GLYPH_ICON[object.glyph as ObjectGlyph]} size={19} />
             <span class="gsv-rail-status-dot" style={{ background: statusColor(object.status), color: statusColor(object.status) }} />
           </button>
         ))}
-        <button type="button" class="gsv-rail-gsv-dot" title="GSV controls" onClick={onOpenControlMenu}>
+        <button
+          type="button"
+          class="gsv-rail-gsv-dot"
+          title="GSV"
+          onClick={() => revealSection(GSV_DRAWER, () => onOpenSurface("settings"))}
+        >
           <GsvMark />
         </button>
       </aside>
@@ -193,7 +225,6 @@ export function ShellRail({
       <header class="gsv-rail-head">
         <button type="button" class="gsv-rail-home" onClick={onBackToDesktop}>
           <span>DESKTOP // GSV</span>
-          <small>GSV · {totalObjects} objects</small>
         </button>
         <span class="gsv-rail-menu">
           <IconButton glyph="menu" size="small" title="Hide menu" onClick={onToggleCollapsed} />
@@ -225,13 +256,13 @@ export function ShellRail({
                     </span>
                     <i style={{ background: statusColor(object.status), color: statusColor(object.status) }} />
                   </button>
-                  {expanded && object.id !== "applications" ? (
+                  {expanded ? (
                     <div class="gsv-rail-subitems" aria-label={`${object.label} objects`}>
                       {object.children.map((child) => (
                         <button
                           key={child.id}
                           type="button"
-                          class={`gsv-rail-subitem${childKey(child) === activeTabKey || childKey(child) === settingsObjectKey ? " is-active" : ""}`}
+                          class={`gsv-rail-subitem${childIsActive(child) ? " is-active" : ""}`}
                           title={`${child.label} · ${child.statusLabel}`}
                           onClick={() => onOpenObject(child)}
                         >
@@ -256,7 +287,14 @@ export function ShellRail({
               type="button"
               class={`gsv-rail-row gsv-rail-gsv${gsvActive ? " is-active" : ""}${effectiveOpen === GSV_DRAWER ? " is-expanded" : ""}`}
               aria-expanded={effectiveOpen === GSV_DRAWER}
-              onClick={() => setGsvManualOpen((open) => !open)}
+              onClick={() => {
+                // Like the object rows, the GSV row navigates to its page —
+                // the ship overview. The drawer follows the route (settings
+                // routes are owned by the GSV drawer).
+                if (activeSurface !== "settings" || settingsView !== "overview") {
+                  onOpenSurface("settings");
+                }
+              }}
             >
               <span class="gsv-rail-node-icon">
                 <span class="gsv-rail-node-disc is-gsv">
@@ -269,16 +307,22 @@ export function ShellRail({
             </button>
             {effectiveOpen === GSV_DRAWER ? (
               <div class="gsv-rail-subitems" aria-label="GSV system surfaces">
-                {GSV_RAIL_ITEMS.map((item) => (
-                  <button
-                    key={item.surface}
-                    type="button"
-                    class={`gsv-rail-subitem${gsvActive && activeSurface === item.surface ? " is-active" : ""}`}
-                    onClick={() => onOpenSurface(item.surface)}
-                  >
-                    {item.label}
-                  </button>
-                ))}
+                {GSV_RAIL_ITEMS.map((item) => {
+                  // AGENTS keeps its highlight while drilled into an agent detail.
+                  const itemActive = gsvActive
+                    && (activeSurface === item.surface
+                      || (item.surface === "crew" && activeSurface === "agent"));
+                  return (
+                    <button
+                      key={item.surface}
+                      type="button"
+                      class={`gsv-rail-subitem${itemActive ? " is-active" : ""}`}
+                      onClick={() => onOpenSurface(item.surface)}
+                    >
+                      {item.label}
+                    </button>
+                  );
+                })}
               </div>
             ) : null}
           </div>
diff --git a/web/src/app/features/gsv-shell/routing/shellRoutes.test.ts b/web/src/app/features/gsv-shell/routing/shellRoutes.test.ts
index 299c08114..8871f569d 100644
--- a/web/src/app/features/gsv-shell/routing/shellRoutes.test.ts
+++ b/web/src/app/features/gsv-shell/routing/shellRoutes.test.ts
@@ -23,6 +23,28 @@ describe("shellRoutes", () => {
     expect(shellRouteFromLocation(location("/tasks"))).toEqual(route);
   });
 
+  it("round-trips the standalone models surface at /models", () => {
+    const route: ShellRoute = { surface: "models" };
+
+    expect(shellRouteToPath(route)).toBe("/models");
+    expect(shellRouteFromLocation(location("/models"))).toEqual(route);
+  });
+
+  it("keeps parsing the legacy nested settings routes", () => {
+    expect(shellRouteFromLocation(location("/settings/crew"))).toEqual({
+      surface: "settings",
+      settingsRoute: { view: "crew" },
+    });
+    expect(shellRouteFromLocation(location("/settings/models"))).toEqual({
+      surface: "settings",
+      settingsRoute: { view: "config", kind: "models" },
+    });
+    expect(shellRouteFromLocation(location("/settings/tasks"))).toEqual({
+      surface: "settings",
+      settingsRoute: { view: "list", kind: "tasks" },
+    });
+  });
+
   it("uses /repositories for the native repository page", () => {
     const route: ShellRoute = { surface: "repositories" };
 
diff --git a/web/src/app/features/gsv-shell/routing/shellRoutes.ts b/web/src/app/features/gsv-shell/routing/shellRoutes.ts
index aa19e2e77..69fc074cc 100644
--- a/web/src/app/features/gsv-shell/routing/shellRoutes.ts
+++ b/web/src/app/features/gsv-shell/routing/shellRoutes.ts
@@ -20,6 +20,7 @@ const TOP_LEVEL_SURFACES: Record<string, Exclude<ShellSurfaceId, "desktop" | "ap
   "list-template": "list-template",
   machines: "machines",
   messengers: "messengers",
+  models: "models",
   repositories: "repositories",
   repos: "repositories",
   tasks: "runtime",
diff --git a/web/src/app/features/gsv-shell/styles/gsvShell.css b/web/src/app/features/gsv-shell/styles/gsvShell.css
index daf204550..577b9d2a6 100644
--- a/web/src/app/features/gsv-shell/styles/gsvShell.css
+++ b/web/src/app/features/gsv-shell/styles/gsvShell.css
@@ -451,45 +451,6 @@
   animation: gsvCtrlLineIn 0.18s ease both;
 }
 
-.gsv-picker-overlay header button {
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--border);
-  background: var(--panel-2);
-  color: var(--text-dim);
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: 0;
-  line-height: 0;
-  position: relative;
-}
-
-.gsv-picker-overlay header button::before,
-.gsv-picker-overlay header button::after {
-  content: "";
-  position: absolute;
-  width: 10px;
-  height: 1.5px;
-  background: currentColor;
-}
-
-.gsv-picker-overlay header button::before {
-  transform: rotate(45deg);
-}
-
-.gsv-picker-overlay header button::after {
-  transform: rotate(-45deg);
-}
-
-.gsv-picker-overlay header button:hover,
-.gsv-picker-overlay header button:focus-visible {
-  border-color: var(--accent);
-  color: var(--text-hi);
-}
-
 .gsv-space-connectors {
   position: relative;
   --gsv-branch-count: 4;
@@ -673,9 +634,36 @@
   padding: 2px 6px 2px 2px;
 }
 
+/* Card cell: reserved provenance band + card, so external tags never shift
+   card tops relative to native/plain neighbours in the same grid row. */
+.gsv-object-strip-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gsv-object-strip-prov {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+}
+
+.gsv-object-strip-prov-repo {
+  color: var(--text-muted);
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
 .gsv-object-strip-add {
   width: 236px;
   display: flex;
+  /* Match the provenance band (20px) + gap (6px) above the sibling cards. */
+  margin-top: 26px;
 }
 
 /* Stretch the connect card to the grid row height so it matches the object
@@ -980,10 +968,21 @@
   box-shadow: inset -1px 0 0 rgba(169, 164, 255, 0.05);
 }
 
+/* Collapsed geometry mirrors the expanded rail so toggling doesn't move the
+   icons: menu box tops align (head padding 18), the first disc top matches
+   head(61) + scroll padding(10) + row padding(12) = 83, and the 24px margins
+   reproduce the 64px row pitch (40px disc + 2×12px row padding). */
 .gsv-shell-rail.is-collapsed {
   align-items: center;
-  gap: 6px;
-  padding-top: 14px;
+  padding-top: 18px;
+}
+
+.gsv-shell-rail.is-collapsed .gsv-rail-dot-button {
+  margin-top: 24px;
+}
+
+.gsv-shell-rail.is-collapsed .gsv-rail-rule + .gsv-rail-dot-button {
+  margin-top: 22px;
 }
 
 .gsv-shell-rail.is-collapsed .gsv-rail-menu {
@@ -1463,7 +1462,9 @@
 .gsv-rail-gsv-dot {
   width: 42px;
   height: 42px;
-  margin-top: 4px;
+  /* Same pitch as the dot buttons — keeps the GSV mark at the expanded GSV
+     row's disc position (42px disc shares the 12px row padding). */
+  margin-top: 24px;
   border: 1.4px solid var(--accent-bright);
   box-shadow: 0 0 14px rgba(150, 140, 255, 0.4);
 }
@@ -1550,93 +1551,6 @@
   opacity: 1;
 }
 
-.gsv-picker-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 50;
-  background:
-    linear-gradient(rgba(150, 140, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(150, 140, 255, 0.04) 1px, transparent 1px),
-    var(--panel-2);
-  background-size: 44px 44px, 44px 44px, auto;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--rule-section) #0c0a22;
-}
-
-.gsv-picker-panel {
-  width: min(840px, 100%);
-  margin: 0 auto;
-  padding: clamp(34px, 5vw, 46px) clamp(20px, 5vw, 40px);
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  animation: gsvContentIn 0.22s ease both;
-}
-
-.gsv-picker-overlay.is-control-picker .gsv-picker-panel {
-  width: min(470px, 100%);
-}
-
-.gsv-picker-overlay header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.gsv-picker-overlay header div {
-  min-width: 0;
-  display: grid;
-  gap: 7px;
-}
-
-.gsv-picker-overlay header div > span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #8c86c8;
-  font-size: 0.875rem; /* size from .gsv-meta (14px); tracking kept */
-  letter-spacing: 0.26em;
-  text-transform: uppercase;
-}
-
-.gsv-picker-overlay header small {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-dim);
-  font-size: 0.75rem; /* size from .gsv-sublabel (12px); tracking kept */
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.gsv-picker-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-.gsv-picker-control {
-  display: flex;
-  justify-content: center;
-}
-
-.gsv-picker-empty {
-  min-height: 120px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-dim);
-  font-size: 0.75rem; /* size from .gsv-sublabel (12px); tracking kept */
-  letter-spacing: 0.18em;
-}
 
 .gsv-console-frame {
   position: absolute;
diff --git a/web/src/design-system/catalog.tsx b/web/src/design-system/catalog.tsx
index e6526053a..5f07a4442 100644
--- a/web/src/design-system/catalog.tsx
+++ b/web/src/design-system/catalog.tsx
@@ -38,6 +38,7 @@ import agentImage from "./stories/AgentImage.story";
 import avatar from "./stories/Avatar.story";
 import tile from "./stories/Tile.story";
 import objectCard from "./stories/ObjectCard.story";
+import externalApplicationTile from "./stories/ExternalApplicationTile.story";
 import surface from "./stories/Surface.story";
 import iconButton from "./stories/IconButton.story";
 import lineGlyphs from "./stories/LineGlyphs.story";
@@ -109,6 +110,7 @@ const STORIES: Story[] = [
   asciiGalaxyScan,
   tile,
   objectCard,
+  externalApplicationTile,
   surface,
   agentImage,
   avatar,
diff --git a/web/src/design-system/previews.tsx b/web/src/design-system/previews.tsx
index c8fb98ba7..fc73228a4 100644
--- a/web/src/design-system/previews.tsx
+++ b/web/src/design-system/previews.tsx
@@ -71,7 +71,7 @@ function ListPreview() {
           listMeta={`${rows.length}/${LIST_ROWS.length} READY`}
           rows={rows}
           emptyObject="INTEGRATIONS"
-          connectLabel="NEW INTEGRATION"
+          connectLabel="+ CONNECT NEW INTEGRATION"
           onConnect={noop}
           search={{ value: search, placeholder: "Search…", onChange: setSearch }}
         />
@@ -101,7 +101,7 @@ function CardListPreview() {
           listMeta={`${crew.length}/${MOCK_CREW.length} CREW`}
           emptyObject="CREW"
           isEmpty={crew.length === 0}
-          connectLabel="NEW AGENT"
+          connectLabel="+ NEW AGENT"
           onConnect={noop}
           search={{ value: search, placeholder: "Search…", onChange: setSearch }}
         >
diff --git a/web/src/design-system/stories/DesktopHint.story.tsx b/web/src/design-system/stories/DesktopHint.story.tsx
index f15af7617..993577b55 100644
--- a/web/src/design-system/stories/DesktopHint.story.tsx
+++ b/web/src/design-system/stories/DesktopHint.story.tsx
@@ -8,8 +8,8 @@ import { DesktopHint } from "../../app/features/gsv-shell/desktop/DesktopHint";
  * void panel; the live version is absolutely positioned in the desktop.
  */
 
-const LINES = ["> CLICK A NODE TO EXPLORE", "> CLICK GSV FOR CONTROLS"];
-const MIN = "CLICK A NODE TO EXPLORE · CLICK GSV FOR CONTROLS";
+const LINES = ["> CLICK A NODE TO EXPLORE", "> CLICK GSV FOR SHIP OVERVIEW"];
+const MIN = "CLICK A NODE TO EXPLORE · CLICK GSV FOR SHIP OVERVIEW";
 
 function Stage({ played }: { played?: boolean }) {
   return (
diff --git a/web/src/design-system/stories/ExternalApplicationTile.story.tsx b/web/src/design-system/stories/ExternalApplicationTile.story.tsx
new file mode 100644
index 000000000..882620527
--- /dev/null
+++ b/web/src/design-system/stories/ExternalApplicationTile.story.tsx
@@ -0,0 +1,331 @@
+import type { ComponentChildren } from "preact";
+import { ObjectCard } from "../../app/components/ui/ObjectCard";
+import { ListRow } from "../../app/components/ui/ListRow";
+import { Tag } from "../../app/components/ui/Tag";
+import { Icon } from "../../app/components/ui/Icon";
+import type { Story } from "../story";
+
+// ── Example data ────────────────────────────────────────────────────────────
+// APPLICATIONS now lists two kinds: native GSV surfaces (fixed presentation —
+// eyebrow "APPLICATION · GSV", status "SYSTEM") and imported web packages pulled from
+// a source repo. FILES stands in for the native side; Weather + Notes for the
+// external side (one PUBLIC, one PRIVATE) so every variant shows real-ish data.
+type ExtApp = {
+  name: string;
+  repo: string;
+  isPublic: boolean;
+  chip: string;
+  blurb: string;
+};
+
+const FILES_BLURB = "Browse and manage the ship's filesystem. A native GSV surface.";
+
+const WEATHER: ExtApp = {
+  name: "WEATHER",
+  repo: "team/weather",
+  isPublic: true,
+  chip: "WE",
+  blurb: "Local forecast and radar for the crew. Pulls NWS data every 10 minutes.",
+};
+
+const NOTES: ExtApp = {
+  name: "NOTES",
+  repo: "jessi/notes",
+  isPublic: false,
+  chip: "NO",
+  blurb: "Personal scratch notes in Markdown, synced to a private repo.",
+};
+
+const EXTERNAL_APPS: ExtApp[] = [WEATHER, NOTES];
+
+// ── Small composition helpers (story-local; no component edits) ──────────────
+
+/** The native FILES product icon (folder). Fresh node per call. */
+function folderIcon() {
+  return <Icon name="folder" size={20} color="var(--accent-bright)" />;
+}
+
+/** 2-letter identity chip — the fallback glyph an imported package gets when it
+ *  ships no icon of its own. Sizeable so it can sit in a card head (26) or a
+ *  list-row leading slot (30). */
+function chip(text: string, px = 26) {
+  return (
+    <span
+      style={{
+        width: `${px}px`,
+        height: `${px}px`,
+        flex: "none",
+        borderRadius: "3px",
+        background: "#171436",
+        border: "1px solid var(--border)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "var(--accent)",
+        fontFamily: "var(--gsv-font-mono)",
+        fontSize: `${Math.round(px * 0.42)}px`,
+        letterSpacing: "0.04em",
+      }}
+    >
+      {text}
+    </span>
+  );
+}
+
+/** Corner "EXTERNAL" marker for variant D — a sibling of the (overflow:hidden)
+ *  card, sitting over its top border. */
+function cornerMark(label: string) {
+  return (
+    <span
+      style={{
+        position: "absolute",
+        top: "-8px",
+        right: "12px",
+        zIndex: 1,
+        background: "var(--panel)",
+        border: "1px solid var(--border-raised)",
+        color: "var(--accent-bright)",
+        fontFamily: "var(--gsv-font-mono)",
+        fontSize: "8.5px",
+        letterSpacing: "0.16em",
+        padding: "2px 6px",
+      }}
+    >
+      {label}
+    </span>
+  );
+}
+
+/** Dashed / transparent frame for variant B. External items get the dashed
+ *  "non-native" affordance (var(--dashed)); natives get a matching transparent
+ *  box so the two columns stay aligned. `block` switches inline-block (tiles)
+ *  vs block (rows). */
+function framed(node: ComponentChildren, external: boolean, block = false) {
+  return (
+    <div
+      style={{
+        display: block ? "block" : "inline-block",
+        border: external ? "1px dashed var(--dashed)" : "1px solid transparent",
+        padding: block ? "3px" : "4px",
+      }}
+    >
+      {node}
+    </div>
+  );
+}
+
+/** Variant heading + one-line rationale. */
+function variantHead(id: string, name: string, rationale: string) {
+  return (
+    <>
+      <div
+        style={{
+          fontFamily: "var(--gsv-font-mono)",
+          fontSize: "0.8125rem",
+          letterSpacing: "0.14em",
+          textTransform: "uppercase",
+          color: "var(--accent-bright)",
+        }}
+      >
+        {id} · {name}
+      </div>
+      <p class="gsv-prose-sm" style={{ margin: "6px 0 16px", color: "var(--text-muted)", maxWidth: "680px" }}>
+        {rationale}
+      </p>
+    </>
+  );
+}
+
+const repoLineStyle = { color: "var(--text-muted)", letterSpacing: "0.08em", textTransform: "none" as const };
+
+// ── Variant renderers ────────────────────────────────────────────────────────
+
+/** A — Eyebrow: typography only. The eyebrow reads "EXTERNAL · WEB UI" and the
+ *  row sub names the source repo. */
+function variantA() {
+  return (
+    <div class="ds-cell">
+      {variantHead(
+        "A",
+        "Eyebrow",
+        "Typography only — the eyebrow reads “EXTERNAL · WEB UI” against the native “APPLICATION · GSV”, and the list-row sub names the source repo. No new chrome: cheapest to ship, softest at a glance.",
+      )}
+      <div class="ds-label">Object strip · desktop</div>
+      <div class="ds-row" style={{ alignItems: "flex-start" }}>
+        <ObjectCard width={236} label="FILES" type="APPLICATION · GSV" status="online" icon={folderIcon()} blurb={FILES_BLURB} />
+        {EXTERNAL_APPS.map((app) => (
+          <ObjectCard key={app.name} width={236} label={app.name} type="EXTERNAL · WEB UI" glyph="applications" status="online" blurb={app.blurb} />
+        ))}
+      </div>
+      <div class="ds-label" style={{ marginTop: "20px" }}>List rows</div>
+      <div class="ds-col" style={{ maxWidth: "560px", gap: "10px" }}>
+        <ListRow icon="folder" label="FILES" status="online" statusLabel="SYSTEM" sub="APPLICATION · GSV" />
+        {EXTERNAL_APPS.map((app) => (
+          <ListRow key={app.name} icon="satellite" label={app.name} status="online" statusLabel="ENABLED" sub={`EXTERNAL · ${app.repo}`} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** B — Dashed frame: reuses the dashed "non-native / add" affordance as a frame
+ *  around the whole tile/row. */
+function variantB() {
+  return (
+    <div class="ds-cell">
+      {variantHead(
+        "B",
+        "Dashed frame",
+        "Reuses the dashed “non-native / add” affordance (var(--dashed)) as a frame around the whole tile/row. Strong glanceable signal in the console's own visual language, but adds weight to every external item.",
+      )}
+      <div class="ds-label">Object strip · desktop</div>
+      <div class="ds-row" style={{ alignItems: "flex-start" }}>
+        {framed(<ObjectCard width={236} label="FILES" type="APPLICATION · GSV" status="online" icon={folderIcon()} blurb={FILES_BLURB} />, false)}
+        {EXTERNAL_APPS.map((app) => (
+          <span key={app.name}>{framed(<ObjectCard width={236} label={app.name} type="WEB UI" glyph="applications" status="online" blurb={app.blurb} />, true)}</span>
+        ))}
+      </div>
+      <div class="ds-label" style={{ marginTop: "20px" }}>List rows</div>
+      <div class="ds-col" style={{ maxWidth: "560px", gap: "10px" }}>
+        {framed(<ListRow icon="folder" label="FILES" status="online" statusLabel="SYSTEM" sub="APPLICATION · GSV" />, false, true)}
+        {EXTERNAL_APPS.map((app) => (
+          <span key={app.name}>{framed(<ListRow icon="satellite" label={app.name} status="online" statusLabel="ENABLED" sub={app.repo} />, true, true)}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** C — Provenance tag: a boxed EXTERNAL tag + a PUBLIC/PRIVATE tag from
+ *  sourcePublic + the source repo. */
+function provenanceCard(app: ExtApp) {
+  // Mirrors the shipped strip: one provenance band (tags + ellipsized repo)
+  // above the card — see .gsv-object-strip-prov in gsvShell.css.
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px", width: "236px" }}>
+      <div style={{ minHeight: "20px", display: "flex", gap: "6px", alignItems: "center", overflow: "hidden" }}>
+        <Tag label="EXTERNAL" tone="info" boxed />
+        <Tag label={app.isPublic ? "PUBLIC" : "PRIVATE"} tone={app.isPublic ? "online" : "idle"} boxed />
+        <span
+          class="gsv-sublabel"
+          style={{ ...repoLineStyle, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }}
+        >
+          {app.repo}
+        </span>
+      </div>
+      <ObjectCard width={236} label={app.name} type="APPLICATION · WEB UI" glyph="applications" status="online" blurb={app.blurb} />
+    </div>
+  );
+}
+
+function variantC() {
+  return (
+    <div class="ds-cell">
+      {variantHead(
+        "C",
+        "Provenance tag · CHOSEN",
+        "A boxed provenance cluster — an EXTERNAL tag plus a PUBLIC/PRIVATE tag derived from sourcePublic, and the source repo. Jessica's pick (2026-07-20), with one edit: only external applications are labeled — natives carry no tag, just an empty band so card tops stay aligned. This section mirrors what ships.",
+      )}
+      <div class="ds-label">Object strip · desktop</div>
+      <div class="ds-row" style={{ alignItems: "flex-start" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px", width: "236px" }}>
+          <div style={{ minHeight: "20px" }} />
+          <ObjectCard width={236} label="FILES" type="APPLICATION · GSV" status="online" icon={folderIcon()} blurb={FILES_BLURB} />
+        </div>
+        {EXTERNAL_APPS.map((app) => (
+          <span key={app.name}>{provenanceCard(app)}</span>
+        ))}
+      </div>
+      <div class="ds-label" style={{ marginTop: "20px" }}>List rows</div>
+      <div class="ds-col" style={{ maxWidth: "560px", gap: "10px" }}>
+        <ListRow icon="folder" label="FILES" status="online" statusLabel="SYSTEM" sub={FILES_BLURB} />
+        {EXTERNAL_APPS.map((app) => (
+          <ListRow
+            key={app.name}
+            icon="satellite"
+            label={app.name}
+            status="online"
+            statusLabel="ENABLED"
+            sub={`${app.repo} · ${app.isPublic ? "PUBLIC" : "PRIVATE"}`}
+            tag="EXTERNAL"
+            tagTone="info"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** D — Icon chip: swaps the generic satellite glyph for the package's own
+ *  2-letter identity chip and pins a corner EXTERNAL marker. */
+function chipCard(app: ExtApp) {
+  return (
+    <div style={{ position: "relative", width: "236px" }}>
+      {cornerMark("EXTERNAL")}
+      <ObjectCard width={236} label={app.name} type="WEB UI" status="online" icon={chip(app.chip, 26)} blurb={app.blurb} />
+    </div>
+  );
+}
+
+function variantD() {
+  return (
+    <div class="ds-cell">
+      {variantHead(
+        "D",
+        "Icon chip",
+        "Swaps the generic satellite glyph for the package's own 2-letter identity chip and pins a corner EXTERNAL marker; natives keep their real product icon. Gives each imported app a face, while the marker still says “imported”. In the row the marker rides the tag slot.",
+      )}
+      <div class="ds-label">Object strip · desktop</div>
+      <div class="ds-row" style={{ alignItems: "flex-start" }}>
+        <div style={{ position: "relative", width: "236px" }}>
+          <ObjectCard width={236} label="FILES" type="APPLICATION · GSV" status="online" icon={folderIcon()} blurb={FILES_BLURB} />
+        </div>
+        {EXTERNAL_APPS.map((app) => (
+          <span key={app.name}>{chipCard(app)}</span>
+        ))}
+      </div>
+      <div class="ds-label" style={{ marginTop: "20px" }}>List rows</div>
+      <div class="ds-col" style={{ maxWidth: "560px", gap: "10px" }}>
+        <ListRow icon="folder" label="FILES" status="online" statusLabel="SYSTEM" sub="APPLICATION · GSV" />
+        {EXTERNAL_APPS.map((app) => (
+          <ListRow
+            key={app.name}
+            leading={chip(app.chip, 30)}
+            label={app.name}
+            status="online"
+            statusLabel="ENABLED"
+            sub={app.repo}
+            tag="EXTERNAL"
+            tagTone="accent"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const story: Story = {
+  title: "External Application Tile",
+  group: "Data Display",
+  blurb: "candidate treatments to mark imported apps as distinct from native GSV surfaces",
+  render: () => (
+    <div class="ds-col" style={{ gap: "36px" }}>
+      <p class="gsv-prose" style={{ margin: 0, color: "var(--text-muted)", maxWidth: "720px" }}>
+        APPLICATIONS now holds two kinds of thing: native GSV surfaces (FILES, LIBRARY, TERMINAL, REPOS —
+        eyebrow “APPLICATION · GSV”, status “SYSTEM”) and imported web packages pulled from a source
+        repo. The native presentation is fixed; the open question is how to mark the <em>external</em> ones so
+        they read as distinct at a glance — in both the desktop object strip (ObjectCard) and the console list
+        (ListRow). Four candidates follow, each external tile/row shown beside its native FILES counterpart for
+        contrast, across both contexts and with two real-ish apps (one PUBLIC, one PRIVATE).{" "}
+        <strong style={{ color: "var(--text)" }}>Variant C was chosen (2026-07-20)</strong> — with the edit that
+        only external applications get labeled; natives carry no tag. A, B and D are kept for the record.
+      </p>
+      {variantA()}
+      {variantB()}
+      {variantC()}
+      {variantD()}
+    </div>
+  ),
+};
+
+export default story;
diff --git a/web/src/design-system/stories/IconMenu.story.tsx b/web/src/design-system/stories/IconMenu.story.tsx
index 2707b8899..abab63d2e 100644
--- a/web/src/design-system/stories/IconMenu.story.tsx
+++ b/web/src/design-system/stories/IconMenu.story.tsx
@@ -1,28 +1,43 @@
-import { IconMenu } from "../../app/components/ui/IconMenu";
+import { IconMenu, type IconMenuCell } from "../../app/components/ui/IconMenu";
 import type { Story } from "../story";
 
+const GSV_CELLS: IconMenuCell[] = [
+  { icon: "cog", label: "OVERVIEW", onClick: () => {}, accent: true },
+  { icon: "chat", label: "AGENTS", onClick: () => {} },
+  { icon: "stars", label: "MODELS", onClick: () => {} },
+  { icon: "list", label: "TASKS", onClick: () => {} },
+];
+
+const SYSTEM_CELLS: IconMenuCell[] = [
+  { icon: "folder", label: "FILES", onClick: () => {} },
+  { icon: "pencil", label: "LIBRARY", onClick: () => {} },
+  { icon: "terminal", label: "TERMINAL", onClick: () => {} },
+  { icon: "doticons/branch", label: "REPOS", onClick: () => {}, dotMatrix: 16 },
+  { icon: "cog", label: "OVERVIEW", onClick: () => {}, accent: true },
+];
+
 const story: Story = {
   title: "IconMenu",
   group: "Chrome",
-  blurb: "control popover · live dot · FILES / LIBRARY / TERMINAL / SETTINGS grid",
+  blurb: "control popover · live dot · configurable cell grid (AGENTS / MODELS / TASKS / SHIP OVERVIEW)",
   render: () => (
     <div class="ds-col">
       <div class="ds-cell">
-        <div class="ds-label">Default</div>
+        <div class="ds-label">GSV picker (4 cells)</div>
         <div class="ds-row">
-          <IconMenu />
+          <IconMenu cells={GSV_CELLS} />
         </div>
       </div>
       <div class="ds-cell">
-        <div class="ds-label">Custom title</div>
+        <div class="ds-label">Custom title · 5 cells</div>
         <div class="ds-row">
-          <IconMenu title="GSV // SYSTEMS" />
+          <IconMenu title="GSV // SYSTEMS" cells={SYSTEM_CELLS} />
         </div>
       </div>
       <div class="ds-cell">
         <div class="ds-label">Narrow (width 300)</div>
         <div class="ds-row">
-          <IconMenu width={300} />
+          <IconMenu width={300} cells={GSV_CELLS} />
         </div>
       </div>
     </div>