indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.0.0: BooCoder frontend — chat pane + diff pane + session picker

Browse Source 
Integrates BooCoder as a 'coder' workspace pane within the existing
BooChat SPA at code.indifferentketchup.com. Renamed the placeholder
'agent' pane kind to 'coder' across all types, menus, hooks, and
mobile switcher (Icon: Code instead of Bot).

CoderPane.tsx: split layout with chat area (messages via WS to
boocoder:9502, input bar posting to /api/coder/sessions/:id/messages)
and diff panel (pending changes with Approve/Reject per change plus
Approve All/Reject All). Reuses MarkdownRenderer for message content.

Proxy: Vite dev config adds /api/coder → boocoder:9502 (ordered above
/api per CLAUDE.md proxy-ordering rule). Production: Fastify route in
apps/server/src/index.ts proxies /api/coder/* to http://boocoder:3000
via fetch() pass-through. WS connects directly to :9502 (same
Tailscale network, no proxy needed for WebSocket upgrade).

WorkspacePaneKind mirror updated in both apps/web and apps/server
types. useWorkspacePanes gains coderPane() factory (replaces the old
agent toast stub). Workspace.tsx switch renders CoderPane for
pane.kind === 'coder'.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
indifferentketchup
2026-05-25 03:24:49 +00:00
parent 78455b7efc
commit 457c59fb06
11 changed files with 512 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/server/src/index.ts
View File

@@ -212,6 +212,37 @@ async function main() {
});
registerWebSocket(app, sql, broker);
// v2.0.0: reverse proxy /api/coder/* to the boocoder container. Keeps the
// SPA's HTTP requests going through a single origin (avoids CORS). WS for
// the coder pane connects directly to boocoder:9502 from the browser (same
// Tailscale network — no CORS issue for WebSocket upgrade requests).
const BOOCODER_ORIGIN = process.env.BOOCODER_URL ?? 'http://boocoder:3000';
app.all('/api/coder/*', async (req, reply) => {
const targetPath = req.url.replace('/api/coder', '/api');
const targetUrl = `${BOOCODER_ORIGIN}${targetPath}`;
const headers: Record<string, string> = {};
if (req.headers['content-type']) headers['content-type'] = req.headers['content-type'] as string;
if (req.headers['authorization']) headers['authorization'] = req.headers['authorization'] as string;
try {
const res = await fetch(targetUrl, {
method: req.method as string,
headers,
body: req.method !== 'GET' && req.method !== 'HEAD' ? JSON.stringify(req.body) : undefined,
});
reply.code(res.status);
for (const [key, value] of res.headers) {
if (key === 'transfer-encoding') continue;
reply.header(key, value);
}
const body = await res.text();
return reply.send(body);
} catch (err) {
app.log.error({ err, targetUrl }, 'coder proxy error');
reply.code(502).send({ error: 'boocoder backend unavailable' });
}
});
const webDist = process.env.WEB_DIST_PATH ?? resolve(process.cwd(), '../web/dist');
if (existsSync(webDist)) {
await app.register(fastifyStatic, {

2
apps/server/src/types/api.ts
View File

@@ -56,7 +56,7 @@ export interface Session {
export type WorkspacePaneKind =
| 'chat'
| 'terminal'
| 'agent'
| 'coder'
| 'empty'
| 'settings'
| 'markdown_artifact'

2
apps/web/src/api/types.ts
View File

@@ -326,7 +326,7 @@ export interface AskUserAnswerSet {
export type WorkspacePaneKind =
| 'chat'
| 'terminal'
| 'agent'
| 'coder'
| 'empty'
| 'settings'
| 'markdown_artifact'

8
apps/web/src/components/ChatTabBar.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react';
import { Bot, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
import { Code, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
import type { Chat, WorkspacePane } from '@/api/types';
import { StatusDot } from '@/components/StatusDot';
import {
@@ -26,7 +26,7 @@ interface Props {
onCloseOthers: (chatId: string) => void;
onCloseToRight: (chatId: string) => void;
onCloseAll: () => void;
onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
onShowHistory: () => void;
onRename: (chatId: string, name: string) => Promise<void>;
onRemovePane?: () => void;
@@ -188,8 +188,8 @@ export function ChatTabBar({
<DropdownMenuItem onSelect={() => onAddPane('terminal')}>
<Terminal size={14} /> New terminal
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => onAddPane('agent')}>
<Bot size={14} /> New agent
<DropdownMenuItem onSelect={() => onAddPane('coder')}>
<Code size={14} /> New coder
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

6
apps/web/src/components/MobileTabSwitcher.tsx
View File

@@ -1,6 +1,6 @@
import { useRef, useState } from 'react';
import {
Bot,
Code,
ChevronDown,
Edit2,
MessageSquare,
@@ -43,7 +43,7 @@ const SWIPE_VISUAL_CAP = 120;
function paneIcon(kind: WorkspacePane['kind']) {
if (kind === 'terminal') return <Terminal size={14} />;
if (kind === 'agent') return <Bot size={14} />;
if (kind === 'coder') return <Code size={14} />;
if (kind === 'settings') return <SettingsIcon size={14} />;
return <MessageSquare size={14} />;
}
@@ -64,7 +64,7 @@ function paneLabel(pane: WorkspacePane, chats: Chat[]): string {
}
if (pane.kind === 'chat') return 'Chat';
if (pane.kind === 'terminal') return 'Terminal';
if (pane.kind === 'agent') return 'Agent';
if (pane.kind === 'coder') return 'Coder';
if (pane.kind === 'settings') return 'Settings';
return 'Empty';
}

13
apps/web/src/components/NewPaneMenu.tsx
View File

@@ -1,4 +1,4 @@
import { Bot, MessageSquare, Plus, Terminal } from 'lucide-react';
import { Code, MessageSquare, Plus, Terminal } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
@@ -7,14 +7,13 @@ import {
} from '@/components/ui/dropdown-menu';
interface Props {
onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
disabled?: boolean;
}
// v1.8 row-2 right cluster: mirrors the desktop Workspace.tsx Split dropdown.
// Terminal and Agent items pass through to addSplitPane which already shows
// "coming soon" toasts; rendering them here matches the Batch 3 workspace
// model so the UI is forward-compatible with BooTerm/BooCoder.
// Terminal + Coder items pass through to addSplitPane which creates panes
// of the appropriate kind.
export function NewPaneMenu({ onAddPane, disabled }: Props) {
return (
<DropdownMenu>
@@ -35,8 +34,8 @@ export function NewPaneMenu({ onAddPane, disabled }: Props) {
<DropdownMenuItem onSelect={() => onAddPane('terminal')}>
<Terminal size={14} /> New terminal
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => onAddPane('agent')}>
<Bot size={14} /> New agent
<DropdownMenuItem onSelect={() => onAddPane('coder')}>
<Code size={14} /> New coder
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

13
apps/web/src/components/Workspace.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { PanelRight, MessageSquare, Terminal, Bot, Clipboard, Plus, X } from 'lucide-react';
import { PanelRight, MessageSquare, Terminal, Code, Clipboard, Plus, X } from 'lucide-react';
import type { Chat, Project, Session, WorkspacePane } from '@/api/types';
import { MAX_PANES, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
@@ -8,6 +8,7 @@ import { terminalsRegistry } from '@/lib/events';
import { ChatPane } from '@/components/panes/ChatPane';
import { SettingsPane } from '@/components/panes/SettingsPane';
import { TerminalPane } from '@/components/panes/TerminalPane';
import { CoderPane } from '@/components/panes/CoderPane';
import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
import { ChatTabBar } from '@/components/ChatTabBar';
@@ -160,8 +161,8 @@ export function Workspace({
<DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
<Terminal size={14} /> Terminal
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => addSplitPane('agent')}>
<Bot size={14} /> Agent
<DropdownMenuItem onSelect={() => addSplitPane('coder')}>
<Code size={14} /> Coder
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -264,8 +265,8 @@ export function Workspace({
<DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
<Terminal size={14} /> New terminal
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => addSplitPane('agent')}>
<Bot size={14} /> New agent
<DropdownMenuItem onSelect={() => addSplitPane('coder')}>
<Code size={14} /> New coder
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -321,6 +322,8 @@ export function Workspace({
label={terminalLabels.get(pane.id) ?? 'Terminal'}
active={idx === activePaneIdx}
/>
) : pane.kind === 'coder' ? (
<CoderPane sessionId={sessionId} />
) : pane.kind === 'markdown_artifact' && pane.markdown_artifact_state ? (
<MarkdownArtifactPane
chatId={pane.markdown_artifact_state.chat_id}

432
apps/web/src/components/panes/CoderPane.tsx Normal file
View File

@@ -0,0 +1,432 @@
// v2.0.0: BooCoder pane — renders the BooCoder chat + diff interface inside
// BooChat's multi-pane workspace.
//
// Architecture:
// - REST calls go through /api/coder/* which BooChat's server proxies to
// the boocoder container at http://boocoder:3000/api/*
// - WS connects directly to the boocoder container at :9502 (same Tailscale
// network, no CORS for WebSocket). In dev, the Vite proxy handles it.
import { useCallback, useEffect, useRef, useState } from 'react';
import { Code, Send, Check, X, RefreshCw } from 'lucide-react';
import { MarkdownRenderer } from '@/components/MarkdownRenderer';
import { cn } from '@/lib/utils';
// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------
interface CoderMessage {
id: string;
role: 'user' | 'assistant' | 'system';
content: string;
status?: 'streaming' | 'complete' | 'failed';
tool_calls?: Array<{
id: string;
function: { name: string; arguments: string };
}>;
tool_results?: {
tool_call_id: string;
content: string;
};
}
interface PendingChange {
id: string;
file_path: string;
operation: 'create' | 'modify' | 'delete';
diff?: string;
new_content?: string;
status: 'pending' | 'approved' | 'rejected';
}
interface Props {
sessionId: string;
}
// ---------------------------------------------------------------------------
// Hooks
// ---------------------------------------------------------------------------
function useCoderMessages(sessionId: string) {
const [messages, setMessages] = useState<CoderMessage[]>([]);
const [connected, setConnected] = useState(false);
const wsRef = useRef<WebSocket | null>(null);
useEffect(() => {
// Fetch existing messages on mount
fetch(`/api/coder/sessions/${sessionId}/messages`)
.then((res) => res.ok ? res.json() : [])
.then((data: CoderMessage[]) => setMessages(data))
.catch(() => {/* noop — coder backend may not be running */});
}, [sessionId]);
useEffect(() => {
// WS connects to the coder backend. In production, this goes through the
// same host (BooChat serves the SPA and proxies). In dev, Vite proxy
// handles /api/coder/ws/* -> boocoder:9502.
const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${proto}//${window.location.host}/api/coder/ws/sessions/${sessionId}`;
const ws = new WebSocket(wsUrl);
wsRef.current = ws;
ws.onopen = () => setConnected(true);
ws.onclose = () => setConnected(false);
ws.onmessage = (ev) => {
try {
const frame = JSON.parse(ev.data as string);
if (frame.type === 'message_started') {
setMessages((prev) => [
...prev,
{ id: frame.message_id, role: frame.role ?? 'assistant', content: '', status: 'streaming' },
]);
} else if (frame.type === 'delta') {
setMessages((prev) =>
prev.map((m) =>
m.id === frame.message_id
? { ...m, content: m.content + (frame.content ?? '') }
: m
)
);
} else if (frame.type === 'message_complete') {
setMessages((prev) =>
prev.map((m) =>
m.id === frame.message_id ? { ...m, status: 'complete' } : m
)
);
} else if (frame.type === 'tool_call') {
setMessages((prev) =>
prev.map((m) =>
m.id === frame.message_id
? {
...m,
tool_calls: [
...(m.tool_calls ?? []),
{ id: frame.tool_call_id, function: { name: frame.name, arguments: frame.arguments ?? '' } },
],
}
: m
)
);
}
} catch {
// ignore unparseable frames
}
};
return () => {
ws.close();
wsRef.current = null;
};
}, [sessionId]);
return { messages, setMessages, connected };
}
function usePendingChanges(sessionId: string) {
const [changes, setChanges] = useState<PendingChange[]>([]);
const [loading, setLoading] = useState(false);
const refresh = useCallback(() => {
setLoading(true);
fetch(`/api/coder/sessions/${sessionId}/pending`)
.then((res) => res.ok ? res.json() : [])
.then((data: PendingChange[]) => setChanges(data))
.catch(() => {/* noop */})
.finally(() => setLoading(false));
}, [sessionId]);
useEffect(() => { refresh(); }, [refresh]);
const approve = useCallback(async (changeId: string) => {
const res = await fetch(`/api/coder/sessions/${sessionId}/pending/${changeId}/approve`, {
method: 'POST',
});
if (res.ok) {
setChanges((prev) => prev.map((c) => c.id === changeId ? { ...c, status: 'approved' } : c));
}
}, [sessionId]);
const reject = useCallback(async (changeId: string) => {
const res = await fetch(`/api/coder/sessions/${sessionId}/pending/${changeId}/reject`, {
method: 'POST',
});
if (res.ok) {
setChanges((prev) => prev.map((c) => c.id === changeId ? { ...c, status: 'rejected' } : c));
}
}, [sessionId]);
return { changes, loading, refresh, approve, reject };
}
// ---------------------------------------------------------------------------
// Sub-components
// ---------------------------------------------------------------------------
function CoderMessageBubble({ message }: { message: CoderMessage }) {
const isUser = message.role === 'user';
return (
<div className={cn('flex flex-col gap-1 px-3 py-2', isUser ? 'items-end' : 'items-start')}>
<div
className={cn(
'rounded-lg px-3 py-2 max-w-[85%] text-sm',
isUser
? 'bg-primary text-primary-foreground'
: 'bg-muted text-foreground'
)}
>
{isUser ? (
<p className="whitespace-pre-wrap">{message.content}</p>
) : (
<div className="prose prose-sm dark:prose-invert max-w-none">
<MarkdownRenderer content={message.content} />
</div>
)}
{message.tool_calls && message.tool_calls.length > 0 && (
<div className="mt-2 border-t border-border/50 pt-2 space-y-1">
{message.tool_calls.map((tc) => (
<div key={tc.id} className="text-xs font-mono text-muted-foreground">
<span className="text-primary/70">{tc.function.name}</span>
{tc.function.arguments && (
<span className="ml-1 opacity-60">
({tc.function.arguments.slice(0, 80)}
{tc.function.arguments.length > 80 ? '...' : ''})
</span>
)}
</div>
))}
</div>
)}
{message.status === 'streaming' && (
<span className="inline-block w-2 h-4 bg-current opacity-60 animate-pulse ml-0.5" />
)}
</div>
</div>
);
}
function DiffPanel({
changes,
loading,
onRefresh,
onApprove,
onReject,
}: {
changes: PendingChange[];
loading: boolean;
onRefresh: () => void;
onApprove: (id: string) => void;
onReject: (id: string) => void;
}) {
const pending = changes.filter((c) => c.status === 'pending');
return (
<div className="flex flex-col h-full border-t border-border">
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/30">
<span className="text-xs font-medium text-muted-foreground">
Pending Changes {pending.length > 0 && `(${pending.length})`}
</span>
<button
type="button"
onClick={onRefresh}
disabled={loading}
className="inline-flex items-center justify-center size-6 rounded hover:bg-muted text-muted-foreground"
aria-label="Refresh pending changes"
>
<RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
</button>
</div>
<div className="flex-1 overflow-y-auto">
{pending.length === 0 ? (
<div className="flex items-center justify-center h-full text-sm text-muted-foreground">
No pending changes
</div>
) : (
<div className="divide-y divide-border">
{pending.map((change) => (
<div key={change.id} className="px-3 py-2">
<div className="flex items-center justify-between mb-1">
<span className="text-xs font-mono text-foreground truncate flex-1 mr-2">
<span className={cn(
'inline-block w-1.5 h-1.5 rounded-full mr-1.5',
change.operation === 'create' && 'bg-green-500',
change.operation === 'modify' && 'bg-yellow-500',
change.operation === 'delete' && 'bg-red-500',
)} />
{change.file_path}
</span>
<div className="flex items-center gap-1 shrink-0">
<button
type="button"
onClick={() => onApprove(change.id)}
className="inline-flex items-center justify-center size-6 rounded bg-green-500/10 hover:bg-green-500/20 text-green-600 dark:text-green-400"
aria-label="Approve change"
title="Approve"
>
<Check size={12} />
</button>
<button
type="button"
onClick={() => onReject(change.id)}
className="inline-flex items-center justify-center size-6 rounded bg-red-500/10 hover:bg-red-500/20 text-red-600 dark:text-red-400"
aria-label="Reject change"
title="Reject"
>
<X size={12} />
</button>
</div>
</div>
{change.diff && (
<pre className="text-[11px] font-mono bg-muted/50 rounded p-2 overflow-x-auto max-h-32 whitespace-pre">
{change.diff}
</pre>
)}
</div>
))}
</div>
)}
</div>
</div>
);
}
// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------
export function CoderPane({ sessionId }: Props) {
const { messages, setMessages, connected } = useCoderMessages(sessionId);
const { changes, loading, refresh, approve, reject } = usePendingChanges(sessionId);
const [input, setInput] = useState('');
const [sending, setSending] = useState(false);
const messagesEndRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null);
// Auto-scroll on new messages
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
// Refresh pending changes when a message_complete arrives
useEffect(() => {
const lastMsg = messages[messages.length - 1];
if (lastMsg?.role === 'assistant' && lastMsg.status === 'complete') {
refresh();
}
}, [messages, refresh]);
const handleSend = useCallback(async () => {
const text = input.trim();
if (!text || sending) return;
setInput('');
setSending(true);
// Optimistic user message
const tempId = `temp-${Date.now()}`;
setMessages((prev) => [...prev, { id: tempId, role: 'user', content: text, status: 'complete' }]);
try {
const res = await fetch(`/api/coder/sessions/${sessionId}/messages`, {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ content: text }),
});
if (res.ok) {
const data = await res.json();
// Replace temp message with real one if server returned it
if (data.user_message_id) {
setMessages((prev) =>
prev.map((m) => m.id === tempId ? { ...m, id: data.user_message_id } : m)
);
}
}
} catch {
// The WS will bring the real messages; optimistic is good enough
} finally {
setSending(false);
}
}, [input, sending, sessionId, setMessages]);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
void handleSend();
}
},
[handleSend]
);
return (
<div className="flex flex-col h-full bg-background">
{/* Header */}
<div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-muted/30 shrink-0">
<Code size={14} className="text-muted-foreground" />
<span className="text-xs font-medium text-muted-foreground">BooCoder</span>
<span
className={cn(
'inline-block w-1.5 h-1.5 rounded-full ml-auto',
connected ? 'bg-green-500' : 'bg-red-500'
)}
title={connected ? 'Connected' : 'Disconnected'}
/>
</div>
{/* Chat area */}
<div className="flex-1 min-h-0 overflow-y-auto">
{messages.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-sm text-muted-foreground gap-2">
<Code size={32} className="opacity-40" />
<p>Send a message to start coding</p>
</div>
) : (
<div className="py-2">
{messages.map((msg) => (
<CoderMessageBubble key={msg.id} message={msg} />
))}
<div ref={messagesEndRef} />
</div>
)}
</div>
{/* Diff panel — only shows when there are pending changes */}
{changes.filter((c) => c.status === 'pending').length > 0 && (
<div className="h-48 shrink-0">
<DiffPanel
changes={changes}
loading={loading}
onRefresh={refresh}
onApprove={approve}
onReject={reject}
/>
</div>
)}
{/* Input */}
<div className="shrink-0 border-t border-border p-2">
<div className="flex items-end gap-2">
<textarea
ref={inputRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Ask BooCoder to write code..."
rows={1}
className="flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring max-h-32 min-h-[36px] max-md:min-h-[44px]"
/>
<button
type="button"
onClick={() => void handleSend()}
disabled={!input.trim() || sending}
className="inline-flex items-center justify-center size-9 max-md:min-h-[44px] max-md:min-w-[44px] rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
aria-label="Send message"
>
<Send size={16} />
</button>
</div>
</div>
</div>
);
}

22
apps/web/src/hooks/useWorkspacePanes.ts
View File

@@ -40,6 +40,13 @@ function terminalPane(id: string = generateId()): WorkspacePane {
return { id, kind: 'terminal', chatIds: [], activeChatIdx: -1 };
}
// v2.0.0: coder pane — renders the BooCoder interface (chat + diff panel).
// Like terminal panes, carries no chats — the CoderPane component manages
// its own session/messages via the /api/coder proxy.
function coderPane(id: string = generateId()): WorkspacePane {
return { id, kind: 'coder', chatIds: [], activeChatIdx: -1 };
}
// v1.9: settings pane factory. No chats, no state beyond identity — the
// SettingsPane component renders Session/Project sections from the
// surrounding session/project.
@@ -109,10 +116,10 @@ export interface UseWorkspacePanesResult {
closeAllTabs: (paneIdx: number) => void;
showLandingPage: (paneIdx: number) => void;
// v1.10.3: returns the new pane's id (or null if the operation was a no-op:
// 'agent' kind is a toast stub, or max panes reached). Callers can use the
// max panes reached). Callers can use the
// id to update mobile URL state so the URL-sync effect doesn't fight the
// freshly-set activePaneIdx.
addSplitPane: (kind: 'chat' | 'terminal' | 'agent') => string | null;
addSplitPane: (kind: 'chat' | 'terminal' | 'coder') => string | null;
// Open-on-first-click, close-on-second-click. Singleton — settings panes
// don't count toward MAX_PANES. Closing the only remaining pane (edge case)
// falls back to an empty pane to preserve the "always one pane" invariant.
@@ -388,11 +395,7 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
});
}, []);
const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'agent'): string | null => {
if (kind === 'agent') {
toast('Agent panes coming in BooCoder');
return null;
}
const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'coder'): string | null => {
// Generate the id outside the updater so we can return it deterministically.
// setPanes's updater can be invoked twice in strict mode; using a fixed id
// ensures both invocations agree and the returned id matches what landed.
@@ -404,7 +407,10 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
toast.error(`Maximum ${MAX_PANES} panes`);
return prev;
}
const newPane = kind === 'terminal' ? terminalPane(newPaneId) : emptyPane(newPaneId);
const newPane =
kind === 'terminal' ? terminalPane(newPaneId) :
kind === 'coder' ? coderPane(newPaneId) :
emptyPane(newPaneId);
const next = [...prev, newPane];
setActivePaneIdx(next.length - 1);
success = true;

2
apps/web/src/pages/Session.tsx
View File

@@ -178,7 +178,7 @@ function SessionInner({ sessionId }: { sessionId: string }) {
// the new pane's id to the URL atomically so the effect's next pass sees a
// matching id and is a no-op. Desktop has no URL pane state — fall through.
const addPaneAndSwitch = useCallback(
(kind: 'chat' | 'terminal' | 'agent') => {
(kind: 'chat' | 'terminal' | 'coder') => {
const newPaneId = addSplitPane(kind);
if (newPaneId === null) return;
if (isMobile) {

11
apps/web/vite.config.ts
View File

@@ -30,6 +30,17 @@ export default defineConfig({
'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
},
},
// BooCoder: proxy /api/coder/* to the coder container. Must be listed
// before /api so the more-specific prefix matches first.
'/api/coder': {
target: process.env.BOOCODER_DEV_URL ?? 'http://127.0.0.1:9502',
changeOrigin: true,
ws: true,
rewrite: (path: string) => path.replace(/^\/api\/coder/, '/api'),
headers: {
'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
},
},
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,