tweak(ui): session spacing (#20839)

Co-authored-by: Adam <[email protected]>
Co-authored-by: Brendan Allan <[email protected]>

packages/opencode/.opencode/package-lock.json

@@ -0,0 +1,31 @@
+{
+  "name": ".opencode",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@opencode-ai/plugin": "*"
+      }
+    },
+    "node_modules/@opencode-ai/plugin": {
+      "version": "1.2.6",
+      "license": "MIT",
+      "dependencies": {
+        "@opencode-ai/sdk": "1.2.6",
+        "zod": "4.1.8"
+      }
+    },
+    "node_modules/@opencode-ai/sdk": {
+      "version": "1.2.6",
+      "license": "MIT"
+    },
+    "node_modules/zod": {
+      "version": "4.1.8",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}

packages/ui/src/components/collapsible.css

@@ -9,7 +9,7 @@
   overflow: visible;
 
   &.tool-collapsible {
-    --tool-content-gap: 8px;
+    --tool-content-gap: 4px;
     gap: var(--tool-content-gap);
   }
 

packages/ui/src/components/markdown.css

@@ -6,7 +6,7 @@
   color: var(--text-strong);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base); /* 14px */
-  line-height: var(--line-height-x-large);
+  line-height: 160%;
 
   /* Spacing for flow */
   > *:first-child {
@@ -23,11 +23,11 @@
   h4,
   h5,
   h6 {
-    font-size: var(--font-size-base);
+    font-size: 14px;
     color: var(--text-strong);
     font-weight: var(--font-weight-medium);
-    margin-top: 2rem;
-    margin-bottom: 0.75rem;
+    margin-top: 0px;
+    margin-bottom: 24px;
     line-height: var(--line-height-large);
   }
 
@@ -40,7 +40,7 @@
 
   /* Paragraphs */
   p {
-    margin-bottom: 1rem;
+    margin-bottom: 12px;
   }
 
   /* Links */
@@ -58,10 +58,10 @@
   /* Lists */
   ul,
   ol {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
+    margin-top: 8px;
+    margin-bottom: 12px;
     margin-left: 0;
-    padding-left: 1.5rem;
+    padding-left: 32px;
     list-style-position: outside;
   }
 
@@ -75,7 +75,7 @@
   }
 
   li {
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
   }
 
   li > p:first-child {
@@ -117,12 +117,12 @@
   hr {
     border: none;
     height: 0;
-    margin: 2.5rem 0;
+    margin: 40px 0;
   }
 
   .shiki {
     font-size: 13px;
-    padding: 8px 12px;
+    padding: 12px;
     border-radius: 6px;
     border: 0.5px solid var(--border-weak-base);
   }
@@ -201,8 +201,8 @@
   }
 
   pre {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
+    margin-top: 12px;
+    margin-bottom: 32px;
     overflow: auto;
 
     scrollbar-width: none;
@@ -229,7 +229,7 @@
   table {
     width: 100%;
     border-collapse: collapse;
-    margin: 1.5rem 0;
+    margin: 24px 0;
     font-size: var(--font-size-base);
     display: block;
     overflow-x: auto;
@@ -239,7 +239,7 @@
   td {
     /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
     border-bottom: 1px solid var(--border-weaker-base);
-    padding: 0.75rem 0.5rem;
+    padding: 12px;
     text-align: left;
     vertical-align: top;
   }

packages/ui/src/components/message-part.css

@@ -283,9 +283,9 @@
   line-height: var(--line-height-normal);
 
   [data-component="markdown"] {
-    margin-top: 24px;
+    margin-top: 16px;
     font-style: normal;
-    font-size: var(--font-size-base);
+    font-size: 13px;
     color: var(--text-weak);
 
     strong,
@@ -556,9 +556,12 @@
 
 [data-component="exa-tool-output"] {
   width: 100%;
-  padding-top: 8px;
   display: flex;
   flex-direction: column;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-large);
+  color: var(--text-base);
 }
 
 [data-slot="basic-tool-tool-subtitle"].exa-tool-query {
@@ -578,6 +581,8 @@
 [data-slot="exa-tool-link"] {
   display: block;
   max-width: 100%;
+  font: inherit;
+  line-height: inherit;
   color: var(--text-interactive-base);
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -636,13 +641,13 @@
 }
 
 [data-component="context-tool-group-list"] {
-  padding-top: 6px;
+  padding-top: 0;
   padding-right: 0;
-  padding-bottom: 4px;
-  padding-left: 13px;
+  padding-bottom: 0;
+  padding-left: 12px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 
   [data-slot="context-tool-group-item"] {
     min-width: 0;

packages/ui/src/components/session-turn.css

@@ -26,7 +26,7 @@
     align-items: flex-start;
     align-self: stretch;
     min-width: 0;
-    gap: 18px;
+    gap: 0px;
     overflow-anchor: none;
   }
 
@@ -47,6 +47,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
+    margin-top: 12px;
     width: 100%;
     min-width: 0;
     color: var(--text-weak);
@@ -226,5 +227,5 @@
 }
 
 [data-slot="session-turn-list"] {
-  gap: 48px;
+  gap: 24px;
 }

packages/ui/src/components/timeline-playground.stories.tsx

@@ -568,6 +568,7 @@ const MD = "markdown.css"
 const MP = "message-part.css"
 const ST = "session-turn.css"
 const CL = "collapsible.css"
+const BT = "basic-tool.css"
 
 /**
  * Source mapping for a CSS control.
@@ -607,10 +608,10 @@ const CSS_CONTROLS: CSSControl[] = [
   // --- Timeline spacing ---
   {
     key: "turn-gap",
-    label: "Turn gap",
+    label: "Above user messages",
     group: "Timeline Spacing",
     type: "range",
-    initial: "48",
+    initial: "32",
     selector: '[data-slot="session-turn-list"]',
     property: "gap",
     min: "0",
@@ -621,10 +622,10 @@ const CSS_CONTROLS: CSSControl[] = [
   },
   {
     key: "container-gap",
-    label: "Container gap",
+    label: "Below user messages",
     group: "Timeline Spacing",
     type: "range",
-    initial: "18",
+    initial: "0",
     selector: '[data-slot="session-turn-message-container"]',
     property: "gap",
     min: "0",
@@ -1040,12 +1041,40 @@ const CSS_CONTROLS: CSSControl[] = [
   },
 
   // --- Tool parts ---
+  {
+    key: "tool-subtitle-font-size",
+    label: "Subtitle font size",
+    group: "Tool Parts",
+    type: "range",
+    initial: "14",
+    selector: '[data-slot="basic-tool-tool-subtitle"]',
+    property: "font-size",
+    min: "10",
+    max: "22",
+    step: "1",
+    unit: "px",
+    source: { file: BT, anchor: '[data-slot="basic-tool-tool-subtitle"]', prop: "font-size", format: px },
+  },
+  {
+    key: "exa-output-font-size",
+    label: "Search output font size",
+    group: "Tool Parts",
+    type: "range",
+    initial: "14",
+    selector: '[data-component="exa-tool-output"]',
+    property: "font-size",
+    min: "10",
+    max: "22",
+    step: "1",
+    unit: "px",
+    source: { file: MP, anchor: '[data-component="exa-tool-output"]', prop: "font-size", format: px },
+  },
   {
     key: "tool-content-gap",
     label: "Trigger/content gap",
     group: "Tool Parts",
     type: "range",
-    initial: "8",
+    initial: "4",
     selector: '[data-component="collapsible"].tool-collapsible',
     property: "--tool-content-gap",
     min: "0",
@@ -1059,7 +1088,7 @@ const CSS_CONTROLS: CSSControl[] = [
     label: "Explored tool gap",
     group: "Explored Group",
     type: "range",
-    initial: "14",
+    initial: "4",
     selector: '[data-component="context-tool-group-list"]',
     property: "gap",
     min: "0",