@flamingo-stack/openframe-frontend-core 0.0.842 → 0.0.844

package/dist/{knowledge-I53Z6DV7.cjs → knowledge-ZNUNREKL.cjs}

@@ -8,7 +8,7 @@ var _chunkLHV2R6QUcjs = require('./chunk-LHV2R6QU.cjs');
 var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
-var _chunkGQJXOX5Scjs = require('./chunk-GQJXOX5S.cjs');
+var _chunkEGOCAIZJcjs = require('./chunk-EGOCAIZJ.cjs');
 require('./chunk-WCK5T3UD.cjs');
 require('./chunk-744JXTDP.cjs');
 require('./chunk-NMLNZCK2.cjs');
@@ -1908,7 +1908,7 @@ function KnowledgeScreen(_props) {
   const cast = _chunkLHV2R6QUcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkGQJXOX5Scjs.KnowledgeBaseArticleView,
+    _chunkEGOCAIZJcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
       content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWPMJUYW3cjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })

package/dist/{logs-SFLAZIQG.cjs → logs-DHZFCX2I.cjs}

@@ -15,7 +15,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkGQJXOX5Scjs = require('./chunk-GQJXOX5S.cjs');
+var _chunkEGOCAIZJcjs = require('./chunk-EGOCAIZJ.cjs');
 require('./chunk-WCK5T3UD.cjs');
 require('./chunk-744JXTDP.cjs');
 require('./chunk-NMLNZCK2.cjs');
@@ -1890,7 +1890,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkFDZOE5TLcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkGQJXOX5Scjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkEGOCAIZJcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1962,13 +1962,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGQJXOX5Scjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEGOCAIZJcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkGQJXOX5Scjs.LogsPageView,
+      _chunkEGOCAIZJcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1976,7 +1976,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkGQJXOX5Scjs.LogsTableView,
+          _chunkEGOCAIZJcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1991,7 +1991,7 @@ function LogsScreen({ compact = false }) {
       }
     ) }),
     !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOT6P57ZScjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkGQJXOX5Scjs.LogDrawer,
+      _chunkEGOCAIZJcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -2003,12 +2003,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGQJXOX5Scjs.ToolBadge, { toolType: _chunk4ASUUB3Acjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEGOCAIZJcjs.ToolBadge, { toolType: _chunk4ASUUB3Acjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkGQJXOX5Scjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkEGOCAIZJcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkGQJXOX5Scjs.DeviceCard,
+          _chunkEGOCAIZJcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-EIAGQO6T.cjs → policies-2FKRLSOC.cjs}

@@ -10,7 +10,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkGQJXOX5Scjs = require('./chunk-GQJXOX5S.cjs');
+var _chunkEGOCAIZJcjs = require('./chunk-EGOCAIZJ.cjs');
 require('./chunk-WCK5T3UD.cjs');
 require('./chunk-744JXTDP.cjs');
 require('./chunk-NMLNZCK2.cjs');
@@ -1894,14 +1894,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkGQJXOX5Scjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkEGOCAIZJcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkGQJXOX5Scjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkEGOCAIZJcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1915,16 +1915,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkGQJXOX5Scjs.PoliciesTable,
+    _chunkEGOCAIZJcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGQJXOX5Scjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEGOCAIZJcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGQJXOX5Scjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEGOCAIZJcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{scripts-SNJ4UVRF.cjs → scripts-J3J7XCT4.cjs}

@@ -13,7 +13,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkGQJXOX5Scjs = require('./chunk-GQJXOX5S.cjs');
+var _chunkEGOCAIZJcjs = require('./chunk-EGOCAIZJ.cjs');
 
 
 var _chunkWCK5T3UDcjs = require('./chunk-WCK5T3UD.cjs');
@@ -1998,8 +1998,8 @@ function buildScriptsFixture(cast) {
 var _jsxruntime = require('react/jsx-runtime');
 var WIDE_HIDDEN_COLUMNS = ["result", "open"];
 var COMPACT_COLUMNS = [
-  { ..._chunkGQJXOX5Scjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
-  _chunkGQJXOX5Scjs.EXECUTION_COLUMNS.status
+  { ..._chunkEGOCAIZJcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
+  _chunkEGOCAIZJcjs.EXECUTION_COLUMNS.status
 ];
 var COMPACT_ROWS = 4;
 var TOKEN_CLASS = {
@@ -2058,7 +2058,7 @@ function ScriptCodePicture({ script }) {
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWCK5T3UDcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkGQJXOX5Scjs.ScriptShellBadge,
+              _chunkEGOCAIZJcjs.ScriptShellBadge,
               {
                 value: script.shellType,
                 className: "shrink-0 text-ods-text-secondary text-h6",
@@ -2082,7 +2082,7 @@ function ScriptsScreen({ compact = false }) {
     return (
       // Four runs of the card's row height fill the frame; the padding is what is left round them.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full overflow-hidden bg-ods-bg p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGQJXOX5Scjs.ScriptExecutionsTable,
+        _chunkEGOCAIZJcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions.slice(0, COMPACT_ROWS),
           columns: COMPACT_COLUMNS,
@@ -2092,13 +2092,13 @@ function ScriptsScreen({ compact = false }) {
       ) })
     );
   }
-  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGQJXOX5Scjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
+  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEGOCAIZJcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
   return (
     // The frame's tighter padding and no header row: the output opened under a run needs the height.
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full gap-[var(--spacing-system-m)] overflow-hidden bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-[39%] shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScriptCodePicture, { script: fixture.script }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGQJXOX5Scjs.ScriptExecutionsTable,
+        _chunkEGOCAIZJcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions,
           hideColumns: WIDE_HIDDEN_COLUMNS,

package/dist/{software-update-AZFRUC5N.cjs → software-update-AIQHLJ5O.cjs}

@@ -2,7 +2,7 @@
 "use client";
 
 
-var _chunkSMZWXY4Xcjs = require('./chunk-SMZWXY4X.cjs');
+var _chunkQKZQ5Q6Ecjs = require('./chunk-QKZQ5Q6E.cjs');
 
 
 var _chunkLHV2R6QUcjs = require('./chunk-LHV2R6QU.cjs');
@@ -15,7 +15,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkGQJXOX5Scjs = require('./chunk-GQJXOX5S.cjs');
+var _chunkEGOCAIZJcjs = require('./chunk-EGOCAIZJ.cjs');
 
 
 var _chunkWCK5T3UDcjs = require('./chunk-WCK5T3UD.cjs');
@@ -1905,7 +1905,7 @@ var initialValues = {
   timeReference: "SERVER"
 };
 function buildSoftwareUpdateFixture(cast) {
-  const devices = _chunkSMZWXY4Xcjs.buildDevicesFixture.call(void 0, cast).devices.filter((device) => device.osType === "WINDOWS");
+  const devices = _chunkQKZQ5Q6Ecjs.buildDevicesFixture.call(void 0, cast).devices.filter((device) => device.osType === "WINDOWS");
   return {
     action: "UPDATE",
     package: chrome,
@@ -1925,12 +1925,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkWCK5T3UDcjs.Autocomplete,
     {
-      label: _chunkGQJXOX5Scjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkEGOCAIZJcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkGQJXOX5Scjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkEGOCAIZJcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1944,7 +1944,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkGQJXOX5Scjs.SoftwareActionForm,
+    _chunkEGOCAIZJcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1956,7 +1956,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGQJXOX5Scjs.DeviceSelector,
+        _chunkEGOCAIZJcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.842",
+  "version": "0.0.844",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/features/devices/device-unread-indicator.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { UnreadNotificationsIndicator } from '../../navigation/unread-notifications-indicator';
+import { useDevicesViewConfig } from './devices-view-config';
+import type { DeviceRow } from './types';
+
+/** The viewer's unread notifications about a device, opening them where the host lists them. Nothing at 0. */
+export function DeviceUnreadIndicator({ device }: { device: DeviceRow }) {
+  const { getDeviceNotificationsHref } = useDevicesViewConfig();
+  const count = device.unreadNotificationCount ?? 0;
+  return (
+    <UnreadNotificationsIndicator count={count} href={count > 0 ? getDeviceNotificationsHref?.(device) : undefined} />
+  );
+}

package/src/components/features/devices/devices-grid.tsx

@@ -7,6 +7,7 @@ import { DeviceCard } from '../../ui';
 import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
 import { getDeviceName } from './device-name';
 import { getDeviceOperatingSystem, getDeviceStatusConfig } from './device-status';
+import { DeviceUnreadIndicator } from './device-unread-indicator';
 import { useDevicesViewConfig } from './devices-view-config';
 import type { DeviceRow } from './types';
 
@@ -102,7 +103,14 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
                       : undefined
                   }
                   onDeviceClick={() => handleDeviceClick(device)}
-                  actions={GRID_CARD_ACTIONS}
+                  actions={
+                    device.unreadNotificationCount
+                      ? {
+                          ...GRID_CARD_ACTIONS,
+                          detailsButton: { component: <DeviceUnreadIndicator device={device} /> },
+                        }
+                      : GRID_CARD_ACTIONS
+                  }
                   className="h-full"
                   // One card of a read list: how many there are is the record's (the height gate counts them).
                   data-loading-item

package/src/components/features/devices/devices-table-columns.tsx

@@ -27,6 +27,7 @@ import { getDeviceName } from './device-name';
 import { getDeviceStatusConfig } from './device-status';
 import { DEFAULT_VISIBLE_STATUSES } from './device-statuses';
 import { DeviceTypeTile } from './device-type-tile';
+import { DeviceUnreadIndicator } from './device-unread-indicator';
 import { useDeviceImageUrl, useDevicesViewConfig } from './devices-view-config';
 import type { DeviceFilters, DeviceRow } from './types';
 
@@ -341,6 +342,8 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
             <div className="min-w-0 flex-1">
               <TruncateText>{getDeviceName(device)}</TruncateText>
             </div>
+            {/* In the name's cell, not the open column: that one is dropped on a narrow page. */}
+            <DeviceUnreadIndicator device={device} />
           </div>
         );
       },

package/src/components/features/devices/devices-view-config.tsx

@@ -5,14 +5,16 @@ import type { DeviceRow } from './types';
 
 /**
  * What the device views cannot know by themselves, because it belongs to the
- * host: where a device's page lives, where images are served from, and whether
- * the page runs inside the mobile shell. The product provides it once, above
- * every page; without a provider the views render as a picture (no links,
- * image URLs used as given).
+ * host: where a device's page and its notifications live, where images are
+ * served from, and whether the page runs inside the mobile shell. The product
+ * provides it once, above every page; without a provider the views render as a
+ * picture (no links, image URLs used as given).
  */
 export interface DevicesViewConfig {
   /** The device's page. Absent: rows and cards are not links. */
   getDeviceHref?: (device: DeviceRow) => string | undefined;
+  /** The viewer's notifications about the device. Absent: the unread indicator is a counter, not a button. */
+  getDeviceNotificationsHref?: (device: DeviceRow) => string | undefined;
   /** A customer image's full URL from its stored path and content hash. */
   resolveImageUrl?: (imageUrl: string | null | undefined, hash?: string | null) => string | undefined;
   /** The page runs inside the mobile shell: options nobody can pick there are dropped. */

package/src/components/features/devices/index.ts

@@ -38,6 +38,7 @@ export {
 export { DeviceTagsFilterButton } from './device-tags-filter-button';
 export { renderDeviceTypeIcon } from './device-type-icon';
 export { DeviceTypeTile } from './device-type-tile';
+export { DeviceUnreadIndicator } from './device-unread-indicator';
 export { DevicesFilterToolbar, type DevicesFilterToolbarProps } from './devices-filter-toolbar';
 export { DevicesGrid, type DevicesGridProps } from './devices-grid';
 export { DevicesGridFilters, type DevicesGridFiltersProps } from './devices-grid-filters';

package/src/components/features/devices/types.ts

@@ -34,6 +34,8 @@ export interface DeviceRow extends DeviceNameSource {
   organizationImageUrl?: string | null;
   organizationImageHash?: string | null;
   tags?: DeviceTag[];
+  /** The viewer's unread notifications about this device. Absent or 0: no indicator. */
+  unreadNotificationCount?: number;
 }
 
 export interface DeviceFilterValue {

package/src/components/features/software/update-settings-fields.tsx

@@ -244,22 +244,25 @@ export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdate
         </div>
       </div>
 
-      {/* Core Alert on the card surface, as a note: it is there from the start, nothing to announce. The icon sits in
-          a span so Alert's `[&>svg]` positioning does not apply. */}
-      <Alert
-        role="note"
-        className="flex items-center gap-[var(--spacing-system-m)] rounded-[6px] border-ods-border bg-ods-card p-[var(--spacing-system-m)]"
-      >
-        <span className="shrink-0 text-ods-text-secondary">
-          <InfoCircleIcon size={24} color="currentColor" />
-        </span>
-        <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-          <p className="text-ods-text-primary text-h3">Apps installed by hand get reinstalled</p>
-          <p className="text-ods-text-secondary text-h6">
-            On the first update, OpenFrame reinstalls them with Winget or Brew so it can keep them updated.
-          </p>
-        </div>
-      </Alert>
+      {/* Core Alert on the card surface, as a note: it comes with "Keep it auto-updated" and goes with it, since the
+          reinstall is what lets OpenFrame keep a hand-installed app updated, and a one-off update promises no more. The
+          icon sits in a span so Alert's `[&>svg]` positioning does not apply. */}
+      {value.autoUpdate && (
+        <Alert
+          role="note"
+          className="flex items-center gap-[var(--spacing-system-m)] rounded-[6px] border-ods-border bg-ods-card p-[var(--spacing-system-m)]"
+        >
+          <span className="shrink-0 text-ods-text-secondary">
+            <InfoCircleIcon size={24} color="currentColor" />
+          </span>
+          <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
+            <p className="text-ods-text-primary text-h3">Apps installed by hand get reinstalled</p>
+            <p className="text-ods-text-secondary text-h6">
+              On the first update, OpenFrame reinstalls them with Winget or Brew so it can keep them updated.
+            </p>
+          </div>
+        </Alert>
+      )}
     </section>
   );
 }

package/src/components/navigation/count-pill.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+
+export interface CountPillProps {
+  count: number;
+  className?: string;
+}
+
+/**
+ * The navigation's unread count: a 24px accent pill, widening for "99+". The grouped sidebar ends its rows with it,
+ * and a list row that counts the same notifications draws the same pill, so the two read alike.
+ */
+export function CountPill({ count, className }: CountPillProps) {
+  return (
+    <span
+      className={cn(
+        'flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xxs)]',
+        className,
+      )}
+    >
+      <span className="text-ods-text-on-accent text-h5">{count > 99 ? '99+' : count}</span>
+    </span>
+  );
+}

package/src/components/navigation/index.ts

@@ -90,6 +90,10 @@ export { HeaderButton } from './header-button';
 export type { HeaderButtonProps } from './header-button';
 export { UnreadDot, UnreadCountBadge } from './unread-dot';
 export type { UnreadDotProps, UnreadCountBadgeProps } from './unread-dot';
+export { CountPill } from './count-pill';
+export type { CountPillProps } from './count-pill';
+export { UnreadNotificationsIndicator, unreadNotificationsLabel } from './unread-notifications-indicator';
+export type { UnreadNotificationsIndicatorProps } from './unread-notifications-indicator';
 export { NavigationItemBadge } from './navigation-item-badge';
 export type { NavigationItemBadgeProps } from './navigation-item-badge';
 export { TicketAlertsButton } from './ticket-alerts-button';

package/src/components/navigation/navigation-sidebar-grouped.tsx

@@ -7,6 +7,7 @@ import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { FloatingTooltip } from '../ui/floating-tooltip';
+import { CountPill } from './count-pill';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
@@ -133,20 +134,6 @@ interface RowStateProps {
   disabled: boolean;
 }
 
-/** The count pill: 24px, widening for "99+". */
-function CountPill({ count, className }: { count: number; className?: string }) {
-  return (
-    <span
-      className={cn(
-        'flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xxs)]',
-        className,
-      )}
-    >
-      <span className="text-ods-text-on-accent text-h5">{count > 99 ? '99+' : count}</span>
-    </span>
-  );
-}
-
 /** The row's end, flush right where every row's count sits. */
 function RowEnd({ count }: { count: number }) {
   return count > 0 ? <CountPill count={count} className="ml-auto" /> : null;

package/src/components/navigation/unread-notifications-indicator.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import type { MouseEvent } from 'react';
+import { useChatRuntime } from '../../contexts/chat-runtime-context';
+import { cn } from '../../utils/cn';
+import { isModifierClick } from '../chat/utils/chat-nav-resolution';
+import { executeNavigationImperative, executeNewTabNavigation } from '../chat/utils/execute-navigation';
+import { CountPill } from './count-pill';
+
+/** What the indicator says to a screen reader: the count, in words. */
+export function unreadNotificationsLabel(count: number): string {
+  return `${count} unread ${count === 1 ? 'notification' : 'notifications'}`;
+}
+
+export interface UnreadNotificationsIndicatorProps {
+  /** The viewer's unread notifications about one item. Nothing is drawn at 0. */
+  count: number;
+  /** Where those notifications are listed. Absent: the count alone, not a button. */
+  href?: string;
+  className?: string;
+}
+
+/**
+ * The viewer's unread notifications about one item of a list (a device, an incident), drawn with the sidebar's own
+ * count pill so a row and its section's badge read alike.
+ *
+ * A button, not a link: the row or card it sits in is usually a link itself, and a link cannot hold another
+ * (`data-no-row-click` keeps a table row from following its own). It goes through the lib's navigation executor,
+ * so the host decides how `href` opens, and a modifier click asks for a new tab as it would on a link.
+ */
+export function UnreadNotificationsIndicator({ count, href, className }: UnreadNotificationsIndicatorProps) {
+  const runtime = useChatRuntime();
+  if (count <= 0) return null;
+
+  const label = unreadNotificationsLabel(count);
+
+  if (!href) {
+    return (
+      <span data-loading-optional role="img" aria-label={label} className={cn('inline-flex shrink-0', className)}>
+        <CountPill count={count} />
+      </span>
+    );
+  }
+
+  const open = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isModifierClick(event)) executeNewTabNavigation({ runtime, href });
+    else executeNavigationImperative({ runtime, href });
+  };
+
+  return (
+    <button
+      type="button"
+      data-loading-optional
+      data-no-row-click
+      onClick={open}
+      aria-label={label}
+      title={label}
+      className={cn(
+        'pointer-events-auto inline-flex shrink-0 rounded-md transition-opacity hover:opacity-80',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
+        className,
+      )}
+    >
+      <CountPill count={count} />
+    </button>
+  );
+}

package/src/components/product-demo/fixtures/devices.ts

@@ -4,6 +4,12 @@ import { type DEMO_DEVICES, DEMO_FLEET, DEMO_FLEET_SEARCH_OS, demoMinutesAgo } f
 
 type DemoDevice = (typeof DEMO_DEVICES)[keyof typeof DEMO_DEVICES];
 
+/** The viewer's unread notifications per device: the offline reception desktop's recordings failed overnight. */
+const DEMO_UNREAD_NOTIFICATIONS: Partial<Record<DemoDevice['id'], number>> = {
+  'device-reception': 2,
+  'device-leo': 1,
+};
+
 function device(
   cast: DemoCast,
   demo: DemoDevice,
@@ -24,6 +30,7 @@ function device(
     organizationId: organization.id,
     organization: organization.name,
     organizationImageUrl: organization.logoUrl,
+    unreadNotificationCount: DEMO_UNREAD_NOTIFICATIONS[demo.id],
   };
 }