feat(web): workspace panes & tabs overhaul
A cohesive batch of pane/tab UX + the persisted workspace-state model (grouped
because the changes interleave across useWorkspacePanes, ChatTabBar, Workspace,
sessionEvents and the api types/client):
- Open a whole chat in a fresh pane via a new open_chat_in_new_pane event:
ChatTabBar tab context menu "Open in new pane", and MessageBubble.fork() now
lands the fork beside the original instead of replacing the active pane.
openChatInNewPane detaches the chat from any pane already holding it
(one-chat-per-pane).
- The tab-bar "+" becomes a New BooChat/BooTerm/BooCode menu (chat as a tab,
term/coder as split panes); the split button is unchanged.
- Drop the per-message "Open in pane" button (it opened a single message's
artifact) and its dead code; the artifact-pane machinery is left orphaned for
a later teardown.
- Session history: the empty/landing pane lists the session's open chats plus
archived chats (fetched separately), click to open / restore-and-open.
- Relocate-on-close: closing a chat pane moves its tabs (in order) into the
oldest chat/empty pane instead of discarding them; terminal/coder panes close
as before. Reopen strips the restored chatIds from all live panes first, so a
relocated-then-reopened pane never duplicates a tab — no stack-shape change.
- Stable global tab numbering: tabNumbers/nextTabNumber assigned on chat-pane
open, retired on close (never reused), rendered map-keyed (not positional).
- workspace_panes is now a WorkspaceState envelope { panes, tabNumbers,
nextTabNumber, closedPaneStack }; the reopen stack moved from a module-level
array into the persisted envelope so it survives reload. Hydrate/persist
normalize the legacy bare-array shape. appendClosed dedupes a value-identical
top entry to neutralize the StrictMode double-invoke of the setPanes updater.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { ChevronDown, ChevronRight, Copy, RefreshCw, Check, Share2, RotateCw, GitFork, Trash2, PanelRightOpen, Brain } from 'lucide-react';
|
||||
import { ChevronDown, ChevronRight, Copy, RefreshCw, Check, Share2, RotateCw, GitFork, Trash2, Brain } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import type { Chat, ErrorReason, Message } from '@/api/types';
|
||||
import { api, ApiError } from '@/api/client';
|
||||
import { api } from '@/api/client';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import { sendToTerminal, terminalsRegistry, type TerminalRegistration } from '@/lib/events';
|
||||
import { CapHitSentinel } from './CapHitSentinel';
|
||||
@@ -105,18 +105,6 @@ const ERROR_REASON_LABELS: Record<ErrorReason, string> = {
|
||||
// moved to apps/web/src/components/MarkdownRenderer.tsx so the new artifact
|
||||
// panes can render assistant content with the same Shiki + remark-gfm setup.
|
||||
|
||||
// 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';
|
||||
}
|
||||
|
||||
export interface MessageActions {
|
||||
onRegenerate?: (chatId: string, messageId: string) => Promise<void>;
|
||||
onResend?: (chatId: string, content: string) => Promise<void>;
|
||||
@@ -129,8 +117,8 @@ interface Props {
|
||||
sessionChats?: Chat[];
|
||||
capHitInfo?: { position: number; isLatest: boolean };
|
||||
actions?: MessageActions;
|
||||
/** Hide actions that don't apply (fork, delete, open-in-pane). */
|
||||
hideActions?: ('fork' | 'delete' | 'openInPane')[];
|
||||
/** Hide actions that don't apply (fork, delete). */
|
||||
hideActions?: ('fork' | 'delete')[];
|
||||
}
|
||||
|
||||
function StatsLine({ message }: { message: Message }) {
|
||||
@@ -226,7 +214,7 @@ function ActionRow({
|
||||
} else {
|
||||
const chat = await api.chats.fork(message.chat_id, { messageId: message.id });
|
||||
sessionEvents.emit({ type: 'refetch_messages' });
|
||||
sessionEvents.emit({ type: 'open_chat_in_active_pane', chat_id: chat.id });
|
||||
sessionEvents.emit({ type: 'open_chat_in_new_pane', chat_id: chat.id });
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'fork failed');
|
||||
@@ -258,54 +246,6 @@ function ActionRow({
|
||||
const canResend = isUser && message.status === 'complete' && !!message.content?.trim();
|
||||
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 (
|
||||
<>
|
||||
@@ -330,18 +270,6 @@ function ActionRow({
|
||||
<RefreshCw className="size-3" />
|
||||
</button>
|
||||
)}
|
||||
{isAssistant && !hiddenSet.has('openInPane') && (
|
||||
<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"
|
||||
|
||||
Reference in New Issue
Block a user