v1.13.19-html-artifact-panes: pane-based artifact viewer with on-request HTML
Every assistant message gets an "Open in pane" affordance that opens the
message in the workspace splitter — Markdown pane (Copy + Download .md) by
default; HTML pane (Download .html only) when the model emits a self-contained
<!DOCTYPE html> or fenced ```html artifact. BOOCHAT.md rule keeps Markdown
default at every length; HTML opt-in on explicit user request.
Backend: services/artifacts.ts (slug derivation + write helpers with
symlink-escape guard via realpath-after-mkdir), routes/artifacts.ts (POST
download + GET stream with nosniff + CSP sandbox defense-in-depth), HTML
detection in finalizeCompletion writing a new message_parts.kind='html_artifact'
row (schema CHECK extended via v1.13.13 pattern), graceful 1MB cap via the
pure decideHtmlArtifactWrite helper. PartKind union extended.
Frontend: MarkdownRenderer.tsx extracted from MessageBubble's inline
MarkdownBody for reuse; MarkdownArtifactPane.tsx + HtmlArtifactPane.tsx with
loading/error states; pane state is reference-only ({chat_id, message_id,
title}) — content fetched on mount to keep workspace_panes jsonb small and
avoid 1MB blobs riding session_workspace_updated frames. iframe sandbox
locked to allow-scripts allow-clipboard-write allow-downloads with no
allow-same-origin, srcDoc not src. openInPane discriminates 404 (expected
fallback) from real errors (toast + bail). PanelRightOpen icon button with
mobile 44px tap-target.
31 new server unit tests including a real-symlink filesystem case; 332/332
server tests passing, tsc clean both sides, pnpm -C apps/web build green.
Smoke deferred to first deploy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ import { registerProjectRoutes } from './routes/projects.js';
|
||||
import { registerSessionRoutes } from './routes/sessions.js';
|
||||
import { registerSettingsRoutes } from './routes/settings.js';
|
||||
import { registerMessageRoutes } from './routes/messages.js';
|
||||
import { registerArtifactRoutes } from './routes/artifacts.js';
|
||||
import { registerChatRoutes } from './routes/chats.js';
|
||||
import { registerSidebarRoutes } from './routes/sidebar.js';
|
||||
import { registerWebSocket } from './routes/ws.js';
|
||||
@@ -160,6 +161,7 @@ async function main() {
|
||||
broker.publishFrame(sessionId, frame as import('./types/ws-frames.js').WsFrame);
|
||||
},
|
||||
});
|
||||
registerArtifactRoutes(app, sql);
|
||||
registerSkillsRoutes(app, sql, {
|
||||
enqueueInference: (sessionId, chatId, assistantId, user) => {
|
||||
inference.enqueue(sessionId, chatId, assistantId, user);
|
||||
|
||||
231
apps/server/src/routes/artifacts.ts
Normal file
231
apps/server/src/routes/artifacts.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
// v1.14.x-html-artifact-panes: artifact download routes.
|
||||
//
|
||||
// Two endpoints:
|
||||
// POST /api/chats/:id/messages/:msg_id/artifacts/download?fmt=md|html
|
||||
// Materialises a file under <projectRoot>/.boocode/artifacts/ and
|
||||
// returns {path, url}. fmt=html requires an existing html_artifact part
|
||||
// on the message (404 otherwise). fmt=md works on any assistant
|
||||
// message with non-empty content.
|
||||
//
|
||||
// GET /api/projects/:project_id/artifacts/:filename
|
||||
// Streams a previously-written artifact back with
|
||||
// Content-Disposition: attachment. Path-guarded to the project's
|
||||
// artifacts dir; rejects traversal attempts.
|
||||
|
||||
import { createReadStream } from 'node:fs';
|
||||
import { realpath, stat } from 'node:fs/promises';
|
||||
import { resolve, sep, basename } from 'node:path';
|
||||
import type { FastifyInstance } from 'fastify';
|
||||
import { z } from 'zod';
|
||||
import type { Sql } from '../db.js';
|
||||
import {
|
||||
writeHtmlArtifact,
|
||||
writeMarkdownArtifact,
|
||||
type HtmlArtifactPayload,
|
||||
} from '../services/artifacts.js';
|
||||
|
||||
const DownloadQuery = z.object({
|
||||
fmt: z.enum(['md', 'html']),
|
||||
});
|
||||
|
||||
// Filename safety: alnum, dash, dot, underscore only. Blocks `..`, slashes,
|
||||
// nul bytes, etc. before we even touch the filesystem.
|
||||
const FilenameRe = /^[A-Za-z0-9._-]+$/;
|
||||
|
||||
interface ChatRow {
|
||||
id: string;
|
||||
session_id: string;
|
||||
project_id: string;
|
||||
project_path: string;
|
||||
}
|
||||
|
||||
interface MessageRow {
|
||||
id: string;
|
||||
chat_id: string;
|
||||
role: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function registerArtifactRoutes(app: FastifyInstance, sql: Sql): void {
|
||||
app.post<{
|
||||
Params: { id: string; msg_id: string };
|
||||
Querystring: { fmt?: string };
|
||||
}>(
|
||||
'/api/chats/:id/messages/:msg_id/artifacts/download',
|
||||
async (req, reply) => {
|
||||
const parsed = DownloadQuery.safeParse(req.query);
|
||||
if (!parsed.success) {
|
||||
reply.code(400);
|
||||
return { error: 'invalid query', details: parsed.error.flatten() };
|
||||
}
|
||||
const { fmt } = parsed.data;
|
||||
const { id: chatId, msg_id: messageId } = req.params;
|
||||
|
||||
const chatRows = await sql<ChatRow[]>`
|
||||
SELECT c.id, c.session_id, s.project_id, p.path AS project_path
|
||||
FROM chats c
|
||||
JOIN sessions s ON s.id = c.session_id
|
||||
JOIN projects p ON p.id = s.project_id
|
||||
WHERE c.id = ${chatId}
|
||||
`;
|
||||
if (chatRows.length === 0) {
|
||||
reply.code(404);
|
||||
return { error: 'chat not found' };
|
||||
}
|
||||
const chat = chatRows[0]!;
|
||||
|
||||
const msgRows = await sql<MessageRow[]>`
|
||||
SELECT id, chat_id, role, content
|
||||
FROM messages
|
||||
WHERE id = ${messageId} AND chat_id = ${chatId}
|
||||
`;
|
||||
if (msgRows.length === 0) {
|
||||
reply.code(404);
|
||||
return { error: 'message not found' };
|
||||
}
|
||||
const msg = msgRows[0]!;
|
||||
if (msg.role !== 'assistant') {
|
||||
reply.code(400);
|
||||
return { error: 'only assistant messages produce artifacts' };
|
||||
}
|
||||
|
||||
const ctx = { projectId: chat.project_id, projectRoot: chat.project_path };
|
||||
|
||||
try {
|
||||
if (fmt === 'md') {
|
||||
if (!msg.content || msg.content.trim().length === 0) {
|
||||
reply.code(400);
|
||||
return { error: 'message has no content to export' };
|
||||
}
|
||||
const result = await writeMarkdownArtifact(
|
||||
{ content: msg.content },
|
||||
ctx,
|
||||
);
|
||||
return result;
|
||||
}
|
||||
// fmt === 'html': require an html_artifact part on the message.
|
||||
const partRows = await sql<{ payload: HtmlArtifactPayload }[]>`
|
||||
SELECT payload
|
||||
FROM message_parts
|
||||
WHERE message_id = ${messageId} AND kind = 'html_artifact'
|
||||
ORDER BY sequence ASC
|
||||
LIMIT 1
|
||||
`;
|
||||
if (partRows.length === 0) {
|
||||
reply.code(404);
|
||||
return { error: 'no html_artifact part on this message' };
|
||||
}
|
||||
const result = await writeHtmlArtifact(partRows[0]!.payload, ctx);
|
||||
return result;
|
||||
} catch (err) {
|
||||
req.log.error({ err, messageId, fmt }, 'artifact write failed');
|
||||
reply.code(500);
|
||||
return {
|
||||
error: err instanceof Error ? err.message : 'artifact write failed',
|
||||
};
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// v1.14.x-html-artifact-panes: HtmlArtifactPane needs the payload on click
|
||||
// to render its iframe. Returns 404 when the message has no html_artifact
|
||||
// sibling part — frontend uses that signal to open the markdown_artifact
|
||||
// pane variant instead. Payload shape matches HtmlArtifactPayload in
|
||||
// services/artifacts.ts.
|
||||
app.get<{ Params: { id: string; msg_id: string } }>(
|
||||
'/api/chats/:id/messages/:msg_id/html_artifact',
|
||||
async (req, reply) => {
|
||||
const { id: chatId, msg_id: messageId } = req.params;
|
||||
const partRows = await sql<{ payload: HtmlArtifactPayload }[]>`
|
||||
SELECT payload
|
||||
FROM message_parts mp
|
||||
JOIN messages m ON m.id = mp.message_id
|
||||
WHERE mp.message_id = ${messageId}
|
||||
AND m.chat_id = ${chatId}
|
||||
AND mp.kind = 'html_artifact'
|
||||
ORDER BY mp.sequence ASC
|
||||
LIMIT 1
|
||||
`;
|
||||
if (partRows.length === 0) {
|
||||
reply.code(404);
|
||||
return { error: 'no html_artifact part on this message' };
|
||||
}
|
||||
return partRows[0]!.payload;
|
||||
},
|
||||
);
|
||||
|
||||
app.get<{ Params: { project_id: string; filename: string } }>(
|
||||
'/api/projects/:project_id/artifacts/:filename',
|
||||
async (req, reply) => {
|
||||
const { project_id: projectId, filename } = req.params;
|
||||
// Strip directory components defensively; only the basename is allowed.
|
||||
const base = basename(filename);
|
||||
if (base !== filename || !FilenameRe.test(base)) {
|
||||
reply.code(400);
|
||||
return { error: 'invalid filename' };
|
||||
}
|
||||
|
||||
const projectRows = await sql<{ id: string; path: string }[]>`
|
||||
SELECT id, path FROM projects WHERE id = ${projectId}
|
||||
`;
|
||||
if (projectRows.length === 0) {
|
||||
reply.code(404);
|
||||
return { error: 'project not found' };
|
||||
}
|
||||
const project = projectRows[0]!;
|
||||
|
||||
let resolvedRoot: string;
|
||||
try {
|
||||
resolvedRoot = await realpath(project.path);
|
||||
} catch {
|
||||
reply.code(404);
|
||||
return { error: 'project path missing' };
|
||||
}
|
||||
const artifactsDir = resolve(resolvedRoot, '.boocode/artifacts');
|
||||
const absPath = resolve(artifactsDir, base);
|
||||
if (!absPath.startsWith(artifactsDir + sep)) {
|
||||
reply.code(400);
|
||||
return { error: 'path traversal rejected' };
|
||||
}
|
||||
// Close the symlink-escape gap: if `.boocode/artifacts` (or an
|
||||
// ancestor) is a symlink pointing outside resolvedRoot, the lexical
|
||||
// prefix check above passes but the actual read lands outside the
|
||||
// sandbox. Realpath the artifacts dir and re-verify.
|
||||
try {
|
||||
const realArtifactsDir = await realpath(artifactsDir);
|
||||
if (
|
||||
realArtifactsDir !== resolvedRoot &&
|
||||
!realArtifactsDir.startsWith(resolvedRoot + sep)
|
||||
) {
|
||||
reply.code(400);
|
||||
return { error: 'path traversal rejected' };
|
||||
}
|
||||
} catch {
|
||||
reply.code(404);
|
||||
return { error: 'artifact not found' };
|
||||
}
|
||||
try {
|
||||
await stat(absPath);
|
||||
} catch {
|
||||
reply.code(404);
|
||||
return { error: 'artifact not found' };
|
||||
}
|
||||
const ext = base.toLowerCase().endsWith('.html')
|
||||
? 'text/html; charset=utf-8'
|
||||
: base.toLowerCase().endsWith('.md')
|
||||
? 'text/markdown; charset=utf-8'
|
||||
: 'application/octet-stream';
|
||||
reply.header('Content-Type', ext);
|
||||
// Defense-in-depth on LLM-generated HTML served through this route.
|
||||
// Authelia gates the proxy; these headers limit blast radius if a
|
||||
// payload tries to escape that boundary in-browser.
|
||||
reply.header('X-Content-Type-Options', 'nosniff');
|
||||
reply.header('Content-Security-Policy', 'sandbox');
|
||||
reply.header(
|
||||
'Content-Disposition',
|
||||
`attachment; filename="${base.replace(/"/g, '')}"`,
|
||||
);
|
||||
return reply.send(createReadStream(absPath));
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -13,12 +13,37 @@ const CreateBody = z.object({
|
||||
agent_id: z.string().min(1).max(200).nullable().optional(),
|
||||
});
|
||||
|
||||
// v1.14.x-html-artifact-panes: 'markdown_artifact' + 'html_artifact' added
|
||||
// as pane kinds. Pane state is a reference only (chat_id + message_id +
|
||||
// title) — the actual artifact body is fetched from the message row or
|
||||
// message_parts.payload by the pane component on mount.
|
||||
const MarkdownArtifactStateZ = z.object({
|
||||
chat_id: z.string().min(1).max(200),
|
||||
message_id: z.string().min(1).max(200),
|
||||
title: z.string().max(500),
|
||||
});
|
||||
const HtmlArtifactStateZ = z.object({
|
||||
chat_id: z.string().min(1).max(200),
|
||||
message_id: z.string().min(1).max(200),
|
||||
title: z.string().max(500),
|
||||
});
|
||||
|
||||
const WorkspacePaneZ = z.object({
|
||||
id: z.string().min(1).max(200),
|
||||
kind: z.enum(['chat', 'terminal', 'agent', 'empty', 'settings']),
|
||||
kind: z.enum([
|
||||
'chat',
|
||||
'terminal',
|
||||
'agent',
|
||||
'empty',
|
||||
'settings',
|
||||
'markdown_artifact',
|
||||
'html_artifact',
|
||||
]),
|
||||
chatId: z.string().min(1).max(200).optional(),
|
||||
chatIds: z.array(z.string().min(1).max(200)).max(50),
|
||||
activeChatIdx: z.number().int(),
|
||||
markdown_artifact_state: MarkdownArtifactStateZ.optional(),
|
||||
html_artifact_state: HtmlArtifactStateZ.optional(),
|
||||
});
|
||||
|
||||
const WorkspacePanesBody = z.object({
|
||||
|
||||
@@ -51,7 +51,7 @@ CREATE TABLE IF NOT EXISTS message_parts (
|
||||
kind text NOT NULL,
|
||||
payload jsonb NOT NULL,
|
||||
created_at timestamptz NOT NULL DEFAULT clock_timestamp(),
|
||||
CONSTRAINT message_parts_kind_chk CHECK (kind IN ('text', 'tool_call', 'tool_result', 'reasoning', 'step_start', 'synthesis')),
|
||||
CONSTRAINT message_parts_kind_chk CHECK (kind IN ('text', 'tool_call', 'tool_result', 'reasoning', 'step_start', 'synthesis', 'html_artifact')),
|
||||
CONSTRAINT message_parts_seq_uniq UNIQUE (message_id, sequence)
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS message_parts_msg_seq_idx ON message_parts (message_id, sequence);
|
||||
@@ -79,6 +79,10 @@ CREATE INDEX IF NOT EXISTS message_parts_hidden_idx
|
||||
-- 'synthesis'; drop + re-add the constraint with the extended enum. Fresh
|
||||
-- installs hit the inline constraint above (already updated) and skip this
|
||||
-- block via the pg_constraint guard.
|
||||
-- v1.14.x-html-artifact-panes: extend the same constraint with 'html_artifact'.
|
||||
-- DROP IF EXISTS + DO $$ pg_constraint $$ guard remains idempotent across
|
||||
-- both v1.13.13 and v1.14.x boots; the IN list below is the union of every
|
||||
-- kind ever shipped.
|
||||
ALTER TABLE message_parts DROP CONSTRAINT IF EXISTS message_parts_kind_chk;
|
||||
DO $$
|
||||
BEGIN
|
||||
@@ -87,7 +91,7 @@ BEGIN
|
||||
) THEN
|
||||
ALTER TABLE message_parts
|
||||
ADD CONSTRAINT message_parts_kind_chk
|
||||
CHECK (kind IN ('text', 'tool_call', 'tool_result', 'reasoning', 'step_start', 'synthesis'));
|
||||
CHECK (kind IN ('text', 'tool_call', 'tool_result', 'reasoning', 'step_start', 'synthesis', 'html_artifact'));
|
||||
END IF;
|
||||
END $$;
|
||||
|
||||
|
||||
261
apps/server/src/services/__tests__/artifacts.test.ts
Normal file
261
apps/server/src/services/__tests__/artifacts.test.ts
Normal file
@@ -0,0 +1,261 @@
|
||||
import { mkdtemp, mkdir, readFile, rm, symlink } from 'node:fs/promises';
|
||||
import { tmpdir } from 'node:os';
|
||||
import { join } from 'node:path';
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
|
||||
import {
|
||||
decideHtmlArtifactWrite,
|
||||
deriveHtmlSlug,
|
||||
deriveHtmlTitle,
|
||||
deriveMarkdownSlug,
|
||||
detectHtmlArtifact,
|
||||
HTML_ARTIFACT_MAX_BYTES,
|
||||
writeHtmlArtifact,
|
||||
writeMarkdownArtifact,
|
||||
} from '../artifacts.js';
|
||||
import { PathScopeError } from '../path_guard.js';
|
||||
|
||||
describe('deriveMarkdownSlug', () => {
|
||||
it('uses the first # heading when present', () => {
|
||||
expect(deriveMarkdownSlug('# Hello World\n\nbody')).toBe('hello-world');
|
||||
});
|
||||
|
||||
it('falls back to first 6 words', () => {
|
||||
const s = deriveMarkdownSlug('the quick brown fox jumps over the lazy dog');
|
||||
expect(s).toBe('the-quick-brown-fox-jumps-over');
|
||||
});
|
||||
|
||||
it('returns "artifact" for empty input', () => {
|
||||
expect(deriveMarkdownSlug('')).toBe('artifact');
|
||||
});
|
||||
|
||||
it('caps at 60 chars and lowercases', () => {
|
||||
const long = '# ' + 'A'.repeat(200);
|
||||
const s = deriveMarkdownSlug(long);
|
||||
expect(s.length).toBeLessThanOrEqual(60);
|
||||
expect(s).toMatch(/^[a-z0-9-]+$/);
|
||||
});
|
||||
|
||||
it('strips trailing punctuation', () => {
|
||||
expect(deriveMarkdownSlug('# Hello, World!!!')).toBe('hello-world');
|
||||
});
|
||||
});
|
||||
|
||||
describe('deriveHtmlSlug', () => {
|
||||
it('prefers payload.title when set', () => {
|
||||
expect(
|
||||
deriveHtmlSlug({ html_content: '<html></html>', title: 'My Title' }),
|
||||
).toBe('my-title');
|
||||
});
|
||||
|
||||
it('falls back to <title> tag', () => {
|
||||
expect(
|
||||
deriveHtmlSlug({
|
||||
html_content: '<html><head><title>Page Title</title></head></html>',
|
||||
title: null,
|
||||
}),
|
||||
).toBe('page-title');
|
||||
});
|
||||
|
||||
it('falls back to first <h1> when no <title>', () => {
|
||||
expect(
|
||||
deriveHtmlSlug({
|
||||
html_content: '<html><body><h1>Heading One</h1></body></html>',
|
||||
title: null,
|
||||
}),
|
||||
).toBe('heading-one');
|
||||
});
|
||||
|
||||
it('falls back to inner text words', () => {
|
||||
expect(
|
||||
deriveHtmlSlug({
|
||||
html_content: '<div>one two three four five six seven</div>',
|
||||
title: null,
|
||||
}),
|
||||
).toBe('one-two-three-four-five-six');
|
||||
});
|
||||
});
|
||||
|
||||
describe('deriveHtmlTitle', () => {
|
||||
it('returns <title> content', () => {
|
||||
expect(deriveHtmlTitle('<html><head><title>T</title></head></html>')).toBe('T');
|
||||
});
|
||||
|
||||
it('falls back to <h1>', () => {
|
||||
expect(deriveHtmlTitle('<body><h1>H</h1></body>')).toBe('H');
|
||||
});
|
||||
|
||||
it('falls back to first 80 chars of inner text', () => {
|
||||
const html = '<div>' + 'x '.repeat(100) + '</div>';
|
||||
const t = deriveHtmlTitle(html);
|
||||
expect(t).not.toBeNull();
|
||||
expect(t!.length).toBeLessThanOrEqual(80);
|
||||
});
|
||||
|
||||
it('returns null for empty html', () => {
|
||||
expect(deriveHtmlTitle('')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('detectHtmlArtifact', () => {
|
||||
it('detects <!DOCTYPE html> prefix case-insensitively', () => {
|
||||
const html = '<!doctype HTML><html><body>x</body></html>';
|
||||
expect(detectHtmlArtifact(html)).toBe(html);
|
||||
});
|
||||
|
||||
it('strips leading/trailing whitespace before matching', () => {
|
||||
const html = '\n\n<!DOCTYPE html>\n<html></html>\n';
|
||||
expect(detectHtmlArtifact(html)).toBe(html.trim());
|
||||
});
|
||||
|
||||
it('detects fenced ```html block wrapping entire message', () => {
|
||||
const wrapped = '```html\n<!DOCTYPE html>\n<html></html>\n```';
|
||||
expect(detectHtmlArtifact(wrapped)).toContain('<!DOCTYPE html>');
|
||||
});
|
||||
|
||||
it('rejects plain markdown', () => {
|
||||
expect(detectHtmlArtifact('# heading\n\nsome text')).toBeNull();
|
||||
});
|
||||
|
||||
it('rejects message with prose before the doctype', () => {
|
||||
expect(
|
||||
detectHtmlArtifact('Here you go: <!DOCTYPE html><html></html>'),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it('rejects empty input', () => {
|
||||
expect(detectHtmlArtifact('')).toBeNull();
|
||||
expect(detectHtmlArtifact(' \n ')).toBeNull();
|
||||
});
|
||||
|
||||
it('rejects fenced block without doctype/<html>', () => {
|
||||
expect(detectHtmlArtifact('```html\n<div>x</div>\n```')).toBeNull();
|
||||
});
|
||||
|
||||
it('accepts fenced block containing <html> tag (no doctype)', () => {
|
||||
const r = detectHtmlArtifact('```html\n<html><body>x</body></html>\n```');
|
||||
expect(r).toContain('<html>');
|
||||
});
|
||||
});
|
||||
|
||||
describe('writeMarkdownArtifact / writeHtmlArtifact', () => {
|
||||
let projectRoot: string;
|
||||
beforeEach(async () => {
|
||||
projectRoot = await mkdtemp(join(tmpdir(), 'artifacts-test-'));
|
||||
});
|
||||
afterEach(async () => {
|
||||
await rm(projectRoot, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
it('writes a markdown artifact under .boocode/artifacts/', async () => {
|
||||
const result = await writeMarkdownArtifact(
|
||||
{ content: '# Hello\n\nbody' },
|
||||
{ projectId: 'pid', projectRoot },
|
||||
);
|
||||
expect(result.path).toMatch(/\.boocode\/artifacts\/hello-\d+\.md$/);
|
||||
expect(result.url).toMatch(/^\/api\/projects\/pid\/artifacts\/hello-\d+\.md$/);
|
||||
const written = await readFile(result.path, 'utf8');
|
||||
expect(written).toBe('# Hello\n\nbody');
|
||||
});
|
||||
|
||||
it('writes an html artifact', async () => {
|
||||
const result = await writeHtmlArtifact(
|
||||
{
|
||||
html_content: '<!DOCTYPE html><html><head><title>X</title></head></html>',
|
||||
char_count: 56,
|
||||
title: 'X',
|
||||
},
|
||||
{ projectId: 'pid', projectRoot },
|
||||
);
|
||||
expect(result.path).toMatch(/\.boocode\/artifacts\/x-\d+\.html$/);
|
||||
const written = await readFile(result.path, 'utf8');
|
||||
expect(written).toContain('<!DOCTYPE html>');
|
||||
});
|
||||
|
||||
it('creates the artifacts directory if absent', async () => {
|
||||
// Confirm the writer mkdir-recursive's the artifacts dir on first call.
|
||||
const result = await writeMarkdownArtifact(
|
||||
{ content: '# T' },
|
||||
{ projectId: 'pid', projectRoot },
|
||||
);
|
||||
expect(result.path).toContain('.boocode/artifacts');
|
||||
});
|
||||
});
|
||||
|
||||
describe('1MB cap behavior', () => {
|
||||
it('reports the correct byte threshold', () => {
|
||||
expect(HTML_ARTIFACT_MAX_BYTES).toBe(1_048_576);
|
||||
});
|
||||
|
||||
it('exceeds threshold for oversize payload', () => {
|
||||
const oversize = '<!DOCTYPE html>' + 'A'.repeat(HTML_ARTIFACT_MAX_BYTES);
|
||||
expect(Buffer.byteLength(oversize, 'utf8')).toBeGreaterThan(
|
||||
HTML_ARTIFACT_MAX_BYTES,
|
||||
);
|
||||
});
|
||||
|
||||
it('detectHtmlArtifact still returns content above the cap (cap is checked by caller)', () => {
|
||||
// Detection is content-shape; the cap check lives in finalizeCompletion
|
||||
// (error-handler.ts). This test pins that contract: the helper does not
|
||||
// silently drop oversize payloads on the floor.
|
||||
const big = '<!DOCTYPE html>' + 'x'.repeat(2_000_000);
|
||||
expect(detectHtmlArtifact(big)).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('decideHtmlArtifactWrite', () => {
|
||||
// Pure helper extracted from finalizeCompletion's cap-skip branch. Pins
|
||||
// the warn-and-skip decision without mocking the full InferenceContext.
|
||||
it('returns write=true for payloads under the cap', () => {
|
||||
const html = '<!DOCTYPE html><html></html>';
|
||||
const decision = decideHtmlArtifactWrite(html);
|
||||
expect(decision.write).toBe(true);
|
||||
expect(decision.byteLen).toBe(Buffer.byteLength(html, 'utf8'));
|
||||
});
|
||||
|
||||
it('returns write=false with cap_exceeded reason for oversize payloads', () => {
|
||||
const big = '<!DOCTYPE html>' + 'x'.repeat(HTML_ARTIFACT_MAX_BYTES);
|
||||
const decision = decideHtmlArtifactWrite(big);
|
||||
expect(decision.write).toBe(false);
|
||||
if (!decision.write) {
|
||||
expect(decision.reason).toBe('cap_exceeded');
|
||||
expect(decision.byteLen).toBeGreaterThan(HTML_ARTIFACT_MAX_BYTES);
|
||||
}
|
||||
});
|
||||
|
||||
it('accepts payload exactly at the cap (boundary)', () => {
|
||||
// byteLen === cap should write; only strictly greater skips.
|
||||
const exact = 'x'.repeat(HTML_ARTIFACT_MAX_BYTES);
|
||||
const decision = decideHtmlArtifactWrite(exact);
|
||||
expect(decision.write).toBe(true);
|
||||
expect(decision.byteLen).toBe(HTML_ARTIFACT_MAX_BYTES);
|
||||
});
|
||||
});
|
||||
|
||||
describe('symlink escape protection', () => {
|
||||
// Closes the gap where `.boocode/artifacts` is a symlink pointing
|
||||
// outside the project root. The lexical prefix check on the resolved
|
||||
// candidate path passes (it's under projectRoot textually), but the
|
||||
// post-mkdir realpath verification must catch the escape.
|
||||
let projectRoot: string;
|
||||
let outside: string;
|
||||
beforeEach(async () => {
|
||||
projectRoot = await mkdtemp(join(tmpdir(), 'artifacts-symlink-root-'));
|
||||
outside = await mkdtemp(join(tmpdir(), 'artifacts-symlink-outside-'));
|
||||
});
|
||||
afterEach(async () => {
|
||||
await rm(projectRoot, { recursive: true, force: true });
|
||||
await rm(outside, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
it('throws PathScopeError when .boocode/artifacts is a symlink to outside the project', async () => {
|
||||
// Create .boocode dir, then make `artifacts` a symlink pointing outside.
|
||||
await mkdir(join(projectRoot, '.boocode'), { recursive: true });
|
||||
await symlink(outside, join(projectRoot, '.boocode', 'artifacts'));
|
||||
await expect(
|
||||
writeMarkdownArtifact(
|
||||
{ content: '# Hello' },
|
||||
{ projectId: 'pid', projectRoot },
|
||||
),
|
||||
).rejects.toBeInstanceOf(PathScopeError);
|
||||
});
|
||||
});
|
||||
255
apps/server/src/services/artifacts.ts
Normal file
255
apps/server/src/services/artifacts.ts
Normal file
@@ -0,0 +1,255 @@
|
||||
// v1.14.x-html-artifact-panes: artifact writer + slug derivation.
|
||||
//
|
||||
// Writes Markdown and HTML artifacts to `<projectRoot>/.boocode/artifacts/`
|
||||
// as plain files. Returns `{path, url}` where:
|
||||
// - path is the absolute on-disk path
|
||||
// - url is a project-scoped REST URL pointing at the GET download route
|
||||
// registered in routes/artifacts.ts. The route streams the file with
|
||||
// Content-Disposition: attachment.
|
||||
//
|
||||
// Path safety: we do NOT use path_guard.ts (it realpaths and throws ENOENT
|
||||
// for files that don't exist yet, which artifact creation requires).
|
||||
// Instead we mirror the v1.13.18 codecontext_client.ts pattern: resolve
|
||||
// the candidate path against the realpath'd projectRoot, then verify the
|
||||
// result starts with projectRoot + sep (or equals projectRoot).
|
||||
|
||||
import { mkdir, realpath, writeFile } from 'node:fs/promises';
|
||||
import { resolve, sep } from 'node:path';
|
||||
import { PathScopeError } from './path_guard.js';
|
||||
import type { Message } from '../types/api.js';
|
||||
|
||||
export interface HtmlArtifactPayload {
|
||||
html_content: string;
|
||||
char_count: number;
|
||||
title: string | null;
|
||||
}
|
||||
|
||||
export interface ArtifactWriteResult {
|
||||
path: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const ARTIFACT_SUBDIR = '.boocode/artifacts';
|
||||
|
||||
// ---- slug helpers ----
|
||||
|
||||
// Lowercase, replace non-alnum runs with '-', trim leading/trailing '-',
|
||||
// collapse repeated '-', cap at 60 chars. Empty → 'artifact'.
|
||||
function slugify(input: string): string {
|
||||
const cleaned = input
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
.replace(/-{2,}/g, '-')
|
||||
.slice(0, 60)
|
||||
.replace(/^-+|-+$/g, '');
|
||||
return cleaned || 'artifact';
|
||||
}
|
||||
|
||||
function firstHeading(md: string): string | null {
|
||||
// Match the first `# ` ATX heading at the start of a line.
|
||||
const m = md.match(/^[ \t]*#[ \t]+(.+?)\s*$/m);
|
||||
if (!m) return null;
|
||||
const text = m[1]?.trim() ?? '';
|
||||
return text.length > 0 ? text : null;
|
||||
}
|
||||
|
||||
function firstNWords(s: string, n: number): string {
|
||||
const words = s.trim().split(/\s+/).filter(Boolean).slice(0, n);
|
||||
return words.join(' ');
|
||||
}
|
||||
|
||||
export function deriveMarkdownSlug(messageContent: string): string {
|
||||
const heading = firstHeading(messageContent);
|
||||
if (heading) return slugify(heading);
|
||||
const sixWords = firstNWords(messageContent, 6);
|
||||
return slugify(sixWords);
|
||||
}
|
||||
|
||||
// Strip HTML tags for inner-text extraction. Crude but sufficient for slug
|
||||
// derivation — we're not rendering, just finding readable words.
|
||||
function stripTags(html: string): string {
|
||||
return html
|
||||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ' ')
|
||||
.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, ' ')
|
||||
.replace(/<[^>]+>/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
function extractTitleTag(html: string): string | null {
|
||||
const m = html.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
|
||||
if (!m) return null;
|
||||
const text = stripTags(m[1] ?? '').trim();
|
||||
return text.length > 0 ? text : null;
|
||||
}
|
||||
|
||||
function extractH1(html: string): string | null {
|
||||
const m = html.match(/<h1[^>]*>([\s\S]*?)<\/h1>/i);
|
||||
if (!m) return null;
|
||||
const text = stripTags(m[1] ?? '').trim();
|
||||
return text.length > 0 ? text : null;
|
||||
}
|
||||
|
||||
export function deriveHtmlSlug(payload: {
|
||||
html_content: string;
|
||||
title: string | null;
|
||||
}): string {
|
||||
if (payload.title && payload.title.trim().length > 0) {
|
||||
return slugify(payload.title);
|
||||
}
|
||||
const title = extractTitleTag(payload.html_content);
|
||||
if (title) return slugify(title);
|
||||
const h1 = extractH1(payload.html_content);
|
||||
if (h1) return slugify(h1);
|
||||
const inner = stripTags(payload.html_content);
|
||||
return slugify(firstNWords(inner, 6));
|
||||
}
|
||||
|
||||
// Derive title for the html_artifact part payload: <title> → first <h1> →
|
||||
// first 80 chars of inner text. Returns null if nothing useful is found.
|
||||
export function deriveHtmlTitle(html: string): string | null {
|
||||
const t = extractTitleTag(html);
|
||||
if (t) return t;
|
||||
const h1 = extractH1(html);
|
||||
if (h1) return h1;
|
||||
const inner = stripTags(html);
|
||||
if (inner.length === 0) return null;
|
||||
return inner.slice(0, 80);
|
||||
}
|
||||
|
||||
// ---- HTML detection (B4) ----
|
||||
|
||||
// Returns the inner HTML content if `text` is a recognised HTML artifact:
|
||||
// - starts with <!DOCTYPE html> (case-insensitive, whitespace-trimmed), OR
|
||||
// - wrapped entirely in a fenced ```html ... ``` block.
|
||||
// Returns null if neither matches.
|
||||
export function detectHtmlArtifact(text: string): string | null {
|
||||
const trimmed = text.trim();
|
||||
if (trimmed.length === 0) return null;
|
||||
if (/^<!doctype\s+html/i.test(trimmed)) {
|
||||
return trimmed;
|
||||
}
|
||||
// Fenced ```html block consuming the entire (trimmed) message. Allow an
|
||||
// optional trailing newline before the closing fence.
|
||||
const fence = trimmed.match(/^```html\s*\n([\s\S]*?)\n?```\s*$/i);
|
||||
if (fence) {
|
||||
const inner = fence[1] ?? '';
|
||||
if (/^\s*<!doctype\s+html/i.test(inner) || /<html[\s>]/i.test(inner)) {
|
||||
return inner.trim();
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ---- path resolution ----
|
||||
|
||||
// Resolve `<projectRoot>/.boocode/artifacts/<filename>` and verify the
|
||||
// result stays under projectRoot. Mirrors the v1.13.18 codecontext_client.ts
|
||||
// approach: realpath projectRoot first, then prefix-check the candidate.
|
||||
// Throws on escape.
|
||||
async function resolveArtifactPath(
|
||||
projectRoot: string,
|
||||
filename: string,
|
||||
): Promise<{ resolvedRoot: string; artifactsDir: string; absPath: string }> {
|
||||
const resolvedRoot = await realpath(projectRoot);
|
||||
const artifactsDir = resolve(resolvedRoot, ARTIFACT_SUBDIR);
|
||||
const absPath = resolve(artifactsDir, filename);
|
||||
// Lexical prefix check on the resolved candidates. (The `!== resolvedRoot`
|
||||
// branch was dead — ARTIFACT_SUBDIR is non-empty so artifactsDir always
|
||||
// differs from resolvedRoot.)
|
||||
if (!artifactsDir.startsWith(resolvedRoot + sep)) {
|
||||
throw new PathScopeError(
|
||||
`artifacts dir escapes project root: ${artifactsDir}`,
|
||||
);
|
||||
}
|
||||
if (!absPath.startsWith(artifactsDir + sep)) {
|
||||
throw new PathScopeError(
|
||||
`artifact filename escapes artifacts dir: ${filename}`,
|
||||
);
|
||||
}
|
||||
return { resolvedRoot, artifactsDir, absPath };
|
||||
}
|
||||
|
||||
// After mkdir, realpath the artifacts dir and re-verify it stays under
|
||||
// resolvedRoot. Closes the symlink-escape gap: if `.boocode/artifacts` (or
|
||||
// any ancestor below resolvedRoot) is a symlink pointing outside the
|
||||
// project, the lexical check in resolveArtifactPath passes but the actual
|
||||
// write lands outside the sandbox. Throws PathScopeError on escape.
|
||||
async function assertArtifactsDirSafe(
|
||||
artifactsDir: string,
|
||||
resolvedRoot: string,
|
||||
): Promise<void> {
|
||||
const realDir = await realpath(artifactsDir);
|
||||
if (realDir !== resolvedRoot && !realDir.startsWith(resolvedRoot + sep)) {
|
||||
throw new PathScopeError(
|
||||
`artifacts dir resolves outside project root: ${realDir}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Pure decision helper for whether finalizeCompletion should write the
|
||||
// `html_artifact` part. Exported for unit testing the cap-skip branch.
|
||||
// Returns `{write: true, byteLen}` when the payload is under the cap, or
|
||||
// `{write: false, byteLen, reason: 'cap_exceeded'}` when oversize.
|
||||
export type HtmlArtifactDecision =
|
||||
| { write: true; byteLen: number }
|
||||
| { write: false; byteLen: number; reason: 'cap_exceeded' };
|
||||
|
||||
export function decideHtmlArtifactWrite(
|
||||
htmlContent: string,
|
||||
): HtmlArtifactDecision {
|
||||
const byteLen = Buffer.byteLength(htmlContent, 'utf8');
|
||||
if (byteLen > HTML_ARTIFACT_MAX_BYTES) {
|
||||
return { write: false, byteLen, reason: 'cap_exceeded' };
|
||||
}
|
||||
return { write: true, byteLen };
|
||||
}
|
||||
|
||||
function buildUrl(projectId: string, filename: string): string {
|
||||
return `/api/projects/${projectId}/artifacts/${encodeURIComponent(filename)}`;
|
||||
}
|
||||
|
||||
export interface WriteContext {
|
||||
projectId: string;
|
||||
projectRoot: string;
|
||||
}
|
||||
|
||||
export async function writeMarkdownArtifact(
|
||||
message: Pick<Message, 'content'>,
|
||||
ctx: WriteContext,
|
||||
): Promise<ArtifactWriteResult> {
|
||||
const slug = deriveMarkdownSlug(message.content);
|
||||
const filename = `${slug}-${Date.now()}.md`;
|
||||
const { resolvedRoot, artifactsDir, absPath } = await resolveArtifactPath(
|
||||
ctx.projectRoot,
|
||||
filename,
|
||||
);
|
||||
await mkdir(artifactsDir, { recursive: true });
|
||||
await assertArtifactsDirSafe(artifactsDir, resolvedRoot);
|
||||
await writeFile(absPath, message.content, 'utf8');
|
||||
return { path: absPath, url: buildUrl(ctx.projectId, filename) };
|
||||
}
|
||||
|
||||
export async function writeHtmlArtifact(
|
||||
payload: HtmlArtifactPayload,
|
||||
ctx: WriteContext,
|
||||
): Promise<ArtifactWriteResult> {
|
||||
const slug = deriveHtmlSlug(payload);
|
||||
const filename = `${slug}-${Date.now()}.html`;
|
||||
const { resolvedRoot, artifactsDir, absPath } = await resolveArtifactPath(
|
||||
ctx.projectRoot,
|
||||
filename,
|
||||
);
|
||||
await mkdir(artifactsDir, { recursive: true });
|
||||
await assertArtifactsDirSafe(artifactsDir, resolvedRoot);
|
||||
await writeFile(absPath, payload.html_content, 'utf8');
|
||||
return { path: absPath, url: buildUrl(ctx.projectId, filename) };
|
||||
}
|
||||
|
||||
// 1MB cap on HTML artifacts (proposal S6). Larger payloads are not written
|
||||
// to the `html_artifact` part — the assistant text lands as plain content
|
||||
// and a warning is logged. Streaming abort was considered but the graceful
|
||||
// "no artifact, plain text falls back" path is simpler and lossless from
|
||||
// the user's perspective.
|
||||
export const HTML_ARTIFACT_MAX_BYTES = 1_048_576;
|
||||
@@ -1,7 +1,14 @@
|
||||
import type { MessageMetadata, Session } from '../../types/api.js';
|
||||
import {
|
||||
decideHtmlArtifactWrite,
|
||||
detectHtmlArtifact,
|
||||
deriveHtmlTitle,
|
||||
HTML_ARTIFACT_MAX_BYTES,
|
||||
} from '../artifacts.js';
|
||||
import * as modelContext from '../model-context.js';
|
||||
import { maybeFlagForCompaction } from './payload.js';
|
||||
import { insertParts, partsFromAssistantMessage } from './parts.js';
|
||||
import type { PartInsert } from './parts.js';
|
||||
import type { InferenceContext, StreamResult, TurnArgs } from './turn.js';
|
||||
|
||||
export async function handleAbortOrError(
|
||||
@@ -120,17 +127,42 @@ export async function finalizeCompletion(
|
||||
// a kind='reasoning' part alongside the text.
|
||||
// TODO(v1.13.1): wrap the UPDATE above and this insertParts in a single
|
||||
// sql.begin before flipping read authority to message_parts.
|
||||
await insertParts(
|
||||
ctx.sql,
|
||||
partsFromAssistantMessage({
|
||||
content,
|
||||
tool_calls: null,
|
||||
reasoning: result.reasoning,
|
||||
}).map((p) => ({
|
||||
...p,
|
||||
message_id: assistantMessageId,
|
||||
})),
|
||||
);
|
||||
const baseParts: PartInsert[] = partsFromAssistantMessage({
|
||||
content,
|
||||
tool_calls: null,
|
||||
reasoning: result.reasoning,
|
||||
}).map((p) => ({
|
||||
...p,
|
||||
message_id: assistantMessageId,
|
||||
}));
|
||||
// v1.14.x-html-artifact-panes: opportunistic HTML detection. Adds a
|
||||
// SIBLING html_artifact part — never replaces the text part. 1MB cap is
|
||||
// graceful: oversized payloads are skipped and the assistant message
|
||||
// lands as plain content (warn logged).
|
||||
const htmlContent = detectHtmlArtifact(content);
|
||||
if (htmlContent !== null) {
|
||||
const decision = decideHtmlArtifactWrite(htmlContent);
|
||||
if (!decision.write) {
|
||||
ctx.log.warn(
|
||||
{ assistantMessageId, byteLen: decision.byteLen, cap: HTML_ARTIFACT_MAX_BYTES },
|
||||
'html_artifact exceeded 1MB cap; skipping artifact part',
|
||||
);
|
||||
} else {
|
||||
const title = deriveHtmlTitle(htmlContent);
|
||||
const nextSeq = baseParts.reduce((m, p) => Math.max(m, p.sequence), -1) + 1;
|
||||
baseParts.push({
|
||||
message_id: assistantMessageId,
|
||||
sequence: nextSeq,
|
||||
kind: 'html_artifact',
|
||||
payload: {
|
||||
html_content: htmlContent,
|
||||
char_count: htmlContent.length,
|
||||
title,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
await insertParts(ctx.sql, baseParts);
|
||||
// v1.11: flag for compaction on the terminal turn too. Catches the common
|
||||
// case of a turn that hit the limit without invoking tools.
|
||||
await maybeFlagForCompaction(ctx, chatId, updated);
|
||||
|
||||
@@ -11,13 +11,16 @@ import type { ToolCall, ToolResult } from '../../types/api.js';
|
||||
// (schema.sql adds 'synthesis' to message_parts_kind_chk on startup). The
|
||||
// dispatch's claim that no schema migration was needed assumed kind was a
|
||||
// bare text column — it isn't; the constraint enumerates allowed values.
|
||||
// v1.14.x-html-artifact-panes: 'html_artifact' added. Schema CHECK constraint
|
||||
// in schema.sql updated in lockstep.
|
||||
export type PartKind =
|
||||
| 'text'
|
||||
| 'tool_call'
|
||||
| 'tool_result'
|
||||
| 'reasoning'
|
||||
| 'step_start'
|
||||
| 'synthesis';
|
||||
| 'synthesis'
|
||||
| 'html_artifact';
|
||||
|
||||
export interface PartInsert {
|
||||
message_id: string;
|
||||
|
||||
@@ -50,7 +50,32 @@ export interface Session {
|
||||
allowed_read_paths: string[];
|
||||
}
|
||||
|
||||
export type WorkspacePaneKind = 'chat' | 'terminal' | 'agent' | 'empty' | 'settings';
|
||||
// v1.14.x-html-artifact-panes: 'markdown_artifact' + 'html_artifact' added.
|
||||
// Optional payload state lives on the pane row itself so the jsonb survives
|
||||
// a hard reload without needing a re-fetch.
|
||||
export type WorkspacePaneKind =
|
||||
| 'chat'
|
||||
| 'terminal'
|
||||
| 'agent'
|
||||
| 'empty'
|
||||
| 'settings'
|
||||
| 'markdown_artifact'
|
||||
| 'html_artifact';
|
||||
|
||||
// v1.14.x: reference-only — the actual artifact body lives in the message
|
||||
// row (markdown) or message_parts.payload (html_artifact). Pane components
|
||||
// fetch on mount.
|
||||
export interface MarkdownArtifactState {
|
||||
chat_id: string;
|
||||
message_id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface HtmlArtifactState {
|
||||
chat_id: string;
|
||||
message_id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface WorkspacePane {
|
||||
id: string;
|
||||
@@ -58,6 +83,9 @@ export interface WorkspacePane {
|
||||
chatId?: string;
|
||||
chatIds: string[];
|
||||
activeChatIdx: number;
|
||||
// v1.14.x: populated only when kind === 'markdown_artifact' / 'html_artifact'.
|
||||
markdown_artifact_state?: MarkdownArtifactState;
|
||||
html_artifact_state?: HtmlArtifactState;
|
||||
}
|
||||
|
||||
// v1.8.1: agents come from two sources. 'global' = /data/AGENTS.md (always
|
||||
|
||||
@@ -276,6 +276,24 @@ export const api = {
|
||||
request<void>(`/api/chats/${chatId}/messages/${messageId}`, {
|
||||
method: 'DELETE',
|
||||
}),
|
||||
// v1.14.x-html-artifact-panes: write the artifact to
|
||||
// <projectRoot>/.boocode/artifacts/<slug>-<ts>.<ext> and return the
|
||||
// path + a /api/projects/.../artifacts/<filename> URL the browser can
|
||||
// GET to download. fmt=html requires the assistant message to carry an
|
||||
// html_artifact part (404 otherwise).
|
||||
downloadArtifact: (chatId: string, messageId: string, fmt: 'md' | 'html') =>
|
||||
request<{ path: string; url: string }>(
|
||||
`/api/chats/${chatId}/messages/${messageId}/artifacts/download?fmt=${fmt}`,
|
||||
{ method: 'POST' },
|
||||
),
|
||||
// v1.14.x-html-artifact-panes: fetch the html_artifact part payload so
|
||||
// HtmlArtifactPane can render the iframe srcdoc. 404 = no html_artifact
|
||||
// part on this message; MessageBubble uses that as a signal to fall back
|
||||
// to the markdown pane variant.
|
||||
getHtmlArtifact: (chatId: string, messageId: string) =>
|
||||
request<{ html_content: string; char_count: number; title: string }>(
|
||||
`/api/chats/${chatId}/messages/${messageId}/html_artifact`,
|
||||
),
|
||||
},
|
||||
|
||||
models: () => request<ModelInfo[]>('/api/models'),
|
||||
|
||||
@@ -316,7 +316,37 @@ export interface AskUserAnswerSet {
|
||||
// v1.9: 'settings' is an ephemeral pane kind — never persisted, always
|
||||
// singleton per workspace. The pane hook filters it out before writing to
|
||||
// localStorage and dedupes on insertion via toggleSettingsPane().
|
||||
export type WorkspacePaneKind = 'chat' | 'terminal' | 'agent' | 'empty' | 'settings';
|
||||
// v1.14.x-html-artifact-panes: 'markdown_artifact' + 'html_artifact' added.
|
||||
// Both carry payload state on the WorkspacePane row itself so
|
||||
// useWorkspacePanes's JSON-string dedup + persisted jsonb stay self-contained
|
||||
// — no extra fetch on rehydrate.
|
||||
export type WorkspacePaneKind =
|
||||
| 'chat'
|
||||
| 'terminal'
|
||||
| 'agent'
|
||||
| 'empty'
|
||||
| 'settings'
|
||||
| 'markdown_artifact'
|
||||
| 'html_artifact';
|
||||
|
||||
// v1.14.x: per-pane artifact payloads. Optional + namespaced so older saved
|
||||
// pane rows (without these fields) deserialize unchanged.
|
||||
// v1.14.x: pane state is a reference only — the pane component fetches the
|
||||
// actual content on mount. This keeps sessions.workspace_panes jsonb small and
|
||||
// makes the message body / html_artifact part the single source of truth.
|
||||
export interface MarkdownArtifactState {
|
||||
// chat_id is needed for the download endpoint
|
||||
// (POST /api/chats/:chat_id/messages/:msg_id/artifacts/download).
|
||||
chat_id: string;
|
||||
message_id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface HtmlArtifactState {
|
||||
chat_id: string;
|
||||
message_id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface WorkspacePane {
|
||||
id: string;
|
||||
@@ -324,6 +354,9 @@ export interface WorkspacePane {
|
||||
chatId?: string;
|
||||
chatIds: string[];
|
||||
activeChatIdx: number;
|
||||
// v1.14.x: populated only when kind === 'markdown_artifact' / 'html_artifact'.
|
||||
markdown_artifact_state?: MarkdownArtifactState;
|
||||
html_artifact_state?: HtmlArtifactState;
|
||||
}
|
||||
|
||||
export type WsFrame =
|
||||
|
||||
116
apps/web/src/components/HtmlArtifactPane.tsx
Normal file
116
apps/web/src/components/HtmlArtifactPane.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
// v1.14.x-html-artifact-panes: full-height HTML artifact viewer. Renders the
|
||||
// model's HTML inside a sandboxed iframe — no allow-same-origin, srcdoc only
|
||||
// (no separate URL), CSP injected by the backend writer. JS runs inside the
|
||||
// iframe (interactive controls work) but fetch / WS / tracking pixels are
|
||||
// blocked by connect-src 'none' on the CSP. NO Copy button per the spec.
|
||||
//
|
||||
// Pane state is a reference only (chat_id + message_id + title); the iframe
|
||||
// payload is fetched on mount from
|
||||
// GET /api/chats/:chat_id/messages/:msg_id/html_artifact so that
|
||||
// sessions.workspace_panes jsonb stays small and message_parts.payload is the
|
||||
// single source of truth.
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Download, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import type { HtmlArtifactState } from '@/api/types';
|
||||
|
||||
interface Props {
|
||||
chatId: string;
|
||||
state: HtmlArtifactState;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function HtmlArtifactPane({ chatId, state, onClose }: Props) {
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [htmlContent, setHtmlContent] = useState<string | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setHtmlContent(null);
|
||||
setLoadError(null);
|
||||
void (async () => {
|
||||
try {
|
||||
const payload = await api.messages.getHtmlArtifact(chatId, state.message_id);
|
||||
if (cancelled) return;
|
||||
setHtmlContent(payload.html_content);
|
||||
} catch (err) {
|
||||
if (cancelled) return;
|
||||
setLoadError(err instanceof Error ? err.message : 'failed to load HTML artifact');
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [chatId, state.message_id]);
|
||||
|
||||
async function download() {
|
||||
if (downloading) return;
|
||||
setDownloading(true);
|
||||
try {
|
||||
const { url, path } = await api.messages.downloadArtifact(
|
||||
chatId,
|
||||
state.message_id,
|
||||
'html',
|
||||
);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.rel = 'noopener';
|
||||
a.click();
|
||||
toast.success(`Saved to ${path}`);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'download failed');
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center gap-2 border-b border-border bg-muted/30 px-2 py-1 shrink-0">
|
||||
<span className="text-xs text-muted-foreground truncate flex-1" title={state.title}>
|
||||
{state.title || 'HTML artifact'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void download()}
|
||||
disabled={downloading || htmlContent === null}
|
||||
className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 max-md:min-h-[44px] max-md:min-w-[44px]"
|
||||
aria-label="Download HTML"
|
||||
title="Download"
|
||||
>
|
||||
<Download size={12} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
|
||||
aria-label="Close artifact pane"
|
||||
title="Close"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-hidden bg-background">
|
||||
{loadError ? (
|
||||
<div className="p-4 text-sm text-destructive">Failed to load: {loadError}</div>
|
||||
) : htmlContent === null ? (
|
||||
<div className="p-4 text-sm text-muted-foreground">Loading HTML artifact…</div>
|
||||
) : (
|
||||
<iframe
|
||||
// Sandbox attributes are non-negotiable per the v1.14.x spec S5:
|
||||
// no allow-same-origin → opaque origin → can't reach parent cookies
|
||||
// or DOM. srcdoc (not src) means no URL exists to leak. JS runs
|
||||
// (allow-scripts) but connect-src 'none' on the CSP inside the
|
||||
// payload blocks fetch / WS / pixels.
|
||||
srcDoc={htmlContent}
|
||||
sandbox="allow-scripts allow-clipboard-write allow-downloads"
|
||||
className="w-full h-full border-0"
|
||||
title={state.title || 'HTML artifact'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
137
apps/web/src/components/MarkdownArtifactPane.tsx
Normal file
137
apps/web/src/components/MarkdownArtifactPane.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
// v1.14.x-html-artifact-panes: dedicated full-height Markdown viewer used
|
||||
// when a user clicks "Open in pane" on an assistant message that has NO
|
||||
// html_artifact part. Header carries Copy (raw source) + Download (server-
|
||||
// materialised .md under <projectRoot>/.boocode/artifacts/) + close.
|
||||
//
|
||||
// Pane state is a reference only (chat_id + message_id + title); the markdown
|
||||
// body is fetched on mount from GET /api/chats/:chat_id/messages by locating
|
||||
// the matching message_id. This keeps sessions.workspace_panes jsonb small
|
||||
// and the assistant message row remains the single source of truth.
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Check, Copy, Download, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import type { MarkdownArtifactState } from '@/api/types';
|
||||
import { MarkdownRenderer } from './MarkdownRenderer';
|
||||
|
||||
interface Props {
|
||||
chatId: string;
|
||||
state: MarkdownArtifactState;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function MarkdownArtifactPane({ chatId, state, onClose }: Props) {
|
||||
const [justCopied, setJustCopied] = useState(false);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [content, setContent] = useState<string | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setContent(null);
|
||||
setLoadError(null);
|
||||
void (async () => {
|
||||
try {
|
||||
// No single-message GET endpoint exists; the chat-messages list is
|
||||
// already cached server-side and the lookup is O(n) over a small
|
||||
// window. Cheaper than adding a new route for one call site.
|
||||
const messages = await api.chats.messages(chatId);
|
||||
if (cancelled) return;
|
||||
const msg = messages.find((m) => m.id === state.message_id);
|
||||
if (!msg) {
|
||||
setLoadError('Message not found');
|
||||
return;
|
||||
}
|
||||
setContent(msg.content ?? '');
|
||||
} catch (err) {
|
||||
if (cancelled) return;
|
||||
setLoadError(err instanceof Error ? err.message : 'failed to load message');
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [chatId, state.message_id]);
|
||||
|
||||
async function copy() {
|
||||
if (content === null) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
setJustCopied(true);
|
||||
setTimeout(() => setJustCopied(false), 1200);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'copy failed');
|
||||
}
|
||||
}
|
||||
|
||||
async function download() {
|
||||
if (downloading) return;
|
||||
setDownloading(true);
|
||||
try {
|
||||
const { url, path } = await api.messages.downloadArtifact(
|
||||
chatId,
|
||||
state.message_id,
|
||||
'md',
|
||||
);
|
||||
// Trigger browser download from the returned URL. The endpoint stamps
|
||||
// Content-Disposition: attachment so the click lands as a save.
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.rel = 'noopener';
|
||||
a.click();
|
||||
toast.success(`Saved to ${path}`);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'download failed');
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center gap-2 border-b border-border bg-muted/30 px-2 py-1 shrink-0">
|
||||
<span className="text-xs text-muted-foreground truncate flex-1" title={state.title}>
|
||||
{state.title || 'Markdown artifact'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void copy()}
|
||||
disabled={content === null}
|
||||
className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 max-md:min-h-[44px] max-md:min-w-[44px]"
|
||||
aria-label="Copy markdown source"
|
||||
title="Copy"
|
||||
>
|
||||
{justCopied ? <Check size={12} /> : <Copy size={12} />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void download()}
|
||||
disabled={downloading || content === null}
|
||||
className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 max-md:min-h-[44px] max-md:min-w-[44px]"
|
||||
aria-label="Download markdown"
|
||||
title="Download"
|
||||
>
|
||||
<Download size={12} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
|
||||
aria-label="Close artifact pane"
|
||||
title="Close"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-auto px-4 py-3 text-sm">
|
||||
{loadError ? (
|
||||
<div className="text-destructive">Failed to load: {loadError}</div>
|
||||
) : content === null ? (
|
||||
<div className="text-muted-foreground">Loading…</div>
|
||||
) : (
|
||||
<MarkdownRenderer content={content} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
148
apps/web/src/components/MarkdownRenderer.tsx
Normal file
148
apps/web/src/components/MarkdownRenderer.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
// v1.14.x-html-artifact-panes: extracted from MessageBubble.tsx so both the
|
||||
// in-chat bubble renderer and the MarkdownArtifactPane share the same Shiki +
|
||||
// remark-gfm + path-linkifier pipeline. Behavior preserved byte-for-byte from
|
||||
// the original MessageBubble.MarkdownBody helper (and its linkify helpers).
|
||||
import { Children, cloneElement, isValidElement } from 'react';
|
||||
import type { ReactElement, ReactNode } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { CodeBlock } from './CodeBlock';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
|
||||
// Match path-shaped substrings ending in `.ext`. Additionally require a `/`
|
||||
// in the match to reduce false positives in prose (e.g. plain `foo.ts` won't
|
||||
// match, but `src/foo.ts` will). False positives at the edges are accepted
|
||||
// per Sam's design decision (2026-05-14).
|
||||
const PATH_REGEX = /([a-zA-Z0-9._/-]+\.[a-zA-Z0-9]+)/g;
|
||||
|
||||
function isPathLike(s: string): boolean {
|
||||
return s.includes('/');
|
||||
}
|
||||
|
||||
function emitOpenFile(path: string): void {
|
||||
sessionEvents.emit({ type: 'open_file_in_browser', path });
|
||||
}
|
||||
|
||||
function linkifyPaths(text: string, keyPrefix: string): ReactNode {
|
||||
const out: ReactNode[] = [];
|
||||
let lastIdx = 0;
|
||||
let idx = 0;
|
||||
for (const match of text.matchAll(PATH_REGEX)) {
|
||||
const matchedText = match[0];
|
||||
const start = match.index ?? 0;
|
||||
if (!isPathLike(matchedText)) continue;
|
||||
if (start > lastIdx) out.push(text.slice(lastIdx, start));
|
||||
out.push(
|
||||
<button
|
||||
key={`${keyPrefix}-${idx}`}
|
||||
type="button"
|
||||
onClick={() => emitOpenFile(matchedText)}
|
||||
className="text-primary underline cursor-pointer hover:text-primary/80"
|
||||
>
|
||||
{matchedText}
|
||||
</button>
|
||||
);
|
||||
lastIdx = start + matchedText.length;
|
||||
idx += 1;
|
||||
}
|
||||
if (out.length === 0) return text;
|
||||
if (lastIdx < text.length) out.push(text.slice(lastIdx));
|
||||
return out;
|
||||
}
|
||||
|
||||
function linkifyChildren(children: ReactNode, keyPrefix = 'l'): ReactNode {
|
||||
const arr = Children.toArray(children);
|
||||
return arr.map((child, i) => {
|
||||
if (typeof child === 'string') {
|
||||
return (
|
||||
<span key={`${keyPrefix}-${i}`}>
|
||||
{linkifyPaths(child, `${keyPrefix}-${i}`)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (isValidElement(child)) {
|
||||
const el = child as ReactElement<{ children?: ReactNode }>;
|
||||
if (el.type === 'code' || el.type === CodeBlock) return child;
|
||||
const grandchildren = el.props.children;
|
||||
if (grandchildren === undefined) return child;
|
||||
return cloneElement(el, {
|
||||
key: el.key ?? `linkified-${i}`,
|
||||
children: linkifyChildren(grandchildren, `${keyPrefix}-${i}`),
|
||||
});
|
||||
}
|
||||
return child;
|
||||
});
|
||||
}
|
||||
|
||||
const codeRenderer = (props: { children?: unknown; className?: string }) => {
|
||||
const { children, className, ...rest } = props;
|
||||
const text = String(children ?? '').replace(/\n$/, '');
|
||||
const langMatch = /language-([\w-]+)/.exec(className ?? '');
|
||||
const isBlock = !!langMatch || text.includes('\n');
|
||||
if (isBlock) {
|
||||
return <CodeBlock code={text} lang={langMatch?.[1]} />;
|
||||
}
|
||||
return (
|
||||
<code
|
||||
{...rest}
|
||||
className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]"
|
||||
>
|
||||
{children as React.ReactNode}
|
||||
</code>
|
||||
);
|
||||
};
|
||||
|
||||
export function MarkdownRenderer({ content }: { content: string }) {
|
||||
return (
|
||||
<Markdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
pre: ({ children }) => <>{children}</>,
|
||||
code: codeRenderer,
|
||||
a: ({ children, href }) => (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline decoration-muted-foreground/40 underline-offset-2 hover:decoration-foreground"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc pl-5 space-y-1">{children}</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal pl-5 space-y-1">{children}</ol>
|
||||
),
|
||||
li: ({ children }) => <li>{linkifyChildren(children)}</li>,
|
||||
p: ({ children }) => (
|
||||
<p className="leading-relaxed">{linkifyChildren(children)}</p>
|
||||
),
|
||||
h1: ({ children }) => <h1 className="text-base font-semibold mt-2">{children}</h1>,
|
||||
h2: ({ children }) => <h2 className="text-sm font-semibold mt-2">{children}</h2>,
|
||||
h3: ({ children }) => <h3 className="text-sm font-semibold mt-1">{children}</h3>,
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-2 border-border pl-3 text-muted-foreground">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
table: ({ children }) => (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="border-collapse text-xs">{children}</table>
|
||||
</div>
|
||||
),
|
||||
th: ({ children }) => (
|
||||
<th className="border border-border px-2 py-1 text-left font-medium">{children}</th>
|
||||
),
|
||||
td: ({ children }) => (
|
||||
<td className="border border-border px-2 py-1">
|
||||
{linkifyChildren(children)}
|
||||
</td>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,14 @@
|
||||
import { Children, cloneElement, isValidElement, useEffect, useState } from 'react';
|
||||
import type { ReactElement, ReactNode } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { ChevronDown, ChevronRight, Copy, RefreshCw, Check, Share2, RotateCw, GitFork, Trash2 } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { ChevronDown, ChevronRight, Copy, RefreshCw, Check, Share2, RotateCw, GitFork, Trash2, PanelRightOpen } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import type { Chat, ErrorReason, Message } from '@/api/types';
|
||||
import { api } from '@/api/client';
|
||||
import { api, ApiError } from '@/api/client';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import { sendToTerminal, terminalsRegistry, type TerminalRegistration } from '@/lib/events';
|
||||
import { CapHitSentinel } from './CapHitSentinel';
|
||||
import { DoomLoopSentinel } from './DoomLoopSentinel';
|
||||
import { CodeBlock } from './CodeBlock';
|
||||
import { MarkdownRenderer } from './MarkdownRenderer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
ContextMenu,
|
||||
@@ -90,76 +88,20 @@ const ERROR_REASON_LABELS: Record<ErrorReason, string> = {
|
||||
summary_after_cap_failed: 'Summary after tool budget hit failed',
|
||||
};
|
||||
|
||||
// Match path-shaped substrings ending in `.ext`. Additionally require a `/`
|
||||
// in the match to reduce false positives in prose (e.g. plain `foo.ts` won't
|
||||
// match, but `src/foo.ts` will). False positives at the edges are accepted
|
||||
// per Sam's design decision (2026-05-14).
|
||||
const PATH_REGEX = /([a-zA-Z0-9._/-]+\.[a-zA-Z0-9]+)/g;
|
||||
// v1.14.x-html-artifact-panes: MarkdownBody and its path-linkifier helpers
|
||||
// moved to apps/web/src/components/MarkdownRenderer.tsx so the new artifact
|
||||
// panes can render assistant content with the same Shiki + remark-gfm setup.
|
||||
|
||||
function isPathLike(s: string): boolean {
|
||||
return s.includes('/');
|
||||
}
|
||||
|
||||
function emitOpenFile(path: string): void {
|
||||
sessionEvents.emit({ type: 'open_file_in_browser', path });
|
||||
}
|
||||
|
||||
// Split a plain string into a flat array of strings and clickable button
|
||||
// nodes for path-shaped substrings. If no matches, returns the original
|
||||
// string verbatim (no array wrapping).
|
||||
function linkifyPaths(text: string, keyPrefix: string): ReactNode {
|
||||
const out: ReactNode[] = [];
|
||||
let lastIdx = 0;
|
||||
let idx = 0;
|
||||
for (const match of text.matchAll(PATH_REGEX)) {
|
||||
const matchedText = match[0];
|
||||
const start = match.index ?? 0;
|
||||
if (!isPathLike(matchedText)) continue;
|
||||
if (start > lastIdx) out.push(text.slice(lastIdx, start));
|
||||
out.push(
|
||||
<button
|
||||
key={`${keyPrefix}-${idx}`}
|
||||
type="button"
|
||||
onClick={() => emitOpenFile(matchedText)}
|
||||
className="text-primary underline cursor-pointer hover:text-primary/80"
|
||||
>
|
||||
{matchedText}
|
||||
</button>
|
||||
);
|
||||
lastIdx = start + matchedText.length;
|
||||
idx += 1;
|
||||
}
|
||||
if (out.length === 0) return text;
|
||||
if (lastIdx < text.length) out.push(text.slice(lastIdx));
|
||||
return out;
|
||||
}
|
||||
|
||||
// Walk react-markdown children, linkifying string text nodes. Children of
|
||||
// <code> nodes (CodeBlock and inline code) are left untouched — the regex
|
||||
// shouldn't run inside code spans.
|
||||
function linkifyChildren(children: ReactNode, keyPrefix = 'l'): ReactNode {
|
||||
const arr = Children.toArray(children);
|
||||
return arr.map((child, i) => {
|
||||
if (typeof child === 'string') {
|
||||
return (
|
||||
<span key={`${keyPrefix}-${i}`}>
|
||||
{linkifyPaths(child, `${keyPrefix}-${i}`)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (isValidElement(child)) {
|
||||
const el = child as ReactElement<{ children?: ReactNode }>;
|
||||
// Skip inline/block code — paths in code spans aren't link targets.
|
||||
if (el.type === 'code' || el.type === CodeBlock) return child;
|
||||
const grandchildren = el.props.children;
|
||||
if (grandchildren === undefined) return child;
|
||||
return cloneElement(el, {
|
||||
key: el.key ?? `linkified-${i}`,
|
||||
children: linkifyChildren(grandchildren, `${keyPrefix}-${i}`),
|
||||
});
|
||||
}
|
||||
return child;
|
||||
});
|
||||
// Pane-header title derivation for a markdown artifact. Order matches the
|
||||
// server slug logic in services/artifacts.ts: first `# ` heading → first 6
|
||||
// words of the body → 'Markdown artifact'. Truncated to keep the pane header
|
||||
// readable.
|
||||
function deriveMarkdownTitle(content: string): string {
|
||||
const headingMatch = content.match(/^\s*#\s+(.+?)\s*$/m);
|
||||
if (headingMatch && headingMatch[1]) return headingMatch[1].slice(0, 80);
|
||||
const words = content.trim().split(/\s+/).slice(0, 6).join(' ');
|
||||
if (words) return words.slice(0, 80);
|
||||
return 'Markdown artifact';
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -170,80 +112,6 @@ interface Props {
|
||||
capHitInfo?: { position: number; isLatest: boolean };
|
||||
}
|
||||
|
||||
function MarkdownBody({ content }: { content: string }) {
|
||||
return (
|
||||
<Markdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
pre: ({ children }) => <>{children}</>,
|
||||
code: (props) => {
|
||||
const { children, className, ...rest } = props as {
|
||||
children?: unknown;
|
||||
className?: string;
|
||||
};
|
||||
const text = String(children ?? '').replace(/\n$/, '');
|
||||
const langMatch = /language-([\w-]+)/.exec(className ?? '');
|
||||
const isBlock = !!langMatch || text.includes('\n');
|
||||
if (isBlock) {
|
||||
return <CodeBlock code={text} lang={langMatch?.[1]} />;
|
||||
}
|
||||
return (
|
||||
<code
|
||||
{...rest}
|
||||
className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]"
|
||||
>
|
||||
{children as React.ReactNode}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
a: ({ children, href }) => (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline decoration-muted-foreground/40 underline-offset-2 hover:decoration-foreground"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc pl-5 space-y-1">{children}</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal pl-5 space-y-1">{children}</ol>
|
||||
),
|
||||
li: ({ children }) => <li>{linkifyChildren(children)}</li>,
|
||||
p: ({ children }) => (
|
||||
<p className="leading-relaxed">{linkifyChildren(children)}</p>
|
||||
),
|
||||
h1: ({ children }) => <h1 className="text-base font-semibold mt-2">{children}</h1>,
|
||||
h2: ({ children }) => <h2 className="text-sm font-semibold mt-2">{children}</h2>,
|
||||
h3: ({ children }) => <h3 className="text-sm font-semibold mt-1">{children}</h3>,
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-2 border-border pl-3 text-muted-foreground">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
table: ({ children }) => (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="border-collapse text-xs">{children}</table>
|
||||
</div>
|
||||
),
|
||||
th: ({ children }) => (
|
||||
<th className="border border-border px-2 py-1 text-left font-medium">{children}</th>
|
||||
),
|
||||
td: ({ children }) => (
|
||||
<td className="border border-border px-2 py-1">
|
||||
{linkifyChildren(children)}
|
||||
</td>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsLine({ message }: { message: Message }) {
|
||||
const tokens = message.tokens_used;
|
||||
if (typeof tokens !== 'number' || tokens <= 0) return null;
|
||||
@@ -337,6 +205,54 @@ function ActionRow({
|
||||
const canRegen = isAssistant && message.status !== 'streaming';
|
||||
const canFork = message.status === 'complete';
|
||||
const canDelete = message.status !== 'streaming';
|
||||
const [openingPane, setOpeningPane] = useState(false);
|
||||
|
||||
// v1.14.x-html-artifact-panes: probe for an html_artifact part. If present,
|
||||
// open the HTML pane variant; otherwise fall back to the markdown variant.
|
||||
// Title derivation for markdown: first `# ` heading → first 6 words of the
|
||||
// body → 'Markdown artifact' (mirrors the slug logic in
|
||||
// services/artifacts.ts).
|
||||
async function openInPane() {
|
||||
if (openingPane || message.status === 'streaming') return;
|
||||
setOpeningPane(true);
|
||||
try {
|
||||
try {
|
||||
const payload = await api.messages.getHtmlArtifact(
|
||||
message.chat_id,
|
||||
message.id,
|
||||
);
|
||||
sessionEvents.emit({
|
||||
type: 'open_html_artifact_pane',
|
||||
state: {
|
||||
chat_id: message.chat_id,
|
||||
message_id: message.id,
|
||||
title: payload.title,
|
||||
},
|
||||
});
|
||||
return;
|
||||
} catch (err) {
|
||||
// 404 (no html_artifact part) is the expected fall-through path —
|
||||
// markdown variant opens below. Any other error (network, 500) is
|
||||
// a real failure; toast and bail rather than masquerading as markdown.
|
||||
const status = err instanceof ApiError ? err.status : null;
|
||||
if (status !== 404) {
|
||||
toast.error(err instanceof Error ? err.message : 'open in pane failed');
|
||||
return;
|
||||
}
|
||||
}
|
||||
const title = deriveMarkdownTitle(message.content);
|
||||
sessionEvents.emit({
|
||||
type: 'open_markdown_artifact_pane',
|
||||
state: {
|
||||
chat_id: message.chat_id,
|
||||
message_id: message.id,
|
||||
title,
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
setOpeningPane(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -350,6 +266,18 @@ function ActionRow({
|
||||
>
|
||||
{justCopied ? <Check className="size-3" /> : <Copy className="size-3" />}
|
||||
</button>
|
||||
{isAssistant && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void openInPane()}
|
||||
disabled={openingPane || message.status === 'streaming'}
|
||||
className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed max-md:min-h-[44px] max-md:min-w-[44px]"
|
||||
aria-label="Open in pane"
|
||||
title="Open in pane"
|
||||
>
|
||||
<PanelRightOpen className="size-3" />
|
||||
</button>
|
||||
)}
|
||||
{isAssistant && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -588,7 +516,7 @@ function SummaryCard({ message }: { message: Message }) {
|
||||
</div>
|
||||
{expanded && (
|
||||
<div className="px-3 pb-3 text-xs leading-relaxed border-t pt-2">
|
||||
<MarkdownBody content={message.content} />
|
||||
<MarkdownRenderer content={message.content} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -667,7 +595,7 @@ export function MessageBubble({ message, sessionChats, capHitInfo }: Props) {
|
||||
{(hasContent || isStreaming) && (
|
||||
<SendToTerminalMenu>
|
||||
<div className="max-w-[90%] text-sm leading-relaxed space-y-2 break-words min-w-0">
|
||||
{hasContent ? <MarkdownBody content={message.content} /> : null}
|
||||
{hasContent ? <MarkdownRenderer content={message.content} /> : null}
|
||||
{isStreaming && (
|
||||
<span className="inline-block w-1.5 h-3.5 align-baseline bg-muted-foreground/60 animate-pulse" />
|
||||
)}
|
||||
|
||||
@@ -8,6 +8,8 @@ import { terminalsRegistry } from '@/lib/events';
|
||||
import { ChatPane } from '@/components/panes/ChatPane';
|
||||
import { SettingsPane } from '@/components/panes/SettingsPane';
|
||||
import { TerminalPane } from '@/components/panes/TerminalPane';
|
||||
import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
|
||||
import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
|
||||
import { ChatTabBar } from '@/components/ChatTabBar';
|
||||
import { SessionLandingPage } from '@/components/SessionLandingPage';
|
||||
import {
|
||||
@@ -182,6 +184,7 @@ export function Workspace({
|
||||
{panes.map((pane, idx) => {
|
||||
const isSettings = pane.kind === 'settings';
|
||||
const isTerminal = pane.kind === 'terminal';
|
||||
const isArtifact = pane.kind === 'markdown_artifact' || pane.kind === 'html_artifact';
|
||||
// v1.9: when maximized, hide every pane except the settings one.
|
||||
// display:none keeps the React tree mounted so streams / drafts
|
||||
// survive the toggle without re-mount cost.
|
||||
@@ -195,7 +198,7 @@ export function Workspace({
|
||||
}
|
||||
// Terminal panes own their tab strip (no chats, no ChatTabBar) and
|
||||
// are not drag-reorderable for now — keeps the layout grid simple.
|
||||
const isChromeless = isSettings || isTerminal;
|
||||
const isChromeless = isSettings || isTerminal || isArtifact;
|
||||
return (
|
||||
<div
|
||||
key={pane.id}
|
||||
@@ -318,6 +321,18 @@ export function Workspace({
|
||||
label={terminalLabels.get(pane.id) ?? 'Terminal'}
|
||||
active={idx === activePaneIdx}
|
||||
/>
|
||||
) : pane.kind === 'markdown_artifact' && pane.markdown_artifact_state ? (
|
||||
<MarkdownArtifactPane
|
||||
chatId={pane.markdown_artifact_state.chat_id}
|
||||
state={pane.markdown_artifact_state}
|
||||
onClose={() => removePane(idx)}
|
||||
/>
|
||||
) : pane.kind === 'html_artifact' && pane.html_artifact_state ? (
|
||||
<HtmlArtifactPane
|
||||
chatId={pane.html_artifact_state.chat_id}
|
||||
state={pane.html_artifact_state}
|
||||
onClose={() => removePane(idx)}
|
||||
/>
|
||||
) : pane.kind === 'chat' && pane.chatId ? (
|
||||
<ChatPane
|
||||
sessionId={sessionId}
|
||||
|
||||
@@ -2,7 +2,14 @@
|
||||
// across hooks (e.g. AI rename arriving via WS in the session view needs to
|
||||
// also refresh the sidebar's session list).
|
||||
|
||||
import type { Chat, ErrorReason, Project, Session } from '@/api/types';
|
||||
import type {
|
||||
Chat,
|
||||
ErrorReason,
|
||||
HtmlArtifactState,
|
||||
MarkdownArtifactState,
|
||||
Project,
|
||||
Session,
|
||||
} from '@/api/types';
|
||||
import type { Attachment } from '@/lib/attachments';
|
||||
|
||||
export interface SessionRenamedEvent {
|
||||
@@ -68,6 +75,19 @@ export interface OpenChatInActivePaneEvent {
|
||||
chat_id: string;
|
||||
}
|
||||
|
||||
// v1.14.x-html-artifact-panes: ActionRow's "Open in pane" button emits one of
|
||||
// these; useWorkspacePanes subscribes and inserts the corresponding artifact
|
||||
// pane (or focuses an existing one keyed by message_id).
|
||||
export interface OpenMarkdownArtifactPaneEvent {
|
||||
type: 'open_markdown_artifact_pane';
|
||||
state: MarkdownArtifactState;
|
||||
}
|
||||
|
||||
export interface OpenHtmlArtifactPaneEvent {
|
||||
type: 'open_html_artifact_pane';
|
||||
state: HtmlArtifactState;
|
||||
}
|
||||
|
||||
// Client-side event fired by the sidebar Settings button when a session is
|
||||
// currently mounted. Session.tsx subscribes and calls
|
||||
// panesHook.toggleSettingsPane() (open on first click, close on second).
|
||||
@@ -154,6 +174,8 @@ export type SessionEvent =
|
||||
| OpenFileInBrowserEvent
|
||||
| AttachChatFileEvent
|
||||
| OpenChatInActivePaneEvent
|
||||
| OpenMarkdownArtifactPaneEvent
|
||||
| OpenHtmlArtifactPaneEvent
|
||||
| OpenSettingsPaneEvent
|
||||
| SessionArchivedEvent
|
||||
| ChatCreatedEvent
|
||||
|
||||
@@ -154,6 +154,11 @@ function applyEvent(prev: SidebarResponse, event: import('./sessionEvents').Sess
|
||||
case 'open_chat_in_active_pane':
|
||||
// Consumed by Workspace; sidebar has no business with pane state.
|
||||
return prev;
|
||||
case 'open_markdown_artifact_pane':
|
||||
case 'open_html_artifact_pane':
|
||||
// v1.14.x-html-artifact-panes: consumed by useWorkspacePanes; sidebar
|
||||
// has no business with pane state.
|
||||
return prev;
|
||||
case 'open_settings_pane':
|
||||
// Consumed by Session.tsx (calls toggleSettingsPane on its panesHook).
|
||||
// Sidebar data is untouched.
|
||||
|
||||
@@ -2,7 +2,11 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import type { DragEvent } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import type { WorkspacePane } from '@/api/types';
|
||||
import type {
|
||||
HtmlArtifactState,
|
||||
MarkdownArtifactState,
|
||||
WorkspacePane,
|
||||
} from '@/api/types';
|
||||
import { setActivePaneInfo, clearActivePane } from '@/hooks/useActivePane';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
|
||||
@@ -43,6 +47,28 @@ function settingsPane(): WorkspacePane {
|
||||
return { id: generateId(), kind: 'settings', chatIds: [], activeChatIdx: -1 };
|
||||
}
|
||||
|
||||
// v1.14.x-html-artifact-panes: artifact pane factories. Payload travels with
|
||||
// the pane row so the sessions.workspace_panes jsonb survives reload.
|
||||
function markdownArtifactPane(state: MarkdownArtifactState): WorkspacePane {
|
||||
return {
|
||||
id: generateId(),
|
||||
kind: 'markdown_artifact',
|
||||
chatIds: [],
|
||||
activeChatIdx: -1,
|
||||
markdown_artifact_state: state,
|
||||
};
|
||||
}
|
||||
|
||||
function htmlArtifactPane(state: HtmlArtifactState): WorkspacePane {
|
||||
return {
|
||||
id: generateId(),
|
||||
kind: 'html_artifact',
|
||||
chatIds: [],
|
||||
activeChatIdx: -1,
|
||||
html_artifact_state: state,
|
||||
};
|
||||
}
|
||||
|
||||
// v1.9: settings panes are ephemeral. Filter them out before persisting so a
|
||||
// page reload always returns to a clean workspace; the user re-opens via the
|
||||
// sidebar Settings button when needed.
|
||||
@@ -169,6 +195,50 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
|
||||
});
|
||||
}, [sessionId]);
|
||||
|
||||
// v1.14.x-html-artifact-panes: ActionRow's "Open in pane" emits one of
|
||||
// these per click. If a pane already exists for the same message_id, focus
|
||||
// it instead of stacking a duplicate. Otherwise append (capped at MAX_PANES;
|
||||
// settings panes don't count, matching addSplitPane's rule).
|
||||
useEffect(() => {
|
||||
return sessionEvents.subscribe((ev) => {
|
||||
if (
|
||||
ev.type !== 'open_markdown_artifact_pane' &&
|
||||
ev.type !== 'open_html_artifact_pane'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setPanes((prev) => {
|
||||
const targetKind: WorkspacePane['kind'] =
|
||||
ev.type === 'open_html_artifact_pane' ? 'html_artifact' : 'markdown_artifact';
|
||||
const messageId = ev.state.message_id;
|
||||
const existingIdx = prev.findIndex((p) =>
|
||||
p.kind === 'markdown_artifact'
|
||||
? p.markdown_artifact_state?.message_id === messageId
|
||||
: p.kind === 'html_artifact'
|
||||
? p.html_artifact_state?.message_id === messageId
|
||||
: false,
|
||||
);
|
||||
if (existingIdx >= 0) {
|
||||
setActivePaneIdx(existingIdx);
|
||||
return prev;
|
||||
}
|
||||
if (nonSettingsCount(prev) >= MAX_PANES) {
|
||||
toast.error(`Maximum ${MAX_PANES} panes`);
|
||||
return prev;
|
||||
}
|
||||
const newPane =
|
||||
ev.type === 'open_html_artifact_pane'
|
||||
? htmlArtifactPane(ev.state)
|
||||
: markdownArtifactPane(ev.state);
|
||||
// Defensive: assert kind matches for the discriminated union.
|
||||
if (newPane.kind !== targetKind) return prev;
|
||||
const next = [...prev, newPane];
|
||||
setActivePaneIdx(next.length - 1);
|
||||
return next;
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// v1.12.1: debounced PATCH on every change. Settings panes are stripped
|
||||
// before saving (ephemeral per v1.9).
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user