chore(app): more spacing controls

4 files changed, 57 insertions, 9 deletions

diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index bab2c4f92..a999f6298 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -9,7 +9,8 @@
   overflow: visible;
 
   &.tool-collapsible {
-    gap: 8px;
+    --tool-content-gap: 8px;
+    gap: var(--tool-content-gap);
   }
 
   [data-slot="collapsible-trigger"] {
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index bb16581d6..d9893503f 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -636,14 +636,17 @@
 }
 
 [data-component="context-tool-group-list"] {
-  padding: 6px 0 4px 0;
+  padding-top: 6px;
+  padding-right: 0;
+  padding-bottom: 4px;
+  padding-left: 13px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 8px;
 
   [data-slot="context-tool-group-item"] {
     min-width: 0;
-    padding: 6px 0;
+    padding: 0;
   }
 }
 
@@ -1154,8 +1157,8 @@
     position: sticky;
     top: var(--sticky-accordion-top, 0px);
     z-index: 20;
-    height: 40px;
-    padding-bottom: 8px;
+    height: calc(32px + var(--tool-content-gap));
+    padding-bottom: var(--tool-content-gap);
     background-color: var(--background-stronger);
   }
 }
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 8b572aff8..0e5c98d8f 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -790,7 +790,7 @@ function ContextToolGroup(props: { parts: ToolPart[]; busy?: boolean }) {
   const summary = createMemo(() => contextToolSummary(props.parts))
 
   return (
-    <Collapsible open={open()} onOpenChange={setOpen} variant="ghost">
+    <Collapsible open={open()} onOpenChange={setOpen} variant="ghost" class="tool-collapsible">
       <Collapsible.Trigger>
         <div data-component="context-tool-group-trigger">
           <span
diff --git a/packages/ui/src/components/timeline-playground.stories.tsx b/packages/ui/src/components/timeline-playground.stories.tsx
index e57886279..e79e97a3a 100644
--- a/packages/ui/src/components/timeline-playground.stories.tsx
+++ b/packages/ui/src/components/timeline-playground.stories.tsx
@@ -567,6 +567,7 @@ function compactionPart(): CompactionPart {
 const MD = "markdown.css"
 const MP = "message-part.css"
 const ST = "session-turn.css"
+const CL = "collapsible.css"
 
 /**
  * Source mapping for a CSS control.
@@ -1040,6 +1041,48 @@ const CSS_CONTROLS: CSSControl[] = [
 
   // --- Tool parts ---
   {
+    key: "tool-content-gap",
+    label: "Trigger/content gap",
+    group: "Tool Parts",
+    type: "range",
+    initial: "8",
+    selector: '[data-component="collapsible"].tool-collapsible',
+    property: "--tool-content-gap",
+    min: "0",
+    max: "24",
+    step: "1",
+    unit: "px",
+    source: { file: CL, anchor: "&.tool-collapsible {", prop: "--tool-content-gap", format: px },
+  },
+  {
+    key: "context-tool-gap",
+    label: "Explored tool gap",
+    group: "Explored Group",
+    type: "range",
+    initial: "14",
+    selector: '[data-component="context-tool-group-list"]',
+    property: "gap",
+    min: "0",
+    max: "40",
+    step: "1",
+    unit: "px",
+    source: { file: MP, anchor: '[data-component="context-tool-group-list"]', prop: "gap", format: px },
+  },
+  {
+    key: "context-tool-indent",
+    label: "Explored indent",
+    group: "Explored Group",
+    type: "range",
+    initial: "0",
+    selector: '[data-component="context-tool-group-list"]',
+    property: "padding-left",
+    min: "0",
+    max: "48",
+    step: "1",
+    unit: "px",
+    source: { file: MP, anchor: '[data-component="context-tool-group-list"]', prop: "padding-left", format: px },
+  },
+  {
     key: "bash-max-height",
     label: "Shell output max-height",
     group: "Tool Parts",
@@ -1099,8 +1142,9 @@ function Playground() {
       const el = (root.querySelector(sample(ctrl)) ?? root.querySelector(ctrl.selector)) as HTMLElement | null
       if (!el) continue
       const styles = getComputedStyle(el)
-      // Use bracket access — getPropertyValue doesn't resolve shorthands
-      const raw = (styles as any)[ctrl.property] as string
+      const raw = ctrl.property.startsWith("--")
+        ? styles.getPropertyValue(ctrl.property).trim()
+        : ((styles as any)[ctrl.property] as string)
       if (!raw) continue
       // Shorthands may return "24px 0px" — take the first value
       const num = parseFloat(raw.split(" ")[0])