Merge branch 'v2' into tool-count-spacing

packages/session-ui/component-tests/tool-group.spec.ts

@@ -78,6 +78,11 @@ story("summarizes subagents as Agent while retaining their card titles", async (
   await expect(prefix).toHaveText("Used")
   await expect(count).toHaveText("4")
   await expect(title).toHaveText("Shell, Read, Agent")
+  expect(await prefix.evaluate((node) => node.textContent)).toBe("Used")
+  expect(await count.evaluate((node) => node.textContent)).toBe("4")
+  expect(await prefix.locator("..").evaluate((node) => getComputedStyle(node).columnGap)).toBe("4px")
+  expect(await title.locator("..").evaluate((node) => getComputedStyle(node).columnGap)).toBe("4px")
+  expect(await count.evaluate((node) => getComputedStyle(node).fontVariantNumeric)).toBe("tabular-nums")
   const colors = await Promise.all(
     [prefix, count, title].map((part) => part.evaluate((node) => getComputedStyle(node).color)),
   )

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

@@ -608,7 +608,7 @@
   [data-slot="context-tool-group-title"] {
     display: flex;
     align-items: center;
-    gap: 0;
+    gap: 4px;
     flex-shrink: 1;
     min-width: 0;
   }
@@ -617,7 +617,7 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    gap: 0;
+    gap: 4px;
     color: var(--v2-text-text-muted);
     font-family: var(--v2-font-family-sans);
     font-size: 13px;
@@ -633,6 +633,7 @@
 
   [data-slot="context-tool-group-count"] {
     color: var(--v2-text-text-base);
+    font-variant-numeric: tabular-nums;
   }
 
   [data-slot="context-tool-group-prefix"] {

packages/session-ui/src/tools/tool-renderer.tsx

@@ -615,18 +615,13 @@ export function CurrentContextToolGroup(props: {
               <Show when={label().before || label().count || label().between}>
                 <span data-slot="context-tool-group-usage">
                   <Show when={label().before}>
-                    {(before) => (
-                      <span data-slot="context-tool-group-prefix">
-                        {before()}
-                        {label().title ? " " : ""}
-                      </span>
-                    )}
+                    {(before) => <span data-slot="context-tool-group-prefix">{before()}</span>}
                   </Show>
                   <Show when={label().count}>
-                    {(count) => <span data-slot="context-tool-group-count">{count()} </span>}
+                    {(count) => <span data-slot="context-tool-group-count">{count()}</span>}
                   </Show>
                   <Show when={label().between}>
-                    {(between) => <span data-slot="context-tool-group-prefix">{between()} </span>}
+                    {(between) => <span data-slot="context-tool-group-prefix">{between()}</span>}
                   </Show>
                 </span>
               </Show>