create-astram-app 0.13.1 → 0.14.1

package/template/frontend/src/platform/agentStreamTransport.js

@@ -0,0 +1,168 @@
+/**
+ * The WEB agent stream transport — the platform half of @astram/frontend-core's injected
+ * `AgentStreamTransport` (G-036 M1). `fetch` with a streamed body (never `EventSource`, which
+ * cannot send a bearer token or a POST body) to the same `/api` base as `httpClient.js`,
+ * decoded with `TextDecoder` (stream mode, so a UTF-8 sequence split across reads is kept
+ * whole). The service in frontend-core parses the SSE frames, folds them and runs the stall
+ * watchdog; this file only moves bytes.
+ *
+ * Auth: `Authorization: Bearer <getToken()>`. A `401` BEFORE THE FIRST BYTE (the response status,
+ * so no stream byte has been read) runs `refreshAfterUnauthorized(sentToken)` once — the
+ * refreshing http client's shared single-flight refresh, so the stream never spends a refresh
+ * token in parallel with a JSON call — then retries once with the rotated token. `expired` /
+ * `superseded` ⇒ status 401, `unavailable` ⇒ status 0, no retry. Once a `200` has arrived there is
+ * never a refresh: the stream is bound to the session, not the access token (SPEC §10), so token
+ * expiry mid-stream does not cut it.
+ *
+ * `open()` never throws: a network failure or abort is `{ status: 0 }`. A refusal (any non-200)
+ * carries its parsed `{ code, retryable }` body, else `error: null`.
+ */
+
+const BASE = '/api'; // the same base as httpClient.js (Vite proxies /api to the server)
+
+function refusalBody(data) {
+  if (data === null || typeof data !== 'object' || Array.isArray(data)) return null;
+  return typeof data.code === 'string' && data.code !== '' && typeof data.retryable === 'boolean'
+    ? { code: data.code, retryable: data.retryable }
+    : null;
+}
+
+async function readJson(res) {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
+/** Release a response body we will not read (best-effort). */
+function discard(res) {
+  try {
+    const p = res.body && typeof res.body.cancel === 'function' ? res.body.cancel() : null;
+    if (p && typeof p.catch === 'function') p.catch(() => {});
+  } catch {
+    /* nothing to release */
+  }
+}
+
+const noop = () => {};
+
+/**
+ * @param {{ getToken: () => (string | null),
+ *           refreshAfterUnauthorized?: (sentToken: string) => Promise<
+ *             { kind: 'rotated', accessToken: string } | { kind: 'expired' | 'superseded' | 'unavailable' }>,
+ *           fetchImpl?: typeof fetch }} deps
+ *   `getToken` — the current access token (AuthContext's token ref).
+ *   `refreshAfterUnauthorized` — the refreshing http client's method of the same name.
+ *   `fetchImpl` — for tests; defaults to the global `fetch`.
+ * @returns {import('@astram/frontend-core').AgentStreamTransport}
+ */
+export function createAgentStreamTransport({ getToken, refreshAfterUnauthorized, fetchImpl } = {}) {
+  const doFetch = (...args) => (fetchImpl ?? globalThis.fetch)(...args);
+
+  return {
+    async open({ method, path, body, lastEventId, signal }) {
+      // Our own controller, so close() can stop the read; the caller's signal feeds it.
+      const ctl = new AbortController();
+      const onAbort = () => ctl.abort();
+      if (signal) {
+        if (signal.aborted) ctl.abort();
+        else signal.addEventListener('abort', onAbort);
+      }
+      const detach = () => {
+        if (signal) signal.removeEventListener('abort', onAbort);
+      };
+      const failed = (status, error = null) => {
+        detach();
+        return { status, error, chunks: null, close: noop };
+      };
+
+      const send = (token) => {
+        const headers = { accept: 'text/event-stream' };
+        if (token) headers.authorization = `Bearer ${token}`;
+        if (method === 'POST') headers['content-type'] = 'application/json';
+        if (typeof lastEventId === 'number') headers['last-event-id'] = String(lastEventId);
+        return doFetch(`${BASE}${path}`, {
+          method,
+          headers,
+          body: method === 'POST' ? JSON.stringify(body ?? {}) : undefined,
+          cache: 'no-store',
+          signal: ctl.signal,
+        });
+      };
+
+      let res;
+      const sent = getToken ? getToken() : null;
+      try {
+        res = await send(sent);
+      } catch {
+        return failed(0);
+      }
+
+      // 401 before the first byte: one shared refresh, then one retry.
+      if (res.status === 401 && sent && typeof refreshAfterUnauthorized === 'function') {
+        discard(res);
+        let outcome;
+        try {
+          outcome = await refreshAfterUnauthorized(sent);
+        } catch {
+          outcome = { kind: 'unavailable' };
+        }
+        if (outcome && outcome.kind === 'rotated' && outcome.accessToken) {
+          try {
+            res = await send(outcome.accessToken);
+          } catch {
+            return failed(0);
+          }
+        } else if (outcome && (outcome.kind === 'expired' || outcome.kind === 'superseded')) {
+          return failed(401);
+        } else {
+          return failed(0);
+        }
+      }
+
+      if (res.status !== 200) {
+        const error = refusalBody(await readJson(res));
+        return failed(res.status, error);
+      }
+      if (!res.body || typeof res.body.getReader !== 'function') {
+        return failed(0);
+      }
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let closed = false;
+      const close = () => {
+        if (closed) return;
+        closed = true;
+        detach();
+        try {
+          const p = reader.cancel();
+          if (p && typeof p.catch === 'function') p.catch(() => {});
+        } catch {
+          /* already released */
+        }
+        ctl.abort();
+      };
+
+      async function* chunks() {
+        try {
+          for (;;) {
+            const { done, value } = await reader.read();
+            if (done) {
+              const tail = decoder.decode();
+              if (tail) yield tail;
+              return;
+            }
+            const text = decoder.decode(value, { stream: true });
+            if (text) yield text;
+          }
+        } finally {
+          close();
+        }
+      }
+
+      return { status: 200, error: null, chunks: chunks(), close };
+    },
+  };
+}

package/template/frontend/src/platform/agentStreamTransport.test.mjs

@@ -0,0 +1,273 @@
+// agentStreamTransport.test.mjs — the web agent stream transport (G-036 M1, SPEC
+// agent-read-capabilities §5 frontend-core, §14 item 7): fetch with a streamed body, bearer token,
+// and a refresh ONLY before the first byte (one shared refresh, one retry); never after a 200.
+//
+//   node --test src/platform/agentStreamTransport.test.mjs
+//
+// `fetch` is injected (`fetchImpl`), so this runs under plain Node (>= 20: Response,
+// ReadableStream, TextEncoder/TextDecoder are globals).
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { createAgentStreamTransport } from './agentStreamTransport.js';
+
+const enc = new TextEncoder();
+
+/** A 200 SSE response whose body yields `parts` (strings or byte arrays), then optionally fails. */
+function sseResponse(parts, { failAfter = false } = {}) {
+  let i = 0;
+  const body = new ReadableStream({
+    pull(controller) {
+      if (i < parts.length) {
+        const p = parts[i++];
+        controller.enqueue(typeof p === 'string' ? enc.encode(p) : p);
+      } else if (failAfter) {
+        controller.error(new Error('connection reset'));
+      } else {
+        controller.close();
+      }
+    },
+  });
+  return new Response(body, { status: 200, headers: { 'content-type': 'text/event-stream' } });
+}
+
+const json = (status, data) =>
+  new Response(JSON.stringify(data), { status, headers: { 'content-type': 'application/json' } });
+
+/** fetch stub: answers in order, records each call. */
+function fetchSeq(...answers) {
+  const calls = [];
+  const fetchImpl = async (url, init) => {
+    calls.push({ url, init });
+    const a = answers.shift();
+    if (a instanceof Error) throw a;
+    return typeof a === 'function' ? a() : a;
+  };
+  return { fetchImpl, calls };
+}
+
+async function readAll(chunks) {
+  let text = '';
+  for await (const c of chunks) text += c;
+  return text;
+}
+
+const signal = () => new AbortController().signal;
+const FRAME = 'id: 1\nevent: step\ndata: {}\n\n';
+
+describe('createAgentStreamTransport', () => {
+  test('POST to /api with bearer, JSON body and SSE accept; 200 streams decoded text', async () => {
+    const { fetchImpl, calls } = fetchSeq(sseResponse([': hb\n\n', FRAME]));
+    const t = createAgentStreamTransport({ getToken: () => 'tok-1', fetchImpl });
+    const res = await t.open({
+      method: 'POST',
+      path: '/agent/tasks',
+      body: { message: 'Hi' },
+      signal: signal(),
+    });
+    assert.equal(res.status, 200);
+    assert.equal(res.error, null);
+    assert.equal(await readAll(res.chunks), `: hb\n\n${FRAME}`);
+    assert.equal(calls.length, 1);
+    assert.equal(calls[0].url, '/api/agent/tasks');
+    assert.equal(calls[0].init.method, 'POST');
+    assert.equal(calls[0].init.headers.authorization, 'Bearer tok-1');
+    assert.equal(calls[0].init.headers.accept, 'text/event-stream');
+    assert.equal(calls[0].init.headers['content-type'], 'application/json');
+    assert.equal(calls[0].init.body, '{"message":"Hi"}');
+  });
+
+  test('GET replay sends Last-Event-ID and no body', async () => {
+    const { fetchImpl, calls } = fetchSeq(sseResponse([]));
+    const t = createAgentStreamTransport({ getToken: () => 'tok-1', fetchImpl });
+    const res = await t.open({
+      method: 'GET',
+      path: '/agent/tasks/x/events',
+      body: null,
+      lastEventId: 7,
+      signal: signal(),
+    });
+    assert.equal(res.status, 200);
+    assert.equal(calls[0].init.headers['last-event-id'], '7');
+    assert.equal(calls[0].init.body, undefined);
+    assert.equal(calls[0].init.headers['content-type'], undefined);
+  });
+
+  test('a UTF-8 sequence split across reads is decoded whole', async () => {
+    const bytes = enc.encode('data: "— 𝔸"\n\n');
+    const { fetchImpl } = fetchSeq(
+      sseResponse([bytes.subarray(0, 8), bytes.subarray(8, 10), bytes.subarray(10)]),
+    );
+    const res = await createAgentStreamTransport({ getToken: () => 't', fetchImpl }).open({
+      method: 'GET',
+      path: '/p',
+      body: null,
+      signal: signal(),
+    });
+    assert.equal(await readAll(res.chunks), 'data: "— 𝔸"\n\n');
+  });
+
+  test('401 before the first byte: one refresh, one retry with the rotated token', async () => {
+    const { fetchImpl, calls } = fetchSeq(
+      json(401, { message: 'Unauthorized' }),
+      sseResponse([FRAME]),
+    );
+    const refreshes = [];
+    const t = createAgentStreamTransport({
+      getToken: () => 'old',
+      refreshAfterUnauthorized: async (sent) => {
+        refreshes.push(sent);
+        return { kind: 'rotated', accessToken: 'new' };
+      },
+      fetchImpl,
+    });
+    const res = await t.open({
+      method: 'POST',
+      path: '/agent/tasks',
+      body: { message: 'Hi' },
+      signal: signal(),
+    });
+    assert.deepEqual(refreshes, ['old']);
+    assert.equal(calls.length, 2);
+    assert.equal(calls[1].init.headers.authorization, 'Bearer new');
+    assert.equal(calls[1].init.body, '{"message":"Hi"}');
+    assert.equal(res.status, 200);
+    assert.equal(await readAll(res.chunks), FRAME);
+  });
+
+  test('a second 401 after the retry is returned: no second refresh', async () => {
+    const { fetchImpl, calls } = fetchSeq(json(401, null), json(401, null));
+    let refreshes = 0;
+    const t = createAgentStreamTransport({
+      getToken: () => 'old',
+      refreshAfterUnauthorized: async () => {
+        refreshes += 1;
+        return { kind: 'rotated', accessToken: 'new' };
+      },
+      fetchImpl,
+    });
+    const res = await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() });
+    assert.equal(res.status, 401);
+    assert.equal(res.chunks, null);
+    assert.equal(refreshes, 1);
+    assert.equal(calls.length, 2);
+  });
+
+  test('expired / superseded ⇒ 401, unavailable ⇒ 0, a throwing refresh ⇒ 0; never a retry', async () => {
+    for (const [outcome, status] of [
+      [{ kind: 'expired' }, 401],
+      [{ kind: 'superseded' }, 401],
+      [{ kind: 'unavailable' }, 0],
+      [new Error('boom'), 0],
+    ]) {
+      const { fetchImpl, calls } = fetchSeq(json(401, null));
+      const t = createAgentStreamTransport({
+        getToken: () => 'old',
+        refreshAfterUnauthorized: async () => {
+          if (outcome instanceof Error) throw outcome;
+          return outcome;
+        },
+        fetchImpl,
+      });
+      const res = await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() });
+      assert.equal(res.status, status);
+      assert.equal(res.chunks, null);
+      assert.equal(calls.length, 1);
+    }
+  });
+
+  test('after a 200 there is never a refresh: a failing stream or a token change mid-stream', async () => {
+    const { fetchImpl, calls } = fetchSeq(sseResponse([FRAME], { failAfter: true }));
+    let token = 'tok-1';
+    let refreshes = 0;
+    const t = createAgentStreamTransport({
+      getToken: () => token,
+      refreshAfterUnauthorized: async () => {
+        refreshes += 1;
+        return { kind: 'rotated', accessToken: 'x' };
+      },
+      fetchImpl,
+    });
+    const res = await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() });
+    assert.equal(res.status, 200);
+    const it = res.chunks[Symbol.asyncIterator]();
+    assert.equal((await it.next()).value, FRAME);
+    token = 'tok-2'; // another tab refreshed: the open stream is unaffected
+    await assert.rejects(it.next());
+    assert.equal(refreshes, 0);
+    assert.equal(calls.length, 1);
+  });
+
+  test('no token ⇒ no Authorization header and no refresh on 401', async () => {
+    const { fetchImpl, calls } = fetchSeq(json(401, null));
+    let refreshes = 0;
+    const t = createAgentStreamTransport({
+      getToken: () => null,
+      refreshAfterUnauthorized: async () => {
+        refreshes += 1;
+        return { kind: 'rotated', accessToken: 'x' };
+      },
+      fetchImpl,
+    });
+    const res = await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() });
+    assert.equal(res.status, 401);
+    assert.equal(calls[0].init.headers.authorization, undefined);
+    assert.equal(refreshes, 0);
+  });
+
+  test('a refusal carries its parsed { code, retryable } body; other bodies ⇒ null', async () => {
+    const { fetchImpl } = fetchSeq(
+      json(409, { code: 'task_busy', retryable: true, extra: 'ignored' }),
+      json(503, { message: 'server text' }),
+    );
+    const t = createAgentStreamTransport({ getToken: () => 't', fetchImpl });
+    const a = await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() });
+    assert.deepEqual(a.error, { code: 'task_busy', retryable: true });
+    assert.equal(a.status, 409);
+    const b = await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() });
+    assert.equal(b.status, 503);
+    assert.equal(b.error, null);
+  });
+
+  test('network failure ⇒ status 0; an aborted signal aborts the fetch', async () => {
+    const { fetchImpl } = fetchSeq(new TypeError('Failed to fetch'));
+    const t = createAgentStreamTransport({ getToken: () => 't', fetchImpl });
+    assert.equal(
+      (await t.open({ method: 'POST', path: '/p', body: {}, signal: signal() })).status,
+      0,
+    );
+
+    let seenSignal;
+    const t2 = createAgentStreamTransport({
+      getToken: () => 't',
+      fetchImpl: async (_u, init) => {
+        seenSignal = init.signal;
+        throw new DOMException('aborted', 'AbortError');
+      },
+    });
+    const ctl = new AbortController();
+    ctl.abort();
+    assert.equal(
+      (await t2.open({ method: 'POST', path: '/p', body: {}, signal: ctl.signal })).status,
+      0,
+    );
+    assert.equal(seenSignal.aborted, true);
+  });
+
+  test('close() ends the stream and aborts the request', async () => {
+    let seenSignal;
+    const t = createAgentStreamTransport({
+      getToken: () => 't',
+      fetchImpl: async (_u, init) => {
+        seenSignal = init.signal;
+        return sseResponse([FRAME, FRAME, FRAME]);
+      },
+    });
+    const res = await t.open({ method: 'GET', path: '/p', body: null, signal: signal() });
+    const it = res.chunks[Symbol.asyncIterator]();
+    await it.next();
+    res.close();
+    assert.equal(seenSignal.aborted, true);
+    const next = await it.next().catch(() => ({ done: true }));
+    assert.equal(next.done, true);
+  });
+});

package/template/frontend/src/shell/AnnouncementsMenu.jsx

@@ -5,7 +5,8 @@
  * On open: for holders of `identity:role:update`, the open admin tasks (a new permission no role
  * in a company holds yet): "Grant…" opens `/access/add?key=` with the key ticked; "Reviewed, not
  * needed" confirms (naming the permission and company) then dismisses. Below, the announcement
- * notices with the same read behaviour as the bell. The `can` gate is cosmetic: the server
+ * notices with the same behaviour as the bell (unread only, severity dot, "View all
+ * notifications" to `/notifications?tab=announcement`; G-035). The `can` gate is cosmetic: the server
  * decides, and a 403 on the task list hides the section. Labels and company names only — the
  * task's company id and key are used in calls and URLs, never shown.
  */
@@ -164,11 +165,7 @@ export default function AnnouncementsMenu() {
           <DropdownMenuLabel>Announcements</DropdownMenuLabel>
           <DropdownMenuSeparator />
           {canTasks && <TasksSection onDismiss={setTarget} />}
-          <NoticeSection
-            category="announcement"
-            heading={canTasks ? 'News' : undefined}
-            emptyText="No announcements."
-          />
+          <NoticeSection category="announcement" heading={canTasks ? 'News' : undefined} />
         </DropdownMenuContent>
       </DropdownMenu>
 

package/template/frontend/src/shell/NotificationsMenu.jsx

@@ -1,8 +1,11 @@
 /**
  * NotificationsMenu — the header bell (G-027 step 5): the user's PERSONAL notices (changes to
- * their own access). Badge = unread personal count (useNotificationCounts). The list loads when
- * the menu opens; opening marks nothing read. Clicking a notice marks it read and follows its
- * link only when app-relative; "Mark all read" clears the category. Text only, never HTML.
+ * their own access, and app notices). Badge = unread personal count (useNotificationCounts). The
+ * list (unread only, newest 20; G-035) loads when the menu opens; opening marks nothing read.
+ * Each row carries its severity dot. Clicking a notice marks it read and follows its link only
+ * when app-relative; "Mark all read" clears the category; "View all notifications" opens the
+ * Notifications page (`/notifications?tab=personal`), with "N more" when over 20 are unread.
+ * Text only, never HTML.
  *
  * Also exports the pieces AnnouncementsMenu reuses: `HeaderMenuTrigger` (the header icon button
  * with tooltip and count badge) and `NoticeSection` (one category's notices).
@@ -10,7 +13,7 @@
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Bell, CheckCheck, Loader2, RotateCw } from 'lucide-react';
+import { Bell, CheckCheck, ListChecks, Loader2, RotateCw } from 'lucide-react';
 import { toast } from 'sonner';
 import { useAuth } from '@/auth/AuthContext';
 import { cn } from '@/lib/utils';
@@ -22,7 +25,16 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
-import { badgeLabel, badgeText, relativeTime, safeAppLink } from './notificationsView';
+import {
+  DROPDOWN_LIMIT,
+  badgeLabel,
+  badgeText,
+  moreText,
+  relativeTime,
+  safeAppLink,
+  severityInfo,
+  viewAllHref,
+} from './notificationsView';
 import { useNotificationCounts } from './useNotificationCounts';
 
 /**
@@ -110,19 +122,19 @@ export function MenuError({ text, onRetry }) {
   );
 }
 
-const LIST_LIMIT = 20;
-
 /**
- * One category's latest notices. Mounted only while the menu is open (Radix unmounts closed
- * content), so it loads on open. `heading` (optional) labels the section.
+ * One category's newest UNREAD notices (G-035: at most 20, plus "N more" and a "View all
+ * notifications" link to the Notifications page tab). Mounted only while the menu is open
+ * (Radix unmounts closed content), so it loads on open. `heading` (optional) labels the section;
+ * `emptyText` defaults to "You're all caught up".
  */
-export function NoticeSection({ category, heading, emptyText }) {
+export function NoticeSection({ category, heading, emptyText = 'You’re all caught up' }) {
   const { tokens, notifications } = useAuth();
   const counts = useNotificationCounts();
   const { refresh } = counts;
   const navigate = useNavigate();
   const token = tokens?.accessToken ?? null;
-  const [view, setView] = useState({ status: 'loading', rows: [], error: '', now: 0 });
+  const [view, setView] = useState({ status: 'loading', rows: [], total: 0, error: '', now: 0 });
   const [busyAll, setBusyAll] = useState(false);
   const alive = useRef(true);
   // Bumped per list load and when "Mark all read" starts, so only the latest load applies: a
@@ -139,9 +151,14 @@ export function NoticeSection({ category, heading, emptyText }) {
   const load = useCallback(async () => {
     if (!token) return;
     const seq = ++loadSeq.current;
-    const r = await notifications.listNotifications(token, { category, limit: LIST_LIMIT });
+    const r = await notifications.listNotifications(token, {
+      category,
+      unread: true,
+      limit: DROPDOWN_LIMIT,
+    });
     if (!alive.current || seq !== loadSeq.current) return;
-    if (r.ok) setView({ status: 'ready', rows: r.rows, error: '', now: Date.now() });
+    if (r.ok)
+      setView({ status: 'ready', rows: r.rows, total: r.total, error: '', now: Date.now() });
     else setView((v) => ({ ...v, status: 'error', error: r.error }));
   }, [notifications, token, category]);
 
@@ -181,6 +198,8 @@ export function NoticeSection({ category, heading, emptyText }) {
 
   const unreadInList = view.rows.some((row) => !row.readAt);
   const unreadCount = category === 'personal' ? counts.personal : counts.announcement;
+  const more = moreText(view.total, view.rows.length);
+  const allHref = viewAllHref(category);
 
   return (
     <section aria-label={heading || undefined}>
@@ -197,6 +216,7 @@ export function NoticeSection({ category, heading, emptyText }) {
       {view.status === 'ready' &&
         view.rows.map((row) => {
           const unread = !row.readAt;
+          const severity = severityInfo(row.severity);
           return (
             <DropdownMenuItem
               key={row.uuid}
@@ -205,14 +225,11 @@ export function NoticeSection({ category, heading, emptyText }) {
             >
               <span
                 aria-hidden="true"
-                className={cn(
-                  'mt-1.5 size-2 shrink-0 rounded-full',
-                  unread ? 'bg-primary' : 'bg-transparent',
-                )}
+                className={cn('mt-1.5 size-2 shrink-0 rounded-full', severity.dotClass)}
               />
               <span className="min-w-0 flex-1">
                 <span className={cn('block text-sm', unread ? 'font-semibold' : 'font-normal')}>
-                  {unread && <span className="sr-only">Unread: </span>}
+                  <span className="sr-only">{`${severity.label}${unread ? ', unread' : ''}: `}</span>
                   {row.title}
                 </span>
                 {row.body && (
@@ -244,6 +261,20 @@ export function NoticeSection({ category, heading, emptyText }) {
           Mark all read
         </DropdownMenuItem>
       )}
+      {view.status !== 'loading' && (
+        <div className="flex items-center justify-between gap-2 border-t border-border px-1 pt-1">
+          <DropdownMenuItem
+            onSelect={() => navigate(allHref)}
+            className="text-xs font-medium text-primary focus:text-primary"
+          >
+            <ListChecks aria-hidden="true" />
+            View all notifications
+          </DropdownMenuItem>
+          {view.status === 'ready' && more && (
+            <span className="px-2 text-xs text-muted-foreground">{more}</span>
+          )}
+        </div>
+      )}
     </section>
   );
 }
@@ -256,7 +287,7 @@ export default function NotificationsMenu() {
       <DropdownMenuContent align="end" className="w-96 max-w-[calc(100vw-2rem)]">
         <DropdownMenuLabel>Notifications</DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <NoticeSection category="personal" emptyText="You have no notifications." />
+        <NoticeSection category="personal" />
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/template/frontend/src/shell/notificationsView.js

@@ -1,7 +1,8 @@
 /**
  * notificationsView — React-free helpers for the header bell and Announcements menus (G-027
- * step 5). Kept pure so `node --test` covers them (notificationsView.test.mjs); the menus in
- * NotificationsMenu.jsx / AnnouncementsMenu.jsx only render what these return.
+ * step 5; unread-only lists, severity dot and "View all" footer, G-035). Kept pure so
+ * `node --test` covers them (notificationsView.test.mjs); the menus in NotificationsMenu.jsx /
+ * AnnouncementsMenu.jsx and the Notifications page only render what these return.
  */
 
 /** The counts poll interval (spec §10: 60 s, plus window focus). */
@@ -136,3 +137,41 @@ export function announcementsBadgeCount(counts) {
   const t = Number.isFinite(counts?.tasks) ? counts.tasks : 0;
   return a + t;
 }
+
+// --- G-035 notification center: unread-only dropdowns, severity, "View all" -----------------
+
+/** How many unread notices a dropdown loads (spec §10: 20 unread). */
+export const DROPDOWN_LIMIT = 20;
+
+/** The Notifications page tab for a category: `personal` (bell) or `announcement`. */
+export function viewAllHref(category) {
+  const tab = category === 'announcement' ? 'announcement' : 'personal';
+  return `/notifications?tab=${tab}`;
+}
+
+/**
+ * The dropdown footer's "N more" (N = unread total − rows shown), or '' when every unread
+ * notice is already shown (or the numbers are not counts).
+ */
+export function moreText(total, shown) {
+  if (!Number.isFinite(total) || !Number.isFinite(shown)) return '';
+  const n = Math.floor(total) - Math.floor(shown);
+  return n > 0 ? `${n} more` : '';
+}
+
+const SEVERITY = Object.freeze({
+  info: Object.freeze({ label: 'Info', dotClass: 'bg-primary' }),
+  success: Object.freeze({ label: 'Success', dotClass: 'bg-ok' }),
+  warning: Object.freeze({ label: 'Warning', dotClass: 'bg-warn' }),
+});
+
+/**
+ * A notice's severity dot: `{ label, dotClass }` (theme tokens only). Anything but `success` or
+ * `warning` reads as `info`, the default (spec §10). The label goes in sr-only text beside the
+ * dot, so colour is never the only signal.
+ */
+export function severityInfo(severity) {
+  return Object.prototype.hasOwnProperty.call(SEVERITY, severity)
+    ? SEVERITY[severity]
+    : SEVERITY.info;
+}