Katia Bulatova
9a3bee0288
Stacked on #4418. Merge that first. The UI slice of the dashboard agent: the side panel, the chat transport wiring, message and card rendering, suggested prompts, and chat history. #4418 works without this — the system is simply invisible. The diff is mostly components, so the notes below cover only the three decisions you can't read off the markup. Behavior and a hands-on walkthrough live in GUIDEBOOK.md, which lands with #4525. ## Decisions worth knowing - **Action rows always render at the end of a turn.** The model's emission order isn't trusted for layout, so action blocks are split out of the stream and appended last. Display only — `answered` stays keyed on the emission index. - **The last-chat memory is org-true.** It's keyed by the chat's own organization, and a foreign or deleted chat comes back as a 404 the client treats as gone, rather than an empty chat it keeps around. - **A dead stream self-heals from the settled transcript.** Terminal records are written to the chat row after the client's stream closes, so the panel re-reads it. The poll gate is any unfinished turn — a dangling tool part, not just an open investigation. ## Notes - Gated by `canAccessDashboardAgent`; no behavior change with the flag off. - Page marks: `handle.agentPageContext` on 47 routes, ~20 lines each. - Entry points: Ask Trigger button, ⌘J, Help & Feedback. The old ⌘I and `?aiHelp=` links keep working. ## Screenshots <img width="1440" height="788" alt="Screenshot 2026-08-07 at 15 14 29" src="https://github.com/user-attachments/assets/f4e89e8d-13ed-4be3-a88d-d5cca3ece0fa" />
70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import { lazy } from "react";
|
|
import type { CodeHighlighterPlugin, UrlTransform } from "streamdown";
|
|
|
|
const SAFE_LINK_SCHEMES = new Set(["http:", "https:", "mailto:"]);
|
|
|
|
/**
|
|
* URL policy for model-authored markdown. A remote image is fetched the moment it
|
|
* renders — no click — so it is a zero-click data beacon; we drop the src of any
|
|
* non-local image. Links stay clickable but only for safe, human-followable schemes.
|
|
* streamdown removes an attribute whose transform returns undefined, so no request fires.
|
|
*/
|
|
export const restrictModelUrls: UrlTransform = (url, key, node) => {
|
|
const value = url.trim();
|
|
const isImage = node.tagName === "img" || key === "src" || key === "srcset";
|
|
// What the browser will actually resolve, which is not what `trim()` leaves: the URL parser
|
|
// drops C0 controls (`trim()` keeps them) and reads `\` as `/` for special schemes, so
|
|
// a leading-control `//evil.tld` and `\\evil.tld` both name a remote host. Classify on this; return the
|
|
// original `url` untouched whenever it is allowed.
|
|
const normalized = value
|
|
.replace(/[\u0000-\u001f]/g, "")
|
|
.replace(/^[/\\]+/, (run) => "/".repeat(run.length));
|
|
|
|
if (isImage) {
|
|
// Inline images carry their own bytes; a relative path resolves to our own origin.
|
|
if (/^data:/i.test(normalized) || /^blob:/i.test(normalized)) return url;
|
|
// Absolute or protocol-relative means a remote host — strip it so nothing is fetched.
|
|
if (/^[a-z][a-z0-9+.-]*:/i.test(normalized) || normalized.startsWith("//")) return undefined;
|
|
return url;
|
|
}
|
|
|
|
// Links: relative and protocol-relative are fine; otherwise require a safe scheme.
|
|
if (normalized.startsWith("//")) return url;
|
|
const schemeMatch = /^([a-z][a-z0-9+.-]*):/i.exec(normalized);
|
|
if (!schemeMatch) return url;
|
|
return SAFE_LINK_SCHEMES.has(`${schemeMatch[1].toLowerCase()}:`) ? url : undefined;
|
|
};
|
|
|
|
export const StreamdownRenderer = lazy(() =>
|
|
Promise.all([import("streamdown"), import("@streamdown/code"), import("./shikiTheme")]).then(
|
|
([{ Streamdown }, { createCodePlugin }, { triggerDarkTheme }]) => {
|
|
// Type assertion needed: @streamdown/code and streamdown resolve different shiki
|
|
// versions under pnpm, causing structurally-identical CodeHighlighterPlugin types
|
|
// to be considered incompatible (different BundledLanguage string unions).
|
|
const codePlugin = createCodePlugin({
|
|
themes: [triggerDarkTheme, triggerDarkTheme],
|
|
}) as unknown as CodeHighlighterPlugin;
|
|
|
|
return {
|
|
default: ({
|
|
children,
|
|
isAnimating = false,
|
|
}: {
|
|
children: string;
|
|
isAnimating?: boolean;
|
|
}) => (
|
|
<Streamdown
|
|
isAnimating={isAnimating}
|
|
plugins={{ code: codePlugin }}
|
|
controls={{ code: { copy: false, download: false } }}
|
|
urlTransform={restrictModelUrls}
|
|
linkSafety={{ enabled: false }}
|
|
>
|
|
{children}
|
|
</Streamdown>
|
|
),
|
|
};
|
|
}
|
|
)
|
|
);
|