aidevops 3.29.5 → 3.29.7

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

@@ -1,6 +1,6 @@
 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 { FiChevronDown, FiDownload, FiExternalLink, FiRefreshCw, FiRepeat, FiTrash2 } from "react-icons/fi";
 import type { InventoryColumn } from "./app-model";
 import { installationRows, text } from "./app-model";
 
@@ -13,9 +13,17 @@ let draftRowCounter = 0;
 
 export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement {
   const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const [expandedAppIds, setExpandedAppIds] = useState<Set<string>>(() => new Set(status.managed_apps.length > 0 ? [status.managed_apps[0].id] : []));
   const [jobs, setJobs] = useState<Record<string, GuiAppActionJobSummary>>({});
   const selectedJob = selectedJobId === null ? null : jobs[selectedJobId] ?? null;
 
+  useEffect(() => {
+    if (status.managed_apps.length === 0) {
+      return;
+    }
+    setExpandedAppIds((current) => current.size === 0 ? new Set([status.managed_apps[0].id]) : current);
+  }, [status.managed_apps]);
+
   useEffect(() => {
     if (selectedJob === null || selectedJob.status !== "running") {
       return undefined;
@@ -37,28 +45,51 @@ export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement
       </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); }} />
+          <ManagedAppPanel
+            app={app}
+            expanded={expandedAppIds.has(app.id)}
+            job={jobForApp(app.id, jobs, selectedJob)}
+            key={app.id}
+            onJob={(job) => {
+              setJobs((current) => ({ ...current, [job.id]: job }));
+              setSelectedJobId(job.id);
+              setExpandedAppIds((current) => toggledAppIds(current, app.id, true));
+            }}
+            onToggle={() => setExpandedAppIds((current) => toggledAppIds(current, app.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>}
+      <p className="empty-state compact-notice">Install/update actions run as allowlisted background jobs and stream inside each app panel. 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 {
+function ManagedAppPanel({ app, expanded, job, onJob, onToggle }: { app: GuiManagedAppSummary; expanded: boolean; job: GuiAppActionJobSummary | null; onJob: (job: GuiAppActionJobSummary) => void; onToggle: () => 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" />
+    <article className={expanded ? "managed-app-card expanded" : "managed-app-card"}>
+      <button aria-expanded={expanded} className="managed-app-summary" data-tooltip={`${expanded ? "Collapse" : "Expand"} ${app.name} controls`} onClick={onToggle} type="button">
+        <span className="managed-app-title-block">
+          <span className="eyebrow">{app.category}</span>
+          <strong>{app.name}</strong>
+          <span>{app.description}</span>
+        </span>
+        <span className="managed-app-summary-meta">
+          <SummaryChip label="Status" value={app.status} />
+          <SummaryChip label="Installed" value={app.installed_version} />
+          <SummaryChip label="Latest" value={app.latest_version} />
+          <FiChevronDown aria-hidden="true" className="managed-app-chevron" />
+        </span>
+      </button>
+      {expanded ? <div className="managed-app-body">
+        <div className="managed-app-toolbar">
+          <div className="managed-app-links">
+            <OriginLink href={app.origin_website_url} label={text.website} />
+            <OriginLink href={app.origin_repo_url} label="Repo" />
+          </div>
+          <div className="managed-app-actions">
+            {app.actions.map((action) => <AppActionButton action={action.id} app={app} disabled={!action.enabled} key={action.id} onJob={onJob} commandPreview={action.command_preview} />)}
+          </div>
         </div>
-      </div>
       <div className="managed-app-details">
         <ToggleSwitch checked={app.aidevops_install} label="setup installs" />
         <ToggleSwitch checked={app.aidevops_update} label="update maintains" />
@@ -67,19 +98,22 @@ function ManagedAppRow({ app, onJob }: { app: GuiManagedAppSummary; onJob: (job:
         <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>
+      {job ? <AppActionTerminal job={job} /> : <p className="empty-state compact-notice">No recent command output for this app. Run an action to open this app's terminal log.</p>}
+      </div> : null}
     </article>
   );
 }
 
+function SummaryChip({ label, value }: { label: string; value: string }): ReactElement {
+  return <span className="managed-summary-chip"><small>{label}</small><span>{value}</span></span>;
+}
+
 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>;
+  return <a data-tooltip={`Open ${label.toLowerCase()} destination`} href={href} rel="noreferrer" target="_blank">{label} <FiExternalLink aria-hidden="true" /></a>;
 }
 
 function ToggleSwitch({ checked, label }: { checked: boolean; label: string }): ReactElement {
@@ -90,7 +124,7 @@ function AppMeta({ label, value }: { label: string; value: string }): ReactEleme
   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 {
+function AppActionButton({ action, app, commandPreview, disabled, onJob }: { action: GuiAppActionId; app: GuiManagedAppSummary; commandPreview: string; disabled: boolean; onJob: (job: GuiAppActionJobSummary) => void }): ReactElement {
   const icon = action === "install" ? <FiDownload /> : action === "update" ? <FiRefreshCw /> : action === "reinstall" ? <FiRepeat /> : <FiTrash2 />;
 
   async function runAction(): Promise<void> {
@@ -106,7 +140,7 @@ function AppActionButton({ action, app, disabled, onJob, title }: { action: GuiA
     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>;
+  return <button aria-label={`${action} ${app.name}`} className={action === "remove" ? "app-action-button remove" : "app-action-button"} data-tooltip={commandPreview} disabled={disabled} onClick={() => void runAction()} type="button">{icon}<span>{action}</span></button>;
 }
 
 function AppActionTerminal({ job }: { job: GuiAppActionJobSummary }): ReactElement {
@@ -127,6 +161,25 @@ async function refreshJob(jobId: string, setJobs: Dispatch<SetStateAction<Record
   setJobs((current) => ({ ...current, [envelope.data.id]: envelope.data }));
 }
 
+function jobForApp(appId: string, jobs: Record<string, GuiAppActionJobSummary>, selectedJob: GuiAppActionJobSummary | null): GuiAppActionJobSummary | null {
+  if (selectedJob?.app_id === appId) {
+    return selectedJob;
+  }
+
+  return Object.values(jobs).reverse().find((job) => job.app_id === appId) ?? null;
+}
+
+function toggledAppIds(current: Set<string>, appId: string, forceOpen = false): Set<string> {
+  const next = new Set(current);
+  if (forceOpen || !next.has(appId)) {
+    next.add(appId);
+  } else {
+    next.delete(appId);
+  }
+
+  return next;
+}
+
 export function InstallationSurface(): ReactElement {
   return (
     <section className="panel" aria-label={text.installation}>

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

@@ -330,6 +330,10 @@ function plannedNavItem(id: SurfaceId, label: string, description: string, icon:
   return { id, label, description, icon, badge: text.planned };
 }
 
+function plannedCommsGroup(label: string, items: SurfaceNavItem[]): SurfaceNavGroup {
+  return { label, mode: "comms", items };
+}
+
 export const navGroups: SurfaceNavGroup[] = [
   {
     label: text.development,
@@ -388,36 +392,28 @@ export const navGroups: SurfaceNavGroup[] = [
       { id: "marketplaces", label: text.marketplaces, description: "Storefronts and seller profiles", icon: "package", badge: text.planned },
     ],
   },
-  {
-    label: text.management,
-    mode: "comms",
-    items: [
-      plannedNavItem("channels", text.channels, "Team channels", "hash"),
-      plannedNavItem("directMessages", text.directMessages, "Direct and group DMs", "message"),
-      { id: "emailAccounts", label: text.emailAccounts, description: "Mail account sync", icon: "mail", badge: text.planned },
-      { id: "messagingAccounts", label: text.messagingAccounts, description: "Messaging account sync", icon: "message", badge: text.planned },
-      { id: "events", label: text.calendars, description: "CalDAV calendar sync", icon: "calendar", badge: text.planned },
-      { id: "contacts", label: text.contacts, description: "CardDAV contact sync", icon: "users", badge: text.planned },
-      { id: "tasks", label: text.tasks, description: "CalDAV task sync", icon: "list", badge: text.planned },
-      { id: "notes", label: text.notes, description: "Synced notes", icon: "note", badge: text.planned },
-      { id: "bookmarks", label: text.bookmarks, description: "Saved links and references", icon: "bookmark", badge: text.planned },
-    ],
-  },
-  {
-    label: text.projectWork,
-    mode: "comms",
-    items: [
-      { id: "inbox", label: text.inbox, description: "Project intake", icon: "folder", badge: text.planned },
-      { id: "campaigns", label: text.campaigns, description: "Campaign folders", icon: "folder", badge: text.planned },
-      { id: "cases", label: text.cases, description: "Case folders", icon: "folder", badge: text.planned },
-      { id: "projectConfig", label: text.config, description: "Project configuration", icon: "folder", badge: text.planned },
-      { id: "feedback", label: text.feedback, description: "Feedback folders", icon: "folder", badge: text.planned },
-      { id: "knowledge", label: text.knowledge, description: "Knowledge folders", icon: "folder", badge: text.planned },
-      { id: "maintenance", label: text.maintenance, description: "Maintenance folders", icon: "folder", badge: text.planned },
-      { id: "performance", label: text.performance, description: "Performance folders", icon: "folder", badge: text.planned },
-      { id: "reports", label: text.reports, description: "Report folders", icon: "folder", badge: text.planned },
-    ],
-  },
+  plannedCommsGroup(text.management, [
+    plannedNavItem("channels", text.channels, "Team channels", "hash"),
+    plannedNavItem("directMessages", text.directMessages, "Direct and group DMs", "message"),
+    plannedNavItem("emailAccounts", text.emailAccounts, "Mail account sync", "mail"),
+    plannedNavItem("messagingAccounts", text.messagingAccounts, "Messaging account sync", "message"),
+    plannedNavItem("events", text.calendars, "CalDAV calendar sync", "calendar"),
+    plannedNavItem("contacts", text.contacts, "CardDAV contact sync", "users"),
+    plannedNavItem("tasks", text.tasks, "CalDAV task sync", "list"),
+    plannedNavItem("notes", text.notes, "Synced notes", "note"),
+    plannedNavItem("bookmarks", text.bookmarks, "Saved links and references", "bookmark"),
+  ]),
+  plannedCommsGroup(text.projectWork, [
+    plannedNavItem("inbox", text.inbox, "Project intake", "folder"),
+    plannedNavItem("campaigns", text.campaigns, "Campaign folders", "folder"),
+    plannedNavItem("cases", text.cases, "Case folders", "folder"),
+    plannedNavItem("projectConfig", text.config, "Project configuration", "folder"),
+    plannedNavItem("feedback", text.feedback, "Feedback folders", "folder"),
+    plannedNavItem("knowledge", text.knowledge, "Knowledge folders", "folder"),
+    plannedNavItem("maintenance", text.maintenance, "Maintenance folders", "folder"),
+    plannedNavItem("performance", text.performance, "Performance folders", "folder"),
+    plannedNavItem("reports", text.reports, "Report folders", "folder"),
+  ]),
 ];
 
 export const dashboardNavItem: SurfaceNavItem = {
@@ -607,6 +603,7 @@ export function surfaceRecordCounts(status: GuiStatusData): SurfaceRecordCounts
     hosts: populatedInventoryRowCount("hosts"),
     installation: installationRows.length,
     localSetup: status.paths.length,
+    notifications: status.notifications.filter((notification) => notification.status === "active").length,
     projects: status.repos.total || status.repos.repos.length,
     repos: (status.local_repos.total || status.local_repos.repos.length) + (status.repos.total || status.repos.repos.length),
     registrars: populatedInventoryRowCount("registrars"),

package/packages/gui-web/src/dashboard.ts

@@ -55,7 +55,7 @@ export function renderDashboardHtml(status: GuiResponseEnvelope<GuiStatusData>):
     `<h1>aidevops app interface</h1>`,
     `<p>Made for creators.</p>`,
     `<p>AI-assisted development workflows, code quality, and deployment automation.</p>`,
-    `<p>Theme follows system preferences with light and dark overrides. Sidebar modes: DevOps and Comms. Appearance controls can be hidden or shown, and include editable Hue, icon Reset, Show borders toggle, Show counts toggle, Font size choices xs, s, m, lg, xl, and Font options: IBM Plex Mono, IBM Plex Sans, IBM Plex Serif, Inter, Menlo (default), Playpen Sans, Poppins, Source Sans, Source Serif, Tilt Neon, Ubuntu Mono. The workspace header includes a command palette, reserved signposts/help slot immediately left of notifications, notifications menu, AI Assistant panel, and profile menu with Settings, Theme, Language, Community, Admin, and Logout entries. A desktop status bar shows local readiness, repo totals, secret reference count, provider accounts, and update state.</p>`,
+    `<p>Theme follows system preferences with light and dark overrides. Sidebar modes: DevOps and Comms. Appearance controls can be hidden or shown, and include editable Hue, icon Reset, Show borders toggle, Show counts toggle, Font size choices xs, s, m, lg, xl, and Font options: IBM Plex Mono, IBM Plex Sans, IBM Plex Serif, Inter, Menlo (default), Playpen Sans, Poppins, Source Sans, Source Serif, Tilt Neon, Ubuntu Mono. The workspace header includes a command palette, reserved signposts/help slot immediately left of notifications, notifications menu, AI Assistant panel, and profile menu with Settings, Theme, Language, Community, Admin, and Logout entries. Notifications reuse the OpenCode toast status cache and GUI readiness data. A desktop status bar shows local readiness, repo totals, secret reference count, provider accounts, and update state.</p>`,
     `<p>Secret references stay read-only and redacted.</p>`,
     `<p>Vault surfaces show padlock indicators. Encrypted by aidevops Vault; contents visible only when unlocked through app or authorised vault commands.</p>`,
     `<p>${escapeHtml(status.data.update.message)}</p>`,

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

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