aidevops 3.29.11 → 3.29.13

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.11-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
+[![Version](https://img.shields.io/badge/Version-3.29.13-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.11
+3.29.13

package/aidevops.sh

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

package/package.json

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

package/packages/gui-api/src/app.ts

@@ -1,4 +1,5 @@
 import { spawn } from "node:child_process";
+import * as readline from "node:readline";
 import { Hono } from "hono";
 import { APP_ACTION_ROUTE_MANIFEST, APP_ACTION_STATUS_ROUTE_MANIFEST, BANNED_ROUTE_PATTERNS, createEnvelope, FILE_EXPLORER_ROUTE_MANIFEST, type GuiAppActionId, type GuiAppActionJobSummary, STATUS_ROUTE_MANIFEST, VAULT_STATUS_ROUTE_MANIFEST } from "../../gui-shared/src";
 import { readFileExplorer } from "./file-adapter";
@@ -150,10 +151,16 @@ function startAppActionJob(appId: string, action: GuiAppActionId, command: strin
     env: { ...process.env, AIDEVOPS_NON_INTERACTIVE: "true" },
     stdio: ["ignore", "pipe", "pipe"],
   });
-  child.stdout.on("data", (chunk) => appendJobOutput(job, chunk.toString()));
-  child.stderr.on("data", (chunk) => appendJobOutput(job, chunk.toString()));
+  if (child.stdout !== null) {
+    const stdoutLines = readline.createInterface({ input: child.stdout, terminal: false });
+    stdoutLines.on("line", (line) => appendJobLine(job, line));
+  }
+  if (child.stderr !== null) {
+    const stderrLines = readline.createInterface({ input: child.stderr, terminal: false });
+    stderrLines.on("line", (line) => appendJobLine(job, line));
+  }
   child.on("error", (error) => {
-    appendJobOutput(job, error.message);
+    appendJobLine(job, error.message);
     job.status = "failed";
     job.finished_at = new Date().toISOString();
     job.exit_code = 127;
@@ -167,8 +174,11 @@ function startAppActionJob(appId: string, action: GuiAppActionId, command: strin
   return job;
 }
 
-function appendJobOutput(job: GuiAppActionJobSummary, output: string): void {
-  job.output.push(...output.split(/\r?\n/).filter((line) => line.length > 0).map(redactOutputLine));
+function appendJobLine(job: GuiAppActionJobSummary, line: string): void {
+  if (line.length === 0) {
+    return;
+  }
+  job.output.push(redactOutputLine(line));
   if (job.output.length > 400) {
     job.output.splice(1, job.output.length - 400);
   }

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

@@ -17,7 +17,7 @@ const toastSeverityRank: Record<GuiNotificationSeverity, number> = {
 
 const warningLineMatchers: Array<(line: string) => boolean> = [
   (line) => line.startsWith("Pulse stalled"),
-  (line) => /contribution\(s\) need/i.test(line),
+  (line) => /contribution(\(s\)|s)?\s+needs?/i.test(line),
   (line) => line.startsWith("[OPENCODE MAINTENANCE]"),
   (line) => line.startsWith("[WARNING]"),
   (line) => line.startsWith("[WARN]"),
@@ -28,7 +28,7 @@ const toastTitleRules: Array<{ matches: (line: string) => boolean; title: string
   { matches: (line) => line.startsWith("[ERROR]"), title: "Startup error" },
   { matches: (line) => line.startsWith("[OPENCODE MAINTENANCE]"), title: "OpenCode maintenance" },
   { matches: (line) => line.startsWith("Pulse stalled"), title: "Pulse stalled" },
-  { matches: (line) => /contribution\(s\) need/i.test(line), title: "External contribution review" },
+  { matches: (line) => /contribution(\(s\)|s)?\s+needs?/i.test(line), title: "External contribution review" },
   { matches: (line) => line.startsWith("[WARNING]") || line.startsWith("[WARN]"), title: "Startup warning" },
   { matches: (line) => line.startsWith("Security: all protections active"), title: "Security protections active" },
 ];
@@ -93,10 +93,10 @@ function buildToastNotifications(greetingOutput: string): GuiNotificationSummary
 }
 
 function buildGuiStateNotifications(input: BuildNotificationInput): GuiNotificationSummary[] {
-  const setupNeedsUpdate = input.setupTargets.filter((target) => target.needs_update);
-  const appNeedsUpdate = input.aiApps.filter((app) => app.needs_update);
-  const authErrors = input.oauthPool.providers.filter((provider) => provider.auth_errors > 0);
-  const rateLimited = input.oauthPool.providers.filter((provider) => provider.rate_limited > 0);
+  const setupNeedsUpdate = (input.setupTargets ?? []).filter((target) => target.needs_update);
+  const appNeedsUpdate = (input.aiApps ?? []).filter((app) => app.needs_update);
+  const authErrors = (input.oauthPool?.providers ?? []).filter((provider) => provider.auth_errors > 0);
+  const rateLimited = (input.oauthPool?.providers ?? []).filter((provider) => provider.rate_limited > 0);
   const notifications: GuiNotificationSummary[] = [];
 
   if (input.restartRequired) {

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

@@ -222,6 +222,11 @@ function ConversationSidebar({ conversationMode, selectedLocalRepoIndex, selecte
     ? []
     : 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;
+  useEffect(() => {
+    if (activeSessionId !== selectedSessionId) {
+      setSelectedSessionId(activeSessionId);
+    }
+  }, [activeSessionId, selectedSessionId, setSelectedSessionId]);
   const canSelectPreviousRepo = selectedLocalRepoIndex > 0;
   const canSelectNextRepo = selectedLocalRepoIndex < repos.length - 1;
 

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

@@ -189,21 +189,30 @@ function NotificationsMenu({ notifications, openSurface }: { notifications: GuiN
         <span>{active.length} active</span>
       </div>
       {preview.length === 0 ? <p>No current aidevops notifications.</p> : null}
-      {preview.map((notification) => <NotificationPreview key={notification.id} notification={notification} />)}
+      {preview.map((notification) => (
+        <NotificationPreview
+          key={notification.id}
+          notification={notification}
+          onClick={() => {
+            const action = notification.actions.find((candidate) => candidate.enabled && candidate.kind === "surface" && isSurfaceId(candidate.surface_id));
+            openSurface(action?.kind === "surface" && isSurfaceId(action.surface_id) ? action.surface_id : "notifications");
+          }}
+        />
+      ))}
       <button onClick={() => openSurface("notifications")} role="menuitem" type="button">Open notifications</button>
     </div>
   );
 }
 
-function NotificationPreview({ notification }: { notification: GuiNotificationSummary }): ReactElement {
+function NotificationPreview({ notification, onClick }: { notification: GuiNotificationSummary; onClick: () => void }): ReactElement {
   return (
-    <article className={`notification-preview ${notification.severity}`}>
+    <button className={`notification-preview ${notification.severity}`} onClick={onClick} role="menuitem" type="button">
       <span aria-hidden="true"><NotificationIcon notification={notification} /></span>
       <div>
         <strong>{notification.title}</strong>
         <small>{notification.category} · {notification.status}</small>
       </div>
-    </article>
+    </button>
   );
 }
 
@@ -528,7 +537,7 @@ function NotificationCard({ notification, openSurface }: { notification: GuiNoti
               return <button className="secondary-action" disabled={!action.enabled} key={action.id} onClick={() => openSurface(surfaceId)} type="button">{action.label}</button>;
             }
 
-            return <button className="secondary-action" disabled key={action.id} title={action.command_preview} type="button">{action.label}</button>;
+            return <button className="secondary-action" disabled={!action.enabled} key={action.id} title={action.command_preview} type="button">{action.label}</button>;
           })}
         </div>
       </div>

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

@@ -3,12 +3,29 @@ import { sortConversationMessageParts, sortConversationMessages, type GuiConvers
 import { text } from "./app-model";
 import { conversationThreads } from "./conversation-fixtures";
 
-export function CommsConversationSurface({ mode }: { mode: "channels" | "directMessages" | "people" }) {
-  const conversations = mode === "directMessages" ? conversationThreads.filter((thread) => thread.conversation.type === "dm" || thread.conversation.type === "group_dm") : conversationThreads.filter((thread) => thread.conversation.type === "channel");
-  const selectedThread = conversations[0] ?? conversationThreads[0];
+export function CommsConversationSurface({ mode, threads = conversationThreads }: { mode: "channels" | "directMessages" | "people"; threads?: GuiConversationThread[] }) {
+  const availableThreads = threads ?? [];
+  const conversations = mode === "directMessages" ? availableThreads.filter((thread) => thread.conversation.type === "dm" || thread.conversation.type === "group_dm") : availableThreads.filter((thread) => thread.conversation.type === "channel");
+  const selectedThread = conversations[0] ?? availableThreads[0];
   const partsByMessage = new Map<string, GuiConversationMessagePart[]>();
 
-  for (const part of sortConversationMessageParts(selectedThread.parts)) {
+  if (!selectedThread) {
+    return (
+      <section className="chat-surface comms-surface" aria-label={mode === "directMessages" ? text.directMessages : text.channels} data-tour="comms-conversations">
+        <aside className="chat-thread-panel conversation-list-panel" aria-label="Conversation list">
+          <header className="chat-thread-header">
+            <div>
+              <p className="eyebrow">Unified conversation model</p>
+              <h2>{mode === "directMessages" ? <FiAtSign aria-hidden="true" /> : <FiHash aria-hidden="true" />} {mode === "directMessages" ? text.directMessages : text.channels}</h2>
+            </div>
+          </header>
+          <div className="notice compact-notice">No conversations yet</div>
+        </aside>
+      </section>
+    );
+  }
+
+  for (const part of sortConversationMessageParts(conversationParts(selectedThread))) {
     partsByMessage.set(part.message_id, [...(partsByMessage.get(part.message_id) ?? []), part]);
   }
 
@@ -37,10 +54,10 @@ export function CommsConversationSurface({ mode }: { mode: "channels" | "directM
           <span className="count-pill">{participantSummary(selectedThread)}</span>
         </header>
         <div className="participant-strip">
-          {selectedThread.participants.map((participant) => <span key={participant.id}>{participant.display_name}<small>{participant.kind}</small></span>)}
+          {conversationParticipants(selectedThread).map((participant) => <span key={participant.id}>{participant.display_name}<small>{participant.kind}</small></span>)}
         </div>
         <div className="chat-message-list" data-tour="comms-message-timeline">
-          {sortConversationMessages(selectedThread.messages).map((message) => <ConversationMessageRow key={message.id} message={message} parts={partsByMessage.get(message.id) ?? []} thread={selectedThread} />)}
+          {sortConversationMessages(conversationMessages(selectedThread)).map((message) => <ConversationMessageRow key={message.id} message={message} parts={partsByMessage.get(message.id) ?? []} thread={selectedThread} />)}
         </div>
         <form className="chat-composer" aria-label="Conversation composer">
           <textarea disabled placeholder={text.chatInputPlaceholder} />
@@ -52,7 +69,7 @@ export function CommsConversationSurface({ mode }: { mode: "channels" | "directM
 }
 
 function ConversationListItem({ thread }: { thread: GuiConversationThread }) {
-  const latestMessage = sortConversationMessages(thread.messages).at(-1);
+  const latestMessage = sortConversationMessages(conversationMessages(thread)).at(-1);
   const unread = unreadCount(thread);
 
   return (
@@ -67,8 +84,8 @@ function ConversationListItem({ thread }: { thread: GuiConversationThread }) {
 }
 
 function ConversationMessageRow({ message, parts, thread }: { message: GuiConversationMessage; parts: GuiConversationMessagePart[]; thread: GuiConversationThread }) {
-  const sender = thread.participants.find((participant) => participant.id === message.sender_participant_id);
-  const reactions = thread.reactions.filter((reaction) => reaction.message_id === message.id);
+  const sender = conversationParticipants(thread).find((participant) => participant.id === message.sender_participant_id);
+  const reactions = conversationReactions(thread).filter((reaction) => reaction.message_id === message.id);
   const speaker = message.sender_kind === "human" ? "user" : "assistant";
 
   return (
@@ -82,12 +99,32 @@ function ConversationMessageRow({ message, parts, thread }: { message: GuiConver
 }
 
 function participantSummary(thread: GuiConversationThread): string {
-  const active = thread.participants.filter((participant) => participant.membership_state === "active").length;
+  const active = conversationParticipants(thread).filter((participant) => participant.membership_state === "active").length;
   return `${active} members`;
 }
 
 function unreadCount(thread: GuiConversationThread): number {
-  const lastSequence = Math.max(0, ...thread.messages.map((message) => message.sequence));
-  const localRead = thread.read_states[0]?.last_read_sequence ?? 0;
+  const lastSequence = Math.max(0, ...conversationMessages(thread).map((message) => message.sequence));
+  const localRead = conversationReadStates(thread)[0]?.last_read_sequence ?? 0;
   return Math.max(0, lastSequence - localRead);
 }
+
+function conversationMessages(thread: GuiConversationThread): GuiConversationMessage[] {
+  return thread.messages ?? [];
+}
+
+function conversationParts(thread: GuiConversationThread): GuiConversationMessagePart[] {
+  return thread.parts ?? [];
+}
+
+function conversationParticipants(thread: GuiConversationThread): GuiConversationThread["participants"] {
+  return thread.participants ?? [];
+}
+
+function conversationReactions(thread: GuiConversationThread): GuiConversationThread["reactions"] {
+  return thread.reactions ?? [];
+}
+
+function conversationReadStates(thread: GuiConversationThread): GuiConversationThread["read_states"] {
+  return thread.read_states ?? [];
+}

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

@@ -19,6 +19,7 @@ export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement
   const [appCollection, setAppCollection] = useState<AppCollectionId>("aidevops");
   const [managedCategory, setManagedCategory] = useState<ManagedCategoryId>("core");
   const [recommendedPlatform, setRecommendedPlatform] = useState<RecommendedPlatformFilterId>("all");
+  const [recommendedOs, setRecommendedOs] = useState<RecommendedOsId>("all");
   const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
   const [expandedAppId, setExpandedAppId] = useState<string | null>(() => sortedManagedApps(status.managed_apps).find((app) => managedCategoryForApp(app) === "core")?.id ?? null);
   const [jobs, setJobs] = useState<Record<string, GuiAppActionJobSummary>>({});
@@ -27,7 +28,9 @@ export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement
   const selectedJob = selectedJobId === null ? null : jobs[selectedJobId] ?? null;
   const managedApps = sortedManagedApps(status.managed_apps).map((app) => applyManagedPolicyToggles(app, policyToggles[app.id]));
   const visibleManagedApps = managedApps.filter((app) => managedCategoryForApp(app) === managedCategory);
-  const visibleRecommendedApps = recommendedApps.filter((app) => recommendedPlatform === "all" || app.platforms.includes(recommendedPlatform));
+  const visibleRecommendedApps = recommendedApps.filter((app) => recommendedAppMatchesFilters(app, recommendedPlatform, recommendedOs));
+  const selectRecommendedPlatform = (value: RecommendedPlatformFilterId) => setRecommendedPlatform((current) => nextRecommendedFilterValue(current, value, "all"));
+  const selectRecommendedOs = (value: RecommendedOsId) => setRecommendedOs((current) => nextRecommendedFilterValue(current, value, "all"));
 
   useEffect(() => {
     setExpandedAppId(visibleManagedApps[0]?.id ?? null);
@@ -84,7 +87,7 @@ export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement
           ))}
         </div>
         <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>
-      </> : <RecommendedAppsSurface apps={visibleRecommendedApps} platform={recommendedPlatform} setPlatform={setRecommendedPlatform} />}
+      </> : <RecommendedAppsSurface apps={visibleRecommendedApps} os={recommendedOs} platform={recommendedPlatform} setOs={selectRecommendedOs} setPlatform={selectRecommendedPlatform} />}
     </section>
   );
 }
@@ -119,11 +122,9 @@ function ManagedAppPanel({ app, expanded, job, onJob, onPolicyToggle, onToggle,
       <div className="managed-app-details">
         <ToggleSwitch checked={app.aidevops_install} disabled={lockedPolicy} label="setup installs" onChange={(value) => onPolicyToggle("setup", value)} />
         <ToggleSwitch checked={app.aidevops_update} disabled={lockedPolicy} label="update maintains" onChange={(value) => onPolicyToggle("update", value)} />
-        <AppMeta label="Installed" value={app.installed_version} />
-        <AppMeta label="Latest" value={app.latest_version} />
-        <AppMeta label={text.path} value={app.install_path_ref} />
         {job ? <AppLogLink job={job} /> : null}
       </div>
+      <AppMeta className="managed-app-path" label={text.path} value={app.install_path_ref} />
       {job ? <AppActionTerminal job={job} /> : null}
       {policyJobs.map((policyJob) => <AppActionTerminal job={policyJob} key={policyJob.id} />)}
       {job === null && policyJobs.length === 0 ? <p className="empty-state compact-notice">No recent command output for this app. Run an action or change a policy toggle to open this app's terminal log.</p> : null}
@@ -145,11 +146,11 @@ function OriginLink({ href, label }: { href: string; label: string }): ReactElem
 }
 
 function ToggleSwitch({ checked, disabled = false, label, onChange }: { checked: boolean; disabled?: boolean; label: string; onChange: (checked: boolean) => void }): ReactElement {
-  return <button aria-pressed={checked} className={checked ? "managed-toggle checked" : "managed-toggle"} data-tooltip={disabled ? "Essential aidevops component; policy is locked on" : undefined} disabled={disabled} onClick={() => onChange(!checked)} title={disabled ? "Essential aidevops component; policy is locked on" : undefined} type="button"><span aria-hidden="true" className={checked ? "switch-track checked" : "switch-track"}><span /></span>{label}</button>;
+  return <button aria-pressed={checked} className={checked ? "managed-toggle checked" : "managed-toggle"} data-tooltip={disabled ? "Essential aidevops component; policy is locked on" : undefined} disabled={disabled} onClick={() => onChange(!checked)} title={disabled ? "Essential aidevops component; policy is locked on" : undefined} type="button"><span className="managed-toggle-label">{label}</span><span aria-hidden="true" className={checked ? "switch-track checked" : "switch-track"}><span /></span></button>;
 }
 
-function AppMeta({ label, value }: { label: string; value: string }): ReactElement {
-  return <span className="app-meta"><small>{label}</small><strong>{value}</strong></span>;
+function AppMeta({ className = "", label, value }: { className?: string; label: string; value: string }): ReactElement {
+  return <span className={className.length > 0 ? `app-meta ${className}` : "app-meta"}><small>{label}</small><strong>{value}</strong></span>;
 }
 
 function AppLogLink({ job }: { job: GuiAppActionJobSummary }): ReactElement {
@@ -224,7 +225,14 @@ function jobForApp(appId: string, jobs: Record<string, GuiAppActionJobSummary>,
     return selectedJob;
   }
 
-  return Object.values(jobs).reverse().find((job) => job.app_id === appId) ?? null;
+  let latestJob: GuiAppActionJobSummary | null = null;
+  for (const job of Object.values(jobs)) {
+    if (job.app_id === appId && (latestJob === null || job.started_at > latestJob.started_at)) {
+      latestJob = job;
+    }
+  }
+
+  return latestJob;
 }
 
 function sortedManagedApps(apps: GuiManagedAppSummary[]): GuiManagedAppSummary[] {
@@ -283,7 +291,7 @@ interface RecommendedApp {
 }
 
 const appCollectionTabs: TabOption<AppCollectionId>[] = [
-  { id: "aidevops", label: "aidevops" },
+  { id: "aidevops", label: "AIDevOps" },
   { id: "recommended", label: "Recommended" },
 ];
 
@@ -303,6 +311,15 @@ const recommendedPlatformTabs: TabOption<RecommendedPlatformFilterId>[] = [
   { id: "api", label: "API" },
 ];
 
+const recommendedOsTabs: TabOption<RecommendedOsId>[] = [
+  { id: "all", label: "All OS" },
+  { id: "macos", label: "macOS" },
+  { id: "linux", label: "Linux" },
+  { id: "windows", label: "Windows" },
+  { id: "ios", label: "iOS" },
+  { id: "android", label: "Android" },
+];
+
 const recommendedApps = ([
   { name: "Affinity Studio", description: "Creative design suite.", websiteUrl: "https://www.affinity.studio/", alternativeToUrl: "https://alternativeto.net/software/affinity-1/", os: ["macos", "windows", "ios"], platforms: [] },
   { name: "Bitwarden", description: "Open source password manager.", websiteUrl: "https://bitwarden.com", alternativeToUrl: "https://alternativeto.net/software/bitwarden--free-password-manager/", repoUrl: "https://github.com/bitwarden", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp", "saas", "cli", "api"] },
@@ -359,16 +376,19 @@ function TabNav<T extends string>({ label, onChange, tabs, value }: { label: str
   return <div aria-label={label} className="pill-tabs app-subnav" role="tablist">{tabs.map((tab) => <button aria-selected={value === tab.id} className={value === tab.id ? "active" : ""} key={tab.id} onClick={() => onChange(tab.id)} role="tab" type="button">{tab.label}</button>)}</div>;
 }
 
-function RecommendedAppsSurface({ apps, platform, setPlatform }: { apps: RecommendedApp[]; platform: RecommendedPlatformFilterId; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
+function RecommendedAppsSurface({ apps, os, platform, setOs, setPlatform }: { apps: RecommendedApp[]; os: RecommendedOsId; platform: RecommendedPlatformFilterId; setOs: (os: RecommendedOsId) => void; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
   return <>
-    <TabNav label="Recommended app platform filters" tabs={recommendedPlatformTabs} value={platform} onChange={setPlatform} />
+    <div className="recommended-filter-tabs">
+      <TabNav label="Recommended app operating system filters" tabs={recommendedOsTabs} value={os} onChange={setOs} />
+      <TabNav label="Recommended app platform filters" tabs={recommendedPlatformTabs} value={platform} onChange={setPlatform} />
+    </div>
     <div className="recommended-app-grid">
-      {apps.map((app) => <RecommendedAppCard app={app} key={app.name} setPlatform={setPlatform} />)}
+      {apps.map((app) => <RecommendedAppCard app={app} key={app.name} setOs={setOs} setPlatform={setPlatform} />)}
     </div>
   </>;
 }
 
-function RecommendedAppCard({ app, setPlatform }: { app: RecommendedApp; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
+function RecommendedAppCard({ app, setOs, setPlatform }: { app: RecommendedApp; setOs: (os: RecommendedOsId) => void; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
   return <article className="recommended-app-card">
     <div>
       <strong>{app.name}</strong>
@@ -376,7 +396,7 @@ function RecommendedAppCard({ app, setPlatform }: { app: RecommendedApp; setPlat
     </div>
     <div className="app-icon-groups">
       <PlatformIconList platforms={app.platforms} setPlatform={setPlatform} />
-      <OsIconList os={app.os} />
+      <OsIconList os={app.os} setOs={setOs} />
     </div>
     <div className="managed-app-links plain-links">
       <OriginLink href={app.websiteUrl} label={text.website} />
@@ -410,15 +430,15 @@ function PlatformIcon({ id, setPlatform }: { id: RecommendedPlatformId; setPlatf
   return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setPlatform(id)} title={`Filter by ${label}`} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
 }
 
-function OsIconList({ os }: { os: RecommendedOsId[] }): ReactElement | null {
+function OsIconList({ os, setOs }: { os: RecommendedOsId[]; setOs: (os: RecommendedOsId) => void }): ReactElement | null {
   if (os.length === 0) {
     return null;
   }
 
-  return <span className="os-icon-list">{os.map((item) => <OsIcon id={item} key={item} />)}</span>;
+  return <span className="os-icon-list">{os.map((item) => <OsIcon id={item} key={item} setOs={setOs} />)}</span>;
 }
 
-function OsIcon({ id }: { id: RecommendedOsId }): ReactElement {
+function OsIcon({ id, setOs }: { id: RecommendedOsId; setOs: (os: RecommendedOsId) => void }): ReactElement {
   const iconMap: Record<RecommendedOsId, { Icon: IconType; label: string }> = {
     all: { Icon: FiGlobe, label: "Web app" },
     macos: { Icon: FaApple, label: "macOS" },
@@ -429,7 +449,18 @@ function OsIcon({ id }: { id: RecommendedOsId }): ReactElement {
   };
   const { Icon, label } = iconMap[id];
 
-  return <span aria-label={label} data-tooltip={label} role="img" title={label}><Icon aria-hidden="true" focusable="false" /></span>;
+  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setOs(id)} title={`Filter by ${label}`} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
+}
+
+function recommendedAppMatchesFilters(app: RecommendedApp, platform: RecommendedPlatformFilterId, os: RecommendedOsId): boolean {
+  const platformMatches = platform === "all" || app.platforms.includes(platform);
+  const osMatches = os === "all" || app.os.includes(os);
+
+  return platformMatches && osMatches;
+}
+
+export function nextRecommendedFilterValue<T extends string>(current: T, next: T, defaultValue: T): T {
+  return current === next && next !== defaultValue ? defaultValue : next;
 }
 
 function applyManagedPolicyToggles(app: GuiManagedAppSummary, policy: Partial<Record<ManagedPolicyId, boolean>> | undefined): GuiManagedAppSummary {

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

@@ -147,7 +147,7 @@ export const text = {
   aidevops: "aidevops",
   appShell: "App shell",
   apps: "Apps",
-  appsIntro: "App and CLI inventory for tools installed or updated by aidevops, with origin links, install/update policy, versions, paths, and allowlisted background actions.",
+  appsIntro: "The app toolkit we use and recommend to enable all the things we can do with AI, development, and operations to create and share our work. Opinionated preferences based on open-source-first, lowest-costs, highest-quality UI & UX, teamwork, data security, privacy, and AI-usage capabilities.",
   appStatusPending: "adapter pending",
   brands: "Brands",
   brandsIntro: "Draft brand inventory for names and website references.",

package/packages/gui-web/src/styles.css

@@ -13,6 +13,14 @@
   --font-family-app: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-size-app: 16px;
   --glass-panel-shadow: inset 0 1px 0 rgb(255 255 255 / 58%), inset 0 -1px 0 rgb(0 0 0 / 3%), var(--shadow-soft);
+  --notification-error-bg: rgb(207 34 46 / 10%);
+  --notification-error-fg: #cf222e;
+  --notification-info-bg: rgb(9 105 218 / 10%);
+  --notification-info-fg: #0969da;
+  --notification-success-bg: rgb(26 127 55 / 10%);
+  --notification-success-fg: #1a7f37;
+  --notification-warning-bg: rgb(191 135 0 / 12%);
+  --notification-warning-fg: #9a6700;
   --shell-gutter: 8px;
   --shadow-soft: 0 18px 56px rgb(15 23 42 / 9%);
   --surface-elevated: #ffffff;
@@ -43,6 +51,14 @@
   --border-hover: color-mix(in srgb, rgb(255 255 255 / 22%) 74%, rgb(255 255 255 / 40%));
   --code-bg: hsl(var(--accent-hue) 18% 6%);
   --glass-panel-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 -1px 0 rgb(0 0 0 / 24%), var(--shadow-soft);
+  --notification-error-bg: rgb(255 123 114 / 13%);
+  --notification-error-fg: #ff7b72;
+  --notification-info-bg: rgb(88 166 255 / 13%);
+  --notification-info-fg: #58a6ff;
+  --notification-success-bg: rgb(86 211 100 / 13%);
+  --notification-success-fg: #56d364;
+  --notification-warning-bg: rgb(210 153 34 / 15%);
+  --notification-warning-fg: #d29922;
   --shadow-soft: 0 24px 80px rgb(0 0 0 / 40%);
   --surface-elevated: #151515;
   --surface-muted: #202020;
@@ -927,9 +943,8 @@ code {
 .header-actions > .header-action-menu {
   align-items: center;
   display: inline-flex;
-  flex: 0 0 38px;
+  flex: 0 0 auto;
   justify-content: center;
-  width: 38px;
 }
 
 .workspace-search {
@@ -985,6 +1000,7 @@ code {
 }
 
 .header-action-menu {
+  gap: 10px;
   position: relative;
 }
 
@@ -1082,11 +1098,22 @@ code {
 }
 
 .notification-preview {
+  background: var(--notification-bg, transparent);
   border: 1px solid var(--border);
   border-left: 4px solid var(--notification-color, var(--accent));
   border-radius: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
   gap: 10px;
   padding: 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.notification-preview:hover,
+.notification-preview:focus-visible {
+  border-color: var(--notification-color, var(--accent));
+  outline: none;
 }
 
 .notification-preview > span {
@@ -1106,29 +1133,29 @@ code {
 
 .notification-preview.error,
 .github-notification-card.error {
-  --notification-color: #cf222e;
-  --notification-bg: rgb(207 34 46 / 10%);
+  --notification-color: var(--notification-error-fg);
+  --notification-bg: var(--notification-error-bg);
 }
 
 .notification-preview.warning,
 .github-notification-card.warning {
-  --notification-color: #9a6700;
-  --notification-bg: rgb(191 135 0 / 12%);
+  --notification-color: var(--notification-warning-fg);
+  --notification-bg: var(--notification-warning-bg);
 }
 
 .notification-preview.info,
 .github-notification-card.info {
-  --notification-color: #0969da;
-  --notification-bg: rgb(9 105 218 / 10%);
+  --notification-color: var(--notification-info-fg);
+  --notification-bg: var(--notification-info-bg);
 }
 
 .notification-preview.success,
 .github-notification-card.success {
-  --notification-color: #1a7f37;
-  --notification-bg: rgb(26 127 55 / 10%);
+  --notification-color: var(--notification-success-fg);
+  --notification-bg: var(--notification-success-bg);
 }
 
-.popover-menu button,
+.popover-menu button:not(.notification-preview),
 .popover-menu a {
   align-items: center;
   background: transparent;
@@ -1142,9 +1169,9 @@ code {
   text-decoration: none;
 }
 
-.popover-menu button:hover:not(:disabled),
+.popover-menu button:not(.notification-preview):hover:not(:disabled),
 .popover-menu a:hover,
-.popover-menu button:focus-visible,
+.popover-menu button:not(.notification-preview):focus-visible,
 .popover-menu a:focus-visible {
   background: var(--surface-muted);
   color: var(--accent);
@@ -1757,15 +1784,23 @@ code {
 }
 
 .section-heading {
-  margin-bottom: 18px;
+  margin-bottom: 16px;
   max-width: 860px;
 }
 
+.section-heading .eyebrow {
+  margin: 0 0 9px;
+}
+
 .section-heading h2 {
   font-size: 1.7rem;
   letter-spacing: -0.05em;
   line-height: 1.04;
-  margin: 6px 0 8px;
+  margin: 0 0 16px;
+}
+
+.section-heading p {
+  margin: 0;
 }
 
 .section-heading p,
@@ -1976,13 +2011,25 @@ code {
 }
 
 .apps-surface {
-  display: grid;
   align-content: start;
-  gap: 10px;
+  display: grid;
+  gap: 0;
 }
 
 .apps-surface .section-heading {
-  margin-bottom: 8px;
+  margin-bottom: 18px;
+}
+
+.apps-surface > .app-subnav {
+  margin-bottom: 18px;
+}
+
+.apps-surface > .app-subnav + .app-subnav {
+  margin-bottom: 16px;
+}
+
+.apps-surface .compact-notice {
+  margin-bottom: 0;
 }
 
 .data-table,
@@ -1994,8 +2041,8 @@ code {
 }
 
 .managed-app-list {
-  gap: 12px;
-  margin-bottom: 12px;
+  gap: 16px;
+  margin-bottom: 16px;
   overflow: visible;
 }
 
@@ -2006,7 +2053,7 @@ code {
   border: 1px solid var(--border);
   border-radius: 18px;
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
-  overflow: hidden;
+  overflow: visible;
   transition: background 140ms ease, border-color 140ms ease;
 }
 
@@ -2044,14 +2091,23 @@ code {
 .managed-app-title-block,
 .app-meta {
   display: grid;
-  gap: 7px;
   min-width: 0;
 }
 
+.managed-app-title-block {
+  gap: 0;
+}
+
+.managed-app-title-block .eyebrow {
+  line-height: 1;
+  margin: 0 0 8px;
+}
+
 .managed-app-title-block strong {
   font-size: clamp(1.12rem, 2vw, 1.4rem);
   letter-spacing: -0.04em;
   line-height: 1.15;
+  margin-bottom: 16px;
 }
 
 .managed-app-title-block > span:last-child {
@@ -2070,14 +2126,16 @@ code {
 
 .managed-summary-chip {
   align-items: center;
+  align-content: center;
   background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
   border: 1px solid var(--border);
   border-radius: 999px;
   display: inline-grid;
   gap: 1px;
   justify-items: center;
+  min-height: 58px;
   min-width: 118px;
-  padding: 7px 11px;
+  padding: 7px 12px;
   text-align: center;
 }
 
@@ -2093,6 +2151,7 @@ code {
   color: var(--text-primary);
   font-size: 0.84rem;
   font-weight: 800;
+  line-height: 1.15;
   max-width: 18ch;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2112,7 +2171,7 @@ code {
 .managed-app-body {
   border-top: 1px solid var(--border);
   display: grid;
-  gap: 14px;
+  gap: 16px;
   padding: 0 16px 16px;
   position: relative;
 }
@@ -2120,9 +2179,9 @@ code {
 .managed-app-toolbar {
   align-items: start;
   display: grid;
-  gap: 12px;
+  gap: 16px;
   grid-template-columns: minmax(0, 1fr) auto;
-  padding-top: 14px;
+  padding-top: 16px;
 }
 
 .managed-app-links,
@@ -2168,11 +2227,16 @@ code {
   grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
 }
 
+.managed-app-path {
+  min-height: auto;
+}
+
 .managed-toggle,
 .app-meta {
   background: var(--surface-elevated);
   border: 1px solid var(--border);
   border-radius: 12px;
+  gap: 7px;
   min-width: 0;
   min-height: 64px;
   padding: 10px 12px;
@@ -2184,10 +2248,15 @@ code {
   display: flex;
   font-size: 0.78rem;
   font-weight: 800;
-  gap: 8px;
+  gap: 12px;
+  justify-content: space-between;
   text-transform: uppercase;
 }
 
+.managed-toggle-label {
+  min-width: 0;
+}
+
 button.managed-toggle {
   cursor: pointer;
   text-align: left;
@@ -2209,6 +2278,7 @@ button.managed-toggle:focus-visible {
   border: 1px solid color-mix(in srgb, #ef4444 44%, var(--border));
   border-radius: 999px;
   display: inline-flex;
+  flex: 0 0 auto;
   padding: 2px;
   width: 34px;
 }
@@ -2266,19 +2336,27 @@ button.managed-toggle:focus-visible {
   color: var(--accent);
   display: inline-flex;
   gap: 7px;
-  min-height: 42px;
   justify-content: center;
+  line-height: 1;
+  min-height: 42px;
   padding: 0 12px;
   position: relative;
   transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
 }
 
 .app-action-button span {
+  align-items: center;
+  display: inline-flex;
   font-size: 0.7rem;
   font-weight: 900;
+  line-height: 1;
   text-transform: uppercase;
 }
 
+.app-action-button svg {
+  flex: 0 0 auto;
+}
+
 .app-action-button:hover,
 .app-action-button:focus-visible {
   background: var(--accent);
@@ -2394,7 +2472,7 @@ button.managed-toggle:focus-visible {
   content: attr(data-tooltip);
   font-size: 0.72rem;
   font-weight: 700;
-  left: clamp(10px, 50%, calc(100vw - 330px));
+  left: 50%;
   line-height: 1.35;
   max-width: min(320px, 72vw);
   opacity: 0;
@@ -2405,7 +2483,7 @@ button.managed-toggle:focus-visible {
   transform: translate(-50%, 4px);
   transition: opacity 140ms ease, transform 140ms ease;
   width: max-content;
-  z-index: 400;
+  z-index: 1000;
 }
 
 [data-tooltip]:hover::after,
@@ -2496,6 +2574,13 @@ button.managed-toggle:focus-visible {
   justify-self: start;
 }
 
+.recommended-filter-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
 .recommended-app-grid {
   display: grid;
   gap: 12px;

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.11
+# Version: 3.29.13
 #
 # Quick Install:
 #   npm install -g aidevops && aidevops update          (recommended)