feat: strip dcp-message-id tags from opencode output + reopen closed panes

Two independent fixes: - opencode-server.ts: stripDcpTags() removes <dcp-message-id>…</dcp-message-id> tags from text deltas before they reach the frame/DB. Applied to all three text paths (session.next.text.delta, message.part.delta text field, handleUpdatedPart text type). Reasoning/tool paths untouched. - useWorkspacePanes.ts: module-level closedPaneStack (capped at 10) captures pane kind + chatIds on removePane and removeTab auto-remove. reopenPane() pops the stack and re-attaches a new pane to the existing chat ids (chats survive pane close server-side). hasClosedPanes drives conditional render. - ChatTabBar.tsx: [+] is now instant new-tab (no dropdown); split-pane dropdown (Columns2 icon) opens Chat/Term/Code in a new pane; reopen button (RotateCcw icon) appears when closed panes exist. - Workspace.tsx: pass reopenPane + hasClosedPanes through to ChatTabBar. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-30 21:26:07 +00:00
parent 6d24726c3a
commit 315cdd23e2
4 changed files with 91 additions and 17 deletions
--- a/apps/coder/src/services/backends/opencode-server.ts
+++ b/apps/coder/src/services/backends/opencode-server.ts
@@ -192,7 +192,8 @@ export class OpenCodeServerBackend implements AgentBackend {
        const st = this.byOpencodeId.get(p.sessionID);
        if (!st?.activeTurn) return;
        this.bumpActivity(st);
-        st.activeTurn.onEvent({ type: 'text', text: p.delta });
+        const cleaned = stripDcpTags(p.delta);
+        if (cleaned) st.activeTurn.onEvent({ type: 'text', text: cleaned });
        return;
      }
      case 'session.next.reasoning.delta': {
@@ -264,7 +265,8 @@ export class OpenCodeServerBackend implements AgentBackend {
          st.activeTurn.onEvent({ type: 'reasoning', text: p.delta });
        } else if (p.field === 'text') {
          st.streamedPartKeys.add(`text:${p.partID}`);
-          st.activeTurn.onEvent({ type: 'text', text: p.delta });
+          const cleaned = stripDcpTags(p.delta);
+          if (cleaned) st.activeTurn.onEvent({ type: 'text', text: cleaned });
        }
        return;
      }
@@ -301,7 +303,8 @@ export class OpenCodeServerBackend implements AgentBackend {
      st.partTypeById.set(part.id, part.type);
      const key = resolvePartDedupeKey(part, part.type);
      if (key && st.streamedPartKeys.delete(key)) return; // already streamed via delta
-      const text = part.text ?? '';
+      const raw = part.text ?? '';
+      const text = part.type === 'text' ? stripDcpTags(raw) : raw;
      if (text && part.time?.end != null) {
        turn.onEvent({ type: part.type, text });
      }
@@ -717,6 +720,11 @@ function sleep(ms: number): Promise<void> {
  return new Promise((r) => setTimeout(r, ms));
 }

+/** Strip opencode-dcp plugin tags that render as literal text in the UI. */
+function stripDcpTags(s: string): string {
+  return s.replace(/<dcp-message-id>[^<]*<\/dcp-message-id>/g, '');
+}
+
 function errMsg(e: unknown): string {
  return e instanceof Error ? e.message : String(e);
 }
--- a/apps/web/src/components/ChatTabBar.tsx
+++ b/apps/web/src/components/ChatTabBar.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Code, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
+import { Code, Columns2, History, MessageSquare, Plus, RotateCcw, Terminal, X } from 'lucide-react';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { StatusDot } from '@/components/StatusDot';
 import {
@@ -26,7 +26,9 @@ interface Props {
  onCloseOthers: (chatId: string) => void;
  onCloseToRight: (chatId: string) => void;
  onCloseAll: () => void;
-  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
+  onNewTab: () => void;
+  onSplitPane: (kind: 'chat' | 'terminal' | 'coder') => void;
+  onReopenPane?: () => void;
  onShowHistory: () => void;
  onRename: (chatId: string, name: string) => Promise<void>;
  onRemovePane?: () => void;
@@ -40,7 +42,9 @@ export function ChatTabBar({
  onCloseOthers,
  onCloseToRight,
  onCloseAll,
-  onAddPane,
+  onNewTab,
+  onSplitPane,
+  onReopenPane,
  onShowHistory,
  onRename,
  onRemovePane,
@@ -131,7 +135,7 @@ export function ChatTabBar({
              </div>
            </ContextMenuTrigger>
            <ContextMenuContent>
-              <ContextMenuItem onSelect={() => onAddPane('chat')}>
+              <ContextMenuItem onSelect={onNewTab}>
                New chat
              </ContextMenuItem>
              <ContextMenuSeparator />
@@ -170,29 +174,49 @@ export function ChatTabBar({
      )}

      <div className="flex items-center ml-auto gap-0.5 px-1 shrink-0">
+        <button
+          type="button"
+          onClick={onNewTab}
+          className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
+          aria-label="New tab"
+          title="New tab"
+        >
+          <Plus size={12} />
+        </button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
-              aria-label="New pane"
-              title="New pane"
+              aria-label="Split pane"
+              title="Split pane"
            >
-              <Plus size={12} />
+              <Columns2 size={12} />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-fit">
-            <DropdownMenuItem onSelect={() => onAddPane('chat')}>
+            <DropdownMenuItem onSelect={() => onSplitPane('chat')}>
              <MessageSquare size={14} /> New BooChat
            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
+            <DropdownMenuItem onSelect={() => onSplitPane('terminal')}>
              <Terminal size={14} /> New BooTerm
            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onAddPane('coder')}>
+            <DropdownMenuItem onSelect={() => onSplitPane('coder')}>
              <Code size={14} /> New BooCode
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
+        {onReopenPane && (
+          <button
+            type="button"
+            onClick={onReopenPane}
+            className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
+            aria-label="Reopen closed pane"
+            title="Reopen closed pane"
+          >
+            <RotateCcw size={12} />
+          </button>
+        )}
        <button
          type="button"
          onClick={onShowHistory}
--- a/apps/web/src/components/Workspace.tsx
+++ b/apps/web/src/components/Workspace.tsx
@@ -65,6 +65,8 @@ export function Workspace({
    showLandingPage,
    addSplitPane,
    removePane,
+    reopenPane,
+    hasClosedPanes,
    isPaneChatPending,
    handlePaneDragStart,
    handlePaneDragOver,
@@ -207,10 +209,9 @@ export function Workspace({
                  onCloseOthers={(chatId) => closeOtherTabs(idx, chatId)}
                  onCloseToRight={(chatId) => closeTabsToRight(idx, chatId)}
                  onCloseAll={() => closeAllTabs(idx)}
-                  onAddPane={(kind) => {
-                    if (kind === 'chat') void createChat(idx);
-                    else onAddPane(kind);
-                  }}
+                  onNewTab={() => void createChat(idx)}
+                  onSplitPane={(kind) => onAddPane(kind)}
+                  onReopenPane={hasClosedPanes ? reopenPane : undefined}
                  onShowHistory={() => showLandingPage(idx)}
                  onRename={renameChat}
                  onRemovePane={panes.length > 1 ? () => removePane(idx) : undefined}
--- a/apps/web/src/hooks/useWorkspacePanes.ts
+++ b/apps/web/src/hooks/useWorkspacePanes.ts
@@ -32,6 +32,21 @@ function chatPane(chatId: string): WorkspacePane {
  return { id: generateId(), kind: 'chat', chatId, chatIds: [chatId], activeChatIdx: 0 };
 }

+interface ClosedPaneEntry {
+  kind: WorkspacePane['kind'];
+  chatIds: string[];
+  activeChatIdx: number;
+}
+const MAX_CLOSED = 10;
+const closedPaneStack: ClosedPaneEntry[] = [];
+
+function pushClosed(pane: WorkspacePane): void {
+  if (pane.kind === 'empty' || pane.kind === 'settings') return;
+  if (pane.chatIds.length === 0) return;
+  closedPaneStack.push({ kind: pane.kind, chatIds: [...pane.chatIds], activeChatIdx: pane.activeChatIdx });
+  if (closedPaneStack.length > MAX_CLOSED) closedPaneStack.shift();
+}
+
 function chatNameForPaneKind(kind: 'coder' | 'terminal'): string {
  return kind === 'coder' ? 'BooCoder' : 'Terminal';
 }
@@ -137,6 +152,8 @@ export interface UseWorkspacePanesResult {
  // falls back to an empty pane to preserve the "always one pane" invariant.
  toggleSettingsPane: () => string | null;
  removePane: (idx: number) => void;
+  reopenPane: () => void;
+  hasClosedPanes: boolean;
  removeChatFromPanes: (chatId: string) => void;
  initializeFirstChatIfEmpty: (chatId: string) => void;
  validatePanes: (validChatIds: Set<string>) => void;
@@ -394,6 +411,7 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
        if (next.length > 1) {
          // Last tab closed and other panes exist — remove the whole pane
          // instead of leaving an orphaned empty panel.
+          pushClosed(pane); setHasClosedPanes(true);
          const spliced = next.filter((_, i) => i !== paneIdx);
          setActivePaneIdx((ai) => Math.min(ai, spliced.length - 1));
          return spliced;
@@ -541,6 +559,7 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
      // The endpoint is idempotent (404 on missing session) so a strict-mode
      // double-invoke of the updater is safe.
      const removed = prev[idx];
+      if (removed) { pushClosed(removed); setHasClosedPanes(true); }
      if (removed?.kind === 'terminal') {
        api.terminals.kill(sessionId, removed.id).catch(() => { /* non-fatal */ });
      }
@@ -550,6 +569,26 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
    });
  }, [sessionId]);

+  const [hasClosedPanes, setHasClosedPanes] = useState(closedPaneStack.length > 0);
+
+  const reopenPane = useCallback(() => {
+    const entry = closedPaneStack.pop();
+    setHasClosedPanes(closedPaneStack.length > 0);
+    if (!entry) return;
+    setPanes((prev) => {
+      const restored: WorkspacePane = {
+        id: generateId(),
+        kind: entry.kind,
+        chatId: entry.chatIds[entry.activeChatIdx] ?? entry.chatIds[0],
+        chatIds: entry.chatIds,
+        activeChatIdx: Math.min(entry.activeChatIdx, entry.chatIds.length - 1),
+      };
+      const next = [...prev, restored];
+      setActivePaneIdx(next.length - 1);
+      return next;
+    });
+  }, []);
+
  // Replaces a single empty default pane with a chat pane. Used by the initial
  // chat fetch to land on the most-recent open chat if no saved pane state.
  const initializeFirstChatIfEmpty = useCallback((chatId: string) => {
@@ -679,6 +718,8 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
    addSplitPane,
    toggleSettingsPane,
    removePane,
+    reopenPane,
+    hasClosedPanes,
    removeChatFromPanes,
    initializeFirstChatIfEmpty,
    validatePanes,