Merge d2/components: ShellPage JSX components

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u
2026-10-04 10:26:15 +00:00 · 2026-10-04 10:26:15 +00:00 · a72adac613
commit a72adac613
parent a0060b8df7 ebb3cecd97
21 changed files with 1663 additions and 1297 deletions
--- a/apps/web/src/lib/desktop.test.ts
+++ b/apps/web/src/lib/desktop.test.ts
@ -63,6 +63,7 @@ describe("window chrome", () => {
  it("keeps conversation header controls clickable", () => {
    const root = path.join(path.dirname(fileURLToPath(import.meta.url)), "../pages");
    const shell = readFileSync(path.join(root, "Shell.tsx"), "utf8");
    const toggles = readFileSync(path.join(root, "shell/sidebar-toggle-buttons.tsx"), "utf8");
    expect(shell).toContain(
      'className="app-drag flex items-center justify-between border-b border-sidebar-border',
    );
@ -70,14 +71,16 @@ describe("window chrome", () => {
    expect(shell).toContain('className="app-no-drag flex min-w-0 items-center gap-3"');
    // Ensure header sidebar toggle controls stay clickable (not part of drag region)
    expect(
-      shell.match(/app-no-drag .* size-control-lg .* place-items-center/g)?.length ?? 0,
+      toggles.match(/app-no-drag .* size-control-lg .* place-items-center/g)?.length ?? 0,
    ).toBeGreaterThanOrEqual(2);
  });
  it("moves window chrome into the conversation header when the bots sidebar is collapsed", () => {
    const root = path.join(path.dirname(fileURLToPath(import.meta.url)), "../pages");
    const shell = readFileSync(path.join(root, "Shell.tsx"), "utf8");
-    expect(shell).toContain("{botsSidebarCollapsed && desktopBridge() ? <WindowChrome /> : null}");
+    const toggles = readFileSync(path.join(root, "shell/sidebar-toggle-buttons.tsx"), "utf8");
    expect(shell).toContain("collapsed={botsSidebarCollapsed}");
    expect(toggles).toContain("{collapsed && desktopBridge() ? <WindowChrome /> : null}");
  });
 });
--- a/apps/web/src/locales/de/messages.po
+++ b/apps/web/src/locales/de/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (ungelesen)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr "{0}, {label}"
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr "{0}, 1:1-Unterhaltung"
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr "{0}, Gruppenunterhaltung"
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr "{0}, Hauptunterhaltung"
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr "{0}s Bildschirm"
@ -339,6 +339,7 @@ msgstr "Aktionsbestätigungen"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "Aktionen für {0}"
@ -354,7 +355,7 @@ msgstr "Aktiv"
 msgid "Active model"
 msgstr "Aktives Modell"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "Aktivität"
@ -647,7 +648,7 @@ msgstr "Archivieren"
 msgid "archived"
 msgstr "archiviert"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "Archiviert"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "Bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Bot-Bildschirm"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Bot-Bildschirmvorschau"
@ -1088,7 +1089,7 @@ msgstr "Schließen"
 msgid "Close chart"
 msgstr "Diagramm schließen"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "Computer schließen"
@ -1128,7 +1129,7 @@ msgstr "Navigation schließen"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "Panel schließen"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr "Coder"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr "{0} einklappen"
@ -1201,7 +1202,7 @@ msgstr "Computer"
 msgid "Computer failed to boot"
 msgstr "Computer konnte nicht gestartet werden"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "Computer ist im Ruhezustand"
@ -1743,9 +1744,9 @@ msgstr "Avatare konnten nicht aktualisiert werden"
 msgid "Couldn't update messaging settings"
 msgstr "Messaging-Einstellungen konnten nicht aktualisiert werden"
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "Erstellen"
@ -1902,14 +1903,14 @@ msgstr "Standardbereich"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "Löschen"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "{0} löschen"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "Erweitern"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr "{0} ausklappen"
@ -2400,6 +2401,7 @@ msgstr "Ziele für dieses Projekt, unabhängig von Chat-Nachrichten. Unterhaltun
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "Gruppe"
@ -2791,7 +2793,7 @@ msgstr "Lokales Docker"
 msgid "Local Server Settings"
 msgstr "Einstellungen des lokalen Servers"
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "Abmelden"
@ -2974,7 +2976,7 @@ msgstr "Minimal"
 msgid "Minimize"
 msgstr "Minimieren"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr "Bots minimieren"
@ -3097,7 +3099,7 @@ msgstr "Braucht dich"
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr "Braucht dich"
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr "Gelesen werden nur Datei- und Ordnernamen."
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "Öffnen"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr "{0} öffnen"
@ -3412,11 +3414,11 @@ msgstr "Unterhaltung öffnen"
 msgid "Open in browser"
 msgstr "Im Browser öffnen"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "In vollständigem Fenster öffnen"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "Navigation öffnen"
@ -3931,7 +3933,7 @@ msgstr "Wird zurückgesetzt…"
 msgid "Restart to update"
 msgstr "Zum Aktualisieren neu starten"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "Wiederherstellen"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "Suche…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr "{0} auswählen"
@ -4201,7 +4203,8 @@ msgstr "Stimme einrichten"
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "Einstellungen"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr "Alle {0} anzeigen"
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr "Bots anzeigen"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr "Computer anzeigen"
@ -4272,7 +4276,7 @@ msgstr "Mehr anzeigen"
 msgid "Show password"
 msgstr "Passwort anzeigen"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "Einstellungen anzeigen"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "Schritte"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "Stoppen"
@ -4832,7 +4836,7 @@ msgstr "Hochladen"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "Nutzung"
@ -5088,7 +5092,7 @@ msgstr "Du kannst diesen Tab schließen, wenn du nicht automatisch weitergeleite
 msgid "You can close this window."
 msgstr "Du kannst dieses Fenster schließen."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "Du hast die Kontrolle"
--- a/apps/web/src/locales/en/messages.po
+++ b/apps/web/src/locales/en/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (unread)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr "{0}, {label}"
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr "{0}, 1:1 conversation"
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr "{0}, group conversation"
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr "{0}, main conversation"
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr "{0}'s screen"
@ -339,6 +339,7 @@ msgstr "Action confirmations"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "Actions for {0}"
@ -354,7 +355,7 @@ msgstr "Active"
 msgid "Active model"
 msgstr "Active model"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "Activity"
@ -647,7 +648,7 @@ msgstr "Archive"
 msgid "archived"
 msgstr "archived"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "Archived"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "Bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Bot screen"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Bot screen preview"
@ -1088,7 +1089,7 @@ msgstr "Close"
 msgid "Close chart"
 msgstr "Close chart"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "Close computer"
@ -1128,7 +1129,7 @@ msgstr "Close navigation"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "Close panel"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr "Coder"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr "Collapse {0}"
@ -1201,7 +1202,7 @@ msgstr "Computer"
 msgid "Computer failed to boot"
 msgstr "Computer failed to boot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "Computer is asleep"
@ -1743,9 +1744,9 @@ msgstr "Couldn't update avatars"
 msgid "Couldn't update messaging settings"
 msgstr "Couldn't update messaging settings"
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "Create"
@ -1902,14 +1903,14 @@ msgstr "Default scope"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "Delete"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "Delete {0}"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "Expand"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr "Expand {0}"
@ -2400,6 +2401,7 @@ msgstr "Goals for this project, separate from chat messages. Conversations are b
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "Group"
@ -2791,7 +2793,7 @@ msgstr "Local Docker"
 msgid "Local Server Settings"
 msgstr "Local Server Settings"
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "Log out"
@ -2974,7 +2976,7 @@ msgstr "Minimal"
 msgid "Minimize"
 msgstr "Minimize"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr "Minimize bots"
@ -3097,7 +3099,7 @@ msgstr "Needs you"
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr "Needs you"
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr "Only file and folder names are read."
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "Open"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr "Open {0}"
@ -3412,11 +3414,11 @@ msgstr "Open conversation"
 msgid "Open in browser"
 msgstr "Open in browser"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "Open in full window"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "Open navigation"
@ -3931,7 +3933,7 @@ msgstr "Resetting…"
 msgid "Restart to update"
 msgstr "Restart to update"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "Restore"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "Searching…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr "Select {0}"
@ -4201,7 +4203,8 @@ msgstr "Set up voice"
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "Settings"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr "Show all {0}"
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr "Show bots"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr "Show computer"
@ -4272,7 +4276,7 @@ msgstr "Show more"
 msgid "Show password"
 msgstr "Show password"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "Show settings"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "Steps"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "Stop"
@ -4832,7 +4836,7 @@ msgstr "Upload"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "Usage"
@ -5088,7 +5092,7 @@ msgstr "You can close this tab if it does not redirect automatically."
 msgid "You can close this window."
 msgstr "You can close this window."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "You have control"
--- a/apps/web/src/locales/es/messages.po
+++ b/apps/web/src/locales/es/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (sin leer)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr "Pantalla de {0}"
@ -339,6 +339,7 @@ msgstr "Confirmaciones de acción"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "Acciones para {0}"
@ -354,7 +355,7 @@ msgstr "Activo"
 msgid "Active model"
 msgstr "Modelo activo"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "Actividad"
@ -647,7 +648,7 @@ msgstr "Archivar"
 msgid "archived"
 msgstr "archivado"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "Archivado"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "Bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Pantalla del bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Vista previa de la pantalla del bot"
@ -1088,7 +1089,7 @@ msgstr "Cerrar"
 msgid "Close chart"
 msgstr "Cerrar gráfico"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "Cerrar computadora"
@ -1128,7 +1129,7 @@ msgstr "Cerrar navegación"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "Cerrar panel"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr "Contraer {0}"
@ -1201,7 +1202,7 @@ msgstr "Computadora"
 msgid "Computer failed to boot"
 msgstr "La computadora no pudo iniciarse"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "La computadora está en reposo"
@ -1743,9 +1744,9 @@ msgstr "No se pudieron actualizar los avatares"
 msgid "Couldn't update messaging settings"
 msgstr "No se pudo actualizar la configuración de mensajería"
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "Crear"
@ -1902,14 +1903,14 @@ msgstr "Alcance predeterminado"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "Eliminar"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "Eliminar {0}"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "Expandir"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr "Expandir {0}"
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "Grupo"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "Cerrar sesión"
@ -2974,7 +2976,7 @@ msgstr "Mínimo"
 msgid "Minimize"
 msgstr "Minimizar"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr ""
@ -3097,7 +3099,7 @@ msgstr ""
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr ""
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "Abrir"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr "Abrir {0}"
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "Abrir en ventana completa"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "Abrir navegación"
@ -3931,7 +3933,7 @@ msgstr "Restableciendo…"
 msgid "Restart to update"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "Restaurar"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "Buscando…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "Configuración"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "Mostrar más"
 msgid "Show password"
 msgstr "Mostrar contraseña"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "Mostrar configuración"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "Pasos"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "Detener"
@ -4832,7 +4836,7 @@ msgstr "Subir"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "Uso"
@ -5088,7 +5092,7 @@ msgstr "Puedes cerrar esta pestaña si no redirige automáticamente."
 msgid "You can close this window."
 msgstr "Puedes cerrar esta ventana."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "Tienes el control"
--- a/apps/web/src/locales/hi/messages.po
+++ b/apps/web/src/locales/hi/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (अपठित)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr ""
@ -339,6 +339,7 @@ msgstr "कार्रवाई की पुष्टि"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "{0} के लिए कार्रवाइयां"
@ -354,7 +355,7 @@ msgstr ""
 msgid "Active model"
 msgstr "सक्रिय मॉडल"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "गतिविधि"
@ -647,7 +648,7 @@ msgstr "आर्काइव करें"
 msgid "archived"
 msgstr "आर्काइव किया गया"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "आर्काइव किया गया"
@ -812,11 +813,11 @@ msgstr "बॉट"
 msgid "Bot"
 msgstr "बॉट"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "बॉट स्क्रीन"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "बॉट स्क्रीन प्रीव्यू"
@ -1088,7 +1089,7 @@ msgstr "बंद करें"
 msgid "Close chart"
 msgstr "चार्ट बंद करें"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "कंप्यूटर बंद करें"
@ -1128,7 +1129,7 @@ msgstr "नेविगेशन बंद करें"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "पैनल बंद करें"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr ""
@ -1201,7 +1202,7 @@ msgstr "कंप्यूटर"
 msgid "Computer failed to boot"
 msgstr "कंप्यूटर शुरू नहीं हो सका"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "कंप्यूटर निष्क्रिय है"
@ -1743,9 +1744,9 @@ msgstr ""
 msgid "Couldn't update messaging settings"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "बनाएं"
@ -1902,14 +1903,14 @@ msgstr "डिफ़ॉल्ट स्कोप"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "डिलीट करें"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "{0} डिलीट करें"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "विस्तृत करें"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr ""
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "समूह"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "लॉग आउट"
@ -2974,7 +2976,7 @@ msgstr "न्यूनतम"
 msgid "Minimize"
 msgstr "छोटा करें"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr ""
@ -3097,7 +3099,7 @@ msgstr ""
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr ""
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "खोलें"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr ""
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "पूरी विंडो में खोलें"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "नेविगेशन खोलें"
@ -3931,7 +3933,7 @@ msgstr "रीसेट हो रहा है…"
 msgid "Restart to update"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "बहाल करें"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "खोजा जा रहा है…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "सेटिंग्स"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "और दिखाएँ"
 msgid "Show password"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "सेटिंग्स दिखाएं"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "चरण"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "रोकें"
@ -4832,7 +4836,7 @@ msgstr "अपलोड"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "उपयोग"
@ -5088,7 +5092,7 @@ msgstr "अगर यह अपने आप रीडायरेक्ट न
 msgid "You can close this window."
 msgstr "आप यह विंडो बंद कर सकते हैं।"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "नियंत्रण आपके पास है"
--- a/apps/web/src/locales/ko/messages.po
+++ b/apps/web/src/locales/ko/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (읽지 않음)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr "{0}의 화면"
@ -339,6 +339,7 @@ msgstr "작업 실행 전 확인"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "{0} 작업 메뉴"
@ -354,7 +355,7 @@ msgstr "활성"
 msgid "Active model"
 msgstr "현재 모델"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "활동"
@ -647,7 +648,7 @@ msgstr "보관"
 msgid "archived"
 msgstr "보관됨"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "보관됨"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "봇"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Bot 화면"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Bot 화면 미리보기"
@ -1088,7 +1089,7 @@ msgstr "닫기"
 msgid "Close chart"
 msgstr "차트 닫기"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "컴퓨터 닫기"
@ -1128,7 +1129,7 @@ msgstr "메뉴 닫기"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "패널 닫기"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr "{0} 접기"
@ -1201,7 +1202,7 @@ msgstr "컴퓨터"
 msgid "Computer failed to boot"
 msgstr "컴퓨터를 시작하지 못했습니다"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "컴퓨터가 절전 상태입니다"
@ -1743,9 +1744,9 @@ msgstr "아바타를 업데이트할 수 없습니다"
 msgid "Couldn't update messaging settings"
 msgstr "메시징 설정을 업데이트할 수 없습니다"
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "만들기"
@ -1902,14 +1903,14 @@ msgstr "기본 기억 범위"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "삭제"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "{0} 삭제"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "펼치기"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr "{0} 펼치기"
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "그룹"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "로그아웃"
@ -2974,7 +2976,7 @@ msgstr "최소"
 msgid "Minimize"
 msgstr "최소화"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr ""
@ -3097,7 +3099,7 @@ msgstr ""
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr ""
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "열기"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr "{0} 열기"
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "전체 창으로 열기"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "메뉴 열기"
@ -3931,7 +3933,7 @@ msgstr "재설정 중…"
 msgid "Restart to update"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "복원"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "검색 중…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "설정"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "더 보기"
 msgid "Show password"
 msgstr "비밀번호 표시"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "설정 보기"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "실행 단계"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "중지"
@ -4832,7 +4836,7 @@ msgstr "업로드"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "사용량"
@ -5088,7 +5092,7 @@ msgstr "자동으로 이동하지 않으면 이 탭을 닫아도 됩니다."
 msgid "You can close this window."
 msgstr "이 창을 닫아도 됩니다."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "직접 조작 중"
--- a/apps/web/src/locales/pt-BR/messages.po
+++ b/apps/web/src/locales/pt-BR/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (não lido)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr ""
@ -339,6 +339,7 @@ msgstr "Confirmações de ação"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "Ações para {0}"
@ -354,7 +355,7 @@ msgstr ""
 msgid "Active model"
 msgstr "Modelo ativo"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "Atividade"
@ -647,7 +648,7 @@ msgstr "Arquivar"
 msgid "archived"
 msgstr "arquivado"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "Arquivado"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "Bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Tela do bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Pré-visualização da tela"
@ -1088,7 +1089,7 @@ msgstr "Fechar"
 msgid "Close chart"
 msgstr "Fechar gráfico"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "Fechar computador"
@ -1128,7 +1129,7 @@ msgstr "Fechar navegação"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "Fechar painel"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr ""
@ -1201,7 +1202,7 @@ msgstr "Computador"
 msgid "Computer failed to boot"
 msgstr "Falha ao inicializar o computador"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "O computador está dormindo"
@ -1743,9 +1744,9 @@ msgstr ""
 msgid "Couldn't update messaging settings"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "Criar"
@ -1902,14 +1903,14 @@ msgstr "Escopo padrão"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "Excluir"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "Excluir {0}"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "Expandir"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr ""
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "Grupo"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "Sair"
@ -2974,7 +2976,7 @@ msgstr "Mínimo"
 msgid "Minimize"
 msgstr "Minimizar"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr ""
@ -3097,7 +3099,7 @@ msgstr ""
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr ""
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "Abrir"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr ""
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "Abrir em janela cheia"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "Abrir a navegação"
@ -3931,7 +3933,7 @@ msgstr "Redefinindo…"
 msgid "Restart to update"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "Restaurar"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "Pesquisando…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "Configurações"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "Mostrar mais"
 msgid "Show password"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "Mostrar configurações"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "Passos"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "Parar"
@ -4832,7 +4836,7 @@ msgstr "Enviar"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "Uso"
@ -5088,7 +5092,7 @@ msgstr "Você pode fechar esta guia se ela não for redirecionada automaticament
 msgid "You can close this window."
 msgstr "Você pode fechar esta janela."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "Você tem o controle"
--- a/apps/web/src/locales/ru/messages.po
+++ b/apps/web/src/locales/ru/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (непрочитано)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr "Экран {0}"
@ -339,6 +339,7 @@ msgstr "Подтверждения действий"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "Действия для {0}"
@ -354,7 +355,7 @@ msgstr "Активный"
 msgid "Active model"
 msgstr "Активная модель"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "Активность"
@ -647,7 +648,7 @@ msgstr "Архивировать"
 msgid "archived"
 msgstr "в архиве"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "В архиве"
@ -812,11 +813,11 @@ msgstr "Бот"
 msgid "Bot"
 msgstr "Бот"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Экран бота"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Предварительный просмотр экрана бота"
@ -1088,7 +1089,7 @@ msgstr "Закрыть"
 msgid "Close chart"
 msgstr "Закрыть график"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "Закрыть компьютер"
@ -1128,7 +1129,7 @@ msgstr "Закрыть навигацию"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "Закрыть панель"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr "Свернуть {0}"
@ -1201,7 +1202,7 @@ msgstr "Компьютер"
 msgid "Computer failed to boot"
 msgstr "Компьютер не смог загрузиться"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "Компьютер спит"
@ -1743,9 +1744,9 @@ msgstr "Не удалось обновить аватары"
 msgid "Couldn't update messaging settings"
 msgstr "Не удалось обновить настройки обмена сообщениями."
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "Создать"
@ -1902,14 +1903,14 @@ msgstr "Область действия по умолчанию"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "Удалить"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "Удалить {0}"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "Развернуть"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr "Развернуть {0}"
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "Группа"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr "Настройки локального сервера"
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "Выйти"
@ -2974,7 +2976,7 @@ msgstr "Минимальный"
 msgid "Minimize"
 msgstr "Свернуть"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr "Свернуть ботов"
@ -3097,7 +3099,7 @@ msgstr "Требуется ваше участие"
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr "Требуется ваше участие"
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "Открыть"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr "Открыть {0}"
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "Открыть в полном окне"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "Открыть навигацию"
@ -3931,7 +3933,7 @@ msgstr "Сброс…"
 msgid "Restart to update"
 msgstr "Перезапустить для обновления"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "Восстановить"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "Поиск…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "Настройки"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr "Показать ботов"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "Показать ещё"
 msgid "Show password"
 msgstr "Показать пароль"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "Показать настройки"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "Шаги"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "Остановить"
@ -4832,7 +4836,7 @@ msgstr "Загрузить"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "Использование"
@ -5088,7 +5092,7 @@ msgstr "Вы можете закрыть эту вкладку, если она
 msgid "You can close this window."
 msgstr "Вы можете закрыть это окно."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "Вы управляете"
--- a/apps/web/src/locales/tr/messages.po
+++ b/apps/web/src/locales/tr/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr " (okunmadı)"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr ""
@ -339,6 +339,7 @@ msgstr "İşlem onayları"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "{0} için işlemler"
@ -354,7 +355,7 @@ msgstr ""
 msgid "Active model"
 msgstr "Etkin model"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "Etkinlik"
@ -647,7 +648,7 @@ msgstr "Arşivle"
 msgid "archived"
 msgstr "arşivlendi"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "Arşivlendi"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "Bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Bot ekranı"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Bot ekranı önizlemesi"
@ -1088,7 +1089,7 @@ msgstr "Kapat"
 msgid "Close chart"
 msgstr "Grafiği kapat"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "Bilgisayarı kapat"
@ -1128,7 +1129,7 @@ msgstr "Gezinmeyi kapat"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "Paneli kapat"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr ""
@ -1201,7 +1202,7 @@ msgstr "Bilgisayar"
 msgid "Computer failed to boot"
 msgstr "Bilgisayar başlatılamadı"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "Bilgisayar uykuda"
@ -1743,9 +1744,9 @@ msgstr ""
 msgid "Couldn't update messaging settings"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "Oluştur"
@ -1902,14 +1903,14 @@ msgstr "Varsayılan kapsam"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "Sil"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "{0} sil"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "Genişlet"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr ""
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "Grup"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "Çıkış yap"
@ -2974,7 +2976,7 @@ msgstr "Minimal"
 msgid "Minimize"
 msgstr "Küçült"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr ""
@ -3097,7 +3099,7 @@ msgstr ""
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr ""
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "Aç"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr ""
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "Tam pencerede aç"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "Gezinmeyi aç"
@ -3931,7 +3933,7 @@ msgstr ""
 msgid "Restart to update"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "Geri yükle"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "Aranıyor…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "Ayarlar"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "Daha fazla göster"
 msgid "Show password"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "Ayarları göster"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "Adımlar"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "Durdur"
@ -4832,7 +4836,7 @@ msgstr "Yükle"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "Kullanım"
@ -5088,7 +5092,7 @@ msgstr "Otomatik yönlendirilmezsen bu sekmeyi kapatabilirsin."
 msgid "You can close this window."
 msgstr "Bu pencereyi kapatabilirsin."
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "Kontrol sende"
--- a/apps/web/src/locales/zh-CN/messages.po
+++ b/apps/web/src/locales/zh-CN/messages.po
@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid " (unread)"
 msgstr "（未读）"
@ -126,22 +126,22 @@ msgid "{0}, {label}"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, 1:1 conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, group conversation"
 msgstr ""
 #. placeholder {0}: item.chat.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/roster-rows.tsx
 msgid "{0}, main conversation"
 msgstr ""
 #. placeholder {0}: active.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "{0}'s screen"
 msgstr ""
@ -339,6 +339,7 @@ msgstr "操作确认"
 #. placeholder {0}: sectionMenu.section.name
 #: src/pages/BotContextMenu.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-group-header.tsx
 msgid "Actions for {0}"
 msgstr "{0} 的操作"
@ -354,7 +355,7 @@ msgstr "启用"
 msgid "Active model"
 msgstr "当前模型"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-header.tsx
 msgid "Activity"
 msgstr "动态"
@ -647,7 +648,7 @@ msgstr "归档"
 msgid "archived"
 msgstr "已归档"
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Archived"
 msgstr "已归档"
@ -812,11 +813,11 @@ msgstr "Bot"
 msgid "Bot"
 msgstr "Bot"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Bot screen"
 msgstr "Bot 屏幕"
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Bot screen preview"
 msgstr "Bot 屏幕预览"
@ -1088,7 +1089,7 @@ msgstr "关闭"
 msgid "Close chart"
 msgstr "关闭图表"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Close computer"
 msgstr "关闭电脑"
@ -1128,7 +1129,7 @@ msgstr "关闭导航"
 #: src/components/ArtifactPane.tsx
 #: src/components/browser/InAppBrowser.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Close panel"
 msgstr "关闭面板"
@ -1159,7 +1160,7 @@ msgid "Coder"
 msgstr ""
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Collapse {0}"
 msgstr "折叠 {0}"
@ -1201,7 +1202,7 @@ msgstr "电脑"
 msgid "Computer failed to boot"
 msgstr "电脑启动失败"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "Computer is asleep"
 msgstr "电脑已休眠"
@ -1743,9 +1744,9 @@ msgstr "无法更新头像"
 msgid "Couldn't update messaging settings"
 msgstr "无法更新消息设置"
 #: src/pages/Shell.tsx
 #: src/pages/shell/bot-panel.tsx
 #: src/pages/shell/dialogs.tsx
 #: src/pages/shell/sidebar-header.tsx
 msgid "Create"
 msgstr "创建"
@ -1902,14 +1903,14 @@ msgstr "默认范围"
 #: src/pages/KnowledgeSection.tsx
 #: src/pages/McpServersOverlay.tsx
 #: src/pages/RoutineEditor.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 #: src/pages/shell/dialogs.tsx
 msgid "Delete"
 msgstr "删除"
 #. placeholder {0}: bot.name
 #. placeholder {0}: group.name
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Delete {0}"
 msgstr "删除 {0}"
@ -2218,7 +2219,7 @@ msgid "Expand"
 msgstr "展开"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Expand {0}"
 msgstr "展开 {0}"
@ -2400,6 +2401,7 @@ msgstr ""
 #: src/components/stage/OoStage.tsx
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/side-panel-header.tsx
 msgid "Group"
 msgstr "群组"
@ -2791,7 +2793,7 @@ msgstr ""
 msgid "Local Server Settings"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Log out"
 msgstr "退出登录"
@ -2974,7 +2976,7 @@ msgstr "最低"
 msgid "Minimize"
 msgstr "最小化"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Minimize bots"
 msgstr ""
@ -3097,7 +3099,7 @@ msgstr ""
 #: src/components/MainInbox.tsx
 #: src/pages/ActivityList.tsx
 #: src/pages/HeuteBrief.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Needs you"
 msgstr ""
@ -3391,12 +3393,12 @@ msgid "Only file and folder names are read."
 msgstr ""
 #: src/pages/ScratchpadSection.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open"
 msgstr "打开"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Open {0}"
 msgstr "打开 {0}"
@ -3412,11 +3414,11 @@ msgstr ""
 msgid "Open in browser"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/computer-panel-preview.tsx
 msgid "Open in full window"
 msgstr "在完整窗口中打开"
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Open navigation"
 msgstr "打开导航"
@ -3931,7 +3933,7 @@ msgstr "正在重置…"
 msgid "Restart to update"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/archived-section.tsx
 msgid "Restore"
 msgstr "恢复"
@ -4136,7 +4138,7 @@ msgid "Searching…"
 msgstr "正在搜索…"
 #. placeholder {0}: group.title
-#: src/pages/Shell.tsx
+#: src/pages/shell/sidebar-group-header.tsx
 msgid "Select {0}"
 msgstr ""
@ -4201,7 +4203,8 @@ msgstr ""
 #: src/pages/MessagingSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 #: src/pages/shell/user-menu.tsx
 msgid "Settings"
 msgstr "设置"
@ -4253,10 +4256,11 @@ msgid "Show all {0}"
 msgstr ""
 #: src/pages/Shell.tsx
 #: src/pages/shell/sidebar-toggle-buttons.tsx
 msgid "Show bots"
 msgstr ""
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show computer"
 msgstr ""
@ -4272,7 +4276,7 @@ msgstr "显示更多"
 msgid "Show password"
 msgstr "显示密码"
-#: src/pages/Shell.tsx
+#: src/pages/shell/side-panel-header.tsx
 msgid "Show settings"
 msgstr "显示设置"
@ -4460,8 +4464,8 @@ msgid "Steps"
 msgstr "步骤"
 #: src/components/browser/InAppBrowser.tsx
 #: src/pages/Shell.tsx
 #: src/pages/shell/composer.tsx
 #: src/pages/shell/fullscreen-computer-overlay.tsx
 #: src/pages/shell/transcript.tsx
 msgid "Stop"
 msgstr "停止"
@ -4832,7 +4836,7 @@ msgstr "上传"
 #: src/pages/AccountSettingsOverlay.tsx
 #: src/pages/SettingsOverlay.tsx
-#: src/pages/Shell.tsx
+#: src/pages/shell/user-menu.tsx
 msgid "Usage"
 msgstr "用量"
@ -5088,7 +5092,7 @@ msgstr "如果没有自动跳转，可以关闭此标签页。"
 msgid "You can close this window."
 msgstr "可以关闭此窗口。"
-#: src/pages/Shell.tsx
+#: src/pages/shell/fullscreen-computer-overlay.tsx
 msgid "You have control"
 msgstr "你已接管"
--- a/apps/web/src/pages/Shell.tsx
+++ b/apps/web/src/pages/Shell.tsx
--- a/apps/web/src/pages/shell/archived-section.tsx
+++ b/apps/web/src/pages/shell/archived-section.tsx
@ -0,0 +1,85 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bot, Group } from "@rakazo/contracts";
 import { BotAvatar, Button, GroupAvatar } from "@rakazo/ui-web";
 /** Collapsible list of archived bots and groups at the foot of the sidebar. */
 export function ArchivedSection({
  bots,
  groups,
  open,
  onToggle,
  onRestoreBot,
  onRestoreGroup,
  onDeleteBot,
  onDeleteGroup,
 }: {
  bots: Bot[];
  groups: Group[];
  open: boolean;
  onToggle: () => void;
  onRestoreBot: (bot: Bot) => void;
  onRestoreGroup: (group: Group) => void;
  onDeleteBot: (bot: Bot) => void;
  onDeleteGroup: (group: Group) => void;
 }) {
  const { t } = useLingui();
  return (
    <div className="mt-2 border-t border-border pt-2">
      <button
        type="button"
        aria-expanded={open}
        onClick={onToggle}
        className="flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-ui-body rk-sidebar-muted hover:bg-sidebar-accent"
      >
        <span>
          <Trans>Archived</Trans>
        </span>
        <span>{bots.length + groups.length}</span>
      </button>
      {open ? (
        <>
          {bots.map((bot) => (
            <div key={bot.id} className="flex items-center gap-2 rounded-lg px-2.5 py-2">
              <BotAvatar color={bot.color} identity={bot.id} size={28} status={bot.status} />
              <span className="min-w-0 flex-1 truncate text-ui-body text-foreground/75" dir="auto">
                {bot.name}
              </span>
              <Button variant="ghost" size="xs" onClick={() => onRestoreBot(bot)}>
                <Trans>Restore</Trans>
              </Button>
              <Button
                variant="ghost"
                size="xs"
                className="text-destructive hover:text-destructive"
                aria-label={t`Delete ${bot.name}`}
                onClick={() => onDeleteBot(bot)}
              >
                <Trans>Delete</Trans>
              </Button>
            </div>
          ))}
          {groups.map((group) => (
            <div key={group.id} className="flex items-center gap-2 rounded-lg px-2.5 py-2">
              <GroupAvatar members={group.members} size={28} />
              <span className="min-w-0 flex-1 truncate text-ui-body text-foreground/75" dir="auto">
                {group.name}
              </span>
              <Button variant="ghost" size="xs" onClick={() => onRestoreGroup(group)}>
                <Trans>Restore</Trans>
              </Button>
              <Button
                variant="ghost"
                size="xs"
                className="text-destructive hover:text-destructive"
                aria-label={t`Delete ${group.name}`}
                onClick={() => onDeleteGroup(group)}
              >
                <Trans>Delete</Trans>
              </Button>
            </div>
          ))}
        </>
      ) : null}
    </div>
  );
 }
--- a/apps/web/src/pages/shell/computer-panel-preview.tsx
+++ b/apps/web/src/pages/shell/computer-panel-preview.tsx
@ -0,0 +1,96 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bot, ComputerStatus } from "@rakazo/contracts";
 import { Maximize2 } from "lucide-react";
 import type { ReactNode } from "react";
 import {
  ComputersUnavailableHint,
  computersAreUnavailable,
 } from "../../components/ComputersUnavailableHint";
 import { AgentCursor } from "../../components/computer/AgentCursor";
 import {
  computerLabel,
  computerPlaceholder,
  DesktopKindEmptyState,
  screenIframeSandbox,
 } from "./computer-screen";
 /** The bot's screen in the side panel: a live, non-interactive preview that opens full window. */
 export function ComputerPanelPreview({
  active,
  computer,
  computerOpen,
  booting,
  embeddedScreenUrl,
  computerScreenError,
  sandboxProvider,
  onOpen,
 }: {
  active: Bot;
  computer: ComputerStatus | null;
  computerOpen: boolean;
  booting: boolean;
  embeddedScreenUrl: string | null;
  computerScreenError: ReactNode;
  sandboxProvider: string | undefined;
  onOpen: () => void;
 }) {
  const { t } = useLingui();
  return (
    <>
      <div
        data-testid="computer-preview"
        className="group relative aspect-[16/10] overflow-hidden rounded-[14px] bg-background"
      >
        {computerOpen ? (
          <div className="grid h-full place-items-center text-sm text-muted-foreground/80">
            <Trans>Open in full window</Trans>
          </div>
        ) : computer?.kind === "desktop" ? (
          <DesktopKindEmptyState className="grid h-full place-items-center px-6 text-center text-sm text-muted-foreground/80" />
        ) : computer?.state === "running" && embeddedScreenUrl && !computerScreenError ? (
          <>
            <iframe
              title={t`Bot screen preview`}
              src={embeddedScreenUrl}
              sandbox={screenIframeSandbox(embeddedScreenUrl)}
              className="h-full w-full border-0 bg-black"
              allow="clipboard-read; clipboard-write"
              style={{ pointerEvents: "none" }}
            />
            <AgentCursor botId={active.id} color={active.color} name={active.name} />
          </>
        ) : (
          <div className="grid h-full place-items-center px-6 text-center text-sm text-muted-foreground/80">
            {computerScreenError ??
              (computersAreUnavailable(sandboxProvider) ? (
                <ComputersUnavailableHint />
              ) : (
                computerPlaceholder(
                  computer?.state,
                  booting,
                  computerLabel(computer?.mode, active.name),
                )
              ))}
          </div>
        )}
        {!computerScreenError ? (
          <button
            type="button"
            data-testid="computer-preview-open"
            className="absolute inset-0 flex cursor-pointer items-center justify-center bg-overlay/40 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
            aria-label={t`Open`}
            onClick={onOpen}
          >
            <span className="inline-flex items-center gap-2 rounded-full bg-overlay px-3.5 py-2 text-ui-body text-foreground shadow-md">
              <Maximize2 strokeWidth={1.9} aria-hidden className="size-icon-md" />
              <Trans>Open</Trans>
            </span>
          </button>
        ) : null}
      </div>
      <p className="mt-2 truncate text-ui-body text-muted-foreground" dir="auto">
        {t`${active.name}'s screen`}
      </p>
    </>
  );
 }
--- a/apps/web/src/pages/shell/fullscreen-computer-overlay.tsx
+++ b/apps/web/src/pages/shell/fullscreen-computer-overlay.tsx
@ -0,0 +1,196 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bot, ComputerReleaseReason, ComputerStatus, TaughtSkill } from "@rakazo/contracts";
 import { BotAvatar, Button } from "@rakazo/ui-web";
 import { X } from "lucide-react";
 import type { ReactNode } from "react";
 import { ComputerMaintenanceActions } from "../../components/ComputerMaintenanceActions";
 import { AgentCursor } from "../../components/computer/AgentCursor";
 import { TeachCaptureOverlay } from "../../components/teach/TeachCaptureOverlay";
 import { TeachComputerOverlayControl } from "../../components/teach/TeachComputerOverlay";
 import { TeachRecordingChrome, TeachStopButton } from "../../components/teach/TeachRecordingChrome";
 import {
  ComputerReleaseActions,
  computerLabel,
  DesktopKindEmptyState,
  screenIframeSandbox,
 } from "./computer-screen";
 /** The bot's computer in full window, where the user takes control or teaches a skill. */
 export function FullscreenComputerOverlay({
  active,
  computer,
  computerViewport,
  embeddedScreenUrl,
  computerScreenError,
  hasControl,
  recordingSkill,
  teachBusy,
  composerRunning,
  sending,
  sendError,
  onStopRun,
  onStopTeaching,
  onRelease,
  onRefreshTeaching,
  refreshThread,
  onClose,
 }: {
  active: Bot;
  computer: ComputerStatus | null;
  computerViewport: { height: number; offsetTop: number } | null;
  embeddedScreenUrl: string | null;
  computerScreenError: ReactNode;
  hasControl: boolean;
  recordingSkill: TaughtSkill | null;
  teachBusy: boolean;
  composerRunning: boolean;
  sending: boolean;
  sendError: string | null;
  onStopRun: () => Promise<void>;
  onStopTeaching: () => Promise<void>;
  onRelease: (reason?: ComputerReleaseReason) => Promise<void>;
  onRefreshTeaching: () => Promise<void>;
  refreshThread: (botId: string) => Promise<unknown>;
  onClose: () => void;
 }) {
  const { t } = useLingui();
  return (
    <div className="fixed inset-0 z-30 bg-background">
      <div
        data-testid="computer-viewport"
        className="fixed inset-x-0 top-0 flex flex-col bg-background"
        style={{
          height: computerViewport ? `${computerViewport.height}px` : "100dvh",
          top: computerViewport ? `${computerViewport.offsetTop}px` : undefined,
        }}
      >
        <div
          data-testid="computer-chrome"
          className="flex items-center justify-between gap-4 border-b border-sidebar-border px-[18px] py-3.5"
        >
          <div className="flex min-w-0 flex-1 items-center gap-3">
            <BotAvatar color={active.color} identity={active.id} size={28} status={active.status} />
            {recordingSkill ? (
              <TeachRecordingChrome
                recording={recordingSkill}
                busy={teachBusy}
                onStop={onStopTeaching}
                variant="overlay"
              />
            ) : (
              <span className="truncate text-ui-body font-medium text-foreground" dir="auto">
                {computerLabel(computer?.mode, active.name)}
              </span>
            )}
            {!recordingSkill && hasControl ? (
              computer?.takeoverRequested ? (
                <span className="rounded-full bg-warning/15 px-[11px] py-1 text-ui-body-sm text-warning">
                  <Trans>Needs you</Trans>
                </span>
              ) : (
                <span className="rounded-full bg-success/15 px-[11px] py-1 text-ui-body-sm text-success">
                  <Trans>You have control</Trans>
                </span>
              )
            ) : null}
          </div>
          <div className="flex items-center gap-3">
            {composerRunning ? (
              <Button
                type="button"
                variant="outline"
                size="sm"
                aria-label={t`Stop`}
                data-testid="computer-overlay-stop"
                onClick={() => void onStopRun()}
                disabled={sending}
              >
                <Trans>Stop</Trans>
              </Button>
            ) : null}
            {recordingSkill ? (
              <TeachStopButton busy={teachBusy} onStop={onStopTeaching} />
            ) : hasControl ? (
              <ComputerReleaseActions
                takeoverRequested={Boolean(computer?.takeoverRequested)}
                onRelease={onRelease}
              />
            ) : null}
            {active && !recordingSkill ? (
              <TeachComputerOverlayControl
                key={active.id}
                botId={active.id}
                computer={computer}
                busy={teachBusy}
                onRefresh={onRefreshTeaching}
              />
            ) : null}
            {active && !recordingSkill ? (
              <ComputerMaintenanceActions
                botId={active.id}
                computer={computer}
                onChanged={async () => {
                  await refreshThread(active.id);
                }}
              />
            ) : null}
            <Button
              variant="ghost"
              size="icon-sm"
              className="text-muted-foreground"
              aria-label={t`Close computer`}
              onClick={onClose}
            >
              <X strokeWidth={1.8} className="size-icon-md" />
            </Button>
          </div>
        </div>
        {sendError ? (
          <div
            role="alert"
            className="border-b border-destructive/40 bg-destructive/10 px-[18px] py-2 text-ui-body-sm text-destructive"
          >
            {sendError}
          </div>
        ) : null}
        <div className="relative min-h-0 flex-1 bg-background">
          {computer?.kind === "desktop" ? (
            <DesktopKindEmptyState className="grid h-full place-items-center px-8 text-center text-sm text-muted-foreground/80" />
          ) : computer?.state === "running" && embeddedScreenUrl && !computerScreenError ? (
            <>
              <iframe
                title={t`Bot screen`}
                src={embeddedScreenUrl}
                sandbox={screenIframeSandbox(embeddedScreenUrl)}
                className="h-full w-full border-0 bg-black"
                allow="clipboard-read; clipboard-write; fullscreen"
                style={{
                  pointerEvents: recordingSkill || !hasControl ? "none" : "auto",
                }}
              />
              {active && !hasControl ? (
                <AgentCursor botId={active.id} color={active.color} name={active.name} />
              ) : null}
              {active ? (
                <TeachCaptureOverlay
                  botId={active.id}
                  skill={recordingSkill}
                  enabled={Boolean(recordingSkill)}
                  screenWidth={computer?.screenWidth}
                  screenHeight={computer?.screenHeight}
                />
              ) : null}
            </>
          ) : (
            <div className="grid h-full place-items-center text-sm text-muted-foreground/80">
              {computerScreenError ??
                (computer?.state === "suspended"
                  ? t`Computer is asleep`
                  : computerLabel(computer?.mode, active.name))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
 }
--- a/apps/web/src/pages/shell/pointer-menu.tsx
+++ b/apps/web/src/pages/shell/pointer-menu.tsx
@ -0,0 +1,41 @@
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@rakazo/ui-web";
 import type { ReactNode } from "react";
 import type { ContextMenuPosition } from "../BotContextMenu";
 /** A dropdown menu opened at the pointer, for sidebar context menus. */
 export function PointerMenu({
  position,
  label,
  onClose,
  children,
 }: {
  position: ContextMenuPosition;
  label: string;
  onClose: () => void;
  children: ReactNode;
 }) {
  return (
    <DropdownMenu
      open
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      {/* Invisible anchor at the pointer position, mirroring the bot menu. */}
      <DropdownMenuTrigger
        render={
          <button
            type="button"
            tabIndex={-1}
            aria-hidden
            className="fixed size-0 p-0 opacity-0"
            style={{ left: position.x, top: position.y }}
          />
        }
      />
      <DropdownMenuContent aria-label={label} align="start" sideOffset={0} className="w-[220px]">
        {children}
      </DropdownMenuContent>
    </DropdownMenu>
  );
 }
--- a/apps/web/src/pages/shell/roster-rows.tsx
+++ b/apps/web/src/pages/shell/roster-rows.tsx
@ -0,0 +1,250 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import type { SpaceBot, SpaceGroup } from "@rakazo/contracts";
 import { BotAvatar, GroupAvatar } from "@rakazo/ui-web";
 import type { RefObject } from "react";
 import {
  needsYouChipLabel,
  rosterActivitySubtitle,
  rosterStatusDot,
 } from "../../lib/agent-activity";
 import { localizedPreview } from "../../lib/onboarding-copy";
 import type { ContextMenuPosition } from "../BotContextMenu";
 import { cleanRosterPreview, formatRosterTime } from "./roster-format";
 import {
  rosterNameClass,
  rosterPreviewClass,
  rosterRowClass,
  rosterTimeClass,
  rosterUnreadDotClass,
 } from "./roster-row-style";
 export type SidebarChatItem = { kind: "bot"; chat: SpaceBot } | { kind: "group"; chat: SpaceGroup };
 export type BotMenuRequest = {
  kind: "bot" | "group";
  id: string;
  position: ContextMenuPosition;
 };
 /** A bot in the conversations section: reorderable by drag or Alt+Arrow within its group. */
 export function TeamRosterRow({
  item,
  groupBotIds,
  draggedBotId,
  onDraggedBotIdChange,
  onReorder,
  selected,
  onOpen,
  activeSpaceId,
  menuAnchor,
  onMenu,
 }: {
  item: Extract<SidebarChatItem, { kind: "bot" }>;
  groupBotIds: string[];
  draggedBotId: string | null;
  onDraggedBotIdChange: (botId: string | null) => void;
  onReorder: (sourceId: string, targetId: string, groupBotIds: string[]) => void;
  selected: boolean;
  onOpen: () => void;
  activeSpaceId: string | undefined;
  menuAnchor: RefObject<HTMLElement | null>;
  onMenu: (menu: BotMenuRequest) => void;
 }) {
  const { t } = useLingui();
  return (
    <button
      type="button"
      draggable={item.kind === "bot"}
      data-roster-bot-id={item.kind === "bot" ? item.chat.id : undefined}
      aria-keyshortcuts={item.kind === "bot" ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
      onDragStart={(event) => {
        if (item.kind !== "bot") return;
        onDraggedBotIdChange(item.chat.id);
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.setData("text/plain", item.chat.id);
      }}
      onDragOver={(event) => {
        if (item.kind === "bot" && draggedBotId && groupBotIds.includes(draggedBotId)) {
          event.preventDefault();
          event.dataTransfer.dropEffect = "move";
        }
      }}
      onDrop={(event) => {
        if (item.kind !== "bot" || !draggedBotId) return;
        event.preventDefault();
        onReorder(draggedBotId, item.chat.id, groupBotIds);
        onDraggedBotIdChange(null);
      }}
      onDragEnd={() => onDraggedBotIdChange(null)}
      onKeyDown={(event) => {
        if (
          item.kind !== "bot" ||
          !event.altKey ||
          (event.key !== "ArrowUp" && event.key !== "ArrowDown")
        )
          return;
        const index = groupBotIds.indexOf(item.chat.id);
        const target = groupBotIds[index + (event.key === "ArrowUp" ? -1 : 1)];
        if (!target) return;
        event.preventDefault();
        onReorder(item.chat.id, target, groupBotIds);
      }}
      aria-label={
        item.kind === "bot"
          ? t`${item.chat.name}, 1:1 conversation`
          : t`${item.chat.name}, group conversation`
      }
      onClick={onOpen}
      onContextMenu={(event) => {
        if (item.chat.spaceId !== activeSpaceId) return;
        event.preventDefault();
        menuAnchor.current = event.currentTarget;
        onMenu({
          kind: item.kind,
          id: item.chat.id,
          position: { x: event.clientX, y: event.clientY },
        });
      }}
      className={`${rosterRowClass(selected)} cursor-grab active:cursor-grabbing`}
      style={{
        opacity: draggedBotId === item.chat.id ? 0.55 : 1,
      }}
    >
      <div className="relative shrink-0">
        <BotAvatar
          color={item.chat.color}
          identity={item.chat.id}
          size={40}
          status={item.chat.status}
        />
        <span
          className={`absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-sidebar ${
            rosterStatusDot(item.chat.status) === "idle" ? "bg-success" : "bg-warning animate-pulse"
          }`}
        />
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center justify-between gap-1.5">
          <div className="flex min-w-0 items-center gap-2 overflow-hidden">
            <span
              dir="auto"
              data-roster-bot-name=""
              className={`shrink-0 max-w-[170px] truncate text-ui-body tracking-tight ${rosterNameClass(
                item.chat.unread,
              )}`}
            >
              {item.chat.name}
            </span>
            {needsYouChipLabel(item.chat.status) ? (
              <span className="shrink-0 rounded-full border border-warning/30 bg-warning/10 px-2 py-0.5 text-ui-label font-medium text-foreground dark:text-warning">
                {needsYouChipLabel(item.chat.status)}
              </span>
            ) : item.chat.title ? (
              <span className="min-w-0 truncate rounded-full border border-border bg-muted px-2 py-0.5 text-ui-label font-medium text-muted-foreground">
                {item.chat.title}
              </span>
            ) : null}
            {item.chat.unread ? (
              <span className="sr-only">
                <Trans> (unread)</Trans>
              </span>
            ) : null}
          </div>
          <div className="flex shrink-0 items-center gap-1.5">
            <span className={rosterTimeClass}>{formatRosterTime(item.chat.updatedAt)}</span>
            {item.chat.unread ? <span aria-hidden="true" className={rosterUnreadDotClass} /> : null}
          </div>
        </div>
        <div
          dir="auto"
          className={`mt-0.5 truncate text-ui-body leading-snug ${rosterPreviewClass(
            item.chat.unread,
          )}`}
        >
          {rosterActivitySubtitle(item.chat.status, cleanRosterPreview(item.chat.preview))}
        </div>
      </div>
    </button>
  );
 }
 /** A conversation in the projects section; a project's main conversation has no chat actions. */
 export function ProjectRosterRow({
  item,
  selected,
  onOpen,
  activeSpaceId,
  menuAnchor,
  onMenu,
 }: {
  item: SidebarChatItem;
  selected: boolean;
  onOpen: () => void;
  activeSpaceId: string | undefined;
  menuAnchor: RefObject<HTMLElement | null>;
  onMenu: (menu: BotMenuRequest) => void;
 }) {
  const { t } = useLingui();
  return (
    <button
      type="button"
      aria-label={
        item.kind === "bot"
          ? t`${item.chat.name}, 1:1 conversation`
          : item.chat.kind === "main"
            ? t`${item.chat.name}, main conversation`
            : t`${item.chat.name}, group conversation`
      }
      onClick={onOpen}
      onContextMenu={(event) => {
        // A project's main conversation has no chat actions.
        if (item.chat.spaceId !== activeSpaceId || item.chat.kind === "main") return;
        event.preventDefault();
        menuAnchor.current = event.currentTarget;
        onMenu({
          kind: item.kind,
          id: item.chat.id,
          position: { x: event.clientX, y: event.clientY },
        });
      }}
      className={rosterRowClass(selected)}
    >
      {item.kind === "bot" ? (
        <BotAvatar
          color={item.chat.color}
          identity={item.chat.id}
          size={40}
          status={item.chat.status}
        />
      ) : (
        <GroupAvatar members={(item.chat as any).members} size={40} />
      )}
      <div className="min-w-0 flex-1">
        <div className="flex items-center justify-between gap-1.5">
          <div className="flex min-w-0 items-center gap-2 overflow-hidden">
            <span
              dir="auto"
              className={`shrink-0 max-w-[170px] truncate text-ui-body tracking-tight ${rosterNameClass(
                item.chat.unread,
              )}`}
            >
              {item.chat.name}
            </span>
          </div>
          <div className="flex shrink-0 items-center gap-1.5">
            <span className={rosterTimeClass}>{formatRosterTime(item.chat.updatedAt)}</span>
            {item.chat.unread ? <span aria-hidden="true" className={rosterUnreadDotClass} /> : null}
          </div>
        </div>
        <div
          dir="auto"
          className={`mt-0.5 truncate text-ui-body leading-snug ${rosterPreviewClass(
            item.chat.unread,
          )}`}
        >
          {cleanRosterPreview(localizedPreview(item.chat))}
        </div>
      </div>
    </button>
  );
 }
--- a/apps/web/src/pages/shell/side-panel-header.tsx
+++ b/apps/web/src/pages/shell/side-panel-header.tsx
@ -0,0 +1,73 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bot, ComputerStatus } from "@rakazo/contracts";
 import { Button } from "@rakazo/ui-web";
 import { Settings, X } from "lucide-react";
 import { ComputerMaintenanceActions } from "../../components/ComputerMaintenanceActions";
 import { computerPanelNeedsMaintenance } from "../../lib/thread-events";
 /** Title row of the computer and settings side panel, with its switch and close buttons. */
 export function SidePanelHeader({
  panel,
  active,
  computer,
  computerOpen,
  booting,
  refreshThread,
  onPanelChange,
 }: {
  panel: "computer" | "settings";
  active: Bot | undefined;
  computer: ComputerStatus | null;
  computerOpen: boolean;
  booting: boolean;
  refreshThread: (botId: string) => Promise<unknown>;
  onPanelChange: (panel: "computer" | "settings" | null) => void;
 }) {
  const { t } = useLingui();
  return (
    <div className="mb-4 flex items-center justify-between">
      <span className="text-ui-body text-muted-foreground">
        {panel === "settings" ? (
          <Trans>Settings</Trans>
        ) : active ? (
          (computer?.state ?? active.status)
        ) : (
          <Trans>Group</Trans>
        )}
      </span>
      <div className="flex gap-1">
        {active &&
        panel === "computer" &&
        !computerOpen &&
        computerPanelNeedsMaintenance(computer?.state, booting) ? (
          <ComputerMaintenanceActions
            botId={active.id}
            computer={computer}
            onChanged={async () => {
              await refreshThread(active.id);
            }}
          />
        ) : null}
        {active ? (
          <Button
            variant="ghost"
            size="icon-sm"
            aria-label={panel === "settings" ? t`Show computer` : t`Show settings`}
            onClick={() => onPanelChange(panel === "settings" ? "computer" : "settings")}
            className={panel === "settings" ? "text-foreground" : "text-muted-foreground"}
          >
            <Settings strokeWidth={1.7} className="size-icon-md" />
          </Button>
        ) : null}
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={t`Close panel`}
          onClick={() => onPanelChange(null)}
        >
          <X strokeWidth={1.8} className="size-icon-md" />
        </Button>
      </div>
    </div>
  );
 }
--- a/apps/web/src/pages/shell/sidebar-group-header.tsx
+++ b/apps/web/src/pages/shell/sidebar-group-header.tsx
@ -0,0 +1,161 @@
 import { useLingui } from "@lingui/react/macro";
 import type { BotSection, Space } from "@rakazo/contracts";
 import { Button } from "@rakazo/ui-web";
 import { ChevronDown, Folder, GripVertical, Lock, MoreHorizontal } from "lucide-react";
 import type { RefObject } from "react";
 import { ProjectDragGrip } from "../../components/SortableGroup";
 import type { ContextMenuPosition } from "../BotContextMenu";
 export type SidebarGroupHeaderGroup = {
  key: string;
  title: string | null;
  sectionId: string | null;
  spaceId: string;
  spaceName: string;
  canDeleteSpace: boolean;
  emptySpaceId: string | undefined;
  showLock: boolean;
 };
 export type SpaceMenuRequest = { id: string; position: ContextMenuPosition };
 export type SectionMenuRequest = {
  section: BotSection;
  spaceId: string;
  position: ContextMenuPosition;
 };
 /**
 * Collapsible title of a sidebar group. Project groups add a drag grip, show a lock for other
 * spaces and select an empty space instead of opening it.
 */
 export function SidebarGroupHeader({
  variant,
  group,
  collapsed,
  activeSpaceId,
  botSections,
  spaces,
  onOpenEmptySpace,
  onToggle,
  sectionMenuAnchor,
  onSectionMenu,
  spaceMenuAnchor,
  onSpaceMenu,
 }: {
  variant: "conversation" | "project";
  group: SidebarGroupHeaderGroup;
  collapsed: boolean;
  activeSpaceId: string | undefined;
  botSections: BotSection[];
  spaces: Space[];
  onOpenEmptySpace: (spaceId: string) => void;
  onToggle: (key: string) => void;
  sectionMenuAnchor: RefObject<HTMLElement | null>;
  onSectionMenu: (menu: SectionMenuRequest) => void;
  spaceMenuAnchor: RefObject<HTMLElement | null>;
  onSpaceMenu: (menu: SpaceMenuRequest) => void;
 }) {
  const { t } = useLingui();
  const project = variant === "project";
  return (
    <div
      className={
        project ? "flex items-center pt-3 pb-0.5 relative" : "flex items-center pt-3 pb-0.5"
      }
    >
      {project ? (
        // Drag grip — positioned to the left of the title text
        <ProjectDragGrip className="absolute left-1 top-1/2 -translate-y-1/2 w-6 h-6 rounded flex items-center justify-center text-muted-foreground/30 hover:text-muted-foreground/70 active:text-muted-foreground transition-colors cursor-grab active:cursor-grabbing">
          <GripVertical className="size-icon-sm" strokeWidth={2} />
        </ProjectDragGrip>
      ) : null}
      <button
        type="button"
        className={`flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg ${project ? "pl-8" : "px-2.5"} py-1 text-ui-label font-semibold tracking-wider uppercase text-foreground/65 dark:text-muted-foreground/80 hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring`}
        onClick={() => {
          if (group.emptySpaceId) {
            onOpenEmptySpace(group.emptySpaceId);
            return;
          }
          onToggle(group.key);
        }}
        onContextMenu={
          group.sectionId
            ? (event) => {
                event.preventDefault();
                // Prefer section rename over delete-space when both apply;
                // the dedicated space-actions button still opens the space menu.
                const sections =
                  group.spaceId === activeSpaceId
                    ? botSections
                    : (spaces.find((space) => space.id === group.spaceId)?.botSections ?? []);
                const section = sections.find((item) => item.id === group.sectionId);
                if (!section) return;
                sectionMenuAnchor.current = event.currentTarget;
                onSectionMenu({
                  section,
                  spaceId: group.spaceId,
                  position: { x: event.clientX, y: event.clientY },
                });
              }
            : group.canDeleteSpace
              ? (event) => {
                  event.preventDefault();
                  spaceMenuAnchor.current = event.currentTarget;
                  onSpaceMenu({
                    id: group.spaceId,
                    position: { x: event.clientX, y: event.clientY },
                  });
                }
              : undefined
        }
        aria-expanded={group.emptySpaceId ? undefined : !collapsed}
        aria-label={
          group.emptySpaceId
            ? project
              ? t`Select ${group.title}`
              : t`Open ${group.title}`
            : collapsed
              ? t`Expand ${group.title}`
              : t`Collapse ${group.title}`
        }
      >
        <span className="flex min-w-0 items-center gap-1.5 truncate">
          {project ? (
            group.showLock ? (
              <Lock strokeWidth={2} aria-hidden="true" className="size-icon-sm" />
            ) : null
          ) : (
            <Folder strokeWidth={2} aria-hidden="true" className="size-icon-sm" />
          )}
          <span className="truncate">{group.title}</span>
        </span>
        {group.emptySpaceId ? null : (
          <ChevronDown
            strokeWidth={1.8}
            className={`size-icon-md ${collapsed ? "-rotate-90 transition-transform" : "transition-transform"}`}
            aria-hidden="true"
          />
        )}
      </button>
      {group.canDeleteSpace ? (
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={t`Actions for ${group.spaceName}`}
          onClick={(event) => {
            const rect = event.currentTarget.getBoundingClientRect();
            spaceMenuAnchor.current = event.currentTarget;
            onSpaceMenu({
              id: group.spaceId,
              position: { x: rect.left, y: rect.bottom },
            });
          }}
        >
          <MoreHorizontal aria-hidden="true" className="size-icon-md" />
        </Button>
      ) : null}
    </div>
  );
 }
--- a/apps/web/src/pages/shell/sidebar-header.tsx
+++ b/apps/web/src/pages/shell/sidebar-header.tsx
@ -0,0 +1,118 @@
 import { useLingui } from "@lingui/react/macro";
 import type { Bot } from "@rakazo/contracts";
 import { Popover, PopoverContent, PopoverTrigger, Wordmark } from "@rakazo/ui-web";
 import { Bell } from "lucide-react";
 import { WindowChrome } from "../WindowChrome";
 import { BotCreatePicker } from "./bot-picker";
 /** Window chrome, wordmark, the activity toggle and the create menu atop the sidebar. */
 export function SidebarHeader({
  activityMode,
  onToggleActivityMode,
  createMenuOpen,
  onCreateMenuOpenChange,
  onCloseMobileSidebar,
  bots,
  onCreateBot,
  onOpenBot,
  onCreateGroup,
  onCreateSpace,
  onShowGroupInfo,
  onShowSpaceInfo,
 }: {
  activityMode: boolean;
  onToggleActivityMode: () => void;
  createMenuOpen: boolean;
  onCreateMenuOpenChange: (open: boolean) => void;
  onCloseMobileSidebar: () => void;
  bots: Bot[];
  onCreateBot: () => void;
  onOpenBot: (id: string) => void;
  onCreateGroup: () => void;
  onCreateSpace: () => void;
  onShowGroupInfo: () => void;
  onShowSpaceInfo: () => void;
 }) {
  const { t } = useLingui();
  return (
    <div className="app-drag flex items-center justify-between px-4 lg:px-6 2xl:px-8 pb-3 pt-4">
      <WindowChrome />
      <div className="flex-1 px-1">
        <Wordmark />
      </div>
      <div className="relative flex items-center gap-2.5">
        <button
          type="button"
          aria-label={t`Activity`}
          aria-pressed={activityMode}
          title={t`Activity`}
          data-activity-mode={activityMode ? "on" : "off"}
          onClick={onToggleActivityMode}
          className={`app-no-drag flex size-control-sm items-center justify-center rounded-full ${
            activityMode
              ? "bg-primary text-primary-foreground"
              : "rk-sidebar-muted hover:text-foreground/75"
          }`}
        >
          <Bell
            strokeWidth={1.8}
            fill={activityMode ? "currentColor" : "none"}
            aria-hidden="true"
            className="size-icon-md"
          />
        </button>
        <Popover open={createMenuOpen} onOpenChange={onCreateMenuOpenChange}>
          <PopoverTrigger
            className="app-no-drag text-[21px] rk-sidebar-muted hover:text-foreground/75"
            title={t`Create`}
            data-testid="create-menu-trigger"
          >
            +
          </PopoverTrigger>
          {/* Unmount with the state change so the panel it opens never coexists with the menu. */}
          {createMenuOpen ? (
            <PopoverContent
              align="end"
              className="app-no-drag w-auto gap-0 overflow-hidden p-0 data-closed:animate-none"
            >
              <BotCreatePicker
                bots={bots}
                onCreateBot={() => {
                  onCreateMenuOpenChange(false);
                  onCloseMobileSidebar();
                  onCreateBot();
                }}
                onOpenBot={(id) => {
                  onCreateMenuOpenChange(false);
                  onCloseMobileSidebar();
                  onOpenBot(id);
                }}
                onCreateGroup={() => {
                  onCreateMenuOpenChange(false);
                  onCloseMobileSidebar();
                  onCreateGroup();
                }}
                onCreateSpace={() => {
                  onCreateMenuOpenChange(false);
                  onCloseMobileSidebar();
                  onCreateSpace();
                }}
                onShowGroupInfo={() => {
                  onCreateMenuOpenChange(false);
                  onCloseMobileSidebar();
                  onShowGroupInfo();
                }}
                onShowSpaceInfo={() => {
                  onCreateMenuOpenChange(false);
                  onCloseMobileSidebar();
                  onShowSpaceInfo();
                }}
              />
            </PopoverContent>
          ) : null}
        </Popover>
      </div>
    </div>
  );
 }
--- a/apps/web/src/pages/shell/sidebar-toggle-buttons.tsx
+++ b/apps/web/src/pages/shell/sidebar-toggle-buttons.tsx
@ -0,0 +1,45 @@
 import { useLingui } from "@lingui/react/macro";
 import { Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { desktopBridge } from "../../lib/desktop";
 import { WindowChrome } from "../WindowChrome";
 /** Leading controls of a main header: open the mobile navigation or collapse the bots sidebar. */
 export function SidebarToggleButtons({
  collapsed,
  onCollapsedChange,
  onOpenNavigation,
 }: {
  collapsed: boolean;
  onCollapsedChange: (collapsed: boolean) => void;
  onOpenNavigation: () => void;
 }) {
  const { t } = useLingui();
  return (
    <>
      {/* Collapsed bots sidebar: this header is the leading edge for window chrome. */}
      {collapsed && desktopBridge() ? <WindowChrome /> : null}
      <button
        type="button"
        aria-label={t`Open navigation`}
        onClick={onOpenNavigation}
        className="app-no-drag grid size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent md:hidden"
      >
        <Menu strokeWidth={1.7} className="size-icon-lg" />
      </button>
      <button
        type="button"
        data-testid="toggle-bots-sidebar"
        aria-label={collapsed ? t`Show bots` : t`Minimize bots`}
        title={collapsed ? t`Show bots` : t`Minimize bots`}
        onClick={() => onCollapsedChange(!collapsed)}
        className="app-no-drag hidden size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent md:grid"
      >
        {collapsed ? (
          <PanelLeftOpen strokeWidth={1.7} aria-hidden="true" className="size-icon-lg" />
        ) : (
          <PanelLeftClose strokeWidth={1.7} aria-hidden="true" className="size-icon-lg" />
        )}
      </button>
    </>
  );
 }
--- a/apps/web/src/pages/shell/user-menu.tsx
+++ b/apps/web/src/pages/shell/user-menu.tsx
@ -0,0 +1,73 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@rakazo/ui-web";
 import { Gauge, LogOut, Settings } from "lucide-react";
 /** The account button at the foot of the sidebar and its menu. */
 export function UserMenu({
  open,
  onOpenChange,
  initials,
  userName,
  onOpenSettings,
  onOpenUsage,
  onLogOut,
 }: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  initials: string;
  userName: string;
  onOpenSettings: () => void;
  onOpenUsage: () => void;
  onLogOut: () => void;
 }) {
  const { t } = useLingui();
  return (
    <Popover open={open} onOpenChange={onOpenChange}>
      <PopoverTrigger
        data-testid="user-menu-trigger"
        className="flex items-center gap-[11px] px-[18px] py-3.5"
      >
        <span className="grid size-control-lg place-items-center rounded-full bg-accent text-ui-body-sm text-foreground/75">
          {initials}
        </span>
        <span className="text-[14.5px] text-foreground/90">{userName}</span>
      </PopoverTrigger>
      {open ? (
        <PopoverContent
          side="top"
          align="start"
          className="w-[calc(316px-1.5rem)] max-w-[calc(100vw-3rem)] gap-0 p-1 data-closed:animate-none"
        >
          <Button
            variant="ghost"
            className="w-full justify-start font-normal"
            aria-label={t`Settings`}
            onClick={() => {
              onOpenChange(false);
              onOpenSettings();
            }}
          >
            <Settings className="text-muted-foreground" strokeWidth={1.75} />
            <Trans>Settings</Trans>
          </Button>
          <Button
            variant="ghost"
            className="w-full justify-start font-normal"
            aria-label={t`Usage`}
            onClick={() => {
              onOpenChange(false);
              onOpenUsage();
            }}
          >
            <Gauge className="text-muted-foreground" strokeWidth={1.75} />
            <Trans>Usage</Trans>
          </Button>
          <Button variant="ghost" className="w-full justify-start font-normal" onClick={onLogOut}>
            <LogOut className="text-muted-foreground" strokeWidth={1.75} />
            <Trans>Log out</Trans>
          </Button>
        </PopoverContent>
      ) : null}
    </Popover>
  );
 }