chore: more storybook control

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

@@ -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,10 +641,10 @@
 }
 
 [data-component="context-tool-group-list"] {
-  padding-top: 6px;
+  padding-top: 0;
   padding-right: 0;
-  padding-bottom: 4px;
-  padding-left: 12px;
+  padding-bottom: 0;
+  padding-left: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;

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",