aidevops 3.28.0 → 3.29.1

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"),

package/packages/gui-web/src/status-client.ts

@@ -86,6 +86,7 @@ function normalizeStatusEnvelope(envelope: GuiResponseEnvelope<Partial<GuiStatus
       oauth_pool: { ...statusFixture.oauth_pool, ...data.oauth_pool, providers: data.oauth_pool?.providers ?? statusFixture.oauth_pool.providers },
       setup_targets: data.setup_targets ?? statusFixture.setup_targets,
       ai_apps: data.ai_apps ?? statusFixture.ai_apps,
+      managed_apps: data.managed_apps ?? statusFixture.managed_apps,
       vault: {
         ...statusFixture.vault,
         ...data.vault,