aidevops 3.29.5 → 3.29.7

package/README.md

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

package/VERSION

@@ -1 +1 @@
-3.29.5
+3.29.7

package/aidevops.sh

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

package/package.json

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

package/packages/gui-api/src/status-adapter.ts

@@ -20,6 +20,7 @@ import {
   type GuiSetupTargetSummary,
   type GuiStatusData,
   type GuiVaultStatusData,
+  buildStatusNotifications,
   statusFixture,
   VAULT_STATUS_ROUTE_MANIFEST,
 } from "../../gui-shared/src";
@@ -60,6 +61,7 @@ export function readStatus(
   const reposPathRef = "~/.config/aidevops/repos.json";
   const oauthPoolPathRef = "~/.aidevops/oauth-pool.json";
   const opencodeDbPathRef = "~/.local/share/opencode/opencode.db";
+  const greetingCachePathRef = "~/.aidevops/cache/session-greeting.txt";
   const agentsPathRef = "~/.aidevops/agents";
   const vaultPathRef = statusFixture.vault.path_ref;
   const settingsPath = expandHome(settingsPathRef);
@@ -76,13 +78,22 @@ export function readStatus(
   const managedApps = readManagedApps(aidevopsVersion || "unknown", installedVersion || "unknown");
   const localRepos = readLocalReposSetupSummary(reposPath);
   const opencodeSessions = readOpenCodeSessions(opencodeDbPath, opencodeDbPathRef, localRepos.repos);
+  const oauthPool = readOAuthPoolSummary(oauthPoolPath, oauthPoolPathRef);
   const vault = readVaultSummary(repoRoot);
+  const notifications = buildStatusNotifications({
+    aiApps,
+    greetingOutput: readOptionalText(expandHome(greetingCachePathRef)) ?? "",
+    oauthPool,
+    restartRequired,
+    setupTargets,
+  });
   const sourcePathRefs = [
     agentsPathRef,
     settingsPathRef,
     reposPathRef,
     oauthPoolPathRef,
     opencodeDbPathRef,
+    greetingCachePathRef,
     vaultPathRef,
     "VERSION",
     ...setupTargets.map((target) => target.path_ref),
@@ -131,10 +142,11 @@ export function readStatus(
     repos: readRepoRegistrySummary(reposPath, reposPathRef),
     local_repos: localRepos,
     opencode_sessions: opencodeSessions,
-    oauth_pool: readOAuthPoolSummary(oauthPoolPath, oauthPoolPathRef),
+    oauth_pool: oauthPool,
     setup_targets: setupTargets,
     ai_apps: aiApps,
     managed_apps: managedApps,
+    notifications,
     vault,
   };
 

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

@@ -339,6 +339,31 @@ export interface GuiCapabilitySummary {
   doc_ref: string;
 }
 
+export type GuiNotificationSeverity = "success" | "info" | "warning" | "error";
+
+export type GuiNotificationCategory = "security" | "maintenance" | "release" | "runtime" | "setup";
+
+export interface GuiNotificationAction {
+  id: string;
+  label: string;
+  kind: "surface" | "command";
+  surface_id?: string;
+  command_preview?: string;
+  enabled: boolean;
+}
+
+export interface GuiNotificationSummary {
+  id: string;
+  title: string;
+  message: string;
+  severity: GuiNotificationSeverity;
+  category: GuiNotificationCategory;
+  source: "opencode-toast" | "gui-status";
+  source_ref: string;
+  status: "active" | "resolved";
+  actions: GuiNotificationAction[];
+}
+
 export interface GuiMachineSummary {
   id: string;
   label: string;
@@ -451,6 +476,7 @@ export interface GuiStatusData {
   setup_targets: GuiSetupTargetSummary[];
   ai_apps: GuiAiAppSummary[];
   managed_apps: GuiManagedAppSummary[];
+  notifications: GuiNotificationSummary[];
   vault: GuiVaultStatusData;
   capabilities: GuiCapabilitySummary[];
   secrets: GuiSecretReference[];

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

@@ -163,6 +163,19 @@ export const statusFixture: GuiStatusData = {
     },
   ],
   managed_apps: [],
+  notifications: [
+    {
+      id: "fixture-security-active",
+      title: "Security protections active",
+      message: "Security: all protections active",
+      severity: "success",
+      category: "security",
+      source: "opencode-toast",
+      source_ref: "~/.aidevops/cache/session-greeting.txt",
+      status: "resolved",
+      actions: [{ id: "open-security", label: "Open security", kind: "surface", surface_id: "security", enabled: true }],
+    },
+  ],
   vault: {
     status: "uninitialized",
     setup_state: "uninitialized",

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

@@ -1,2 +1,3 @@
 export * from "./contracts";
 export * from "./fixtures";
+export * from "./notifications";

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

@@ -0,0 +1,220 @@
+import type { GuiAiAppSummary, GuiNotificationAction, GuiNotificationCategory, GuiNotificationSeverity, GuiNotificationSummary, GuiOAuthPoolSummary, GuiSetupTargetSummary } from "./contracts";
+
+interface BuildNotificationInput {
+  aiApps: GuiAiAppSummary[];
+  greetingOutput: string;
+  oauthPool: GuiOAuthPoolSummary;
+  restartRequired: boolean;
+  setupTargets: GuiSetupTargetSummary[];
+}
+
+const toastSeverityRank: Record<GuiNotificationSeverity, number> = {
+  success: 0,
+  info: 1,
+  warning: 2,
+  error: 3,
+};
+
+const warningLineMatchers: Array<(line: string) => boolean> = [
+  (line) => line.startsWith("Pulse stalled"),
+  (line) => /contribution\(s\) need/i.test(line),
+  (line) => line.startsWith("[OPENCODE MAINTENANCE]"),
+  (line) => line.startsWith("[WARNING]"),
+  (line) => line.startsWith("[WARN]"),
+];
+
+const toastTitleRules: Array<{ matches: (line: string) => boolean; title: string }> = [
+  { matches: (line) => line.startsWith("[SECURITY ADVISORY]"), title: "Security advisory" },
+  { 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) => line.startsWith("[WARNING]") || line.startsWith("[WARN]"), title: "Startup warning" },
+  { matches: (line) => line.startsWith("Security: all protections active"), title: "Security protections active" },
+];
+
+export function classifyToastLine(line: string): GuiNotificationSeverity | null {
+  const normalized = line.trim();
+  if (normalized.length === 0 || normalized.startsWith("UPDATE_AVAILABLE|") || normalized === "AUTO_UPDATE_ENABLED") {
+    return null;
+  }
+
+  if (normalized.startsWith("[SECURITY ADVISORY]") || normalized.startsWith("[ERROR]")) {
+    return "error";
+  }
+
+  if (warningLineMatchers.some((matches) => matches(normalized))) {
+    return "warning";
+  }
+
+  if (normalized.startsWith("Security: all protections active")) {
+    return "success";
+  }
+
+  return "info";
+}
+
+export function buildStatusNotifications(input: BuildNotificationInput): GuiNotificationSummary[] {
+  const notifications = [
+    ...buildToastNotifications(input.greetingOutput),
+    ...buildGuiStateNotifications(input),
+  ];
+
+  return dedupeNotifications(notifications).sort((left, right) => {
+    const severityDelta = toastSeverityRank[right.severity] - toastSeverityRank[left.severity];
+    return severityDelta === 0 ? left.title.localeCompare(right.title) : severityDelta;
+  });
+}
+
+function buildToastNotifications(greetingOutput: string): GuiNotificationSummary[] {
+  return greetingOutput
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .flatMap((line) => {
+      const severity = classifyToastLine(line);
+      if (severity === null) {
+        return [];
+      }
+
+      const category = categoryForToastLine(line, severity);
+      return [notification({
+        id: `toast-${stableId(line)}`,
+        title: titleForToastLine(line, severity),
+        message: line,
+        severity,
+        category,
+        source: "opencode-toast",
+        source_ref: "~/.aidevops/cache/session-greeting.txt",
+        status: severity === "success" || severity === "info" ? "resolved" : "active",
+        actions: actionsForToastLine(line, category, severity),
+      })];
+    });
+}
+
+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 notifications: GuiNotificationSummary[] = [];
+
+  if (input.restartRequired) {
+    notifications.push(notification({
+      id: "gui-restart-required",
+      title: "Restart required",
+      message: "aidevops has updated in the background. Restart the GUI app to use the latest installed version.",
+      severity: "warning",
+      category: "release",
+      source: "gui-status",
+      source_ref: "VERSION and ~/.aidevops/agents/VERSION",
+      status: "active",
+      actions: [surfaceAction("open-installation", "Open installation", "installation"), commandAction("restart-gui", "Restart GUI app", "Quit and reopen the aidevops GUI app")],
+    }));
+  }
+
+  if (setupNeedsUpdate.length > 0 || appNeedsUpdate.length > 0) {
+    notifications.push(notification({
+      id: "gui-targets-need-update",
+      title: "Installed targets need update",
+      message: `${setupNeedsUpdate.length} setup target(s) and ${appNeedsUpdate.length} AI app target(s) need the current aidevops files.`,
+      severity: "warning",
+      category: "setup",
+      source: "gui-status",
+      source_ref: "setup_targets and ai_apps",
+      status: "active",
+      actions: [surfaceAction("open-installation", "Open installation", "installation"), commandAction("run-update", "Run update", "aidevops update")],
+    }));
+  }
+
+  for (const provider of authErrors) {
+    notifications.push(notification({
+      id: `gui-provider-auth-${provider.provider}`,
+      title: `${provider.provider} auth attention`,
+      message: `${provider.auth_errors} ${provider.provider} account(s) report auth errors. Token values remain hidden from the GUI payload.`,
+      severity: "error",
+      category: "runtime",
+      source: "gui-status",
+      source_ref: input.oauthPool.path_ref,
+      status: "active",
+      actions: [surfaceAction("open-ai-providers", "Open AI providers", "aiProviders"), commandAction("check-oauth-pool", "Check provider pool", `aidevops oauth-pool check ${provider.provider}`)],
+    }));
+  }
+
+  for (const provider of rateLimited) {
+    notifications.push(notification({
+      id: `gui-provider-rate-limit-${provider.provider}`,
+      title: `${provider.provider} rate limit`,
+      message: `${provider.rate_limited} ${provider.provider} account(s) are cooling down. The pool should recover automatically when cooldowns expire.`,
+      severity: "warning",
+      category: "runtime",
+      source: "gui-status",
+      source_ref: input.oauthPool.path_ref,
+      status: "active",
+      actions: [surfaceAction("open-ai-providers", "Open AI providers", "aiProviders")],
+    }));
+  }
+
+  return notifications;
+}
+
+function notification(input: GuiNotificationSummary): GuiNotificationSummary {
+  return input;
+}
+
+function titleForToastLine(line: string, severity: GuiNotificationSeverity): string {
+  const rule = toastTitleRules.find((candidate) => candidate.matches(line));
+  return rule?.title ?? (severity === "info" ? "Runtime status" : "aidevops status");
+}
+
+function categoryForToastLine(line: string, severity: GuiNotificationSeverity): GuiNotificationCategory {
+  if (line.startsWith("[SECURITY ADVISORY]") || line.startsWith("Security:")) return "security";
+  if (line.startsWith("[OPENCODE MAINTENANCE]") || line.startsWith("Pulse stalled")) return "maintenance";
+  if (/update|version|running in/i.test(line)) return "release";
+  if (severity === "warning") return "setup";
+  return "runtime";
+}
+
+function actionsForToastLine(line: string, category: GuiNotificationCategory, severity: GuiNotificationSeverity): GuiNotificationAction[] {
+  if (category === "security") {
+    return [surfaceAction("open-security", "Open security", "security"), surfaceAction("open-vault", "Open Vault", "vault")];
+  }
+
+  if (line.startsWith("[OPENCODE MAINTENANCE]")) {
+    return [surfaceAction("open-local-setup", "Open local setup", "localSetup"), commandAction("run-maintenance", "Run maintenance", "opencode-db-maintenance-helper.sh run")];
+  }
+
+  if (line.startsWith("Pulse stalled")) {
+    return [surfaceAction("open-maintenance", "Open maintenance", "maintenance")];
+  }
+
+  if (severity === "warning") {
+    return [surfaceAction("open-installation", "Open installation", "installation"), commandAction("run-update", "Run update", "aidevops update")];
+  }
+
+  return [surfaceAction("open-overview", "Open overview", "overview")];
+}
+
+function surfaceAction(id: string, label: string, surfaceId: string): GuiNotificationAction {
+  return { id, label, kind: "surface", surface_id: surfaceId, enabled: true };
+}
+
+function commandAction(id: string, label: string, commandPreview: string): GuiNotificationAction {
+  return { id, label, kind: "command", command_preview: commandPreview, enabled: false };
+}
+
+function stableId(value: string): string {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = ((hash << 5) - hash + value.charCodeAt(index)) | 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+function dedupeNotifications(notifications: GuiNotificationSummary[]): GuiNotificationSummary[] {
+  const byId = new Map<string, GuiNotificationSummary>();
+  for (const item of notifications) {
+    byId.set(item.id, item);
+  }
+  return [...byId.values()];
+}

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

@@ -1,10 +1,10 @@
 /* jshint esversion: 11 */
 import { type ReactElement, type ReactNode, useEffect, useState } from "react";
-import { FiBell, FiChevronLeft, FiChevronRight, FiCommand, FiGlobe, FiHash, FiHelpCircle, FiLogOut, FiMessageSquare, FiSearch, FiSettings, FiShield, FiTerminal, FiUser } from "react-icons/fi";
-import type { GuiFileRootId, GuiStatusData } from "../../gui-shared/src";
+import { FiAlertTriangle, FiBell, FiCheckCircle, FiChevronLeft, FiChevronRight, FiCommand, FiGlobe, FiHash, FiHelpCircle, FiInfo, FiLogOut, FiMessageSquare, 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, text } from "./app-model";
+import { inventorySurfaceConfigs, surfaceIds, text } from "./app-model";
 import { CommandPalette, type CommandPaletteSelection, commandPaletteShortcutQuery } from "./CommandPalette";
 import { FileExplorerSurface } from "./FileExplorerSurface";
 import { AppsSurface, EditableInventorySurface, InstallationSurface } from "./InventorySurfaces";
@@ -42,7 +42,7 @@ export function Workspace({ activeItem, activeSectionLabel, activeSurface, canGo
       <div className="workspace-scroll">
         {shellMode === "sessions"
           ? <ConversationWorkspace conversationMode={conversationMode} selectedLocalRepoIndex={selectedLocalRepoIndex} selectedSessionId={selectedSessionId} status={status} />
-          : <SurfaceContent activeItem={activeItem} activeSurface={activeSurface} fileRoot={fileRoot} status={status} />}
+          : <SurfaceContent activeItem={activeItem} activeSurface={activeSurface} fileRoot={fileRoot} openSurface={setActiveSurface} status={status} />}
       </div>
     </section>
   );
@@ -70,6 +70,7 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
   const [profileOpen, setProfileOpen] = useState(false);
   const userInitials = status.machine.initials || "AI";
   const userName = status.machine.username || "Local user";
+  const activeNotifications = status.notifications.filter((notification) => notification.status === "active");
 
   useEffect(() => {
     const openCommandPalette = (event: KeyboardEvent) => {
@@ -134,9 +135,9 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
           </button>
           <button aria-expanded={notificationsOpen} aria-label="Open notifications" className="header-icon-button" onClick={() => { setNotificationsOpen((current) => !current); setProfileOpen(false); }} type="button">
             <FiBell aria-hidden="true" />
-            <span className="notification-dot" aria-hidden="true" />
+            {activeNotifications.length > 0 ? <span className="notification-dot" aria-hidden="true" /> : null}
           </button>
-          {notificationsOpen ? <NotificationsMenu openSurface={(surface) => openItem({ surface })} /> : null}
+          {notificationsOpen ? <NotificationsMenu notifications={status.notifications} openSurface={(surface) => openItem({ surface })} /> : null}
         </div>
         <button aria-pressed={assistantOpen} aria-label="Toggle AI Assistant" className={assistantOpen ? "header-icon-button active" : "header-icon-button"} onClick={() => setAssistantOpen((current) => !current)} title="AI sessions (_)" type="button">
           <FiTerminal aria-hidden="true" />
@@ -176,16 +177,35 @@ function isEditableShortcutTarget(target: EventTarget | null): boolean {
   return target.isContentEditable || ["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName);
 }
 
-function NotificationsMenu({ openSurface }: { openSurface: (surface: SurfaceId) => void }): ReactElement {
+function NotificationsMenu({ notifications, openSurface }: { notifications: GuiNotificationSummary[]; openSurface: (surface: SurfaceId) => void }): ReactElement {
+  const active = notifications.filter((notification) => notification.status === "active");
+  const preview = notifications.slice(0, 4);
+
   return (
     <div className="popover-menu notifications-menu" role="menu">
-      <strong>Notifications</strong>
-      <p>Local readiness updates, release activity, and account alerts will collect here.</p>
+      <div className="notifications-menu-heading">
+        <strong>Notifications</strong>
+        <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} />)}
       <button onClick={() => openSurface("notifications")} role="menuitem" type="button">Open notifications</button>
     </div>
   );
 }
 
+function NotificationPreview({ notification }: { notification: GuiNotificationSummary }): ReactElement {
+  return (
+    <article className={`notification-preview ${notification.severity}`}>
+      <span aria-hidden="true"><NotificationIcon notification={notification} /></span>
+      <div>
+        <strong>{notification.title}</strong>
+        <small>{notification.category} · {notification.status}</small>
+      </div>
+    </article>
+  );
+}
+
 function ConversationWorkspace({ conversationMode, selectedLocalRepoIndex, selectedSessionId, status }: {
   conversationMode: ConversationMode;
   selectedLocalRepoIndex: number;
@@ -268,10 +288,11 @@ function AssistantPanel({ activeSurface, userName }: { activeSurface: SurfaceId;
   );
 }
 
-function SurfaceContent({ activeItem, activeSurface, fileRoot, status }: {
+function SurfaceContent({ activeItem, activeSurface, fileRoot, openSurface, status }: {
   activeItem: SurfaceNavItem;
   activeSurface: SurfaceId;
   fileRoot: GuiFileRootId | undefined;
+  openSurface: (surface: SurfaceId) => void;
   status: GuiStatusData;
 }) {
   const inventoryConfig = inventorySurfaceConfigs[activeSurface];
@@ -280,7 +301,7 @@ function SurfaceContent({ activeItem, activeSurface, fileRoot, status }: {
     overview: <OverviewSurface status={status} />,
     help: <HelpSurface />,
     settings: <SettingsSurface status={status} />,
-    notifications: <NotificationsSurface />,
+    notifications: <NotificationsSurface openSurface={openSurface} status={status} />,
     admin: <AdminSurface />,
     vault: <VaultSurface status={status} />,
     aiSessions: <PlannedSurface label={text.aiSessions} detail={text.aiSessionsIntro} />,
@@ -391,22 +412,69 @@ function SettingsSurface({ status }: { status: GuiStatusData }): ReactElement {
   );
 }
 
-function NotificationsSurface(): ReactElement {
+function NotificationsSurface({ openSurface, status }: { openSurface: (surface: SurfaceId) => void; status: GuiStatusData }): ReactElement {
+  const active = status.notifications.filter((notification) => notification.status === "active");
+  const resolved = status.notifications.filter((notification) => notification.status === "resolved");
+
   return (
-    <section className="settings-surface">
-      <div className="planned-card">
+    <section className="settings-surface notifications-surface">
+      <div className="planned-card notifications-hero">
         <h2>Notifications</h2>
-        <p>Release updates, workflow failures, security notices, and hosted account messages will appear here.</p>
+        <p>OpenCode startup toasts and the GUI notification centre read the same aidevops status cache and local readiness data, so resolved items disappear or downgrade everywhere after the underlying status changes.</p>
+        <section aria-label="Notification summary" className="notification-summary-strip">
+          <span><strong>{active.length}</strong> active</span>
+          <span><strong>{resolved.length}</strong> resolved</span>
+          <span><strong>{status.notifications.length}</strong> total</span>
+        </section>
       </div>
-      <ul className="notification-list">
-        <li><strong>Readiness</strong><span>Local status and restart notices.</span></li>
-        <li><strong>Workflow</strong><span>PR, release, and routine activity.</span></li>
-        <li><strong>Security</strong><span>Vault and credentials posture reminders.</span></li>
+      <ul aria-label="aidevops notifications" className="github-notification-list">
+        {status.notifications.length === 0 ? <p className="empty-state">No aidevops notifications are currently reported.</p> : null}
+        {status.notifications.map((notification) => <NotificationCard key={notification.id} notification={notification} openSurface={openSurface} />)}
       </ul>
     </section>
   );
 }
 
+function NotificationCard({ notification, openSurface }: { notification: GuiNotificationSummary; openSurface: (surface: SurfaceId) => void }): ReactElement {
+  return (
+    <li className={`github-notification-card ${notification.severity} ${notification.status}`}>
+      <div className="notification-state-icon" aria-hidden="true"><NotificationIcon notification={notification} /></div>
+      <div className="notification-card-body">
+        <header>
+          <div>
+            <p className="eyebrow">{notification.category} · {notification.source}</p>
+            <h3>{notification.title}</h3>
+          </div>
+          <span className="notification-status-pill">{notification.status}</span>
+        </header>
+        <p>{notification.message}</p>
+        <small>{notification.source_ref}</small>
+        <div className="notification-actions">
+          {notification.actions.map((action) => {
+            if (action.kind === "surface" && isSurfaceId(action.surface_id)) {
+              const surfaceId = action.surface_id;
+              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>;
+          })}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+function NotificationIcon({ notification }: { notification: GuiNotificationSummary }): ReactElement {
+  if (notification.severity === "error") return <FiAlertTriangle />;
+  if (notification.severity === "warning") return <FiTool />;
+  if (notification.severity === "success") return <FiCheckCircle />;
+  return <FiInfo />;
+}
+
+function isSurfaceId(value: string | undefined): value is SurfaceId {
+  return surfaceIds.includes(value as SurfaceId);
+}
+
 function AdminSurface(): ReactElement {
   return (
     <section className="settings-surface">