+
- No notifications
+ {nothingYet ? "No notifications yet" : "You're all caught up"}
- You're all caught up.
+ {nothingYet
+ ? "Billing, quota, and platform messages land here."
+ : "Nothing unread."}
);
}
-function NotificationsPanel() {
- const items = useAtomValue(appNotificationsAtom);
- const [readIds, setReadIds] = useAtom(notificationReadIdsAtom);
+export function NotificationsPanel({ feed }: { feed: NotificationFeed }) {
+ const { items, markAllRead, markRead, readIds, unreadCount } = feed;
const [tab, setTab] = useState
("all");
+ const [expanded, setExpanded] = useState>(
+ () => new Set()
+ );
- const unreadCount = countUnreadNotifications(items, readIds);
const visible = visibleNotifications(items, tab, readIds);
- const markRead = useCallback(
- (id: string) => {
- setReadIds((previous) => new Set(previous).add(id));
- },
- [setReadIds]
- );
- const markAllRead = useCallback(() => {
- setReadIds((previous) => {
- const next = new Set(previous);
- for (const item of items) {
+ const toggle = (item: AppNotification) => {
+ setExpanded((prev) => {
+ const next = new Set(prev);
+ if (next.has(item.id)) {
+ next.delete(item.id);
+ } else {
next.add(item.id);
}
return next;
});
- }, [items, setReadIds]);
+ markRead(item);
+ };
return (
<>
-
+
Notifications
-
+ Mark all as read
+
-
- {(
- [
- { key: "all", label: "All" },
+
+ 0 ? `Unread ${unreadCount}` : "Unread",
+ label: (
+
+ Unread
+ {unreadCount > 0 ? (
+
+ {unreadCount}
+
+ ) : null}
+
+ ),
+ value: "unread",
},
- ] as const
- ).map((entry) => (
-
- ))}
+ ]}
+ size="sm"
+ value={tab}
+ width="full"
+ />
{visible.length === 0 ? (
-
+
) : (
-
-
+
+
{visible.map((item) => (
-
markRead(item.id)}
+ onRead={() => markRead(item)}
+ onToggle={() => toggle(item)}
unread={isNotificationUnread(item, readIds)}
/>
))}
@@ -218,9 +288,8 @@ function NotificationsPanel() {
export function AppSidebarNotifications() {
const { state } = useSidebar();
const expanded = state === "expanded";
- const items = useAtomValue(appNotificationsAtom);
- const readIds = useAtomValue(notificationReadIdsAtom);
- const unreadCount = countUnreadNotifications(items, readIds);
+ const feed = useNotificationFeed();
+ const { unreadCount } = feed;
const badgeLabel = notificationBadgeLabel(unreadCount);
const [open, setOpen] = useState(false);
// Collapsed anchor: the row keeps its full expanded width under the rail's
@@ -244,7 +313,10 @@ export function AppSidebarNotifications() {
return (
<>
-
+ {/* The billing Dev Mock's scenarios drive the inbox fixtures too, so
+ its panel entry is reachable from anywhere the inbox is. */}
+
+
{/* Collapsed rail: anchor the icon slot, sideOffset 6 (the rail-wide
convention for popovers) — the default trigger anchor sits at the
- clipped full-width row's edge, far past the visible rail. */}
+ clipped full-width row's edge, far past the visible rail. The
+ panel keeps a floor height so an empty inbox and a one-item inbox
+ read as the same surface. */}
-
+
diff --git a/apps/ui/src/features/shell/app-sidebar.tsx b/apps/ui/src/features/shell/app-sidebar.tsx
index ed1e4434..d374b2b0 100644
--- a/apps/ui/src/features/shell/app-sidebar.tsx
+++ b/apps/ui/src/features/shell/app-sidebar.tsx
@@ -33,6 +33,7 @@ import {
useState,
} from "react";
import { loadWorkspaceQuotaSnapshot } from "@/features/billing/workspace-quota-client";
+import { observeWorkspaceQuotaForInbox } from "@/features/notifications/quota-observation";
import { projectIdFromPathname } from "@/features/panes/use-project-id";
import { useProjectsExplorerReadModel } from "@/features/projects/explorer/use-projects-explorer";
import type {
@@ -42,7 +43,7 @@ import type {
import { createAppSidebarProjectGroups } from "@/features/shell/app-sidebar.groups";
import { AppSidebarAccount } from "@/features/shell/app-sidebar-account";
import { AppSidebarNotifications } from "@/features/shell/app-sidebar-notifications";
-import { kubeconfigAtom, namespaceAtom } from "@/lib/auth-store";
+import { appTokenAtom, kubeconfigAtom, namespaceAtom } from "@/lib/auth-store";
const APP_SIDEBAR_NAV_ID = "app-sidebar-nav";
const APP_SIDEBAR_WIDTH = "13.75rem";
@@ -540,6 +541,7 @@ function AppSidebarChrome({
currentProjectId: string | undefined;
projectsActive: boolean;
}) {
+ const appToken = useAtomValue(appTokenAtom).trim();
const kubeconfig = useAtomValue(kubeconfigAtom).trim();
const namespace = useAtomValue(namespaceAtom);
const { devMockActive, states } = useProjectsExplorerReadModel({
@@ -556,10 +558,18 @@ function AppSidebarChrome({
);
// Warm the workspace-quota cache so chat turns can inject the snapshot
- // without waiting on the desktop SDK (see project-workspace-layout).
+ // without waiting on the desktop SDK (see project-workspace-layout), and
+ // let the quota-exhausted producer observe the first snapshot; the Status
+ // Hint keeps observing on its polling cadence.
useEffect(() => {
- loadWorkspaceQuotaSnapshot(namespace).catch(() => undefined);
- }, [namespace]);
+ if (appToken === "" || kubeconfig === "") {
+ loadWorkspaceQuotaSnapshot(namespace).catch(() => undefined);
+ return;
+ }
+ observeWorkspaceQuotaForInbox({ appToken, kubeconfig, namespace }).catch(
+ () => undefined
+ );
+ }, [appToken, kubeconfig, namespace]);
return (
loadWorkspaceSubscriptionSummary({ appToken, kubeconfig, workspace }),
+ {
+ refreshInterval: options.refreshInterval,
+ revalidateOnFocus: false,
+ shouldRetryOnError: false,
+ }
+ );
+}
diff --git a/apps/ui/src/features/status-hint/status-hint-banner.interaction.test.tsx b/apps/ui/src/features/status-hint/status-hint-banner.interaction.test.tsx
new file mode 100644
index 00000000..bcd1c45a
--- /dev/null
+++ b/apps/ui/src/features/status-hint/status-hint-banner.interaction.test.tsx
@@ -0,0 +1,105 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { render } from "@testing-library/react/pure";
+
+import { withTestDom } from "@/features/project-canvas/react-test-harness";
+
+import type { StatusHint } from "./status-hint-model";
+
+const PAYMENT_DUE: StatusHint = {
+ cta: { href: "/billing", label: "Renew plan" },
+ description:
+ "This workspace is suspended. Resources will be deleted on Sep 6 unless the subscription is renewed.",
+ dismissible: false,
+ id: "payment-due",
+ title: "Workspace suspended — payment due",
+ tone: "destructive",
+};
+
+const QUOTA_FULL: StatusHint = {
+ cta: { href: "/billing/usage", label: "View usage" },
+ description:
+ "New deployments can't start until storage is freed or the plan is upgraded.",
+ dismissible: true,
+ id: "quota-full",
+ title: "Storage quota is full",
+ tone: "warning",
+};
+
+async function renderHint(
+ hint: StatusHint,
+ run: (
+ rendered: ReturnType,
+ dismissals: () => number,
+ act: (run: () => void) => Promise
+ ) => void | Promise
+) {
+ await withTestDom(async (act) => {
+ const { StatusHintBannerView } = await import("./status-hint-banner");
+ let rendered: ReturnType | undefined;
+ let dismissed = 0;
+ try {
+ await act(() => {
+ rendered = render(
+ {
+ dismissed += 1;
+ }}
+ />
+ );
+ });
+ if (rendered != null) {
+ await run(rendered, () => dismissed, act);
+ }
+ } finally {
+ await act(() => rendered?.unmount());
+ }
+ });
+}
+
+test("a non-dismissible hint renders title, description, and CTA with no close button", async () => {
+ await renderHint(PAYMENT_DUE, (rendered) => {
+ // A destructive, non-dismissible state announces itself as an alert.
+ const banner = rendered.getByRole("alert");
+ assert.equal(banner.dataset.state, "payment-due");
+ assert.equal(banner.dataset.tone, "destructive");
+ const text = banner.textContent ?? "";
+ assert.ok(text.includes("Workspace suspended — payment due"));
+ assert.ok(text.includes("Resources will be deleted on Sep 6"));
+ const cta = rendered.getByRole("button", { name: "Renew plan" });
+ assert.equal(cta.getAttribute("href"), "/billing");
+ assert.equal(rendered.queryByRole("button", { name: "Dismiss" }), null);
+ });
+});
+
+test("a dismissible hint pins a close button that reports the dismissal", async () => {
+ await renderHint(QUOTA_FULL, async (rendered, dismissals, act) => {
+ assert.equal(rendered.getByRole("status").dataset.state, "quota-full");
+ const close = rendered.getByRole("button", { name: "Dismiss" });
+ await act(() => close.click());
+ assert.equal(dismissals(), 1);
+ assert.equal(
+ rendered.getByRole("button", { name: "View usage" }).getAttribute("href"),
+ "/billing/usage"
+ );
+ });
+});
+
+test("the CTA records the billing return route before navigating", async () => {
+ await renderHint(QUOTA_FULL, async (rendered, _dismissals, act) => {
+ window.history.replaceState({}, "", "/project/demo?tab=canvas");
+ window.sessionStorage.removeItem("billing-return-route");
+ const cta = rendered.getByRole("button", { name: "View usage" });
+ await act(() => {
+ cta.dispatchEvent(
+ new MouseEvent("click", { bubbles: true, cancelable: true })
+ );
+ });
+ assert.equal(
+ window.sessionStorage.getItem("billing-return-route"),
+ "/project/demo?tab=canvas"
+ );
+ });
+});
diff --git a/apps/ui/src/features/status-hint/status-hint-banner.tsx b/apps/ui/src/features/status-hint/status-hint-banner.tsx
new file mode 100644
index 00000000..17094cec
--- /dev/null
+++ b/apps/ui/src/features/status-hint/status-hint-banner.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { AppButton } from "@workspace/ui/components/app-button";
+import { AppIconButton } from "@workspace/ui/components/app-icon-button";
+import { cn } from "@workspace/ui/lib/utils";
+import { Info, TriangleAlert, X } from "lucide-react";
+import Link from "next/link";
+
+import { recordBillingReturnRoute } from "@/features/billing/billing-return-route";
+import { BILLING_SURFACE_TONES } from "@/features/billing/billing-surface-tones";
+
+import type { StatusHint } from "./status-hint-model";
+import { useStatusHint } from "./use-status-hint";
+
+/**
+ * The status hint surface (design spec §7): a full-width tinted strip at the
+ * very top of the content area, in document flow, that explains a holding
+ * billing state and offers the fix. One tonal recipe across tones — a
+ * payment-due stage only ever changes its words, never its visuals.
+ */
+
+export function StatusHintBannerView({
+ hint,
+ onDismiss,
+}: {
+ hint: StatusHint;
+ onDismiss: () => void;
+}) {
+ const Icon = hint.tone === "info" ? Info : TriangleAlert;
+ return (
+
+
+
+
+ {hint.title}
+
+
+
+ {hint.description}
+
+
+ {hint.cta.label}
+
+ }
+ size="sm"
+ variant="secondary"
+ />
+ {hint.dismissible ? (
+
+
+
+ ) : null}
+