From 8f6360f99381b3e9d9d41281d44ff8cd2f9c7dde Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Sat, 3 Oct 2026 12:37:35 +0700
Subject: [PATCH] feat(workspace): frameless console that blends into its card

The tab bar and terminal lose their bordered box: the bar keeps one
divider with an accent underline on the active tab, and the terminal is
painted in the card's colour (--surface-3) instead of the page's.

That made a long-standing overflow visible: xterm re-measures its cell
only on a font option change or a resize, so a webfont landing after
open left the fit on the fallback font's cell and the rows/cols spilled
out of the pane. Re-set the family and refit on document.fonts
loadingdone.
---
 client/src/components/run/ConsoleTabs.tsx       | 12 +++++++-----
 client/src/components/run/TerminalView.tsx      | 17 +++++++++++++++--
 client/src/lib/__tests__/terminalTheme.test.ts  |  6 ++++--
 client/src/lib/terminalTheme.ts                 |  5 +++--
 client/src/pages/Workspace.tsx                  |  6 +-----
 .../screens.snapshot.test.tsx.snap              |  2 +-
 6 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/client/src/components/run/ConsoleTabs.tsx b/client/src/components/run/ConsoleTabs.tsx
index 256b04b2..3ea2ffa7 100644
--- a/client/src/components/run/ConsoleTabs.tsx
+++ b/client/src/components/run/ConsoleTabs.tsx
@@ -99,20 +99,22 @@ export function ConsoleTabs({
     "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-4 hover:text-fg-primary";
 
   return (
-    <div className="flex h-10 shrink-0 items-stretch rounded-t-lg border border-b-0 border-border bg-surface-2">
+    <div className="flex h-10 shrink-0 items-stretch border-b border-border">
       <div role="tablist" aria-label={t("tabs.label")} className="flex min-w-0 items-stretch">
         {tabs.map((r) => {
           const active = r.id === activeRunId;
           return (
             <div
               key={r.id}
-              className={`group relative flex min-w-0 max-w-[15rem] items-center border-r border-border ${
+              className={`group relative flex min-w-0 max-w-[15rem] items-center rounded-t-md ${
                 active
-                  ? "bg-surface-0 text-fg-primary"
-                  : "text-fg-muted hover:bg-surface-3 hover:text-fg-secondary"
+                  ? "text-fg-primary"
+                  : "text-fg-muted hover:bg-surface-4 hover:text-fg-secondary"
               }`}
             >
-              {active && <span className="absolute inset-x-0 top-0 h-0.5 bg-accent" />}
+              {active && (
+                <span className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-accent" />
+              )}
               <button
                 type="button"
                 role="tab"
diff --git a/client/src/components/run/TerminalView.tsx b/client/src/components/run/TerminalView.tsx
index 7a902dbc..f5c6ea85 100644
--- a/client/src/components/run/TerminalView.tsx
+++ b/client/src/components/run/TerminalView.tsx
@@ -268,18 +268,31 @@ export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
     const reassert = () => sendSize();
     term.textarea?.addEventListener("focus", reassert);
 
-    const resizeObserver = new ResizeObserver(() => {
+    const refit = () => {
       // Never fit a collapsed console — see sendSize.
       const el = containerRef.current;
       if (!el || !el.clientWidth || !el.clientHeight) return;
       fit.fit(); // a real change fires onResize, which reports it
-    });
+    };
+    const resizeObserver = new ResizeObserver(refit);
     if (containerRef.current) resizeObserver.observe(containerRef.current);
+    // A webfont landing after open changes the cell, not the container, so the
+    // observer never fires — and xterm re-measures its cell only on a font
+    // option change or a resize, so the fit kept the fallback font's cell and
+    // the rows/cols overflowed the pane. Re-setting the family (a trailing
+    // space keeps it a change) makes xterm measure again before the fit.
+    const onFontLoaded = () => {
+      const family = term.options.fontFamily ?? "";
+      term.options.fontFamily = family.endsWith(" ") ? family.trimEnd() : `${family} `;
+      refit();
+    };
+    document.fonts?.addEventListener("loadingdone", onFontLoaded);
 
     return () => {
       disposed = true;
       if (retryTimer) clearTimeout(retryTimer);
       resizeObserver.disconnect();
+      document.fonts?.removeEventListener("loadingdone", onFontLoaded);
       term.textarea?.removeEventListener("focus", reassert);
       resizeDisposable.dispose();
       dataDisposable.dispose();
diff --git a/client/src/lib/__tests__/terminalTheme.test.ts b/client/src/lib/__tests__/terminalTheme.test.ts
index c43a1184..e7316e83 100644
--- a/client/src/lib/__tests__/terminalTheme.test.ts
+++ b/client/src/lib/__tests__/terminalTheme.test.ts
@@ -24,7 +24,9 @@ const vars: Record<string, string> = {
 describe("buildTerminalTheme", () => {
   it("maps theme tokens onto the xterm palette", () => {
     const t = buildTerminalTheme((n) => vars[n] ?? "");
-    expect(t.background).toBe("#111113");
+    // The card's colour, so the terminal blends into the card it sits on.
+    expect(t.background).toBe("#272a2d");
+    expect(t.cursorAccent).toBe("#272a2d");
     expect(t.foreground).toBe("#edeef0");
     expect(t.cursor).toBe("#edeef0");
     expect(t.selectionBackground).toBe("#43484e");
@@ -58,7 +60,7 @@ describe("buildTerminalTheme", () => {
 describe("terminalThemeFor", () => {
   it("resolves variables on a dark probe scoped to the theme id, then removes it", () => {
     const style = document.createElement("style");
-    style.textContent = `.dark { --surface-0: 1 2 3; } .dark[data-theme="darcula"] { --surface-0: 30 31 32; }`;
+    style.textContent = `.dark { --surface-3: 1 2 3; } .dark[data-theme="darcula"] { --surface-3: 30 31 32; }`;
     document.head.appendChild(style);
     try {
       expect(terminalThemeFor("default").background).toBe("#010203");
diff --git a/client/src/lib/terminalTheme.ts b/client/src/lib/terminalTheme.ts
index e2b04ef0..2ac26284 100644
--- a/client/src/lib/terminalTheme.ts
+++ b/client/src/lib/terminalTheme.ts
@@ -54,10 +54,11 @@ export function buildTerminalTheme(read: VarReader): ITheme {
   const magenta = "#c678dd";
   const cyan = "#56b6c2";
   return {
-    background: v("--surface-0"),
+    // The `.card` colour: the console sits on a card, with no frame between.
+    background: v("--surface-3"),
     foreground: v("--fg-primary"),
     cursor: v("--fg-primary"),
-    cursorAccent: v("--surface-0"),
+    cursorAccent: v("--surface-3"),
     selectionBackground: v("--border-light"),
     black: v("--border-light"),
     red,
diff --git a/client/src/pages/Workspace.tsx b/client/src/pages/Workspace.tsx
index 2c265fc4..d05abcb5 100644
--- a/client/src/pages/Workspace.tsx
+++ b/client/src/pages/Workspace.tsx
@@ -180,11 +180,7 @@ function ConsoleArea({
           actions={<LaneToolsMenu lane={lane} />}
         />
       )}
-      <div
-        className={`flex min-h-0 flex-1 flex-col border border-border bg-surface-0 p-2 ${
-          lane ? "rounded-b-lg" : "rounded-lg"
-        }`}
-      >
+      <div className="flex min-h-0 flex-1 flex-col pt-2">
         {slots.map((slot) => (
           <div key={slot} className={slot === activeSlot ? "contents" : "hidden"}>
             <LaneConsolePane
diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index 19a2b5a3..814abc87 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -5413,7 +5413,7 @@ exports[`screen snapshots > Run 1`] = `
                 class="flex min-h-0 flex-1 flex-col"
               >
                 <div
-                  class="flex min-h-0 flex-1 flex-col border border-border bg-surface-0 p-2 rounded-lg"
+                  class="flex min-h-0 flex-1 flex-col pt-2"
                 >
                   <div
                     class="contents"