+
+
+
+
+
+
+
+ {ids.map((id) => (
+
+ ))}
+
+{overflow > 0 && +{overflow}}
+```
+
+The `ring-zinc-900`/`ring-indigo-500` ring doubles as the overlap separator
+(resting) and the selected state (active) — don't add a second selection
+treatment. Cap the stack (10 is the Activity precedent) and show a plain
+`+N`, never render an unbounded row. If the stack drives a filter, clicking
+toggles membership in that filter's own selection state — don't invent a
+parallel one.
+
+### 2.17 Error notifications — three tiers
+
+Pick the tier by **how much of the user's current work is unusable**, not by
+technical severity — and every error names an exit (Retry / Sign in again /
+Reload / Go back), never just a statement of failure. Interactive mockup with
+live demos of every tier:
+[docs/design/ERROR_NOTIFICATIONS.html](../docs/design/ERROR_NOTIFICATIONS.html)
+(open in a browser).
+
+| Tier | User state | Form | Component |
+|---|---|---|---|
+| **S — routine failure** | can keep working | toast, bottom-right, auto-dismisses | `notify.error/warning/success/info` (`src/lib/notify.tsx`) — carries one optional action (`{ label, onClick }`) |
+| **M — degraded context** | still readable, but the context is impaired | persistent soft strip atop the affected region; reflects a *state*, unmounts when it clears | `
+
+ );
+}
+
export default function App() {
return (
+ window.location.reload() }}
+ secondaryAction={{ label: "Copy error details", onClick: this.copyDetails }}
+ />
+
+ );
+ }
+}
diff --git a/frontend/src/components/ui/ErrorDialog.tsx b/frontend/src/components/ui/ErrorDialog.tsx
index e822352c..38fc0d98 100644
--- a/frontend/src/components/ui/ErrorDialog.tsx
+++ b/frontend/src/components/ui/ErrorDialog.tsx
@@ -5,13 +5,17 @@ import { Button } from "./button";
// The shared error popup for BLOCKING failures — when the user must read and
// acknowledge before continuing (e.g. their message was rejected). Routine
// operation failures use `toast.error` instead; that is the app-wide default.
+// Pass `action` when there is a concrete next step (edit, retry, open settings):
+// it becomes the primary button, with Cancel as the quiet exit.
export function ErrorDialog({
message,
title = "Something went wrong",
+ action,
onClose,
}: {
message: string;
title?: string;
+ action?: { label: string; onClick: () => void };
onClose: () => void;
}) {
return (
@@ -26,10 +30,27 @@ export function ErrorDialog({
maxWidth="max-w-sm"
>
{message}
-
-
+ 
);
- }
-
- // Well-known agents (claude / codex / gemini / copilot …) get their brand
- // glyph instead of text initials, so a channel full of bots reads by logo.
- const brand = agentIconFor(name);
- if (brand) {
- return (
+ } else {
+ // Well-known agents (claude / codex / gemini / copilot …) get their brand
+ // glyph instead of text initials, so a channel full of bots reads by logo.
+ const brand = agentIconFor(name);
+ inner = brand ? (
= {
+ error: "bg-red-950/45 text-red-300",
+ warning: "bg-amber-900/40 text-amber-200",
+ info: "bg-indigo-600/15 text-indigo-200",
+ success: "bg-emerald-500/10 text-emerald-400",
+};
+
+// The action chip sits ON the tinted fill, so it's one step stronger than the
+// §2.1 soft-button recipes (which assume a zinc surface underneath).
+const actionCls: Record = {
+ error: "bg-red-900/60 text-red-100 hover:bg-red-900/90",
+ warning: "bg-amber-900/70 text-amber-100 hover:bg-amber-900",
+ info: "bg-indigo-600/25 text-indigo-100 hover:bg-indigo-600/40",
+ success: "bg-emerald-900/60 text-emerald-100 hover:bg-emerald-900/90",
+};
+
+// Tier M of the global error system: a persistent status strip pinned to the top
+// of the affected region (chat area, dialog form, settings section). A banner
+// reflects an ongoing STATE, not an event — mount it while the state holds and
+// unmount when it clears; one-off failures belong in a toast instead. Ongoing
+// states ("reconnecting…") should omit `onDismiss` and clear themselves.
+export function Banner({
+ severity,
+ icon: Icon,
+ action,
+ onDismiss,
+ className,
+ children,
+}: {
+ severity: Severity;
+ icon?: ComponentType<{ className?: string }>;
+ action?: { label: string; onClick: () => void };
+ onDismiss?: () => void;
+ className?: string;
+ children: ReactNode;
+}) {
+ return (
+ .
+export function ErrorState({
+ icon: Icon = AlertCircle,
+ tone = "error",
+ title,
+ description,
+ action,
+ secondaryAction,
+ className,
+}: {
+ icon?: ComponentType<{ className?: string }>;
+ /** error = it broke (red) · warning = needs attention, nothing lost (amber). */
+ tone?: "error" | "warning";
+ title: string;
+ description?: string;
+ action?: { label: string; onClick: () => void };
+ /** Quiet text link next to the primary action (e.g. "Copy error details"). */
+ secondaryAction?: { label: string; onClick: () => void };
+ className?: string;
+}) {
+ return (
+
)}
+ {/* Per-FILE hover action: add this file to context without
+ opening it. A workspace.read reference is text-only (bot +
+ path, no content capture), so the tree row has everything
+ it needs — no read required. */}
+ {!ent.is_dir && botId && (
+
+ {action ? (
+ <>
+
+
+
+ ) : (
+
+ )}
);
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
index 819056fc..81e00a78 100644
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
import { cn } from "@/lib/cn";
import { initials, avatarColor } from "@/lib/format";
import { agentIconFor, AgentGlyph } from "@/components/ui/agentIcons";
@@ -8,6 +9,8 @@ interface AvatarProps {
id?: string;
size?: "xs" | "sm" | "md" | "lg";
className?: string;
+ /** Presence dot (DESIGN.md §2.7): omit for no dot, true/false for online/offline. */
+ online?: boolean;
}
const sizeCls = {
@@ -17,11 +20,24 @@ const sizeCls = {
lg: "w-11 h-11 text-base",
};
-export function Avatar({ name, src, id, size = "md", className }: AvatarProps) {
+function PresenceDot({ online }: { online: boolean }) {
+ return (
+
+ );
+}
+
+export function Avatar({ name, src, id, size = "md", className, online }: AvatarProps) {
const color = id ? avatarColor(id) : "bg-zinc-700";
+ let inner: ReactNode;
if (src) {
- return (
+ inner = (
+ {Icon &&
+ );
+}
diff --git a/frontend/src/components/ui/error-state.tsx b/frontend/src/components/ui/error-state.tsx
new file mode 100644
index 00000000..f0a09914
--- /dev/null
+++ b/frontend/src/components/ui/error-state.tsx
@@ -0,0 +1,68 @@
+import type { ComponentType } from "react";
+import { AlertCircle } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { Button } from "./button";
+
+// The canonical error state (tier L of the global error system): centered glyph +
+// one-line title + one-line explanation + a primary exit action. Mirrors the
+// EmptyState skeleton (DESIGN.md §2.9) in error semantics. Use it when the current
+// view is unusable (load failed, no access, session expired, crashed) — routine
+// operation failures use toast, degraded-but-still-usable states use {children}
+ {action && (
+
+ )}
+ {onDismiss && (
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/features/bots/BotActivitySection.tsx b/frontend/src/features/bots/BotActivitySection.tsx
index c59f5318..317aa88b 100644
--- a/frontend/src/features/bots/BotActivitySection.tsx
+++ b/frontend/src/features/bots/BotActivitySection.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
-import toast from "react-hot-toast";
+import { notify, messageOf } from "@/lib/notify";
import { RefreshCw } from "lucide-react";
import { getBotAcpEvents, type AcpEventRow } from "@/api/bots";
@@ -33,7 +33,7 @@ export function BotActivitySection({ botId }: { botId: string }) {
try {
setEvents((await getBotAcpEvents(botId, 80)).events);
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setLoading(false);
}
diff --git a/frontend/src/features/bots/BotConnectionHistorySection.tsx b/frontend/src/features/bots/BotConnectionHistorySection.tsx
index 1d84de9d..451636bb 100644
--- a/frontend/src/features/bots/BotConnectionHistorySection.tsx
+++ b/frontend/src/features/bots/BotConnectionHistorySection.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
-import toast from "react-hot-toast";
+import { notify, messageOf } from "@/lib/notify";
import { RefreshCw, ArrowUpCircle, ArrowDownCircle } from "lucide-react";
import { listBotConnectionEvents, type BotConnectionEvent } from "@/api/bots";
@@ -33,7 +33,7 @@ export function BotConnectionHistorySection({ botId }: { botId: string }) {
try {
setEvents(await listBotConnectionEvents(botId, 50));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setLoading(false);
}
diff --git a/frontend/src/features/bots/BotOnboardingWizard.tsx b/frontend/src/features/bots/BotOnboardingWizard.tsx
index 472d8790..a6e88216 100644
--- a/frontend/src/features/bots/BotOnboardingWizard.tsx
+++ b/frontend/src/features/bots/BotOnboardingWizard.tsx
@@ -1,4 +1,5 @@
import { useEffect, useState, type ReactNode } from "react";
+import { notify, messageOf } from "@/lib/notify";
import {
Bot,
Terminal,
@@ -29,7 +30,6 @@ import {
type EnrollmentGuidance,
type IssuedToken,
} from "@/api/bots";
-import toast from "react-hot-toast";
import { Dialog } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import type { BotItem } from "@/types";
@@ -199,7 +199,7 @@ export function BotOnboardingWizard({
setBot(resolved);
setStep(1);
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
@@ -211,7 +211,7 @@ export function BotOnboardingWizard({
try {
setConfig(await getConnectorConfig(bot.bot_id, agentType));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
@@ -223,7 +223,7 @@ export function BotOnboardingWizard({
try {
setToken(await issueBotToken(bot.bot_id));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
@@ -641,7 +641,7 @@ function ScriptPanel({
try {
setCode(await mintEnrollmentCode(bot.bot_id, agentType));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
@@ -653,7 +653,7 @@ function ScriptPanel({
await revokeEnrollmentCodes(bot.bot_id);
setCode(null);
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
@@ -760,7 +760,7 @@ function AgentPanel({
try {
setCode(await mintEnrollmentCode(bot.bot_id, agentType));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
@@ -772,7 +772,7 @@ function AgentPanel({
await revokeEnrollmentCodes(bot.bot_id);
setCode(null);
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(false);
}
diff --git a/frontend/src/features/bots/BotPermissionGrantsSection.tsx b/frontend/src/features/bots/BotPermissionGrantsSection.tsx
index 6a8cffc9..5895099f 100644
--- a/frontend/src/features/bots/BotPermissionGrantsSection.tsx
+++ b/frontend/src/features/bots/BotPermissionGrantsSection.tsx
@@ -1,5 +1,5 @@
import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
-import toast from "react-hot-toast";
+import { notify, messageOf } from "@/lib/notify";
import { X, Plus } from "lucide-react";
import {
getEventAccess,
@@ -59,7 +59,7 @@ export function BotPermissionGrantsSection({ botId }: { botId: string }) {
);
setMembersByChannel(Object.fromEntries(lists));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
}
}, [botId]);
useEffect(() => {
@@ -72,7 +72,7 @@ export function BotPermissionGrantsSection({ botId }: { botId: string }) {
await fn();
await load();
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(null);
}
diff --git a/frontend/src/features/bots/BotPostureSection.tsx b/frontend/src/features/bots/BotPostureSection.tsx
index 9c99cbb2..680c60ff 100644
--- a/frontend/src/features/bots/BotPostureSection.tsx
+++ b/frontend/src/features/bots/BotPostureSection.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
-import toast from "react-hot-toast";
+import { notify, messageOf } from "@/lib/notify";
import {
getBotPermissions,
setBotPosture,
@@ -27,14 +27,14 @@ export function BotPostureSection({ botId }: { botId: string }) {
}, [botId]);
useEffect(() => {
- load().catch((e) => toast.error(String(e)));
+ load().catch((e) => notify.error(messageOf(e)));
}, [load]);
const changePosture = (mode: string) => {
setBusy(true);
setBotPosture(botId, mode)
.then(load)
- .catch((e) => toast.error(String(e)))
+ .catch((e) => notify.error(messageOf(e)))
.finally(() => setBusy(false));
};
@@ -42,7 +42,7 @@ export function BotPostureSection({ botId }: { botId: string }) {
setBusy(true);
setBotConfigOption(botId, configId, value)
.then(load)
- .catch((e) => toast.error(String(e)))
+ .catch((e) => notify.error(messageOf(e)))
.finally(() => setBusy(false));
};
@@ -57,7 +57,7 @@ export function BotPostureSection({ botId }: { botId: string }) {
setManualConfigValue("");
return load();
})
- .catch((e) => toast.error(String(e)))
+ .catch((e) => notify.error(messageOf(e)))
.finally(() => setBusy(false));
};
diff --git a/frontend/src/features/bots/BotToBotGrantsSection.tsx b/frontend/src/features/bots/BotToBotGrantsSection.tsx
index 121765cd..f8fe5e9b 100644
--- a/frontend/src/features/bots/BotToBotGrantsSection.tsx
+++ b/frontend/src/features/bots/BotToBotGrantsSection.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from "react";
-import toast from "react-hot-toast";
+import { notify, messageOf } from "@/lib/notify";
import { X, Plus } from "lucide-react";
import {
getBotGrants,
@@ -41,7 +41,7 @@ export function BotToBotGrantsSection({ botId }: { botId: string }) {
try {
setData(await getBotGrants(botId));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
}
}, [botId]);
useEffect(() => {
@@ -54,7 +54,7 @@ export function BotToBotGrantsSection({ botId }: { botId: string }) {
await fn();
await load();
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setBusy(null);
}
diff --git a/frontend/src/features/bots/BotsManager.tsx b/frontend/src/features/bots/BotsManager.tsx
index dac79e14..b6f41265 100644
--- a/frontend/src/features/bots/BotsManager.tsx
+++ b/frontend/src/features/bots/BotsManager.tsx
@@ -1,4 +1,5 @@
import { useEffect, useState, useCallback } from "react";
+import { notify, messageOf } from "@/lib/notify";
import toast from "react-hot-toast";
import { Bot, KeyRound, RefreshCw, Circle, CircleDot, Ban, Wand2 } from "lucide-react";
import {
@@ -83,7 +84,7 @@ export function BotsManager() {
// Background polls stay quiet — a transient blip shouldn't toast.
if (!opts?.silent) {
setLoadFailed(true);
- toast.error(String(e));
+ notify.error(messageOf(e));
}
} finally {
if (!opts?.silent) setLoading(false);
@@ -112,7 +113,7 @@ export function BotsManager() {
try {
setIssued(await issueBotToken(botId));
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
}
}
diff --git a/frontend/src/features/chat/ChannelView.tsx b/frontend/src/features/chat/ChannelView.tsx
index f4119a66..e3b0a1e7 100644
--- a/frontend/src/features/chat/ChannelView.tsx
+++ b/frontend/src/features/chat/ChannelView.tsx
@@ -1,5 +1,5 @@
import { useState, useCallback, useEffect, useRef, useMemo, lazy, Suspense } from "react";
-import { ArrowLeft, Hash, Users, Loader2, PanelRight, PanelLeftClose, PanelLeftOpen, Paperclip, FolderTree, Settings, LayoutDashboard, Reply, X, Copy, Forward, AlertCircle } from "lucide-react";
+import { ArrowLeft, Hash, Users, Loader2, PanelRight, PanelLeftClose, PanelLeftOpen, Paperclip, FolderTree, Settings, LayoutDashboard, Reply, X, Copy, Forward, WifiOff } from "lucide-react";
import toast from "react-hot-toast";
import { listMessages, sendMessage } from "@/api/messages";
import { useContextPickStore, toBundle } from "./context/contextPick";
@@ -25,6 +25,8 @@ import { LaneBoundsContext } from "@/hooks/useLaneWindow";
import { LaneZones } from "./workbench/LaneZones";
import { LaneResizer } from "./workbench/LaneResizer";
import { ErrorDialog } from "@/components/ui/ErrorDialog";
+import { Banner } from "@/components/ui/banner";
+import { ErrorState } from "@/components/ui/error-state";
import { Button } from "@/components/ui/button";
import { usePopoverDismiss } from "@/components/ui/popover";
// Click-gated dialogs — kept out of the eager ChatLayout chunk. RemoteWorkspaceDialog
@@ -489,7 +491,7 @@ export function ChannelView({ channel, onBack, sidebarOpen, onToggleSidebar }: P
void loadCommands();
}, [catchUp, loadCommands]);
- const { sendResourceReq, sendPresenceFocus } = useChatRealtime(
+ const { sendResourceReq, sendPresenceFocus, status: rtStatus, reconnectNow } = useChatRealtime(
// Preview (not yet a member) → don't subscribe; the gateway gates realtime
// frames on channel membership anyway.
!channel || isPreview ? null : channel.channel_id,
@@ -559,6 +561,18 @@ export function ChannelView({ channel, onBack, sidebarOpen, onToggleSidebar }: P
// without re-subscribing the realtime hook.
sendResourceReqRef.current = sendResourceReq;
+ // Tier-M connection banner: a dropped socket only surfaces after a short grace
+ // period (most blips heal within a retry or two), but a dead one (retry budget
+ // spent) shows immediately. Clears itself the moment the socket is back.
+ const [showConnBanner, setShowConnBanner] = useState(false);
+ useEffect(() => {
+ if (rtStatus === "reconnecting") {
+ const t = setTimeout(() => setShowConnBanner(true), 1500);
+ return () => clearTimeout(t);
+ }
+ setShowConnBanner(rtStatus === "offline");
+ }, [rtStatus]);
+
// Re-flatten the palette when bot labels resolve after the initial fetch.
useEffect(() => {
void loadCommands();
@@ -1165,24 +1179,31 @@ export function ChannelView({ channel, onBack, sidebarOpen, onToggleSidebar }: P
}`}
>
{title}
+ {description && ( +{description}
+ )} + {(action || secondaryAction) && ( +
+ {action && (
+
+ )}
+ {secondaryAction && (
+
+ )}
+
+ )}
+
+ {/* Live-connection banner (tier M): the channel is readable but frozen. */}
+ {showConnBanner && (
+
+ {rtStatus === "offline"
+ ? "Connection lost — new messages are paused."
+ : "Connection lost — reconnecting…"}
+
+ )}
{/* Messages */}
{loading ? (
-
+
-
+ - Couldn't load messages. Check your connection and try again. -
- -- Couldn't load your workspaces. Check the gateway connection, then retry. -
- -
+
+ )}
);
})}
@@ -1782,15 +1812,18 @@ export function RemoteWorkspaceDialog({
undefined,
path: file.path,
sessionId: effectiveSessionId || undefined,
+ root: treeRoot ?? undefined,
})
);
setAttached(true);
window.setTimeout(() => setAttached(false), 1500);
}}
- title="Attach a reference to this file (which bot + path) as context — the recipient reads the live version on demand"
+ title={addToContextTitle(
+ "this workspace file as a live reference — the recipient reads it on demand"
+ )}
className="flex items-center gap-1 px-2 py-0.5 rounded hover:bg-zinc-800 text-zinc-300"
>
- - Attach to this message + Add to context
{QUICK.map((q) => { const Icon = KIND_ICON[q.kind]; @@ -252,6 +263,10 @@ export function ContextPickBar({ ); })} ++ Files, messages & a bot's workspace files: add them from their own + panels (Workbench, a reply, the Remote workspace). +
-
- );
+// ── expanded detail: the episode's events hung on a left rule ───────────────
+interface MutedItem {
+ kind: "write" | "approval";
+ actorId?: string | null;
+ count: number;
}
-
-// ── detail pane: the selected episode, fully expanded ───────────────────────
type DetailRow =
| { type: "event"; n: NormEvent }
- | { type: "writeRun"; count: number; actorId?: string | null; seq: number };
+ | { type: "muted"; items: MutedItem[]; seq: number };
-/** Fold consecutive write/op events into one summary row; keep messages
- * individually rendered (so each stays jump-to-able). */
+/** Fold consecutive non-message events (writes/ops + approvals) into ONE muted
+ * summary row — "claude wrote 10 files · haowei approved ×2" — and keep
+ * messages individually rendered (each stays jump-to-able). Chronological —
+ * the flow reads top-down like the conversation it summarizes. */
function detailRows(ep: Episode): DetailRow[] {
const rows: DetailRow[] = [];
for (const n of ep.events) {
- if (n.kind === "write" || n.kind === "op") {
+ if (n.kind === "write" || n.kind === "op" || n.kind === "approval") {
+ const kind: MutedItem["kind"] = n.kind === "approval" ? "approval" : "write";
const last = rows[rows.length - 1];
- if (last && last.type === "writeRun" && last.actorId === n.actorId) {
- last.count += 1;
+ if (last && last.type === "muted") {
+ const item = last.items.find((it) => it.kind === kind && it.actorId === n.actorId);
+ if (item) item.count += 1;
+ else last.items.push({ kind, actorId: n.actorId, count: 1 });
last.seq = n.seq;
} else {
- rows.push({ type: "writeRun", count: 1, actorId: n.actorId, seq: n.seq });
+ rows.push({ type: "muted", items: [{ kind, actorId: n.actorId, count: 1 }], seq: n.seq });
}
} else {
rows.push({ type: "event", n });
}
}
- return rows.reverse(); // newest-first, matching the rest of the board
+ return rows;
+}
+
+/** Bot senders read by brand color (claude clay, codex green, …) so a
+ * multi-bot thread scans by name color without repeating avatars per row.
+ * Lightened toward white so the darker brand hues clear the contrast floor
+ * on the zinc-900 surface. */
+function senderColor(name: string): string | undefined {
+ const bg = agentIconFor(name)?.bg;
+ return bg ? `color-mix(in srgb, ${bg} 62%, white)` : undefined;
}
-function KindIcon({ kind }: { kind: EventKind }) {
- if (kind === "approval") return
-
- {item.tip.summary && {item.tip.summary}
}
-
-
-
-
-
+
+ {summary && ;
+ onToggle: (id: string) => void;
+}) {
+ const shown = ids.slice(0, PARTICIPANT_STRIP_CAP);
+ const overflow = ids.length - shown.length;
+ const dim = selected.size > 0;
+ const online = ids.reduce((n, id) => n + (memberOf(id)?.is_online ? 1 : 0), 0);
+
+ return (
+ (null);
const [members, setMembers] = useState([]);
const [loading, setLoading] = useState(false);
- const [lens, setLens] = useState("episodes");
- const [selectedId, setSelectedId] = useState(null);
+ const [lens, setLens] = useState("flow");
+ // undefined = auto (newest episode expanded); null = user collapsed everything.
+ const [expandedId, setExpandedId] = useState(undefined);
const [selected, setSelected] = useState>(() => new Set());
- const [hover, setHover] = useState<{ rect: DOMRect; item: RailItem } | null>(null);
const toggleMember = useCallback((id: string) => {
setSelected((prev) => {
@@ -478,6 +482,23 @@ function ActivityBody({ ctx }: { ctx: ViewBoardContext }) {
[events, isBot]
);
+ // Distinct participants across the WHOLE channel (not lens-filtered), most-
+ // recently-active first — episodes are already newest-first, so the first
+ // time an id shows up while walking them is its most recent activity.
+ const participantIds = useMemo(() => {
+ const seen = new Set();
+ const order: string[] = [];
+ for (const ep of allEpisodes) {
+ for (const id of ep.participants) {
+ if (!seen.has(id)) {
+ seen.add(id);
+ order.push(id);
+ }
+ }
+ }
+ return order;
+ }, [allEpisodes]);
+
// Member filter → then the lens filter (Highlights drops chatter-only episodes).
const episodes = useMemo(() => {
let eps = allEpisodes;
@@ -486,32 +507,28 @@ function ActivityBody({ ctx }: { ctx: ViewBoardContext }) {
return eps;
}, [allEpisodes, selected, lens]);
- // Keep a valid selection: default to the newest episode; re-point if it vanished.
- useEffect(() => {
- if (!episodes.length) {
- if (selectedId !== null) setSelectedId(null);
- return;
- }
- if (!selectedId || !episodes.some((ep) => ep.id === selectedId)) {
- setSelectedId(episodes[0].id);
- }
- }, [episodes, selectedId]);
-
- const selectedEpisode = episodes.find((ep) => ep.id === selectedId) ?? episodes[0] ?? null;
-
- // Rail items: one node per episode (episodes/highlights), or one per collapsed
- // run (all). Each is a short typed label; details live in the hover bubble.
- const railItems = useMemo(() => {
- if (lens === "all") return episodes.flatMap((ep) => collapseEpisode(ep).map((run) => runItem(run, memberOf)));
- return episodes.map((ep) => episodeItem(ep, memberOf));
- }, [episodes, lens, memberOf]);
-
- const onHover = useCallback((rect: DOMRect, item: RailItem) => setHover({ rect, item }), []);
- const onLeave = useCallback(() => setHover(null), []);
+ // Auto-expand the newest episode until the user picks/collapses one themselves.
+ const effectiveExpanded =
+ lens === "all" ? null : expandedId === undefined ? (episodes[0]?.id ?? null) : expandedId;
+ const toggleEpisode = useCallback(
+ (id: string) => setExpandedId((prev) => {
+ const cur = prev === undefined ? (episodes[0]?.id ?? null) : prev;
+ return cur === id ? null : id;
+ }),
+ [episodes]
+ );
return (
void load()}>
{summary}
}
+
{rows.map((row, i) => {
- if (row.type === "writeRun") {
- const actor = memberOf(row.actorId);
+ if (row.type === "muted") {
+ const Icon = row.items.some((it) => it.kind === "write") ? Pencil : ShieldCheck;
return (
-
+ );
+}
+
+// ── one episode in the flow list: collapsed line + inline expansion ─────────
+function FlowEpisode({
+ ep,
+ memberOf,
+ expanded,
+ onToggle,
+ onJump,
+}: {
+ ep: Episode;
+ memberOf: MemberLookup;
+ expanded: boolean;
+ onToggle?: () => void;
+ onJump?: (msgId: string) => void;
+}) {
+ return (
+
-
-
+
+
);
}
- const n = row.n;
- const actor = memberOf(n.actorId);
- const isMsg = n.kind === "trigger" || n.kind === "user_msg" || n.kind === "bot_msg" || n.kind === "file";
- const clickable = Boolean(n.msgId && onJump);
+ return
+
+ {expanded &&
+ );
+}
+
+// ── participant strip: "who's here", recency-ordered avatar stack ──────────
+// A collaboration-focused overview the flow list alone doesn't give you: every
+// human/bot that's touched this channel, most-recently-active first, with
+// presence — and a one-click way to spotlight just their activity (reuses the
+// same `selected` filter the list/MemberFilter already read).
+const PARTICIPANT_STRIP_CAP = 10;
+
+function ParticipantStrip({
+ ids,
+ memberOf,
+ selected,
+ onToggle,
+}: {
+ ids: string[];
+ memberOf: MemberLookup;
+ selected: Set
+
);
}
@@ -426,10 +430,10 @@ function ActivityBody({ ctx }: { ctx: ViewBoardContext }) {
const [events, setEvents] = useState
+ {shown.map((id) => {
+ const mem = memberOf(id);
+ const name = nameOf(mem, id);
+ const active = selected.has(id);
return (
);
})}
+ {overflow > 0 && (
+ +{overflow}
+ )}
+ {online > 0 && {online} online}
+ {participantIds.length > 1 && (
+
- {/* Rail — the whole channel, one short node per row. */}
-
(null);
+ usePopoverDismiss(open, () => setOpen(false), rootRef);
const ql = q.trim().toLowerCase();
const shown = useMemo(
@@ -679,7 +655,7 @@ function MemberFilter({
);
return (
-
- setSelectedId(item.episodeId)}
- onHover={onHover}
- onLeave={onLeave}
- />
- ))}
-
-
- {/* Detail — the selected episode, expanded. */}
-
- rail · whole channel
-
- {railItems.map((item) => (
-
- {selectedEpisode ? (
-
+
- Select an episode to see its detail.
-
- )}
-
+ {episodes.map((ep) => (
+ toggleEpisode(ep.id)}
+ onJump={ctx.onJumpToMessage}
+ />
+ ))}
)}
- {/* Footer: lens tabs (left) + member filter (right) — mirrors the mock. */}
+ {/* Footer: lens tabs (left) + member filter (right). */}
- {(["episodes", "highlights", "all"] as Lens[]).map((l) => (
+ {(["flow", "highlights", "all"] as Lens[]).map((l) => (
- {/* Portalled to : the ViewBoard window is a transformed,
- overflow-hidden containing block that would otherwise clip a fixed
- child (and re-anchor its coordinates). */}
- {hover &&
- createPortal(
-
+
{open && (
-
);
diff --git a/frontend/src/features/chat/workbench/panels/FilePanel.tsx b/frontend/src/features/chat/workbench/panels/FilePanel.tsx
index 209a3dbb..8fd1bc6a 100644
--- a/frontend/src/features/chat/workbench/panels/FilePanel.tsx
+++ b/frontend/src/features/chat/workbench/panels/FilePanel.tsx
@@ -20,6 +20,7 @@ import type { FsEntry } from "../fsClient";
import { errMsg, useFileEditor } from "../jsonFile";
import { PinToggle } from "../PinToggle";
import { AttachContextButton } from "@/features/chat/context/ContextPickBar";
+import { addToContextTitle } from "@/features/chat/context/contextLabels";
import {
useContextPickStore,
selectionLineRange,
@@ -507,7 +508,7 @@ export function FilePanel({ ctx }: { ctx: WorkbenchContext }) {
channelId={ctx.channelId}
disabled={pinned.includes(selected)}
disabledTitle="Already pinned — sent in every prompt"
- title="Attach this file as context for your next message"
+ title={addToContextTitle("this file")}
item={{
id: `file:${selected}`,
verb: "fs.read",
@@ -526,7 +527,7 @@ export function FilePanel({ ctx }: { ctx: WorkbenchContext }) {
title={
pinned.includes(selected)
? "Already pinned — sent in every prompt"
- : "Attach the selected lines as context (select text first)"
+ : `${addToContextTitle("the selected lines")} (select text first)`
}
onClick={() => {
const sel = window.getSelection()?.toString() ?? "";
@@ -539,7 +540,7 @@ export function FilePanel({ ctx }: { ctx: WorkbenchContext }) {
ctx.channelId,
rangedFileContextItem(selected, range.start, range.end)
);
- setStatus(`Attached ${selected.split("/").pop()}:${range.start}-${range.end} as context`);
+ setStatus(`Added ${selected.split("/").pop()}:${range.start}-${range.end} to context`);
}}
className="rounded p-0.5 text-zinc-500 hover:text-indigo-300 disabled:opacity-40 disabled:hover:text-zinc-500"
>
diff --git a/frontend/src/features/chat/workbench/panels/SessionsPanel.tsx b/frontend/src/features/chat/workbench/panels/SessionsPanel.tsx
index f7823b3e..d15af12f 100644
--- a/frontend/src/features/chat/workbench/panels/SessionsPanel.tsx
+++ b/frontend/src/features/chat/workbench/panels/SessionsPanel.tsx
@@ -16,6 +16,7 @@
// the caller holds a session_create grant for) + optional working directory /
// extra roots. All mutations refetch the board.
import { useCallback, useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { notify, messageOf } from "@/lib/notify";
import toast from "react-hot-toast";
import { Layers, CircleDot, Plus, X, Bot as BotIcon, Info, Folder, ArrowUp } from "lucide-react";
import {
@@ -127,7 +128,7 @@ function SessionCard({
refetch();
toast.success("Applied");
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setLocalBusy(false);
}
@@ -407,7 +408,7 @@ function BotGroup({
refetch();
toast.success("Applied");
} catch (e) {
- toast.error(String(e));
+ notify.error(messageOf(e));
} finally {
setPromoting(false);
}
diff --git a/frontend/src/features/workbench/WorkbenchManager.tsx b/frontend/src/features/workbench/WorkbenchManager.tsx
index 4ee5b82a..dd51cad6 100644
--- a/frontend/src/features/workbench/WorkbenchManager.tsx
+++ b/frontend/src/features/workbench/WorkbenchManager.tsx
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useRef, useState } from "react";
-import { Blocks, Package, Puzzle, Trash2, Upload, X } from "lucide-react";
+import { AlertCircle, Blocks, CircleCheck, Package, Puzzle, Trash2, Upload } from "lucide-react";
+import { Banner } from "@/components/ui/banner";
import { useIsAdmin } from "@/stores/authStore";
import {
installPlugin,
@@ -94,22 +95,17 @@ export function WorkbenchManager() {
{(error || notice) && (
-
+
+
)}
{
+ setError(null);
+ setNotice(null);
+ }}
>
- {error ?? notice}
-
-
+ {error ?? notice}
+
)}
diff --git a/frontend/src/lib/notify.tsx b/frontend/src/lib/notify.tsx
new file mode 100644
index 00000000..0544a290
--- /dev/null
+++ b/frontend/src/lib/notify.tsx
@@ -0,0 +1,102 @@
+import toast from "react-hot-toast";
+import { AlertCircle, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import type { ComponentType } from "react";
+
+// Tier S of the global error system: a thin semantic layer over react-hot-toast.
+// Adds the severity icon and an optional ACTION (the exit — "Retry", "Reload"),
+// which the stock toast.error string form can't carry. Prefer these over raw
+// toast.* in new code; existing call sites migrate progressively.
+//
+// Durations: success is read-and-gone (3s); errors linger (6s), and an error
+// with an action stays long enough to actually click it (10s).
+
+type Severity = "error" | "warning" | "success" | "info";
+
+interface NotifyOpts {
+ /** At most one exit per toast; clicking it dismisses the toast. */
+ action?: { label: string; onClick: () => void };
+ /** Override the per-severity default (ms). */
+ duration?: number;
+}
+
+const ICONS: Record> = {
+ error: AlertCircle,
+ warning: TriangleAlert,
+ success: CircleCheck,
+ info: Info,
+};
+
+const ICON_CLS: Record = {
+ error: "text-red-400",
+ warning: "text-amber-400",
+ success: "text-emerald-400",
+ info: "text-indigo-400",
+};
+
+const DURATION: Record = {
+ error: 6000,
+ warning: 6000,
+ success: 3000,
+ info: 5000,
+};
+
+function show(severity: Severity, message: string, opts?: NotifyOpts): string {
+ const Icon = ICONS[severity];
+ const duration =
+ opts?.duration ??
+ (opts?.action && severity !== "success" ? 10000 : DURATION[severity]);
+ return toast.custom(
+ (t) => (
+
-
+
void;
/** Swap just the token (e.g. the fresh token returned after a password change). */
setToken: (token: string) => void;
+ markSessionExpired: () => void;
logout: () => void;
}
@@ -16,9 +21,11 @@ export const useAuthStore = create()(
(set) => ({
user: null,
token: null,
- setAuth: (user, token) => set({ user, token }),
- setToken: (token) => set({ token }),
- logout: () => set({ user: null, token: null }),
+ sessionExpired: false,
+ setAuth: (user, token) => set({ user, token, sessionExpired: false }),
+ setToken: (token) => set({ token, sessionExpired: false }),
+ markSessionExpired: () => set({ sessionExpired: true }),
+ logout: () => set({ user: null, token: null, sessionExpired: false }),
}),
{ name: "auth" }
)
diff --git a/packages/cheers-acp-connector-rs/Cargo.lock b/packages/cheers-acp-connector-rs/Cargo.lock
index fd20a02d..201ecace 100644
--- a/packages/cheers-acp-connector-rs/Cargo.lock
+++ b/packages/cheers-acp-connector-rs/Cargo.lock
@@ -318,7 +318,7 @@ dependencies = [
[[package]]
name = "cce-acp-connector"
-version = "0.1.27"
+version = "0.1.28"
dependencies = [
"agent-client-protocol",
"agent-client-protocol-schema",
diff --git a/packages/cheers-acp-connector-rs/Cargo.toml b/packages/cheers-acp-connector-rs/Cargo.toml
index 7b635f99..3b645f88 100644
--- a/packages/cheers-acp-connector-rs/Cargo.toml
+++ b/packages/cheers-acp-connector-rs/Cargo.toml
@@ -7,7 +7,7 @@ members = [".", "bridge-protocol"]
[package]
name = "cce-acp-connector"
-version = "0.1.27"
+version = "0.1.28"
edition = "2021"
[[bin]]
diff --git a/packages/cheers-mcp-server/Cargo.lock b/packages/cheers-mcp-server/Cargo.lock
index 61237ce1..781cf3ac 100644
--- a/packages/cheers-mcp-server/Cargo.lock
+++ b/packages/cheers-mcp-server/Cargo.lock
@@ -62,7 +62,7 @@ checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
[[package]]
name = "cheers-mcp-server"
-version = "0.1.0"
+version = "0.1.1"
dependencies = [
"anyhow",
"reqwest",
diff --git a/packages/cheers-mcp-server/Cargo.toml b/packages/cheers-mcp-server/Cargo.toml
index 96f01630..9274bd5b 100644
--- a/packages/cheers-mcp-server/Cargo.toml
+++ b/packages/cheers-mcp-server/Cargo.toml
@@ -1,6 +1,6 @@
[package]
name = "cheers-mcp-server"
-version = "0.1.0"
+version = "0.1.1"
edition = "2021"
[[bin]]
diff --git a/packages/cheers-mcp-server/src/main.rs b/packages/cheers-mcp-server/src/main.rs
index 7a206351..efd48bb0 100644
--- a/packages/cheers-mcp-server/src/main.rs
+++ b/packages/cheers-mcp-server/src/main.rs
@@ -254,6 +254,12 @@ fn build_resource_call(
"list_members" => with_channel(client, args, "channel.members"),
"messages_index" => with_channel(client, args, "channel.messages.index"),
"get_context" => with_channel(client, args, "channel.context"),
+ // Channel-scoped read verbs the composer's "Add context" quick-pick offers as
+ // references (plan / sessions / cost). The recipient resolves them through
+ // these tools; without a mapping the reference is dead (unknown tools reject).
+ "read_plan" => with_channel(client, args, "channel.plan.read"),
+ "read_sessions" => with_channel(client, args, "channel.sessions.read"),
+ "read_cost" => with_channel(client, args, "channel.usage.read"),
"inbox_list" => with_channel(client, args, "channel.files"),
"read_messages" => {
let mut params = Map::new();
@@ -514,6 +520,7 @@ fn build_resource_call(
copy_required(args, &mut params, "bot_id", "bot_id")?;
copy_required(args, &mut params, "path", "path")?;
copy_optional(args, &mut params, "session_id", "session_id");
+ copy_optional(args, &mut params, "root", "root");
Ok(ResourceCall {
resource: "workspace.read",
params,
@@ -611,6 +618,9 @@ fn tool_definitions() -> Vec {
number_prop("limit", "Default 50, max 200.", Some(1), Some(200)),
], vec!["channel_id"]), true, false),
tool("get_context", "Get channel context", "Condensed channel context bundle (topic, pinned info, summary).", object_schema(vec![channel_id_prop()], vec!["channel_id"]), true, false),
+ tool("read_plan", "Read the channel plan", "Read the channel's live plan / progress board (the agent's task list and status). Use this to resolve a \"plan\" context reference someone handed you.", object_schema(vec![channel_id_prop()], vec!["channel_id"]), true, false),
+ tool("read_sessions", "List channel agent sessions", "List the bot sessions active in this channel (id, bot, mode). Use this to resolve a \"sessions\" context reference.", object_schema(vec![channel_id_prop()], vec!["channel_id"]), true, false),
+ tool("read_cost", "Read channel usage / cost", "Read token-usage / cost totals for this channel. Use this to resolve a \"cost\" context reference.", object_schema(vec![channel_id_prop()], vec!["channel_id"]), true, false),
tool("leave_channel", "Leave a channel", "Remove yourself from a channel you are a member of (like a human member leaving). Not allowed for DMs. You stop receiving that channel's tasks immediately; a human has to re-invite you to get you back, so only leave when you are sure your work there is done.", object_schema(vec![channel_id_prop()], vec!["channel_id"]), false, true),
tool("inbox_list", "List chat attachments (inbox)", "List files people UPLOADED to this channel's chat (pdf/csv/images/docx). Each has a FILE_ID (uuid); open one with inbox_open. Read-only; these are NOT your workspace files — save your own work with desk_* instead.", object_schema(vec![channel_id_prop()], vec!["channel_id"]), true, false),
tool("inbox_open", "Open a chat attachment by file_id", "Open a channel attachment by its FILE_ID (from inbox_list). Text files (csv/txt/md/json) return content directly. Binaries (image/pdf/zip/docx) first return kind:\"binary\"; re-open with as_base64:true to get the raw bytes as base64 (<=8MB) through THIS tool, then decode them locally (e.g. write to a file and unzip). Do NOT try to fetch download_url yourself — it is an authenticated human-UI endpoint and you have no gateway session for it (you would just get 401). Attachments are read-only — to edit, copy the content into your workspace with desk_write.", object_schema(vec![
@@ -685,6 +695,7 @@ fn tool_definitions() -> Vec {
string_prop("bot_id", "member_id (uuid) of the bot whose workspace file to read — the owner named in the reference."),
string_prop("path", "File path within that bot's workspace, from the reference."),
string_prop("session_id", "Optional session id from the reference, scoping which workspace root to read."),
+ string_prop("root", "Optional workspace root the path is relative to, from the reference. Pass it through verbatim so you read the exact file the reference points at."),
], vec!["channel_id", "bot_id", "path"]), true, false),
]
}
diff --git a/server/src/gateway/ws/agent_bridge.rs b/server/src/gateway/ws/agent_bridge.rs
index 983dfdfe..5551738a 100644
--- a/server/src/gateway/ws/agent_bridge.rs
+++ b/server/src/gateway/ws/agent_bridge.rs
@@ -1997,6 +1997,10 @@ async fn broker_workspace_read(state: &AppState, reader_bot_id: Uuid, frame: &Va
return bridge_frames::resource_res_err(req_id, "INVALID_PARAMS", "path required");
};
let session_id = uuid_param("session_id");
+ // The root the ref's `path` is relative to (from the picker's `treeRoot`). Without
+ // it the read falls back to the connector's default cwd / first allowed root, which
+ // can resolve a different same-named file — so pass it through when present.
+ let root = str_param("root");
match crate::api::workspace::read_workspace_file_as_bot(
state,
@@ -2004,7 +2008,7 @@ async fn broker_workspace_read(state: &AppState, reader_bot_id: Uuid, frame: &Va
reader_bot_id,
channel_id,
&path,
- None,
+ root.as_deref(),
session_id,
)
.await
+
+ ),
+ { duration }
+ );
+}
+
+export const notify = {
+ error: (message: string, opts?: NotifyOpts) => show("error", message, opts),
+ warning: (message: string, opts?: NotifyOpts) => show("warning", message, opts),
+ success: (message: string, opts?: NotifyOpts) => show("success", message, opts),
+ info: (message: string, opts?: NotifyOpts) => show("info", message, opts),
+};
+
+/** The human message of an unknown thrown value. Unlike `String(e)`, never
+ * yields "Error: …" / "[object Object]" — the api client already humanizes
+ * ApiError messages, so `e.message` is the renderable sentence. */
+export function messageOf(e: unknown, fallback = "Something went wrong"): string {
+ if (e instanceof Error) return e.message || fallback;
+ if (typeof e === "string" && e.trim()) return e.trim();
+ return fallback;
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index fa9c8766..eefed06f 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "react-hot-toast";
import App from "./App";
+import { ErrorBoundary } from "./components/ErrorBoundary";
import "./index.css";
const queryClient = new QueryClient({
@@ -19,7 +20,9 @@ createRoot(document.getElementById("root")!).render(
+ {message}
+ {opts?.action && (
+
+
+
+
+
+ )}
+