aidevops 3.28.0 → 3.29.0

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,14 @@ 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 interface StoredAppearancePreferences {
   accentHue: number;
   fontPreference: FontPreference;
@@ -76,6 +81,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";
@@ -184,12 +190,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 +208,7 @@ export function App(): ReactElement {
         status={status.data}
         themePreference={themePreference}
       />
+      <SidebarResizeHandle />
       <Workspace
         activeItem={activeItem}
         activeSectionLabel={activeSectionLabel}
@@ -211,8 +220,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 +234,54 @@ export function App(): ReactElement {
   );
 }
 
+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>

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

@@ -5,7 +5,7 @@ import type { GuiFileRootId, GuiStatusData } from "../../gui-shared/src";
 import { SurfaceGlyph } from "./AppNavigation";
 import type { ConversationMode, ShellMode, SurfaceId, SurfaceNavItem } from "./app-model";
 import { inventorySurfaceConfigs, text } from "./app-model";
-import { CommandPalette, commandPaletteShortcutQuery } from "./CommandPalette";
+import { CommandPalette, type CommandPaletteSelection, commandPaletteShortcutQuery } from "./CommandPalette";
 import { FileExplorerSurface } from "./FileExplorerSurface";
 import { AppsSurface, EditableInventorySurface, InstallationSurface } from "./InventorySurfaces";
 import { AiProvidersSurface, LocalReposSurface, LockedVaultGate, OverviewSurface, PlannedSurface, ProjectsSurface, SecuritySurface, VaultSurface } from "./StatusSurfaces";
@@ -16,7 +16,7 @@ const communityLinks = {
   x: "https://x.com/marcuswquinn",
 } as const;
 
-export function Workspace({ activeItem, activeSectionLabel, activeSurface, canGoBack, canGoForward, conversationMode, fileRoot, goBack, goForward, selectedLocalRepoIndex, setActiveSurface, setConversationMode, setShellMode, shellMode, status }: {
+export function Workspace({ activeItem, activeSectionLabel, activeSurface, canGoBack, canGoForward, conversationMode, fileRoot, goBack, goForward, selectedLocalRepoIndex, selectedSessionId, setActiveSurface, setConversationMode, setSelectedLocalRepoIndex, setSelectedSessionId, setShellMode, shellMode, status }: {
   activeItem: SurfaceNavItem;
   activeSectionLabel: string;
   activeSurface: SurfaceId;
@@ -27,25 +27,28 @@ export function Workspace({ activeItem, activeSectionLabel, activeSurface, canGo
   goBack: () => void;
   goForward: () => void;
   selectedLocalRepoIndex: number;
+  selectedSessionId: string | undefined;
   setActiveSurface: (surface: SurfaceId) => void;
   setConversationMode: (mode: ConversationMode) => void;
+  setSelectedLocalRepoIndex: (index: number) => void;
+  setSelectedSessionId: (id: string | undefined) => void;
   setShellMode: (mode: ShellMode) => void;
   shellMode: ShellMode;
   status: GuiStatusData;
 }) {
   return (
     <section className="app-inset" aria-label={text.workspaceLabel}>
-      <WorkspaceHeader activeItem={activeItem} activeSectionLabel={activeSectionLabel} activeSurface={activeSurface} canGoBack={canGoBack} canGoForward={canGoForward} goBack={goBack} goForward={goForward} setActiveSurface={setActiveSurface} setConversationMode={setConversationMode} setShellMode={setShellMode} status={status} />
+      <WorkspaceHeader activeItem={activeItem} activeSectionLabel={activeSectionLabel} activeSurface={activeSurface} canGoBack={canGoBack} canGoForward={canGoForward} goBack={goBack} goForward={goForward} setActiveSurface={setActiveSurface} setConversationMode={setConversationMode} setSelectedLocalRepoIndex={setSelectedLocalRepoIndex} setSelectedSessionId={setSelectedSessionId} setShellMode={setShellMode} status={status} />
       <div className="workspace-scroll">
         {shellMode === "sessions"
-          ? <ConversationWorkspace conversationMode={conversationMode} selectedLocalRepoIndex={selectedLocalRepoIndex} status={status} />
+          ? <ConversationWorkspace conversationMode={conversationMode} selectedLocalRepoIndex={selectedLocalRepoIndex} selectedSessionId={selectedSessionId} status={status} />
           : <SurfaceContent activeItem={activeItem} activeSurface={activeSurface} fileRoot={fileRoot} status={status} />}
       </div>
     </section>
   );
 }
 
-function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoBack, canGoForward, goBack, goForward, setActiveSurface, setConversationMode, setShellMode, status }: {
+function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoBack, canGoForward, goBack, goForward, setActiveSurface, setConversationMode, setSelectedLocalRepoIndex, setSelectedSessionId, setShellMode, status }: {
   activeItem: SurfaceNavItem;
   activeSectionLabel: string;
   activeSurface: SurfaceId;
@@ -55,6 +58,8 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
   goForward: () => void;
   setActiveSurface: (surface: SurfaceId) => void;
   setConversationMode: (mode: ConversationMode) => void;
+  setSelectedLocalRepoIndex: (index: number) => void;
+  setSelectedSessionId: (id: string | undefined) => void;
   setShellMode: (mode: ShellMode) => void;
   status: GuiStatusData;
 }): ReactElement {
@@ -87,8 +92,13 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
     setProfileOpen(false);
   };
 
-  const openItem = ({ conversationMode, shellMode, surface }: { conversationMode?: ConversationMode; shellMode?: ShellMode; surface: SurfaceId }) => {
+  const openItem = ({ conversationMode, repoPathRef, sessionId, shellMode, surface }: CommandPaletteSelection) => {
+    const repoIndex = status.local_repos.repos.findIndex((repo) => repo.path_ref === repoPathRef);
     setShellMode(shellMode ?? "devices");
+    if (repoIndex >= 0) {
+      setSelectedLocalRepoIndex(repoIndex);
+    }
+    setSelectedSessionId(sessionId);
     if (conversationMode) {
       setConversationMode(conversationMode);
     }
@@ -176,15 +186,16 @@ function NotificationsMenu({ openSurface }: { openSurface: (surface: SurfaceId)
   );
 }
 
-function ConversationWorkspace({ conversationMode, selectedLocalRepoIndex, status }: {
+function ConversationWorkspace({ conversationMode, selectedLocalRepoIndex, selectedSessionId, status }: {
   conversationMode: ConversationMode;
   selectedLocalRepoIndex: number;
+  selectedSessionId: string | undefined;
   status: GuiStatusData;
 }) {
   const selectedRepo = status.local_repos.repos[selectedLocalRepoIndex] ?? status.local_repos.repos[0];
   const selectedSession = selectedRepo === undefined
     ? undefined
-    : status.opencode_sessions.sessions.find((session) => session.repo_path_ref === selectedRepo.path_ref);
+    : status.opencode_sessions.sessions.find((session) => session.id_ref === selectedSessionId && session.repo_path_ref === selectedRepo.path_ref) ?? status.opencode_sessions.sessions.find((session) => session.repo_path_ref === selectedRepo.path_ref);
   const title = conversationMode === "ai" ? selectedRepo?.name ?? text.opencodeSessions : text.teams;
 
   return (
@@ -295,7 +306,7 @@ function SurfaceContent({ activeItem, activeSurface, fileRoot, status }: {
     maintenance: <PlannedSurface label={text.maintenance} detail={text.projectWorkIntro} />,
     performance: <PlannedSurface label={text.performance} detail={text.projectWorkIntro} />,
     reports: <PlannedSurface label={text.reports} detail={text.projectWorkIntro} />,
-    apps: <AppsSurface />,
+    apps: <AppsSurface status={status} />,
     installation: <InstallationSurface />,
     projects: <ProjectsSurface status={status} />,
     security: <SecuritySurface status={status} />,

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

@@ -15,7 +15,9 @@ interface CommandPaletteItem {
   iconGlyph?: string;
   id: string;
   label: string;
+  repoPathRef?: string;
   searchText: string;
+  sessionId?: string;
   shellMode?: ShellMode;
   surface: SurfaceId;
   tag: string;
@@ -61,6 +63,8 @@ const plannedChannelItems: CommandPaletteItem[] = [
 
 export interface CommandPaletteSelection {
   conversationMode?: ConversationMode;
+  repoPathRef?: string;
+  sessionId?: string;
   shellMode?: ShellMode;
   surface: SurfaceId;
 }
@@ -80,7 +84,7 @@ export function CommandPalette({ activeSurface, close, initialQuery, openItem, s
       if (item.action === "copy-current-link") {
         void copyCurrentSurfaceLink(item.surface);
       }
-      openItem({ conversationMode: item.conversationMode, shellMode: item.shellMode, surface: item.surface });
+      openItem({ conversationMode: item.conversationMode, repoPathRef: item.repoPathRef, sessionId: item.sessionId, shellMode: item.shellMode, surface: item.surface });
     }
   }, [openItem, recentIds]);
 
@@ -165,13 +169,14 @@ export function commandPaletteMatches(items: CommandPaletteItem[], query: string
   const normalizedQuery = query.trim().toLowerCase();
   const prefix = normalizedQuery.charAt(0);
   const scopedItems = itemsForCommandPrefix(items, prefix);
+  const filterQuery = commandPaletteShortcutEntries.some(([shortcut]) => shortcut === prefix) ? normalizedQuery.slice(1).trim() : normalizedQuery;
 
   if (normalizedQuery.length === 0 || commandPaletteShortcutEntries.some(([shortcut]) => shortcut === normalizedQuery)) {
     return orderCommandItemsByRecency(scopedItems, recentIds).slice(0, 8);
   }
 
   return scopedItems
-    .filter((item) => item.searchText.toLowerCase().includes(normalizedQuery))
+    .filter((item) => item.searchText.toLowerCase().includes(filterQuery))
     .slice(0, 8);
 }
 
@@ -197,7 +202,9 @@ function commandPaletteItems(status: GuiStatusData, activeSurface: SurfaceId): C
     iconGlyph: "_",
     id: `session-${session.id_ref}`,
     label: `_${session.title}`,
+    repoPathRef: session.repo_path_ref,
     searchText: `_${session.title} ${session.title} ${session.repo_path_ref} ${session.agent} ${session.model}`,
+    sessionId: session.id_ref,
     surface: "git",
     shellMode: "sessions",
     conversationMode: "ai",

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

@@ -1,6 +1,8 @@
-import { type ReactElement, useState } from "react";
+import type { GuiAppActionId, GuiAppActionJobSummary, GuiManagedAppSummary, GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
+import { type Dispatch, type ReactElement, type SetStateAction, useEffect, useState } from "react";
+import { FiDownload, FiExternalLink, FiRefreshCw, FiRepeat, FiTrash2 } from "react-icons/fi";
 import type { InventoryColumn } from "./app-model";
-import { appRows, installationRows, text } from "./app-model";
+import { installationRows, text } from "./app-model";
 
 interface DraftInventoryRow {
   id: string;
@@ -9,7 +11,23 @@ interface DraftInventoryRow {
 
 let draftRowCounter = 0;
 
-export function AppsSurface(): ReactElement {
+export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement {
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const [jobs, setJobs] = useState<Record<string, GuiAppActionJobSummary>>({});
+  const selectedJob = selectedJobId === null ? null : jobs[selectedJobId] ?? null;
+
+  useEffect(() => {
+    if (selectedJob === null || selectedJob.status !== "running") {
+      return undefined;
+    }
+
+    const timer = window.setInterval(() => {
+      void refreshJob(selectedJob.id, setJobs);
+    }, 1_500);
+
+    return () => window.clearInterval(timer);
+  }, [selectedJob]);
+
   return (
     <section className="panel" aria-label={text.apps}>
       <div className="section-heading">
@@ -17,16 +35,98 @@ export function AppsSurface(): ReactElement {
         <h2>{text.apps}</h2>
         <p>{text.appsIntro}</p>
       </div>
-      <div className="data-table">
-        <div className="data-row header-row"><span>{text.name}</span><span>{text.latest}</span><span>{text.channel}</span><span>{text.website}</span></div>
-        {appRows.map((row) => (
-          <div className="data-row" key={row.name}><span>{row.name}</span><span>{row.latest}</span><span>{row.channel}</span><span>{row.website}</span></div>
+      <div className="managed-app-list">
+        {status.managed_apps.map((app) => (
+          <ManagedAppRow app={app} key={app.id} onJob={(job) => { setJobs((current) => ({ ...current, [job.id]: job })); setSelectedJobId(job.id); }} />
         ))}
       </div>
+      {selectedJob ? <AppActionTerminal job={selectedJob} /> : <p className="empty-state compact-notice">Install/update actions run as allowlisted background jobs and stream here. xterm.js with a node-pty bridge is the right next step for full TUI apps such as OpenCode; this view starts with non-interactive command logs.</p>}
+    </section>
+  );
+}
+
+function ManagedAppRow({ app, onJob }: { app: GuiManagedAppSummary; onJob: (job: GuiAppActionJobSummary) => void }): ReactElement {
+  return (
+    <article className="managed-app-row">
+      <div className="managed-app-main">
+        <div>
+          <p className="eyebrow">{app.category}</p>
+          <h3>{app.name}</h3>
+          <p>{app.description}</p>
+        </div>
+        <div className="managed-app-links">
+          <OriginLink href={app.origin_website_url} label={text.website} />
+          <OriginLink href={app.origin_repo_url} label="Repo" />
+        </div>
+      </div>
+      <div className="managed-app-details">
+        <ToggleSwitch checked={app.aidevops_install} label="setup installs" />
+        <ToggleSwitch checked={app.aidevops_update} label="update maintains" />
+        <AppMeta label="Installed" value={app.installed_version} />
+        <AppMeta label="Latest" value={app.latest_version} />
+        <AppMeta label={text.path} value={app.install_path_ref} />
+        <AppMeta label="Status" value={app.status} />
+      </div>
+      <div className="managed-app-actions">
+        {app.actions.map((action) => <AppActionButton action={action.id} app={app} disabled={!action.enabled} key={action.id} onJob={onJob} title={action.command_preview} />)}
+      </div>
+    </article>
+  );
+}
+
+function OriginLink({ href, label }: { href: string; label: string }): ReactElement {
+  if (href.length === 0) {
+    return <span className="origin-missing">{label}: source pending</span>;
+  }
+
+  return <a href={href} rel="noreferrer" target="_blank">{label} <FiExternalLink aria-hidden="true" /></a>;
+}
+
+function ToggleSwitch({ checked, label }: { checked: boolean; label: string }): ReactElement {
+  return <span className="managed-toggle"><span aria-hidden="true" className={checked ? "switch-track checked" : "switch-track"}><span /></span>{label}</span>;
+}
+
+function AppMeta({ label, value }: { label: string; value: string }): ReactElement {
+  return <span className="app-meta"><small>{label}</small><strong>{value}</strong></span>;
+}
+
+function AppActionButton({ action, app, disabled, onJob, title }: { action: GuiAppActionId; app: GuiManagedAppSummary; disabled: boolean; onJob: (job: GuiAppActionJobSummary) => void; title: string }): ReactElement {
+  const icon = action === "install" ? <FiDownload /> : action === "update" ? <FiRefreshCw /> : action === "reinstall" ? <FiRepeat /> : <FiTrash2 />;
+
+  async function runAction(): Promise<void> {
+    if (disabled) {
+      return;
+    }
+    if ((action === "remove" || action === "reinstall") && !window.confirm(`${action} ${app.name}?`)) {
+      return;
+    }
+
+    const response = await fetch(`/api/apps/${encodeURIComponent(app.id)}/actions/${action}`, { method: "POST" });
+    const envelope = await response.json() as GuiResponseEnvelope<GuiAppActionJobSummary>;
+    onJob(envelope.data);
+  }
+
+  return <button aria-label={`${action} ${app.name}`} className="app-action-button" disabled={disabled} onClick={() => void runAction()} title={title} type="button">{icon}</button>;
+}
+
+function AppActionTerminal({ job }: { job: GuiAppActionJobSummary }): ReactElement {
+  return (
+    <section className="app-terminal" aria-label="App action terminal output">
+      <header><strong>{job.app_id} {job.action}</strong><span>{job.status}{job.exit_code === null ? "" : ` (${job.exit_code})`}</span></header>
+      <pre>{job.output.join("\n")}</pre>
     </section>
   );
 }
 
+async function refreshJob(jobId: string, setJobs: Dispatch<SetStateAction<Record<string, GuiAppActionJobSummary>>>): Promise<void> {
+  const response = await fetch(`/api/apps/jobs/${encodeURIComponent(jobId)}`);
+  if (!response.ok) {
+    return;
+  }
+  const envelope = await response.json() as GuiResponseEnvelope<GuiAppActionJobSummary>;
+  setJobs((current) => ({ ...current, [envelope.data.id]: envelope.data }));
+}
+
 export function InstallationSurface(): ReactElement {
   return (
     <section className="panel" aria-label={text.installation}>

package/packages/gui-web/src/app-model.ts

@@ -141,7 +141,7 @@ export const text = {
   aidevops: "aidevops",
   appShell: "App shell",
   apps: "Apps",
-  appsIntro: "App and CLI inventory for tools installed or updated by aidevops. Version and homepage adapters are planned.",
+  appsIntro: "App and CLI inventory for tools installed or updated by aidevops, with origin links, install/update policy, versions, paths, and allowlisted background actions.",
   appStatusPending: "adapter pending",
   brands: "Brands",
   brandsIntro: "Draft brand inventory for names and website references.",
@@ -420,15 +420,6 @@ export const fileRootBySurface: Partial<Record<SurfaceId, GuiFileRootId>> = {
   git: "git",
 };
 
-export const appRows = [
-  { name: "aidevops", latest: text.appStatusPending, channel: "setup/update", website: "https://aidevops.sh" },
-  { name: "OpenCode", latest: text.appStatusPending, channel: "runtime", website: text.appStatusPending },
-  { name: "Bun", latest: text.appStatusPending, channel: "toolchain", website: text.appStatusPending },
-  { name: "GitHub CLI", latest: text.appStatusPending, channel: "git", website: text.appStatusPending },
-  { name: "ShellCheck", latest: text.appStatusPending, channel: "quality", website: text.appStatusPending },
-  { name: "Biome", latest: text.appStatusPending, channel: "quality", website: text.appStatusPending },
-];
-
 export const installationRows = [
   { name: "OpenCode runtime", install: true, update: true, scope: "core" },
   { name: "GUI desktop launcher", install: true, update: true, scope: "local" },
@@ -582,7 +573,7 @@ export function surfaceRecordCounts(status: GuiStatusData): SurfaceRecordCounts
   return {
     agents: status.capabilities.length,
     aiProviders: oauthAccounts,
-    apps: appRows.length,
+    apps: status.managed_apps.length || status.ai_apps.length,
     config: status.settings.key_count || status.settings.keys.length,
     git: status.local_repos.total || status.local_repos.repos.length,
     hosts: populatedInventoryRowCount("hosts"),