aidevops 3.29.7 → 3.29.9

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

package/aidevops.sh

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

package/package.json

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

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

@@ -1,11 +1,12 @@
 /* jshint esversion: 11 */
 import { type ReactElement, type ReactNode, useEffect, useState } from "react";
-import { FiAlertTriangle, FiBell, FiCheckCircle, FiChevronLeft, FiChevronRight, FiCommand, FiGlobe, FiHash, FiHelpCircle, FiInfo, FiLogOut, FiMessageSquare, FiSearch, FiSettings, FiShield, FiTerminal, FiTool, FiUser } from "react-icons/fi";
+import { FiAlertTriangle, FiBell, FiCheckCircle, FiChevronLeft, FiChevronRight, FiCommand, FiFileText, FiGlobe, FiHash, FiHelpCircle, FiInfo, FiLogOut, FiMessageSquare, FiPaperclip, FiSearch, FiSettings, FiShield, FiTerminal, FiTool, FiUser } from "react-icons/fi";
 import type { GuiFileRootId, GuiNotificationSummary, GuiStatusData } from "../../gui-shared/src";
 import { SurfaceGlyph } from "./AppNavigation";
 import type { ConversationMode, ShellMode, SurfaceId, SurfaceNavItem } from "./app-model";
 import { inventorySurfaceConfigs, surfaceIds, text } from "./app-model";
 import { CommandPalette, type CommandPaletteSelection, commandPaletteShortcutQuery } from "./CommandPalette";
+import { CommsConversationSurface } from "./CommsConversationSurface";
 import { FileExplorerSurface } from "./FileExplorerSurface";
 import { AppsSurface, EditableInventorySurface, InstallationSurface } from "./InventorySurfaces";
 import { AiProvidersSurface, LocalReposSurface, LockedVaultGate, OverviewSurface, PlannedSurface, ProjectsSurface, SecuritySurface, VaultSurface } from "./StatusSurfaces";
@@ -213,39 +214,110 @@ function ConversationWorkspace({ conversationMode, selectedLocalRepoIndex, selec
   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.id_ref === selectedSessionId && session.repo_path_ref === selectedRepo.path_ref) ?? status.opencode_sessions.sessions.find((session) => session.repo_path_ref === selectedRepo.path_ref);
+  const selectedSession = selectedRepo === undefined ? undefined : sessionForRepo(status, selectedRepo.path_ref, selectedSessionId);
   const title = conversationMode === "ai" ? selectedRepo?.name ?? text.opencodeSessions : text.teams;
 
+  if (conversationMode === "ai") {
+    return <AiSessionsSurface selectedRepoIndex={selectedLocalRepoIndex} selectedSessionId={selectedSession?.id_ref} status={status} />;
+  }
+
   return (
-    <section className="chat-surface" aria-label={conversationMode === "ai" ? text.opencodeSessions : "People chat"}>
-      <div className="chat-thread-panel">
+    <CommsConversationSurface mode={title === text.teams ? "people" : "channels"} />
+  );
+}
+
+function AiSessionsSurface({ selectedRepoIndex, selectedSessionId, status }: { selectedRepoIndex: number; selectedSessionId?: string; status: GuiStatusData }): ReactElement {
+  const selectedRepo = status.local_repos?.repos?.[selectedRepoIndex] ?? status.local_repos?.repos?.[0];
+  const selectedSession = selectedRepo === undefined ? undefined : sessionForRepo(status, selectedRepo.path_ref, selectedSessionId);
+  const providerOptions = status.oauth_pool?.providers?.filter((provider) => provider.configured || provider.total > 0) ?? [];
+  const sessionTitle = selectedSession?.title ?? "AI session bridge";
+  const sessionMeta = selectedSession ? `${selectedSession.model} via ${selectedSession.agent}` : "No OpenCode session metadata selected";
+
+  return (
+    <section className="chat-surface ai-sessions-surface" aria-label={text.aiSessions} data-tour="ai-sessions-surface">
+      <aside className="chat-thread-panel" aria-label="AI session controls" data-tour="ai-session-list">
         <header className="chat-thread-header">
           <div>
-            <p className="eyebrow">{conversationMode === "ai" ? text.opencodeSessions : "SimpleX channels"}</p>
-            <h2><FiHash aria-hidden="true" /> {title}</h2>
+            <p className="eyebrow">{text.aiSessions}</p>
+            <h2><FiTerminal aria-hidden="true" /> {selectedRepo?.name ?? "Local workspace"}</h2>
           </div>
           <span className="count-pill">{text.readOnly}</span>
         </header>
-        <div className="chat-message-list">
-          {conversationMode === "ai" ? <>
-            <ChatBubble speaker="assistant" title={selectedSession?.title ?? "AI session bridge"} body={selectedSession ? `Most recent OpenCode session metadata: ${selectedSession.model} via ${selectedSession.agent}, updated ${selectedSession.updated_at}. Message payloads stay out of the status API until the turbostarter/ai chat bridge lands.` : "OpenCode session creation and continuation need an audited write route. This panel is ready for the turbostarter/ai chat surface once that adapter is connected."} />
-            <ChatBubble speaker="user" title={selectedRepo?.name ?? "Local repo"} body={selectedRepo ? `Selected repo: ${selectedRepo.path_ref}. Session metadata is grouped per local repo and sorted newest first from ${status.opencode_sessions.path_ref}.` : "No local repos were discovered yet."} />
-          </> : <>
-            <ChatBubble speaker="assistant" title="SimpleX transport" body={text.simplexReady} />
-            <ChatBubble speaker="user" title="People channel" body="Teams and direct messages share the same Slack-like channel layout while protected message payloads remain behind Vault policy." />
-          </>}
+        <div className="notice compact-notice">New, rename, pin, archive, delete, share, and export are visible but disabled until audited AI session write routes land.</div>
+        <div className="sidebar-history-controls">
+          {sessionActions.map((action) => <button disabled key={action} title={`${action} needs the AI session write adapter`} type="button">{action}</button>)}
+        </div>
+        <label className="settings-form">
+          <span>Model/provider</span>
+          <select
+            disabled
+            defaultValue={providerOptions[0]?.provider ?? "local"}
+            title="Model switching needs the Turbostarter AI transport adapter."
+          >
+            {providerOptions.length === 0 ? (
+              <option value="local">Provider setup required</option>
+            ) : (
+              providerOptions.map((provider) => (
+                <option key={provider.provider} value={provider.provider}>
+                  {provider.provider} ({provider.available}/{provider.total})
+                </option>
+              ))
+            )}
+          </select>
+        </label>
+      </aside>
+      <div className="chat-thread-panel" data-tour="ai-session-transcript">
+        <header className="chat-thread-header">
+          <div>
+            <p className="eyebrow">{sessionMeta}</p>
+            <h2><FiHash aria-hidden="true" /> {sessionTitle}</h2>
+          </div>
+          <button disabled title="Convert to worker task needs dispatch backend support" type="button">Create worker task</button>
+        </header>
+        <div className="chat-message-list" data-tour="message-scroller">
+          <MessageMarker label="Session status" detail="MessageScroller-compatible transcript; auto-scroll must pause when the reader scrolls away from the latest message." />
+          <ChatBubble
+            speaker="assistant"
+            title={sessionTitle}
+            body={
+              selectedSession
+                ? `Most recent OpenCode session metadata: ${sessionMeta}, updated ${selectedSession.updated_at}. Message payloads stay out of the status API until the Turbostarter AI chat bridge lands.`
+                : "OpenCode session creation and continuation need an audited write route. This surface is ready for the Turbostarter AI adapter once connected."
+            }
+          />
+          <AttachmentCard label="Context attachment" detail={selectedRepo ? `Selected repo context: ${selectedRepo.path_ref}` : "No local repos were discovered yet."} />
+          <MessageMarker label="Reasoning" detail="Reasoning disclosure, tool status, sources, retries, errors, and token usage render here when the AI transport supplies those parts." />
+          <ToolStatusCard />
         </div>
-        <form className="chat-composer" aria-label="Chat composer">
+        <form className="chat-composer ai-composer" aria-label="AI prompt composer" data-tour="ai-composer">
+          <button disabled title="Attachments need the audited upload/context adapter" type="button"><FiPaperclip aria-hidden="true" /> Attach</button>
           <textarea disabled placeholder={text.chatInputPlaceholder} />
-          <button disabled type="button">Send</button>
+          <button disabled title="Sending needs the Turbostarter AI transport adapter" type="button">Send</button>
         </form>
       </div>
     </section>
   );
 }
 
+const sessionActions = ["New", "Rename", "Pin", "Archive", "Delete", "Share", "Export"] as const;
+
+function sessionForRepo(status: GuiStatusData, repoPathRef: string, selectedSessionId: string | undefined) {
+  const sessions = status.opencode_sessions?.sessions ?? [];
+  return sessions.find((session) => session.id_ref === selectedSessionId && session.repo_path_ref === repoPathRef) ?? sessions.find((session) => session.repo_path_ref === repoPathRef);
+}
+
+function MessageMarker({ detail, label }: { detail: string; label: string }) {
+  return <article className="chat-bubble assistant"><strong>{label}</strong><p>{detail}</p></article>;
+}
+
+function AttachmentCard({ detail, label }: { detail: string; label: string }) {
+  return <article className="chat-bubble user"><strong><FiFileText aria-hidden="true" /> {label}</strong><p>{detail}</p></article>;
+}
+
+function ToolStatusCard() {
+  return <article className="chat-bubble assistant"><strong>Tool status</strong><p>Tool calls, source citations, retries, errors, and usage metadata are reserved for the shared conversation part model.</p></article>;
+}
+
 function ChatBubble({ body, speaker, title }: { body: string; speaker: "assistant" | "user"; title: string }) {
   return (
     <article className={`chat-bubble ${speaker}`}>
@@ -304,9 +376,9 @@ function SurfaceContent({ activeItem, activeSurface, fileRoot, openSurface, stat
     notifications: <NotificationsSurface openSurface={openSurface} status={status} />,
     admin: <AdminSurface />,
     vault: <VaultSurface status={status} />,
-    aiSessions: <PlannedSurface label={text.aiSessions} detail={text.aiSessionsIntro} />,
-    channels: <PlannedSurface label={text.channels} detail={text.channelsIntro} />,
-    directMessages: <PlannedSurface label={text.directMessages} detail={text.directMessagesIntro} />,
+    aiSessions: <AiSessionsSurface selectedRepoIndex={0} status={status} />,
+    channels: <CommsConversationSurface mode="channels" />,
+    directMessages: <CommsConversationSurface mode="directMessages" />,
     workers: <PlannedSurface label={text.workers} detail={text.workersIntro} />,
     repos: <PlannedSurface label={text.repos} detail={text.reposIntro} />,
     deployments: <PlannedSurface label={text.deployments} detail={text.deploymentsIntro} />,

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

@@ -0,0 +1,93 @@
+import { FiAtSign, FiHash, FiMessageSquare, FiSearch } from "react-icons/fi";
+import { sortConversationMessageParts, sortConversationMessages, type GuiConversationMessage, type GuiConversationMessagePart, type GuiConversationThread } from "../../gui-shared/src";
+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];
+  const partsByMessage = new Map<string, GuiConversationMessagePart[]>();
+
+  for (const part of sortConversationMessageParts(selectedThread.parts)) {
+    partsByMessage.set(part.message_id, [...(partsByMessage.get(part.message_id) ?? []), part]);
+  }
+
+  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>
+          <button disabled title="Creating conversations needs encrypted transport and audited write routes" type="button">Create</button>
+        </header>
+        <label className="conversation-search"><FiSearch aria-hidden="true" /><span className="sr-only">Search conversations</span><input disabled placeholder="Search channels, DMs, mentions" /></label>
+        <div className="notice compact-notice">{text.simplexReady}</div>
+        <ul className="conversation-list">
+          {conversations.map((thread) => <ConversationListItem key={thread.conversation.id} thread={thread} />)}
+        </ul>
+      </aside>
+      <div className="chat-thread-panel conversation-detail-panel">
+        <header className="chat-thread-header">
+          <div>
+            <p className="eyebrow">{selectedThread.conversation.scope.workspace_ref} · {selectedThread.conversation.status}</p>
+            <h2>{selectedThread.conversation.type === "channel" ? <FiHash aria-hidden="true" /> : <FiMessageSquare aria-hidden="true" />} {selectedThread.conversation.title}</h2>
+          </div>
+          <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>)}
+        </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} />)}
+        </div>
+        <form className="chat-composer" aria-label="Conversation composer">
+          <textarea disabled placeholder={text.chatInputPlaceholder} />
+          <button disabled title="Sending messages needs the encrypted transport adapter" type="button">Send</button>
+        </form>
+      </div>
+    </section>
+  );
+}
+
+function ConversationListItem({ thread }: { thread: GuiConversationThread }) {
+  const latestMessage = sortConversationMessages(thread.messages).at(-1);
+  const unread = unreadCount(thread);
+
+  return (
+    <li>
+      <button className="surface-link" type="button">
+        <span className="surface-icon" aria-hidden="true">{thread.conversation.type === "channel" ? <FiHash /> : <FiMessageSquare />}</span>
+        <span className="surface-copy"><strong>{thread.conversation.title}</strong><small>{latestMessage ? latestMessage.created_at : "No messages yet"}</small></span>
+        {unread > 0 ? <em>{unread}</em> : null}
+      </button>
+    </li>
+  );
+}
+
+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 speaker = message.sender_kind === "human" ? "user" : "assistant";
+
+  return (
+    <article className={`chat-bubble ${speaker}`} data-sender-kind={message.sender_kind}>
+      <strong>{sender?.display_name ?? message.sender_kind}</strong>
+      {parts.map((part) => <p key={part.id}>{part.text ?? part.kind}</p>)}
+      <small>{message.status} · {message.created_at}</small>
+      {reactions.length > 0 ? <div className="reaction-row">{reactions.map((reaction) => <span key={reaction.id}>{reaction.reaction}</span>)}</div> : null}
+    </article>
+  );
+}
+
+function participantSummary(thread: GuiConversationThread): string {
+  const active = thread.participants.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;
+  return Math.max(0, lastSequence - localRead);
+}

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

@@ -1,5 +1,5 @@
 import type { GuiAppActionId, GuiAppActionJobSummary, GuiManagedAppSummary, GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
-import { type Dispatch, type ReactElement, type SetStateAction, useEffect, useState } from "react";
+import { type Dispatch, type ReactElement, type SetStateAction, useEffect, useRef, useState } from "react";
 import { FiChevronDown, FiDownload, FiExternalLink, FiRefreshCw, FiRepeat, FiTrash2 } from "react-icons/fi";
 import type { InventoryColumn } from "./app-model";
 import { installationRows, text } from "./app-model";
@@ -12,17 +12,19 @@ interface DraftInventoryRow {
 let draftRowCounter = 0;
 
 export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement {
+  const [appCollection, setAppCollection] = useState<AppCollectionId>("aidevops");
+  const [managedCategory, setManagedCategory] = useState<ManagedCategoryId>("core");
+  const [recommendedOs, setRecommendedOs] = useState<RecommendedOsId>("all");
   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 [expandedAppId, setExpandedAppId] = useState<string | null>(() => sortedManagedApps(status.managed_apps).find((app) => managedCategoryForApp(app) === "core")?.id ?? null);
   const [jobs, setJobs] = useState<Record<string, GuiAppActionJobSummary>>({});
   const selectedJob = selectedJobId === null ? null : jobs[selectedJobId] ?? null;
+  const visibleManagedApps = sortedManagedApps(status.managed_apps).filter((app) => managedCategoryForApp(app) === managedCategory);
+  const visibleRecommendedApps = recommendedApps.filter((app) => recommendedOs === "all" || (app.os as readonly RecommendedOsId[]).includes(recommendedOs));
 
   useEffect(() => {
-    if (status.managed_apps.length === 0) {
-      return;
-    }
-    setExpandedAppIds((current) => current.size === 0 ? new Set([status.managed_apps[0].id]) : current);
-  }, [status.managed_apps]);
+    setExpandedAppId(visibleManagedApps[0]?.id ?? null);
+  }, [managedCategory, status.managed_apps]);
 
   useEffect(() => {
     if (selectedJob === null || selectedJob.status !== "running") {
@@ -37,29 +39,33 @@ export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement
   }, [selectedJob]);
 
   return (
-    <section className="panel" aria-label={text.apps}>
+    <section className="apps-surface" aria-label={text.apps}>
       <div className="section-heading">
         <p className="eyebrow">{text.infrastructure}</p>
         <h2>{text.apps}</h2>
         <p>{text.appsIntro}</p>
       </div>
-      <div className="managed-app-list">
-        {status.managed_apps.map((app) => (
-          <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>
-      <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>
+      <TabNav label="Apps collections" tabs={appCollectionTabs} value={appCollection} onChange={(value) => setAppCollection(value)} />
+      {appCollection === "aidevops" ? <>
+        <TabNav label="aidevops app groups" tabs={managedCategoryTabs} value={managedCategory} onChange={(value) => setManagedCategory(value)} />
+        <div className="managed-app-list">
+          {visibleManagedApps.map((app) => (
+            <ManagedAppPanel
+              app={app}
+              expanded={expandedAppId === app.id}
+              job={jobForApp(app.id, jobs, selectedJob)}
+              key={app.id}
+              onJob={(job) => {
+                setJobs((current) => ({ ...current, [job.id]: job }));
+                setSelectedJobId(job.id);
+                setExpandedAppId(app.id);
+              }}
+              onToggle={() => setExpandedAppId((current) => current === app.id ? null : app.id)}
+            />
+          ))}
+        </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} os={recommendedOs} setOs={setRecommendedOs} />}
     </section>
   );
 }
@@ -74,7 +80,6 @@ function ManagedAppPanel({ app, expanded, job, onJob, onToggle }: { app: GuiMana
           <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" />
@@ -96,7 +101,7 @@ function ManagedAppPanel({ app, expanded, job, onJob, onToggle }: { app: GuiMana
         <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} />
+        {job ? <AppLogLink job={job} /> : null}
       </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}
@@ -113,41 +118,73 @@ function OriginLink({ href, label }: { href: string; label: string }): ReactElem
     return <span className="origin-missing">{label}: source pending</span>;
   }
 
-  return <a data-tooltip={`Open ${label.toLowerCase()} destination`} href={href} rel="noreferrer" target="_blank">{label} <FiExternalLink aria-hidden="true" /></a>;
+  return <a data-tooltip={href} 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>;
+  const [isChecked, setIsChecked] = useState(checked);
+
+  return <button aria-pressed={isChecked} className={isChecked ? "managed-toggle checked" : "managed-toggle"} onClick={() => setIsChecked((current) => !current)} type="button"><span aria-hidden="true" className={isChecked ? "switch-track checked" : "switch-track"}><span /></span>{label}</button>;
 }
 
 function AppMeta({ label, value }: { label: string; value: string }): ReactElement {
   return <span className="app-meta"><small>{label}</small><strong>{value}</strong></span>;
 }
 
+function AppLogLink({ job }: { job: GuiAppActionJobSummary }): ReactElement {
+  return <a className="app-meta app-log-link" href={`#app-job-${job.id}`}><small>Logs</small><strong>{job.action} · {job.status}</strong></a>;
+}
+
 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 />;
+  const [confirmOpen, setConfirmOpen] = useState(false);
 
   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={action === "remove" ? "app-action-button remove" : "app-action-button"} data-tooltip={commandPreview} disabled={disabled} onClick={() => void runAction()} type="button">{icon}<span>{action}</span></button>;
+  return <>
+    <button aria-label={`${action} ${app.name}`} className={action === "remove" ? "app-action-button remove" : "app-action-button"} data-tooltip={commandPreview} disabled={disabled} onClick={() => setConfirmOpen(true)} type="button">{icon}<span>{action}</span></button>
+    {confirmOpen ? <ConfirmActionModal action={action} app={app} commandPreview={commandPreview} close={() => setConfirmOpen(false)} confirm={() => { setConfirmOpen(false); void runAction(); }} /> : null}
+  </>;
+}
+
+function ConfirmActionModal({ action, app, close, commandPreview, confirm }: { action: GuiAppActionId; app: GuiManagedAppSummary; close: () => void; commandPreview: string; confirm: () => void }): ReactElement {
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section aria-modal="true" className="confirm-modal" role="dialog" aria-labelledby={`confirm-${app.id}-${action}`}>
+        <p className="eyebrow">Confirm action</p>
+        <h3 id={`confirm-${app.id}-${action}`}>{action} {app.name}?</h3>
+        <p>This will start the allowlisted background command for this app.</p>
+        <code>{commandPreview}</code>
+        <div className="confirm-modal-actions">
+          <button className="secondary-action" onClick={close} type="button">Cancel</button>
+          <button className={action === "remove" ? "app-action-button remove" : "app-action-button"} onClick={confirm} type="button">Confirm</button>
+        </div>
+      </section>
+    </div>
+  );
 }
 
 function AppActionTerminal({ job }: { job: GuiAppActionJobSummary }): ReactElement {
+  const outputRef = useRef<HTMLPreElement | null>(null);
+
+  useEffect(() => {
+    if (outputRef.current !== null) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [job.output]);
+
   return (
-    <section className="app-terminal" aria-label="App action terminal output">
+    <section className="app-terminal" id={`app-job-${job.id}`} 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>
+      <pre ref={outputRef}>{job.output.join("\n")}</pre>
     </section>
   );
 }
@@ -169,15 +206,151 @@ function jobForApp(appId: string, jobs: Record<string, GuiAppActionJobSummary>,
   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);
+function sortedManagedApps(apps: GuiManagedAppSummary[]): GuiManagedAppSummary[] {
+  return [...apps].sort((left, right) => left.name.localeCompare(right.name, undefined, { sensitivity: "base" }));
+}
+
+function managedCategoryForApp(app: GuiManagedAppSummary): ManagedCategoryId {
+  if (["core", "safety", "automation"].includes(app.category)) {
+    return "core";
+  }
+  if (app.category.includes("ai")) {
+    return "ai";
+  }
+  if (["desktop", "editor"].includes(app.category)) {
+    return "desktop";
+  }
+  if (["terminal"].includes(app.category) || app.name.toLowerCase().includes("terminal")) {
+    return "terminal";
+  }
+
+  return "cli";
+}
+
+type AppCollectionId = "aidevops" | "recommended";
+type ManagedCategoryId = "core" | "ai" | "cli" | "desktop" | "terminal";
+type RecommendedOsId = "all" | "macos" | "linux" | "windows" | "ios" | "android";
+
+interface TabOption<T extends string> {
+  id: T;
+  label: string;
+}
+
+interface RecommendedApp {
+  name: string;
+  description: string;
+  websiteUrl: string;
+  alternativeToUrl?: string;
+  repoUrl?: string;
+  os: RecommendedOsId[];
+}
+
+const appCollectionTabs: TabOption<AppCollectionId>[] = [
+  { id: "aidevops", label: "aidevops" },
+  { id: "recommended", label: "Recommended" },
+];
+
+const managedCategoryTabs: TabOption<ManagedCategoryId>[] = [
+  { id: "core", label: "Core" },
+  { id: "ai", label: "AI" },
+  { id: "cli", label: "CLI" },
+  { id: "desktop", label: "Desktop" },
+  { id: "terminal", label: "Terminal" },
+];
+
+const recommendedOsTabs: TabOption<RecommendedOsId>[] = [
+  { id: "all", label: "All" },
+  { 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"] },
+  { 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"] },
+  { name: "Brave Browser", description: "Privacy-focused web browser.", websiteUrl: "https://brave.com/", alternativeToUrl: "https://alternativeto.net/software/brave/", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "Cloudron", description: "Self-hosted app platform.", websiteUrl: "https://www.cloudron.io/", alternativeToUrl: "https://alternativeto.net/software/cloudron/", os: ["linux"] },
+  { name: "Collabora Online", description: "Online office collaboration.", websiteUrl: "https://www.collaboraonline.com/collabora-online/", alternativeToUrl: "https://alternativeto.net/software/collabora-online/", os: ["linux"] },
+  { name: "Cometly", description: "Marketing attribution analytics.", websiteUrl: "https://www.cometly.com/", os: [] },
+  { name: "DaVinci Resolve", description: "Professional video editing, color, VFX, and audio post-production.", websiteUrl: "https://www.blackmagicdesign.com/products/davinciresolve/", alternativeToUrl: "https://alternativeto.net/software/davinci-resolve/", os: ["macos", "linux", "windows"] },
+  { name: "DocuSeal", description: "Open source document signing.", websiteUrl: "https://www.docuseal.com/", alternativeToUrl: "https://alternativeto.net/software/docuseal/", os: ["linux"] },
+  { name: "Element", description: "Matrix messaging client.", websiteUrl: "https://element.io/", alternativeToUrl: "https://alternativeto.net/software/element-app/", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "Enpass", description: "Offline-first password manager.", websiteUrl: "https://www.enpass.io/", alternativeToUrl: "https://alternativeto.net/software/enpass/", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "EspoCRM", description: "Open source CRM.", websiteUrl: "https://www.espocrm.com/", alternativeToUrl: "https://alternativeto.net/software/espocrm/", os: ["linux"] },
+  { name: "Fathom Analytics", description: "Privacy-first analytics.", websiteUrl: "https://usefathom.com/", alternativeToUrl: "https://alternativeto.net/software/fathom-analytics/", os: [] },
+  { name: "FonrBase", description: "Font management and reference tool.", websiteUrl: "https://fontba.se/", alternativeToUrl: "https://alternativeto.net/software/fontbase/", os: ["macos"] },
+  { name: "Forgejo", description: "Self-hosted Git forge.", websiteUrl: "https://forgejo.org/", alternativeToUrl: "https://alternativeto.net/software/forgejo/", os: ["linux"] },
+  { name: "Ghost", description: "Publishing platform.", websiteUrl: "https://ghost.org/", alternativeToUrl: "https://alternativeto.net/software/ghost/", os: ["linux"] },
+  { name: "Gitea", description: "Self-hosted Git service.", websiteUrl: "https://about.gitea.com/", alternativeToUrl: "https://alternativeto.net/software/gitea/", os: ["linux", "windows"] },
+  { name: "GitLab", description: "DevSecOps and Git hosting platform.", websiteUrl: "https://gitlab.com/", alternativeToUrl: "https://alternativeto.net/software/gitlab/", os: ["linux"] },
+  { name: "LibreOffice", description: "Open source office suite.", websiteUrl: "https://www.libreoffice.org/", alternativeToUrl: "https://alternativeto.net/software/libreoffice/", os: ["macos", "linux", "windows"] },
+  { name: "LocalWP", description: "Local WordPress development.", websiteUrl: "https://localwp.com/", alternativeToUrl: "https://alternativeto.net/software/local-by-flywheel/", os: ["macos", "linux", "windows"] },
+  { name: "Matomo", description: "Open analytics platform.", websiteUrl: "https://matomo.org/", alternativeToUrl: "https://alternativeto.net/software/piwik/", os: ["linux"] },
+  { name: "Nextcloud", description: "Open source content collaboration platform.", websiteUrl: "https://nextcloud.com/", alternativeToUrl: "https://alternativeto.net/software/nextcloud/", repoUrl: "https://github.com/nextcloud", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "OBS Studio", description: "Open source video recording and live streaming.", websiteUrl: "https://obsproject.com/", alternativeToUrl: "https://alternativeto.net/software/open-broadcaster-software/", repoUrl: "https://github.com/obsproject/obs-studio", os: ["macos", "linux", "windows"] },
+  { name: "ONLYOFFICE", description: "Office and document collaboration.", websiteUrl: "https://www.onlyoffice.com/", alternativeToUrl: "https://alternativeto.net/software/onlyoffice/", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "OpenScreen", description: "Open screen-sharing project.", websiteUrl: "https://github.com/getopenscreen/openscreen", alternativeToUrl: "https://alternativeto.net/software/openscreen/", repoUrl: "https://github.com/getopenscreen/openscreen", os: ["linux"] },
+  { name: "Osaurus", description: "AI app workspace.", websiteUrl: "https://osaurus.ai/", alternativeToUrl: "https://alternativeto.net/software/osaurus/", os: ["macos"] },
+  { name: "Parallels Desktop", description: "Run Windows, Linux, and virtual machines on macOS.", websiteUrl: "https://www.parallels.com/products/desktop/", alternativeToUrl: "https://alternativeto.net/software/parallels-desktop/about/", os: ["macos"] },
+  { name: "PDF Studio", description: "PDF editor.", websiteUrl: "https://www.qoppa.com/pdfstudio/", alternativeToUrl: "https://alternativeto.net/software/qoppa-pdf-studio/", os: ["macos", "linux", "windows"] },
+  { name: "PostHog", description: "Product analytics platform.", websiteUrl: "https://posthog.com/", alternativeToUrl: "https://alternativeto.net/software/posthog/", os: ["linux"] },
+  { name: "Postiz", description: "Social media scheduling.", websiteUrl: "https://postiz.com/", alternativeToUrl: "https://alternativeto.net/software/postiz/", os: ["linux"] },
+  { name: "PrivateBin", description: "Zero-knowledge pastebin.", websiteUrl: "https://privatebin.info/", alternativeToUrl: "https://alternativeto.net/software/privatebin/", repoUrl: "https://github.com/PrivateBin/PrivateBin", os: ["linux"] },
+  { name: "Proxmox", description: "Virtualization platform.", websiteUrl: "https://www.proxmox.com/", alternativeToUrl: "https://alternativeto.net/software/proxmox-virtual-environment/", os: ["linux"] },
+  { name: "QuickFile", description: "Accounting platform.", websiteUrl: "https://www.quickfile.co.uk/", os: [] },
+  { name: "Reframed", description: "Creative framing utility.", websiteUrl: "https://www.reframed.dev/", alternativeToUrl: "https://alternativeto.net/software/reframed/", os: ["macos"] },
+  { name: "Rybbit", description: "Web analytics.", websiteUrl: "https://rybbit.com/", alternativeToUrl: "https://alternativeto.net/software/rybbit/", os: ["linux"] },
+  { name: "SchildiChat", description: "Matrix messaging client.", websiteUrl: "https://schildi.chat/", alternativeToUrl: "https://alternativeto.net/software/schildichat/", os: ["macos", "linux", "windows", "android"] },
+  { name: "ScreenFlow", description: "Screen recording and editing.", websiteUrl: "https://www.telestream.net/screenflow/", alternativeToUrl: "https://alternativeto.net/software/screenflow/", os: ["macos", "ios"] },
+  { name: "SEO Utils", description: "Desktop SEO tools.", websiteUrl: "https://seoutils.app/", os: ["macos", "linux", "windows"] },
+  { name: "Shottr", description: "macOS screenshot utility.", websiteUrl: "https://shottr.cc/", alternativeToUrl: "https://alternativeto.net/software/shottr/", os: ["macos"] },
+  { name: "Signal", description: "Private messenger.", websiteUrl: "https://signal.org/", alternativeToUrl: "https://alternativeto.net/software/signal-private-messenger/", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "SimpleX Chat", description: "Private messenger with no user IDs.", websiteUrl: "https://simplex.chat/", alternativeToUrl: "https://alternativeto.net/software/simplex-chat/about/", repoUrl: "https://github.com/simplex-chat", os: ["macos", "linux", "windows", "ios", "android"] },
+  { name: "Thunderbird", description: "Email and calendar app.", websiteUrl: "https://www.thunderbird.net/", alternativeToUrl: "https://alternativeto.net/software/mozilla-thunderbird/about/", os: ["macos", "linux", "windows"] },
+  { name: "Ubicloud", description: "Open cloud platform.", websiteUrl: "https://www.ubicloud.com/", alternativeToUrl: "https://alternativeto.net/software/ubicloud/about/", os: ["linux"] },
+  { name: "Vaultwarden", description: "Alternative Bitwarden server implementation.", websiteUrl: "https://github.com/dani-garcia/vaultwarden", alternativeToUrl: "https://alternativeto.net/software/vaultwarden/", repoUrl: "https://github.com/dani-garcia/vaultwarden", os: ["linux"] },
+  { name: "VideoProc", description: "Video processing toolkit.", websiteUrl: "https://www.videoproc.com/", alternativeToUrl: "https://alternativeto.net/software/videoproc/about/", os: ["macos", "windows"] },
+  { name: "VirtualBox", description: "Virtualization app.", websiteUrl: "https://www.virtualbox.org/", alternativeToUrl: "https://alternativeto.net/software/virtualbox/about/", os: ["macos", "linux", "windows"] },
+  { name: "WordPress", description: "Open source publishing platform.", websiteUrl: "https://wordpress.org/", alternativeToUrl: "https://alternativeto.net/software/wordpress/about/", os: ["linux"] },
+] satisfies RecommendedApp[]).sort((left, right) => left.name.localeCompare(right.name, undefined, { sensitivity: "base" }));
+
+function TabNav<T extends string>({ label, onChange, tabs, value }: { label: string; onChange: (value: T) => void; tabs: TabOption<T>[]; value: T }): ReactElement {
+  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, os, setOs }: { apps: RecommendedApp[]; os: RecommendedOsId; setOs: (os: RecommendedOsId) => void }): ReactElement {
+  return <>
+    <TabNav label="Recommended app OS filters" tabs={recommendedOsTabs} value={os} onChange={setOs} />
+    <div className="recommended-app-grid">
+      {apps.map((app) => <RecommendedAppCard app={app} key={app.name} />)}
+    </div>
+  </>;
+}
+
+function RecommendedAppCard({ app }: { app: RecommendedApp }): ReactElement {
+  return <article className="recommended-app-card">
+    <div>
+      <strong>{app.name}</strong>
+      <p>{app.description}</p>
+    </div>
+    <OsIconList os={app.os} />
+    <div className="managed-app-links plain-links">
+      <OriginLink href={app.websiteUrl} label={text.website} />
+      {app.alternativeToUrl ? <OriginLink href={app.alternativeToUrl} label="AlternativeTo" /> : null}
+      {app.repoUrl ? <OriginLink href={app.repoUrl} label="Repo" /> : null}
+    </div>
+  </article>;
+}
+
+function OsIconList({ os }: { os: RecommendedOsId[] }): ReactElement {
+  const icons: Record<RecommendedOsId, string> = { all: "*", macos: "⌘", linux: "🐧", windows: "⊞", ios: "iOS", android: "🤖" };
+  if (os.length === 0) {
+    return <span className="os-icon-list"><span title="Web app">Web</span></span>;
   }
 
-  return next;
+  return <span className="os-icon-list">{os.map((item) => <span key={item} title={recommendedOsTabs.find((tab) => tab.id === item)?.label}>{icons[item]}</span>)}</span>;
 }
 
 export function InstallationSurface(): ReactElement {

package/packages/gui-web/src/conversation-fixtures.ts

@@ -0,0 +1,38 @@
+import type { GuiConversationThread } from "../../gui-shared/src";
+
+export const conversationThreads: GuiConversationThread[] = [
+  {
+    conversation: { id: "channel-general", type: "channel", title: "general", scope: { tenant_ref: "local", workspace_ref: "aidevops", repo_ref: null }, source_ref: "seed:channels/general", status: "read_only", created_at: "2026-06-27T00:00:00Z", updated_at: "2026-06-27T12:20:00Z" },
+    participants: [
+      { id: "participant-local", conversation_id: "channel-general", kind: "human", display_name: "Local user", identity_ref: "local:user", agent_ref: null, worker_ref: null, membership_state: "active", joined_at: "2026-06-27T00:00:00Z" },
+      { id: "participant-ai", conversation_id: "channel-general", kind: "ai_assistant", display_name: "AI DevOps", identity_ref: null, agent_ref: "aidevops", worker_ref: null, membership_state: "active", joined_at: "2026-06-27T00:00:00Z" },
+      { id: "participant-system", conversation_id: "channel-general", kind: "system_bot", display_name: "System", identity_ref: null, agent_ref: null, worker_ref: null, membership_state: "active", joined_at: "2026-06-27T00:00:00Z" },
+    ],
+    messages: [
+      { id: "message-general-1", conversation_id: "channel-general", sender_participant_id: "participant-system", sender_kind: "system", sequence: 1, status: "sent", usage: null, created_at: "2026-06-27T12:00:00Z", edited_at: null },
+      { id: "message-general-2", conversation_id: "channel-general", sender_participant_id: "participant-ai", sender_kind: "ai_assistant", sequence: 2, status: "delivered", usage: { provider_ref: "local", model_ref: "workflow-summary", input_tokens: 0, output_tokens: 0, total_tokens: 0, cost_ref: null }, created_at: "2026-06-27T12:15:00Z", edited_at: null },
+    ],
+    parts: [
+      { id: "part-general-1", message_id: "message-general-1", kind: "event_marker", ordinal: 1, text: "#general is ready for repo, deployment, review, and incident coordination.", payload_json: null, file_ref: null, source_ref: "seed" },
+      { id: "part-general-2", message_id: "message-general-2", kind: "text", ordinal: 1, text: "Mention @AI DevOps or a worker to turn a thread into an audited task once write routes land.", payload_json: null, file_ref: null, source_ref: null },
+    ],
+    reactions: [{ id: "reaction-general-1", message_id: "message-general-2", participant_id: "participant-local", reaction: "ack", created_at: "2026-06-27T12:16:00Z" }],
+    read_states: [{ conversation_id: "channel-general", participant_id: "participant-local", last_read_message_id: "message-general-1", last_read_sequence: 1, updated_at: "2026-06-27T12:10:00Z" }],
+  },
+  {
+    conversation: { id: "channel-workers", type: "channel", title: "worker-feed", scope: { tenant_ref: "local", workspace_ref: "aidevops", repo_ref: "current" }, source_ref: "seed:channels/worker-feed", status: "read_only", created_at: "2026-06-27T00:00:00Z", updated_at: "2026-06-27T12:30:00Z" },
+    participants: [{ id: "participant-worker", conversation_id: "channel-workers", kind: "worker", display_name: "Worker queue", identity_ref: null, agent_ref: null, worker_ref: "workers", membership_state: "active", joined_at: "2026-06-27T00:00:00Z" }],
+    messages: [{ id: "message-workers-1", conversation_id: "channel-workers", sender_participant_id: "participant-worker", sender_kind: "worker", sequence: 1, status: "delivered", usage: null, created_at: "2026-06-27T12:30:00Z", edited_at: null }],
+    parts: [{ id: "part-workers-1", message_id: "message-workers-1", kind: "event_marker", ordinal: 1, text: "Worker events for reviews, deployments, incidents, and releases collect here.", payload_json: null, file_ref: null, source_ref: "seed" }],
+    reactions: [],
+    read_states: [{ conversation_id: "channel-workers", participant_id: "participant-local", last_read_message_id: null, last_read_sequence: 0, updated_at: "2026-06-27T12:00:00Z" }],
+  },
+  {
+    conversation: { id: "dm-ai-devops", type: "dm", title: "AI DevOps", scope: { tenant_ref: "local", workspace_ref: "aidevops", repo_ref: null }, source_ref: "seed:dms/ai-devops", status: "read_only", created_at: "2026-06-27T00:00:00Z", updated_at: "2026-06-27T12:40:00Z" },
+    participants: [{ id: "participant-dm-local", conversation_id: "dm-ai-devops", kind: "human", display_name: "Local user", identity_ref: "local:user", agent_ref: null, worker_ref: null, membership_state: "active", joined_at: "2026-06-27T00:00:00Z" }, { id: "participant-dm-ai", conversation_id: "dm-ai-devops", kind: "ai_assistant", display_name: "AI DevOps", identity_ref: null, agent_ref: "aidevops", worker_ref: null, membership_state: "active", joined_at: "2026-06-27T00:00:00Z" }],
+    messages: [{ id: "message-dm-1", conversation_id: "dm-ai-devops", sender_participant_id: "participant-dm-ai", sender_kind: "ai_assistant", sequence: 1, status: "delivered", usage: null, created_at: "2026-06-27T12:40:00Z", edited_at: null }],
+    parts: [{ id: "part-dm-1", message_id: "message-dm-1", kind: "text", ordinal: 1, text: "Direct support threads share the same message parts, participants, reactions, and read state as channels.", payload_json: null, file_ref: null, source_ref: null }],
+    reactions: [],
+    read_states: [{ conversation_id: "dm-ai-devops", participant_id: "participant-dm-local", last_read_message_id: null, last_read_sequence: 0, updated_at: "2026-06-27T12:00:00Z" }],
+  },
+];

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

@@ -69,6 +69,7 @@ body {
     radial-gradient(ellipse at top left, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 36%),
     var(--bg-secondary);
   color: var(--text-primary);
+  font-family: var(--font-family-app);
   line-height: 1.6;
   margin: 0;
   font-size: var(--font-size-app);
@@ -1286,11 +1287,28 @@ code {
   gap: 16px;
 }
 
+.sr-only {
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
 .chat-surface {
   display: grid;
+  gap: 16px;
   min-height: 100%;
 }
 
+.ai-sessions-surface {
+  grid-template-columns: minmax(248px, 320px) minmax(0, 1fr);
+}
+
+.comms-surface {
+  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+}
+
 .chat-thread-panel {
   background: var(--surface-elevated);
   border: 1px solid var(--border);
@@ -1346,6 +1364,69 @@ code {
   margin: 0;
 }
 
+.chat-bubble small {
+  color: var(--text-muted);
+}
+
+.chat-bubble[data-sender-kind="system"],
+.chat-bubble[data-sender-kind="worker"] {
+  border-style: dashed;
+}
+
+.conversation-list-panel {
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+}
+
+.conversation-search {
+  align-items: center;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  display: flex;
+  gap: 8px;
+  margin: 14px;
+  padding: 10px 12px;
+}
+
+.conversation-search input {
+  background: transparent;
+  border: 0;
+  color: var(--text-secondary);
+  min-width: 0;
+  width: 100%;
+}
+
+.conversation-list {
+  display: grid;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0 14px 14px;
+}
+
+.participant-strip,
+.reaction-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 18px 0;
+}
+
+.participant-strip span,
+.reaction-row span {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  gap: 6px;
+  padding: 6px 9px;
+}
+
+.participant-strip small {
+  color: var(--text-muted);
+}
+
 .chat-composer {
   border-top: 1px solid var(--border);
   display: grid;
@@ -1354,6 +1435,10 @@ code {
   padding: 14px;
 }
 
+.chat-composer.ai-composer {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
 .chat-composer textarea {
   background: var(--surface-muted);
   border: 1px solid var(--border);
@@ -1365,14 +1450,33 @@ code {
 }
 
 .chat-composer button {
+  align-items: center;
   background: color-mix(in srgb, var(--accent) 16%, transparent);
   border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
   border-radius: 14px;
   color: var(--accent);
+  display: inline-flex;
   font-weight: 900;
+  gap: 8px;
   padding: 0 18px;
 }
 
+@media (max-width: 980px) {
+  .ai-sessions-surface,
+  .comms-surface {
+    grid-template-columns: 1fr;
+  }
+
+  .chat-composer {
+    grid-template-columns: 1fr;
+  }
+
+  .chat-composer button {
+    justify-content: center;
+    min-height: 44px;
+  }
+}
+
 .hero-panel,
 .panel,
 .metric-card,
@@ -1860,6 +1964,11 @@ code {
   margin-bottom: 12px;
 }
 
+.apps-surface {
+  display: grid;
+  gap: 14px;
+}
+
 .data-table,
 .editable-table,
 .installation-list,
@@ -1935,13 +2044,16 @@ code {
 }
 
 .managed-summary-chip {
+  align-items: 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-width: 118px;
   padding: 7px 11px;
+  text-align: center;
 }
 
 .managed-summary-chip small {
@@ -2002,25 +2114,22 @@ code {
 .managed-app-links a,
 .origin-missing {
   align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 999px;
   color: var(--text-secondary);
   display: inline-flex;
   font-size: 0.78rem;
   font-weight: 800;
   gap: 4px;
   max-width: 100%;
-  padding: 6px 9px;
+  padding: 4px 0;
   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;
+  text-decoration: underline;
 }
 
 .origin-missing {
@@ -2053,9 +2162,20 @@ code {
   text-transform: uppercase;
 }
 
+button.managed-toggle {
+  cursor: pointer;
+  text-align: left;
+}
+
+button.managed-toggle:hover,
+button.managed-toggle:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
+  outline: none;
+}
+
 .switch-track {
-  background: var(--surface-muted);
-  border: 1px solid var(--border);
+  background: color-mix(in srgb, #ef4444 18%, var(--surface-muted));
+  border: 1px solid color-mix(in srgb, #ef4444 44%, var(--border));
   border-radius: 999px;
   display: inline-flex;
   padding: 2px;
@@ -2063,7 +2183,7 @@ code {
 }
 
 .switch-track span {
-  background: var(--text-muted);
+  background: #ef4444;
   border-radius: 50%;
   height: 14px;
   transform: translateX(0);
@@ -2072,10 +2192,15 @@ code {
 }
 
 .switch-track.checked span {
-  background: var(--accent);
+  background: #22c55e;
   transform: translateX(14px);
 }
 
+.switch-track.checked {
+  background: color-mix(in srgb, #22c55e 18%, var(--surface-muted));
+  border-color: color-mix(in srgb, #22c55e 48%, var(--border));
+}
+
 .app-meta small {
   color: var(--text-muted);
   font-size: 0.72rem;
@@ -2091,6 +2216,17 @@ code {
   word-break: break-word;
 }
 
+.app-log-link {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.app-log-link:hover,
+.app-log-link:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
+  outline: none;
+}
+
 .app-action-button {
   align-items: center;
   background: color-mix(in srgb, var(--accent) 16%, var(--surface-elevated));
@@ -2174,6 +2310,45 @@ code {
   word-break: break-word;
 }
 
+.modal-backdrop {
+  align-items: center;
+  background: rgb(0 0 0 / 62%);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 18px;
+  position: fixed;
+  z-index: 100;
+}
+
+.confirm-modal {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border-hover);
+  border-radius: 18px;
+  box-shadow: 0 24px 90px rgb(0 0 0 / 48%);
+  display: grid;
+  gap: 12px;
+  max-width: 520px;
+  padding: 22px;
+  width: min(100%, 520px);
+}
+
+.confirm-modal h3,
+.confirm-modal p {
+  margin: 0;
+}
+
+.confirm-modal code {
+  overflow-wrap: anywhere;
+}
+
+.confirm-modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
 [data-tooltip] {
   position: relative;
 }
@@ -2284,6 +2459,57 @@ code {
   width: min(100%, 520px);
 }
 
+.app-subnav {
+  width: fit-content;
+}
+
+.recommended-app-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.recommended-app-card {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 40%),
+    var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+}
+
+.recommended-app-card strong {
+  font-size: 1.05rem;
+}
+
+.recommended-app-card p {
+  color: var(--text-secondary);
+  margin: 4px 0 0;
+}
+
+.os-icon-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.os-icon-list span {
+  align-items: center;
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  font-size: 0.72rem;
+  font-weight: 900;
+  justify-content: center;
+  min-height: 28px;
+  min-width: 28px;
+  padding: 4px 7px;
+}
+
 .pill-tabs button {
   background: transparent;
   border: 0;

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