aidevops 3.28.0 → 3.29.1

package/packages/gui-desktop/scripts/install-macos-app.sh

@@ -135,6 +135,8 @@ set -euo pipefail
 REPO_ROOT="${root}"
 API_PORT="\${AIDEVOPS_GUI_API_PORT:-8787}"
 WEB_PORT="\${AIDEVOPS_GUI_WEB_PORT:-5173}"
+API_HEALTH_URL="http://127.0.0.1:\${API_PORT}/api/health"
+WEB_HEALTH_URL="http://127.0.0.1:\${WEB_PORT}/"
 LOG_DIR="\${HOME}/Library/Logs/aidevops-gui"
 LAUNCHER_LOG="\${LOG_DIR}/launcher.log"
 BUN_BIN=""
@@ -223,20 +225,18 @@ replace_stale_gui_on_port() {
   local pid=""
   local cwd=""
 
-  if ! url_ready "\${health_url}"; then
-    return 0
+  if url_ready "\${health_url}"; then
+    while IFS= read -r pid; do
+      if [[ -z "\${pid}" ]]; then
+        continue
+      fi
+      cwd="\$(pid_cwd "\${pid}" || true)"
+      if [[ "\${cwd}" == "\${REPO_ROOT}" ]]; then
+        return 0
+      fi
+    done < <(port_pids "\${port}")
   fi
 
-  while IFS= read -r pid; do
-    if [[ -z "\${pid}" ]]; then
-      continue
-    fi
-    cwd="\$(pid_cwd "\${pid}" || true)"
-    if [[ "\${cwd}" == "\${REPO_ROOT}" ]]; then
-      return 0
-    fi
-  done < <(port_pids "\${port}")
-
   while IFS= read -r pid; do
     if [[ -z "\${pid}" ]]; then
       continue
@@ -274,16 +274,6 @@ stop_gui_services() {
   return 0
 }
 
-api_contract_current() {
-  local payload=""
-
-  payload="\$(curl --silent --fail --max-time 2 "http://127.0.0.1:\${API_PORT}/api/status" 2>/dev/null || true)"
-  if [[ "\${payload}" == *'"local_repos"'* && "\${payload}" == *'"oauth_pool"'* ]]; then
-    return 0
-  fi
-  return 1
-}
-
 if [[ "\${MODE}" == "stop" ]]; then
   stop_gui_services
   exit 0
@@ -297,36 +287,33 @@ if [[ -f "\${HOME}/.aidevops/agents/VERSION" && -f "\${REPO_ROOT}/VERSION" ]]; t
   fi
 fi
 
-replace_stale_gui_on_port "\${API_PORT}" "http://127.0.0.1:\${API_PORT}/api/status"
-replace_stale_gui_on_port "\${WEB_PORT}" "http://127.0.0.1:\${WEB_PORT}/"
-if url_ready "http://127.0.0.1:\${API_PORT}/api/status" && ! api_contract_current; then
-  kill_gui_on_port_for_repo "\${API_PORT}"
-  kill_gui_on_port_for_repo "\${WEB_PORT}"
-fi
+replace_stale_gui_on_port "\${API_PORT}" "\${API_HEALTH_URL}"
+replace_stale_gui_on_port "\${WEB_PORT}" "\${WEB_HEALTH_URL}"
 sleep 1
 
-if ! url_ready "http://127.0.0.1:\${API_PORT}/api/status" || ! url_ready "http://127.0.0.1:\${WEB_PORT}/"; then
+if ! url_ready "\${API_HEALTH_URL}" || ! url_ready "\${WEB_HEALTH_URL}"; then
   require_bun
 fi
 
-if ! url_ready "http://127.0.0.1:\${API_PORT}/api/status"; then
+if ! url_ready "\${API_HEALTH_URL}"; then
   nohup env AIDEVOPS_GUI_API_PORT="\${API_PORT}" "\${BUN_BIN}" run packages/gui-api/src/server.ts >"\${LOG_DIR}/api.log" 2>&1 &
 fi
-if ! url_ready "http://127.0.0.1:\${WEB_PORT}/"; then
+if ! url_ready "\${WEB_HEALTH_URL}"; then
   nohup "\${BUN_BIN}" ./node_modules/vite/bin/vite.js --config packages/gui-web/vite.config.ts --host 127.0.0.1 --port "\${WEB_PORT}" >"\${LOG_DIR}/web.log" 2>&1 &
 fi
 
-if ! wait_for_url "http://127.0.0.1:\${API_PORT}/api/status" 20 1; then
+if ! wait_for_url "\${API_HEALTH_URL}" 20 0.25; then
   printf 'aidevops GUI API did not become ready. Check %s/api.log.\n' "\${LOG_DIR}" >"\${LAUNCHER_LOG}"
   notify "aidevops GUI API did not become ready. Check \${LOG_DIR}/api.log."
   exit 1
 fi
-if ! wait_for_url "http://127.0.0.1:\${WEB_PORT}/" 30 1; then
+if ! wait_for_url "\${WEB_HEALTH_URL}" 30 0.25; then
   printf 'aidevops GUI web did not become ready. Check %s/web.log.\n' "\${LOG_DIR}" >"\${LAUNCHER_LOG}"
   notify "aidevops GUI web did not become ready. Check \${LOG_DIR}/web.log."
   exit 1
 fi
 
+printf 'aidevops GUI services ready: API %s, web %s\n' "\${API_HEALTH_URL}" "\${WEB_HEALTH_URL}" >"\${LAUNCHER_LOG}"
 exit 0
 LAUNCHER
   chmod 755 "$helper_path"
@@ -362,6 +349,7 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
     private let mainWindowFrameAutosaveName = "aidevops-main-window"
     private let titlebarHeight: CGFloat = 24
     private let serviceQueue = DispatchQueue(label: "sh.aidevops.gui.services")
+    private var hasLoadedDashboard = false
     private var servicesStopped = false
 
     func applicationDidFinishLaunching(_ notification: Notification) {
@@ -604,7 +592,9 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
     @objc private func openDashboard(_ sender: Any?) {
         window.makeKeyAndOrderFront(nil)
         NSApp.activate(ignoringOtherApps: true)
-        loadAppURL()
+        if !hasLoadedDashboard {
+            loadAppURL()
+        }
     }
 
     @objc private func hideWindow(_ sender: Any?) {
@@ -895,12 +885,27 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
             loadStatusHTML(title: "Invalid aidevops URL", detail: "The configured web port is not valid: \(webPort)")
             return
         }
+        hasLoadedDashboard = true
         webView.load(URLRequest(url: url))
     }
 
     private func loadStatusHTML(title: String, detail: String) {
         let escapedTitle = escapeHTML(title)
         let escapedDetail = escapeHTML(detail).replacingOccurrences(of: "\n", with: "<br>")
+        let contentHTML: String
+        if title == "Starting aidevops" {
+            contentHTML = """
+            <main class="shell" aria-busy="true" aria-label="Loading aidevops interface">
+              <section class="brand" aria-label="Starting aidevops"><strong><span>aidevops</span><b>&gt;</b><em>_</em></strong><small>Preparing local GUI</small></section>
+              <aside class="rail panel"><i></i><i></i><i></i><i></i><i></i><i></i></aside>
+              <aside class="sidebar panel"><header><b></b><span></span></header><nav><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></nav><footer><i></i><i></i></footer></aside>
+              <section class="workspace panel"><header><b></b><span></span><i></i><i></i></header><article><h1>\(escapedTitle)</h1><p>\(escapedDetail)</p><div class="cards"><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="block"></div></article></section>
+              <footer class="status"><i></i><span></span><span></span><span></span><span></span><span></span></footer>
+            </main>
+            """
+        } else {
+            contentHTML = "<main class=\"message\"><h1>\(escapedTitle)</h1><p>\(escapedDetail)</p></main>"
+        }
         let html = """
         <!doctype html>
         <html lang="en">
@@ -908,14 +913,48 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <style>
-            body { align-items: center; background: #0a0a0a; color: #f6f7f2; display: flex; font: 15px -apple-system, BlinkMacSystemFont, sans-serif; height: 100vh; justify-content: center; margin: 0; }
-            main { background: #11130f; border: 1px solid #2c3324; border-radius: 18px; max-width: 560px; padding: 28px; }
+            :root { --accent: #b2e969; --border: #2c3324; --panel: #11130f; --muted: #b9c3b0; }
+            * { box-sizing: border-box; }
+            body { background: radial-gradient(ellipse at top left, rgb(178 233 105 / 10%), transparent 34%), #0a0a0a; color: #f6f7f2; font: 15px -apple-system, BlinkMacSystemFont, sans-serif; height: 100vh; margin: 0; }
+            .message { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; left: 50%; max-width: 560px; padding: 28px; position: fixed; top: 50%; transform: translate(-50%, -50%); }
             h1 { font-size: 22px; margin: 0 0 10px; }
             p { color: #b9c3b0; line-height: 1.5; margin: 0; }
             code { color: #b2e969; }
+            .shell { display: grid; gap: 8px; grid-template-columns: 72px 302px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 30px; height: 100vh; padding: 30px 8px 8px; }
+            .brand { align-items: center; backdrop-filter: blur(18px); background: rgb(17 19 15 / 78%); border: 1px solid rgb(178 233 105 / 34%); border-radius: 24px; box-shadow: 0 24px 90px rgb(178 233 105 / 14%), 0 20px 80px rgb(0 0 0 / 35%); display: grid; gap: 10px; justify-items: center; left: 50%; padding: 26px 30px; position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 48px)); z-index: 20; }
+            .brand strong { align-items: baseline; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: clamp(34px, 7vw, 64px); font-weight: 900; letter-spacing: -0.08em; line-height: .9; }
+            .brand span { color: #f6f7f2; font-size: .48em; letter-spacing: -0.04em; margin-right: .18em; }
+            .brand b, .brand em { color: var(--accent); font-style: normal; }
+            .brand em { animation: cursor 0.95s steps(1, end) infinite; }
+            .brand small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
+            .panel, .status { background: rgb(17 19 15 / 92%); border: 1px solid var(--border); border-radius: 18px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); overflow: hidden; }
+            .rail { align-content: start; display: grid; gap: 10px; justify-items: center; padding: 12px 8px; }
+            .rail i, .sidebar b, .workspace b { border-radius: 12px; height: 44px; width: 44px; }
+            .sidebar { display: grid; grid-template-rows: auto 1fr auto; }
+            .sidebar header, .workspace header { align-items: center; display: flex; gap: 12px; padding: 16px; }
+            .sidebar header span { flex: 1; height: 18px; }
+            .sidebar nav, .sidebar footer, .workspace article { display: grid; gap: 12px; padding: 16px; }
+            .sidebar nav i { height: 18px; }
+            .sidebar footer { border-top: 1px solid var(--border); }
+            .workspace { display: grid; grid-template-rows: auto 1fr; }
+            .workspace header { border-bottom: 1px solid var(--border); }
+            .workspace header span { flex: 1; height: 38px; }
+            .workspace header i { border-radius: 999px; height: 34px; width: 34px; }
+            .workspace article { align-content: start; gap: 18px; }
+            .cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+            .cards i { border-radius: 18px; height: 128px; }
+            .block { border-radius: 20px; height: 220px; }
+            .status { align-items: center; display: flex; gap: 10px; grid-column: 1 / -1; justify-content: center; padding: 0 12px; }
+            .status i { border-radius: 999px; height: 8px; width: 8px; }
+            .status span { height: 10px; width: 96px; }
+            .rail i, .sidebar b, .sidebar span, .sidebar i, .workspace b, .workspace span, .workspace i, .cards i, .block, .status i, .status span { animation: pulse 1.35s ease-in-out infinite; background: linear-gradient(90deg, #1a2116, rgb(178 233 105 / 18%), #1a2116); background-size: 220% 100%; border: 1px solid var(--border); border-radius: 999px; display: block; }
+            .block, .cards i { border-radius: 18px; }
+            @keyframes pulse { 0% { background-position: 120% 0; opacity: .52; } 50% { opacity: .95; } 100% { background-position: -120% 0; opacity: .52; } }
+            @keyframes cursor { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
+            @media (prefers-reduced-motion: reduce) { .rail i, .sidebar b, .sidebar span, .sidebar i, .workspace b, .workspace span, .workspace i, .cards i, .block, .status i, .status span, .brand em { animation: none; } }
           </style>
         </head>
-        <body><main><h1>\(escapedTitle)</h1><p>\(escapedDetail)</p></main></body>
+        <body>\(contentHTML)</body>
         </html>
         """
         webView.loadHTMLString(html, baseURL: nil)

package/packages/gui-shared/src/contracts.ts

@@ -1,6 +1,6 @@
 export type GuiRouteClassification = "read" | "write" | "destructive";
 
-export type GuiOperationId = "setup.status.read" | "capabilities.read" | "filesystem.read" | "vault.status.read";
+export type GuiOperationId = "setup.status.read" | "capabilities.read" | "filesystem.read" | "vault.status.read" | "apps.action.run" | "apps.action.status";
 
 export type GuiFileRootId = "agents" | "config" | "localSetup" | "git";
 
@@ -23,7 +23,7 @@ export interface GuiResponseEnvelope<TData> {
 
 export interface GuiRouteManifest {
   route: string;
-  method: "GET";
+  method: "GET" | "POST";
   operation_id: GuiOperationId;
   classification: GuiRouteClassification;
   source_surface: string;
@@ -68,6 +68,44 @@ export interface GuiFileExplorerData {
   entry_limit: number;
 }
 
+export type GuiAppActionId = "install" | "update" | "reinstall" | "remove";
+
+export interface GuiManagedAppActionSummary {
+  id: GuiAppActionId;
+  label: string;
+  enabled: boolean;
+  command_preview: string;
+  confirmation: "none" | "recommended" | "required";
+}
+
+export interface GuiManagedAppSummary {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  origin_website_url: string;
+  origin_repo_url: string;
+  aidevops_install: boolean;
+  aidevops_update: boolean;
+  installed_version: string;
+  latest_version: string;
+  install_path_ref: string;
+  status: "found" | "missing" | "unchecked";
+  actions: GuiManagedAppActionSummary[];
+}
+
+export interface GuiAppActionJobSummary {
+  id: string;
+  app_id: string;
+  action: GuiAppActionId;
+  status: "running" | "completed" | "failed" | "rejected";
+  command_preview: string;
+  started_at: string;
+  finished_at: string | null;
+  exit_code: number | null;
+  output: string[];
+}
+
 export interface GuiSecretReference {
   name: string;
   status: "configured" | "missing" | "unchecked";
@@ -318,6 +356,7 @@ export interface GuiStatusData {
   oauth_pool: GuiOAuthPoolSummary;
   setup_targets: GuiSetupTargetSummary[];
   ai_apps: GuiAiAppSummary[];
+  managed_apps: GuiManagedAppSummary[];
   vault: GuiVaultStatusData;
   capabilities: GuiCapabilitySummary[];
   secrets: GuiSecretReference[];
@@ -357,6 +396,28 @@ export const VAULT_STATUS_ROUTE_MANIFEST: GuiRouteManifest = {
   redactions: ["secret_values", "credential_paths", "private_key_material", "vault_passphrases", "recovery_material"],
 };
 
+export const APP_ACTION_ROUTE_MANIFEST: GuiRouteManifest = {
+  route: "/api/apps/:appId/actions/:action",
+  method: "POST",
+  operation_id: "apps.action.run",
+  classification: "write",
+  source_surface: "apps",
+  adapter: "appActions.startAppAction",
+  command_pattern: ["allowlisted", "aidevops", "setup/update", "background-job"],
+  redactions: ["secret_values", "credential_paths", "private_key_material"],
+};
+
+export const APP_ACTION_STATUS_ROUTE_MANIFEST: GuiRouteManifest = {
+  route: "/api/apps/jobs/:jobId",
+  method: "GET",
+  operation_id: "apps.action.status",
+  classification: "read",
+  source_surface: "apps",
+  adapter: "appActions.readAppActionJob",
+  command_pattern: ["background-job", "metadata-and-output-only"],
+  redactions: ["secret_values", "credential_paths", "private_key_material"],
+};
+
 export const GUI_FILE_ROOTS: readonly GuiFileRootDefinition[] = [
   {
     id: "agents",

package/packages/gui-shared/src/fixtures.ts

@@ -162,6 +162,7 @@ export const statusFixture: GuiStatusData = {
       needs_update: false,
     },
   ],
+  managed_apps: [],
   vault: {
     status: "uninitialized",
     setup_state: "uninitialized",

package/packages/gui-web/src/App.tsx

@@ -1,5 +1,5 @@
 import type { GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
-import { type ReactElement, useEffect, useState } from "react";
+import { type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactElement, useEffect, useState } from "react";
 import { MachineRail, Sidebar } from "./AppNavigation";
 import { Workspace } from "./AppWorkspace";
 import type { ConversationMode, FontPreference, FontSizePreference, ShellMode, SurfaceId, ThemePreference } from "./app-model";
@@ -32,9 +32,16 @@ export const appearanceStorageKeys = {
   machineRail: "aidevops-gui-show-machine-rail",
   showBorders: "aidevops-gui-show-borders",
   showNavCounts: "aidevops-gui-show-nav-counts",
+  sidebarWidth: "aidevops-gui-sidebar-width",
   theme: "aidevops-gui-theme",
 } as const;
 
+const defaultSidebarWidth = 302;
+const minSidebarWidth = 248;
+const maxSidebarWidth = 520;
+export const loadingSkeletonPanelLabels = ["machine rail", "sidebar", "workspace", "status bar"] as const;
+export const loadingBrandGlyph = ">_";
+
 export interface StoredAppearancePreferences {
   accentHue: number;
   fontPreference: FontPreference;
@@ -65,6 +72,7 @@ export function readStoredAppearancePreferences(storage: ReadableAppearanceStora
 export function App(): ReactElement {
   const [storedAppearancePreferences] = useState<StoredAppearancePreferences>(() => readStoredAppearancePreferences());
   const [status, setStatus] = useState<GuiResponseEnvelope<GuiStatusData>>(mockedStatus());
+  const [statusLoading, setStatusLoading] = useState(true);
   const [navigation, setNavigation] = useState<NavigationHistory>({ entries: ["overview"], index: 0 });
   const [themePreference, setThemePreference] = useState<ThemePreference>(storedAppearancePreferences.themePreference);
   const [accentHue, setAccentHue] = useState(storedAppearancePreferences.accentHue);
@@ -76,6 +84,7 @@ export function App(): ReactElement {
   const [shellMode, setShellMode] = useState<ShellMode>("devices");
   const [conversationMode, setConversationMode] = useState<ConversationMode>("ai");
   const [selectedLocalRepoIndex, setSelectedLocalRepoIndex] = useState(0);
+  const [selectedSessionId, setSelectedSessionId] = useState<string | undefined>();
   const [systemTheme, setSystemTheme] = useState<"light" | "dark">("light");
   const resolvedTheme = themePreference === "system" ? systemTheme : themePreference;
   const activeSurface: SurfaceId = navigation.entries[navigation.index] ?? "overview";
@@ -153,7 +162,8 @@ export function App(): ReactElement {
   useEffect(() => {
     fetchStatus()
       .then(setStatus)
-      .catch(() => setStatus(mockedStatus()));
+      .catch(() => setStatus(mockedStatus()))
+      .finally(() => setStatusLoading(false));
   }, []);
 
   useEffect(() => {
@@ -173,6 +183,10 @@ export function App(): ReactElement {
     setSelectedLocalRepoIndex((current) => Math.min(current, Math.max(0, status.data.local_repos.repos.length - 1)));
   }, [status.data.local_repos.repos.length]);
 
+  if (statusLoading) {
+    return <AppLoadingSkeleton machineRailVisible={machineRailVisible} />;
+  }
+
   return (
     <main className={machineRailVisible ? "app-shell" : "app-shell machine-rail-collapsed"}>
       <div className="desktop-titlebar-tagline" aria-hidden="true">Your data protected. Your systems managed. Your creations published.</div>
@@ -184,12 +198,14 @@ export function App(): ReactElement {
         fontSizePreference={fontSizePreference}
         fontPreference={fontPreference}
         selectedLocalRepoIndex={selectedLocalRepoIndex}
+        selectedSessionId={selectedSessionId}
         setAccentHue={setAccentHue}
         setActiveSurface={setActiveSurface}
         setConversationMode={setConversationMode}
         setFontSizePreference={setFontSizePreference}
         setFontPreference={setFontPreference}
         setSelectedLocalRepoIndex={setSelectedLocalRepoIndex}
+        setSelectedSessionId={setSelectedSessionId}
         setShellMode={setShellMode}
         setShowBorders={setShowBorders}
         setShowNavCounts={setShowNavCounts}
@@ -200,6 +216,7 @@ export function App(): ReactElement {
         status={status.data}
         themePreference={themePreference}
       />
+      <SidebarResizeHandle />
       <Workspace
         activeItem={activeItem}
         activeSectionLabel={activeSectionLabel}
@@ -211,8 +228,11 @@ export function App(): ReactElement {
         goBack={goBack}
         goForward={goForward}
         selectedLocalRepoIndex={selectedLocalRepoIndex}
+        selectedSessionId={selectedSessionId}
         setActiveSurface={setActiveSurface}
         setConversationMode={setConversationMode}
+        setSelectedLocalRepoIndex={setSelectedLocalRepoIndex}
+        setSelectedSessionId={setSelectedSessionId}
         setShellMode={setShellMode}
         shellMode={shellMode}
         status={status.data}
@@ -222,6 +242,115 @@ export function App(): ReactElement {
   );
 }
 
+export function AppLoadingSkeleton({ machineRailVisible }: { machineRailVisible: boolean }): ReactElement {
+  return (
+    <main className={machineRailVisible ? "app-shell app-loading-shell" : "app-shell app-loading-shell machine-rail-collapsed"} aria-busy="true" aria-label="Loading aidevops interface">
+      <div className="desktop-titlebar-tagline loading-line loading-titlebar" aria-hidden="true" />
+      <LoadingBrandOverlay />
+      {machineRailVisible ? (
+        <section className="machine-rail loading-panel" aria-label={loadingSkeletonPanelLabels[0]}>
+          {Array.from({ length: 6 }, (_, index) => <span className="loading-orb" key={index} />)}
+        </section>
+      ) : null}
+      <section className="app-sidebar loading-panel" aria-label={loadingSkeletonPanelLabels[1]}>
+        <div className="loading-sidebar-header">
+          <span className="loading-logo" />
+          <span className="loading-line loading-line-wide" />
+        </div>
+        <span className="loading-pill" />
+        <div className="loading-list">
+          {Array.from({ length: 12 }, (_, index) => <span className={index % 3 === 0 ? "loading-line loading-line-short" : "loading-line"} key={index} />)}
+        </div>
+        <div className="loading-sidebar-footer">
+          <span className="loading-pill" />
+          <span className="loading-line" />
+        </div>
+      </section>
+      <SidebarResizeHandle />
+      <section className="app-inset loading-panel" aria-label={loadingSkeletonPanelLabels[2]}>
+        <div className="workspace-header loading-workspace-header">
+          <span className="loading-icon" />
+          <span className="loading-line loading-line-wide" />
+          <span className="loading-search" />
+          <span className="loading-circle" />
+          <span className="loading-circle" />
+        </div>
+        <div className="loading-workspace-body">
+          <span className="loading-line loading-line-hero" />
+          <div className="loading-card-grid">
+            {Array.from({ length: 6 }, (_, index) => <span className="loading-card" key={index} />)}
+          </div>
+          <span className="loading-panel-block" />
+        </div>
+      </section>
+      <div className="desktop-status-bar loading-status-bar" aria-label={loadingSkeletonPanelLabels[3]}>
+        {Array.from({ length: 8 }, (_, index) => <span className={index === 0 ? "loading-dot" : "loading-line"} key={index} />)}
+      </div>
+    </main>
+  );
+}
+
+function LoadingBrandOverlay(): ReactElement {
+  return (
+    <div className="loading-brand-overlay" aria-label="Starting aidevops">
+      <span className="loading-brand-mark" aria-hidden="true">
+        <span className="loading-brand-word">aidevops</span>
+        <span className="loading-brand-chevron">&gt;</span>
+        <span className="loading-brand-cursor">_</span>
+      </span>
+      <span className="loading-brand-status">Preparing local GUI</span>
+    </div>
+  );
+}
+
+export function clampSidebarWidth(width: number): number {
+  return Math.min(maxSidebarWidth, Math.max(minSidebarWidth, Math.round(width)));
+}
+
+function SidebarResizeHandle(): ReactElement {
+  const [sidebarWidth, setSidebarWidth] = useState(() => readStoredSidebarWidth());
+
+  useEffect(() => {
+    document.documentElement.style.setProperty("--sidebar-width", `${sidebarWidth}px`);
+    persistAppearancePreference(appearanceStorageKeys.sidebarWidth, String(sidebarWidth));
+  }, [sidebarWidth]);
+
+  const startSidebarResize = (event: ReactMouseEvent<HTMLElement>) => {
+    const startX = event.clientX;
+    const startWidth = sidebarWidth;
+    const resizeSidebar = (moveEvent: MouseEvent) => setSidebarWidth(clampSidebarWidth(startWidth + moveEvent.clientX - startX));
+    const stopResize = () => {
+      document.documentElement.classList.remove("resizing-sidebar");
+      window.removeEventListener("mousemove", resizeSidebar);
+      window.removeEventListener("mouseup", stopResize);
+    };
+
+    event.preventDefault();
+    document.documentElement.classList.add("resizing-sidebar");
+    window.addEventListener("mousemove", resizeSidebar);
+    window.addEventListener("mouseup", stopResize);
+  };
+
+  const resizeSidebarWithKeyboard = (event: ReactKeyboardEvent<HTMLElement>) => {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      event.preventDefault();
+      setSidebarWidth((current) => clampSidebarWidth(current + (event.key === "ArrowRight" ? 16 : -16)));
+    }
+
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setSidebarWidth(event.key === "Home" ? minSidebarWidth : maxSidebarWidth);
+    }
+  };
+
+  return <hr aria-label="Resize sidebar" aria-orientation="vertical" aria-valuemax={maxSidebarWidth} aria-valuemin={minSidebarWidth} aria-valuenow={sidebarWidth} className="sidebar-resize-handle" onKeyDown={resizeSidebarWithKeyboard} onMouseDown={startSidebarResize} tabIndex={0} />;
+}
+
+function readStoredSidebarWidth(storage: ReadableAppearanceStorage | undefined = browserLocalStorage()): number {
+  const savedWidth = Number.parseInt(storage?.getItem(appearanceStorageKeys.sidebarWidth) ?? "", 10);
+  return Number.isFinite(savedWidth) ? clampSidebarWidth(savedWidth) : defaultSidebarWidth;
+}
+
 function sendNativeAccentHue(hue: number): void {
   const webkit = (window as WebKitBridgeWindow).webkit;
   webkit?.messageHandlers?.accentHue?.postMessage(hue);

package/packages/gui-web/src/AppNavigation.tsx

@@ -110,19 +110,21 @@ export function MachineRail({ machine }: { machine?: GuiMachineSummary }) {
   );
 }
 
-export function Sidebar({ activeSurface, accentHue, conversationMode, fontPreference, fontSizePreference, selectedLocalRepoIndex, setAccentHue, setActiveSurface, setConversationMode, setFontPreference, setFontSizePreference, setSelectedLocalRepoIndex, setShellMode, setShowBorders, setShowNavCounts, setThemePreference, shellMode, showBorders, showNavCounts, status, themePreference }: {
+export function Sidebar({ activeSurface, accentHue, conversationMode, fontPreference, fontSizePreference, selectedLocalRepoIndex, selectedSessionId, setAccentHue, setActiveSurface, setConversationMode, setFontPreference, setFontSizePreference, setSelectedLocalRepoIndex, setSelectedSessionId, setShellMode, setShowBorders, setShowNavCounts, setThemePreference, shellMode, showBorders, showNavCounts, status, themePreference }: {
   activeSurface: SurfaceId;
   accentHue: number;
   conversationMode: ConversationMode;
   fontPreference: FontPreference;
   fontSizePreference: FontSizePreference;
   selectedLocalRepoIndex: number;
+  selectedSessionId: string | undefined;
   setAccentHue: (hue: number) => void;
   setActiveSurface: (surface: SurfaceId) => void;
   setConversationMode: (mode: ConversationMode) => void;
   setFontPreference: (font: FontPreference) => void;
   setFontSizePreference: (size: FontSizePreference) => void;
   setSelectedLocalRepoIndex: (index: number) => void;
+  setSelectedSessionId: (id: string | undefined) => void;
   setShellMode: (mode: ShellMode) => void;
   setShowBorders: (show: boolean) => void;
   setShowNavCounts: (show: boolean) => void;
@@ -154,8 +156,10 @@ export function Sidebar({ activeSurface, accentHue, conversationMode, fontPrefer
         </> : <ConversationSidebar
           conversationMode={conversationMode}
           selectedLocalRepoIndex={selectedLocalRepoIndex}
+          selectedSessionId={selectedSessionId}
           setConversationMode={setConversationMode}
           setSelectedLocalRepoIndex={setSelectedLocalRepoIndex}
+          setSelectedSessionId={setSelectedSessionId}
           status={status}
         />}
       </nav>
@@ -203,11 +207,13 @@ function IconSwitch<TValue extends string>({ ariaLabel, options, value }: {
   );
 }
 
-function ConversationSidebar({ conversationMode, selectedLocalRepoIndex, setConversationMode, setSelectedLocalRepoIndex, status }: {
+function ConversationSidebar({ conversationMode, selectedLocalRepoIndex, selectedSessionId, setConversationMode, setSelectedLocalRepoIndex, setSelectedSessionId, status }: {
   conversationMode: ConversationMode;
   selectedLocalRepoIndex: number;
+  selectedSessionId: string | undefined;
   setConversationMode: (mode: ConversationMode) => void;
   setSelectedLocalRepoIndex: (index: number) => void;
+  setSelectedSessionId: (id: string | undefined) => void;
   status: GuiStatusData;
 }) {
   const repos = status.local_repos.repos;
@@ -215,6 +221,7 @@ function ConversationSidebar({ conversationMode, selectedLocalRepoIndex, setConv
   const sessions = selectedRepo === undefined
     ? []
     : status.opencode_sessions.sessions.filter((session) => session.repo_path_ref === selectedRepo.path_ref);
+  const activeSessionId = sessions.some((session) => session.id_ref === selectedSessionId) ? selectedSessionId : sessions[0]?.id_ref;
   const canSelectPreviousRepo = selectedLocalRepoIndex > 0;
   const canSelectNextRepo = selectedLocalRepoIndex < repos.length - 1;
 
@@ -226,19 +233,18 @@ function ConversationSidebar({ conversationMode, selectedLocalRepoIndex, setConv
       <section className="repo-session-selector" aria-label={text.localRepoSelector}>
         <span className="repo-selector-heading" id="local-repo-selector-label">{text.localRepos}</span>
         <div className="selector-with-stepper repo-selector-row">
-          <button aria-label="Previous local repo" className="selector-step-button" disabled={!canSelectPreviousRepo} onClick={() => setSelectedLocalRepoIndex(Math.max(0, selectedLocalRepoIndex - 1))} type="button"><FiChevronLeft aria-hidden="true" /></button>
-          <select aria-labelledby="local-repo-selector-label" onChange={(event) => setSelectedLocalRepoIndex(Number.parseInt(event.currentTarget.value, 10))} value={Math.min(selectedLocalRepoIndex, Math.max(0, repos.length - 1))}>
+          <button aria-label="Previous local repo" className="selector-step-button" disabled={!canSelectPreviousRepo} onClick={() => { setSelectedLocalRepoIndex(Math.max(0, selectedLocalRepoIndex - 1)); setSelectedSessionId(undefined); }} type="button"><FiChevronLeft aria-hidden="true" /></button>
+          <select aria-labelledby="local-repo-selector-label" onChange={(event) => { setSelectedLocalRepoIndex(Number.parseInt(event.currentTarget.value, 10)); setSelectedSessionId(undefined); }} value={Math.min(selectedLocalRepoIndex, Math.max(0, repos.length - 1))}>
             {repos.length === 0 ? <option value={0}>No local repos</option> : repos.map((repo, index) => <option key={repo.path_ref} value={index}>{repo.name}</option>)}
           </select>
-          <button aria-label="Next local repo" className="selector-step-button" disabled={!canSelectNextRepo} onClick={() => setSelectedLocalRepoIndex(Math.min(repos.length - 1, selectedLocalRepoIndex + 1))} type="button"><FiChevronRight aria-hidden="true" /></button>
+          <button aria-label="Next local repo" className="selector-step-button" disabled={!canSelectNextRepo} onClick={() => { setSelectedLocalRepoIndex(Math.min(repos.length - 1, selectedLocalRepoIndex + 1)); setSelectedSessionId(undefined); }} type="button"><FiChevronRight aria-hidden="true" /></button>
         </div>
       </section>
       <section className="sidebar-group session-history-list">
-        <h2>{text.sessionHistory}</h2>
         {selectedRepo ? <ul>
           {sessions.length === 0
             ? <li><button className="surface-link active" type="button"><span className="surface-icon" aria-hidden="true"><FiHash /></span><span className="surface-copy"><strong>{selectedRepo.name}</strong><small>No OpenCode sessions found for this repo yet.</small></span><em>{text.planned}</em></button></li>
-            : sessions.map((session, index) => <li key={session.id_ref}><button className={index === 0 ? "surface-link active" : "surface-link"} type="button"><span className="surface-icon" aria-hidden="true"><FiHash /></span><span className="surface-copy"><strong>{session.title}</strong><small>{session.updated_at}</small></span></button></li>)}
+            : sessions.map((session) => <li key={session.id_ref}><button className={activeSessionId === session.id_ref ? "surface-link active" : "surface-link"} onClick={() => setSelectedSessionId(session.id_ref)} type="button"><span className="surface-icon" aria-hidden="true"><FiHash /></span><span className="surface-copy"><strong>{session.title}</strong><small>{session.updated_at}</small></span></button></li>)}
         </ul> : <p className="empty-sidebar-state">No local repos discovered.</p>}
       </section>
       </>}
@@ -251,13 +257,11 @@ function PeopleChannelList() {
     <section aria-label="People channels">
       <div className="notice compact-notice">{text.simplexReady}</div>
       <section className="sidebar-group session-history-list">
-        <h2>{text.teams}</h2>
         <ul>
           {["aidevops", "clients", "ops"].map((team) => <li key={team}><button className="surface-link" type="button"><span className="surface-icon" aria-hidden="true"><FiHash /></span><span className="surface-copy"><strong>{team}</strong><small>SimpleX team channel placeholder</small></span></button></li>)}
         </ul>
       </section>
       <section className="sidebar-group session-history-list">
-        <h2>{text.directMessages}</h2>
         <ul>
           {["Marcus", "AI DevOps"].map((person) => <li key={person}><button className="surface-link" type="button"><span className="surface-icon" aria-hidden="true"><FiMessageSquare /></span><span className="surface-copy"><strong>{person}</strong><small>encrypted DM placeholder</small></span></button></li>)}
         </ul>