aidevops 3.29.6 → 3.29.7

package/README.md

@@ -58,7 +58,7 @@ The result: an AI operations platform that manages projects across every busines
 [![Copyright](https://img.shields.io/badge/Copyright-Marcus%20Quinn%202025--2026-blue.svg)](https://github.com/marcusquinn)
 
 <!-- Release & Version Info -->
-[![Version](https://img.shields.io/badge/Version-3.29.6-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
+[![Version](https://img.shields.io/badge/Version-3.29.7-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
 [![npm version](https://img.shields.io/npm/v/aidevops)](https://www.npmjs.com/package/aidevops)
 [![Homebrew](https://img.shields.io/badge/homebrew-marcusquinn%2Ftap-orange)](https://github.com/marcusquinn/homebrew-tap)
 [![GitHub repository](https://img.shields.io/badge/github-repository-181717.svg?logo=github)](https://github.com/marcusquinn/aidevops)

package/VERSION

@@ -1 +1 @@
-3.29.6
+3.29.7

package/aidevops.sh

@@ -5,7 +5,7 @@
 # AI DevOps Framework CLI
 # Usage: aidevops <command> [options]
 #
-# Version: 3.29.6
+# Version: 3.29.7
 
 set -euo pipefail
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidevops",
-  "version": "3.29.6",
+  "version": "3.29.7",
   "description": "AI DevOps Framework - AI-assisted development workflows, code quality, and deployment automation",
   "type": "module",
   "workspaces": [

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/styles.css

@@ -1869,38 +1869,122 @@ code {
 }
 
 .managed-app-list {
-  background: var(--surface-muted);
-  border: 1px solid var(--border);
-  border-radius: 16px;
+  gap: 12px;
   margin-bottom: 12px;
+  overflow: visible;
+}
+
+.managed-app-card {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
+    var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
+  overflow: visible;
 }
 
-.managed-app-row {
+.managed-app-card.expanded {
+  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
+}
+
+.managed-app-summary {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--text-primary);
   display: grid;
-  gap: 14px;
-  grid-template-columns: minmax(220px, 1.3fr) minmax(260px, 1.7fr) auto;
-  padding: 14px;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding: 16px;
+  text-align: left;
+  width: 100%;
 }
 
-.managed-app-row + .managed-app-row {
-  border-top: 1px solid var(--border);
+.managed-app-summary:hover,
+.managed-app-summary:focus-visible {
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+  outline: none;
 }
 
-.managed-app-main,
-.managed-app-main > div,
+.managed-app-title-block,
 .app-meta {
   display: grid;
-  gap: 6px;
+  gap: 7px;
   min-width: 0;
 }
 
-.managed-app-main h3,
-.managed-app-main p {
-  margin: 0;
+.managed-app-title-block strong {
+  font-size: clamp(1.12rem, 2vw, 1.4rem);
+  letter-spacing: -0.04em;
+  line-height: 1.15;
 }
 
-.managed-app-main p:not(.eyebrow) {
+.managed-app-title-block > span:last-child {
   color: var(--text-secondary);
+  max-width: 72ch;
+}
+
+.managed-app-summary-meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: end;
+  min-width: min(420px, 38vw);
+}
+
+.managed-summary-chip {
+  background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  display: inline-grid;
+  gap: 1px;
+  min-width: 118px;
+  padding: 7px 11px;
+}
+
+.managed-summary-chip small {
+  color: var(--text-muted);
+  font-size: 0.66rem;
+  font-weight: 900;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.managed-summary-chip span {
+  color: var(--text-primary);
+  font-size: 0.84rem;
+  font-weight: 800;
+  max-width: 18ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.managed-app-chevron {
+  color: var(--accent);
+  flex: 0 0 auto;
+  transition: transform 180ms ease;
+}
+
+.managed-app-card.expanded .managed-app-chevron {
+  transform: rotate(180deg);
+}
+
+.managed-app-body {
+  border-top: 1px solid var(--border);
+  display: grid;
+  gap: 14px;
+  padding: 0 16px 16px;
+}
+
+.managed-app-toolbar {
+  align-items: start;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding-top: 14px;
 }
 
 .managed-app-links,
@@ -1911,6 +1995,10 @@ code {
   gap: 8px;
 }
 
+.managed-app-actions {
+  justify-content: end;
+}
+
 .managed-app-links a,
 .origin-missing {
   align-items: center;
@@ -1921,18 +2009,28 @@ code {
   font-size: 0.78rem;
   font-weight: 800;
   gap: 4px;
+  max-width: 100%;
   padding: 6px 9px;
+  position: relative;
   text-decoration: none;
 }
 
+.managed-app-links a:hover,
+.managed-app-links a:focus-visible {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
+  color: var(--accent);
+  outline: none;
+}
+
 .origin-missing {
   color: var(--text-muted);
 }
 
 .managed-app-details {
   display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
 }
 
 .managed-toggle,
@@ -1941,7 +2039,8 @@ code {
   border: 1px solid var(--border);
   border-radius: 12px;
   min-width: 0;
-  padding: 8px 10px;
+  min-height: 64px;
+  padding: 10px 12px;
 }
 
 .managed-toggle {
@@ -1987,30 +2086,68 @@ code {
 .app-meta strong {
   color: var(--text-primary);
   font-size: 0.84rem;
+  line-height: 1.35;
   overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .app-action-button {
   align-items: center;
-  border-radius: 12px;
+  background: color-mix(in srgb, var(--accent) 16%, var(--surface-elevated));
+  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
+  border-radius: 999px;
+  color: var(--accent);
   display: inline-flex;
-  height: 38px;
+  gap: 7px;
+  min-height: 42px;
   justify-content: center;
-  padding: 0;
-  width: 38px;
+  padding: 0 12px;
+  position: relative;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
+}
+
+.app-action-button span {
+  font-size: 0.7rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.app-action-button:hover,
+.app-action-button:focus-visible {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg-primary);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.app-action-button.remove {
+  background: color-mix(in srgb, #ef4444 12%, var(--surface-elevated));
+  border-color: color-mix(in srgb, #ef4444 45%, var(--border));
+  color: #ff8a8a;
+}
+
+.app-action-button.remove:hover,
+.app-action-button.remove:focus-visible {
+  background: #ef4444;
+  border-color: #ef4444;
+  color: white;
 }
 
 .app-action-button:disabled {
   color: var(--text-muted);
   cursor: not-allowed;
   opacity: 0.45;
+  transform: none;
 }
 
 .app-terminal {
-  background: var(--code-bg);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
+    #050806;
   border: 1px solid var(--border);
   border-radius: 16px;
-  color: var(--text-secondary);
+  color: color-mix(in srgb, var(--accent) 78%, white);
   overflow: hidden;
 }
 
@@ -2018,16 +2155,57 @@ code {
   align-items: center;
   border-bottom: 1px solid var(--border);
   display: flex;
+  gap: 12px;
   justify-content: space-between;
   padding: 10px 12px;
 }
 
+.app-terminal header span {
+  color: var(--text-muted);
+  text-align: right;
+}
+
 .app-terminal pre {
   margin: 0;
-  max-height: 360px;
+  max-height: 240px;
   overflow: auto;
   padding: 12px;
   white-space: pre-wrap;
+  word-break: break-word;
+}
+
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]::after {
+  background: color-mix(in srgb, var(--surface-elevated) 94%, black);
+  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
+  border-radius: 10px;
+  bottom: calc(100% + 8px);
+  box-shadow: 0 18px 46px rgb(0 0 0 / 38%);
+  color: var(--text-primary);
+  content: attr(data-tooltip);
+  font-size: 0.72rem;
+  font-weight: 700;
+  left: 50%;
+  line-height: 1.35;
+  max-width: min(320px, 72vw);
+  opacity: 0;
+  padding: 8px 10px;
+  pointer-events: none;
+  position: absolute;
+  text-align: left;
+  transform: translate(-50%, 4px);
+  transition: opacity 140ms ease, transform 140ms ease;
+  width: max-content;
+  z-index: 40;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
 }
 
 .data-row,
@@ -2715,9 +2893,16 @@ code {
     grid-template-columns: 1fr;
   }
 
-  .managed-app-row {
+  .managed-app-summary,
+  .managed-app-toolbar {
     grid-template-columns: 1fr;
   }
+
+  .managed-app-summary-meta,
+  .managed-app-actions {
+    justify-content: start;
+    min-width: 0;
+  }
 }
 
 @media (max-width: 980px) {

package/setup.sh

@@ -12,7 +12,7 @@ shopt -s inherit_errexit 2>/dev/null || true
 # AI Assistant Server Access Framework Setup Script
 # Helps developers set up the framework for their infrastructure
 #
-# Version: 3.29.6
+# Version: 3.29.7
 #
 # Quick Install:
 #   npm install -g aidevops && aidevops update          (recommended)