@neurocode-ai/session-ui 1.18.8

package/src/components/tool-count-label.css

@@ -0,0 +1,57 @@
+[data-component="tool-count-label"] {
+  display: inline-flex;
+  align-items: baseline;
+  white-space: nowrap;
+  gap: 0;
+
+  [data-slot="tool-count-label-before"] {
+    display: inline-block;
+    white-space: pre;
+    line-height: inherit;
+  }
+
+  [data-slot="tool-count-label-word"] {
+    display: inline-flex;
+    align-items: baseline;
+    white-space: pre;
+    line-height: inherit;
+  }
+
+  [data-slot="tool-count-label-stem"] {
+    display: inline-block;
+    white-space: pre;
+  }
+
+  [data-slot="tool-count-label-suffix"] {
+    display: inline-grid;
+    grid-template-columns: 0fr;
+    opacity: 0;
+    filter: blur(calc(var(--tool-motion-blur, 2px) * 0.42));
+    overflow: hidden;
+    transform: translateX(-0.04em);
+    transition-property: grid-template-columns, opacity, filter, transform;
+    transition-duration: 250ms, 250ms, 250ms, 250ms;
+    transition-timing-function:
+      var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), ease-out, ease-out,
+      var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="tool-count-label-suffix"][data-active="true"] {
+    grid-template-columns: 1fr;
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(0);
+  }
+
+  [data-slot="tool-count-label-suffix-inner"] {
+    min-width: 0;
+    overflow: hidden;
+    white-space: pre;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="tool-count-label"] [data-slot="tool-count-label-suffix"] {
+    transition-duration: 0ms;
+  }
+}

package/src/components/tool-count-label.tsx

@@ -0,0 +1,58 @@
+import { createMemo } from "solid-js"
+import { AnimatedNumber } from "@neurocode-ai/ui/animated-number"
+
+function split(text: string) {
+  const match = /{{\s*count\s*}}/.exec(text)
+  if (!match) return { before: "", after: text }
+  if (match.index === undefined) return { before: "", after: text }
+  return {
+    before: text.slice(0, match.index),
+    after: text.slice(match.index + match[0].length),
+  }
+}
+
+function common(one: string, other: string) {
+  const a = Array.from(one)
+  const b = Array.from(other)
+  let i = 0
+  while (i < a.length && i < b.length && a[i] === b[i]) i++
+  return {
+    stem: a.slice(0, i).join(""),
+    one: a.slice(i).join(""),
+    other: b.slice(i).join(""),
+  }
+}
+
+export function AnimatedCountLabel(props: { count: number; one: string; other: string; class?: string }) {
+  const one = createMemo(() => split(props.one))
+  const other = createMemo(() => split(props.other))
+  const singular = createMemo(() => Math.round(props.count) === 1)
+  const active = createMemo(() => (singular() ? one() : other()))
+  const suffix = createMemo(() => common(one().after, other().after))
+  const splitSuffix = createMemo(
+    () =>
+      one().before === other().before &&
+      (one().after.startsWith(other().after) || other().after.startsWith(one().after)),
+  )
+  const before = createMemo(() => (splitSuffix() ? one().before : active().before))
+  const stem = createMemo(() => (splitSuffix() ? suffix().stem : active().after))
+  const tail = createMemo(() => {
+    if (!splitSuffix()) return ""
+    if (singular()) return suffix().one
+    return suffix().other
+  })
+  const showTail = createMemo(() => splitSuffix() && tail().length > 0)
+
+  return (
+    <span data-component="tool-count-label" class={props.class}>
+      <span data-slot="tool-count-label-before">{before()}</span>
+      <AnimatedNumber value={props.count} />
+      <span data-slot="tool-count-label-word">
+        <span data-slot="tool-count-label-stem">{stem()}</span>
+        <span data-slot="tool-count-label-suffix" data-active={showTail() ? "true" : "false"}>
+          <span data-slot="tool-count-label-suffix-inner">{tail()}</span>
+        </span>
+      </span>
+    </span>
+  )
+}

package/src/components/tool-count-summary.css

@@ -0,0 +1,102 @@
+[data-component="tool-count-summary"] {
+  display: inline-flex;
+  align-items: baseline;
+  white-space: nowrap;
+
+  [data-slot="tool-count-summary-empty"] {
+    display: inline-grid;
+    grid-template-columns: 1fr;
+    align-items: baseline;
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0) scale(1);
+    overflow: hidden;
+    transform-origin: left center;
+    transition-property: grid-template-columns, opacity, filter, transform;
+    transition-duration:
+      var(--tool-motion-spring-ms, 480ms), var(--tool-motion-fade-ms, 240ms), var(--tool-motion-fade-ms, 280ms),
+      var(--tool-motion-spring-ms, 480ms);
+    transition-timing-function:
+      var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), ease-out, ease-out,
+      var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="tool-count-summary-empty"][data-active="false"] {
+    grid-template-columns: 0fr;
+    opacity: 0;
+    filter: blur(calc(var(--tool-motion-blur, 2px) * 0.72));
+    transform: translateY(0.05em) scale(0.985);
+  }
+
+  [data-slot="tool-count-summary-item"] {
+    display: inline-grid;
+    grid-template-columns: 0fr;
+    align-items: baseline;
+    opacity: 0;
+    filter: blur(var(--tool-motion-blur, 2px));
+    transform: translateY(0.06em) scale(0.985);
+    overflow: hidden;
+    transform-origin: left center;
+    transition-property: grid-template-columns, opacity, filter, transform;
+    transition-duration:
+      var(--tool-motion-spring-ms, 480ms), var(--tool-motion-fade-ms, 280ms), var(--tool-motion-fade-ms, 320ms),
+      var(--tool-motion-spring-ms, 480ms);
+    transition-timing-function:
+      var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), ease-out, ease-out,
+      var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="tool-count-summary-item"][data-active="true"] {
+    grid-template-columns: 1fr;
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0) scale(1);
+  }
+
+  [data-slot="tool-count-summary-empty-inner"] {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  [data-slot="tool-count-summary-item-inner"] {
+    display: inline-flex;
+    align-items: baseline;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  [data-slot="tool-count-summary-prefix"] {
+    display: inline-flex;
+    align-items: baseline;
+    justify-content: flex-start;
+    max-width: 0;
+    margin-right: 0;
+    opacity: 0;
+    filter: blur(calc(var(--tool-motion-blur, 2px) * 0.55));
+    overflow: hidden;
+    transform: translateX(-0.08em);
+    transition-property: opacity, filter, transform;
+    transition-duration:
+      calc(var(--tool-motion-fade-ms, 200ms) * 0.75), calc(var(--tool-motion-fade-ms, 220ms) * 0.75),
+      calc(var(--tool-motion-fade-ms, 220ms) * 0.6);
+    transition-timing-function: ease-out, ease-out, ease-out;
+  }
+
+  [data-slot="tool-count-summary-prefix"][data-active="true"] {
+    max-width: 1ch;
+    margin-right: 0.45ch;
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="tool-count-summary"] [data-slot="tool-count-summary-empty"],
+  [data-component="tool-count-summary"] [data-slot="tool-count-summary-item"],
+  [data-component="tool-count-summary"] [data-slot="tool-count-summary-prefix"] {
+    transition-duration: 0ms;
+  }
+}

package/src/components/tool-count-summary.stories.tsx

@@ -0,0 +1,238 @@
+// @ts-nocheck
+import { onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { AnimatedCountList, type CountItem } from "./tool-count-summary"
+import { ToolStatusTitle } from "./tool-status-title"
+
+export default {
+  title: "UI/AnimatedCountList",
+  id: "components-animated-count-list",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `### Overview
+Animated count list that smoothly transitions items in/out as counts change.
+
+Uses \`grid-template-columns: 0fr → 1fr\` for width animations and the odometer
+digit roller for count transitions. Shown here with \`ToolStatusTitle\` exactly
+as it appears in the context tool group on the session page.`,
+      },
+    },
+  },
+}
+
+const TEXT = {
+  active: "Exploring",
+  done: "Explored",
+  read: { one: "{{count}} read", other: "{{count}} reads" },
+  search: { one: "{{count}} search", other: "{{count}} searches" },
+  list: { one: "{{count}} list", other: "{{count}} lists" },
+} as const
+
+function rand(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+const btn = (accent?: boolean) =>
+  ({
+    padding: "6px 14px",
+    "border-radius": "6px",
+    border: "1px solid var(--color-divider, #333)",
+    background: accent ? "var(--color-danger-fill, #c33)" : "var(--color-fill-element, #222)",
+    color: "var(--color-text, #eee)",
+    cursor: "pointer",
+    "font-size": "13px",
+  }) as const
+
+const smallBtn = (active?: boolean) =>
+  ({
+    padding: "4px 12px",
+    "border-radius": "6px",
+    border: active ? "1px solid var(--color-accent, #58f)" : "1px solid var(--color-divider, #333)",
+    background: active ? "var(--color-accent, #58f)" : "var(--color-fill-element, #222)",
+    color: "var(--color-text, #eee)",
+    cursor: "pointer",
+    "font-size": "12px",
+  }) as const
+
+export const Playground = {
+  render: () => {
+    const [state, setState] = createStore({
+      reads: 0,
+      searches: 0,
+      lists: 0,
+      active: false,
+      reducedMotion: false,
+    })
+    const reads = () => state.reads
+    const searches = () => state.searches
+    const lists = () => state.lists
+    const active = () => state.active
+    const reducedMotion = () => state.reducedMotion
+
+    let timeouts: ReturnType<typeof setTimeout>[] = []
+
+    const clearAll = () => {
+      for (const t of timeouts) clearTimeout(t)
+      timeouts = []
+    }
+
+    onCleanup(clearAll)
+
+    const startSim = () => {
+      clearAll()
+      setState("reads", 0)
+      setState("searches", 0)
+      setState("lists", 0)
+      setState("active", true)
+      const steps = rand(3, 10)
+      let elapsed = 0
+
+      for (let i = 0; i < steps; i++) {
+        const delay = rand(300, 800)
+        elapsed += delay
+        const t = setTimeout(() => {
+          const pick = rand(0, 2)
+          if (pick === 0) setState("reads", (value) => value + 1)
+          else if (pick === 1) setState("searches", (value) => value + 1)
+          else setState("lists", (value) => value + 1)
+        }, elapsed)
+        timeouts.push(t)
+      }
+
+      const end = setTimeout(() => setState("active", false), elapsed + 100)
+      timeouts.push(end)
+    }
+
+    const stopSim = () => {
+      clearAll()
+      setState("active", false)
+    }
+
+    const reset = () => {
+      stopSim()
+      setState("reads", 0)
+      setState("searches", 0)
+      setState("lists", 0)
+    }
+
+    const items = (): CountItem[] => [
+      { key: "read", count: reads(), one: TEXT.read.one, other: TEXT.read.other },
+      { key: "search", count: searches(), one: TEXT.search.one, other: TEXT.search.other },
+      { key: "list", count: lists(), one: TEXT.list.one, other: TEXT.list.other },
+    ]
+
+    return (
+      <div style={{ display: "grid", gap: "24px", padding: "20px", "max-width": "520px" }}>
+        {reducedMotion() && (
+          <style>
+            {`[data-reduced-motion="true"] *,
+              [data-reduced-motion="true"] *::before,
+              [data-reduced-motion="true"] *::after {
+                transition-duration: 0ms !important;
+              }`}
+          </style>
+        )}
+
+        {/* Matches context-tool-group-trigger layout from message-part.tsx */}
+        <span
+          data-reduced-motion={reducedMotion()}
+          style={{
+            display: "flex",
+            "align-items": "center",
+            gap: "8px",
+            "font-size": "14px",
+            "font-weight": "500",
+            color: "var(--text-strong, #eee)",
+            "min-width": "0",
+          }}
+        >
+          <span style={{ "flex-shrink": "0" }}>
+            <ToolStatusTitle active={active()} activeText={TEXT.active} doneText={TEXT.done} split={false} />
+          </span>
+          <span
+            style={{
+              "min-width": "0",
+              overflow: "hidden",
+              "text-overflow": "ellipsis",
+              "white-space": "nowrap",
+              "font-weight": "400",
+              color: "var(--text-base, #ccc)",
+            }}
+          >
+            <AnimatedCountList items={items()} fallback="" />
+          </span>
+        </span>
+
+        <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
+          <button onClick={() => (active() ? stopSim() : startSim())} style={btn(active())}>
+            {active() ? "Stop" : "Simulate"}
+          </button>
+          <button onClick={reset} style={btn()}>
+            Reset
+          </button>
+          <button onClick={() => setState("reducedMotion", (value) => !value)} style={smallBtn(reducedMotion())}>
+            {reducedMotion() ? "Motion: reduced" : "Motion: normal"}
+          </button>
+        </div>
+
+        <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
+          <button onClick={() => setState("reads", (value) => value + 1)} style={smallBtn()}>
+            + read
+          </button>
+          <button onClick={() => setState("searches", (value) => value + 1)} style={smallBtn()}>
+            + search
+          </button>
+          <button onClick={() => setState("lists", (value) => value + 1)} style={smallBtn()}>
+            + list
+          </button>
+        </div>
+
+        <div
+          style={{
+            "font-size": "11px",
+            color: "var(--color-text-weak, #888)",
+            "font-family": "monospace",
+          }}
+        >
+          motion: {reducedMotion() ? "reduced" : "normal"} · active: {active() ? "true" : "false"} · reads: {reads()} ·
+          searches: {searches()} · lists: {lists()}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Empty = {
+  render: () => (
+    <span style={{ display: "flex", "align-items": "center", gap: "8px", "font-size": "14px", "font-weight": "500" }}>
+      <ToolStatusTitle active activeText="Exploring" doneText="Explored" split={false} />
+      <AnimatedCountList
+        items={[
+          { key: "read", count: 0, one: "{{count}} read", other: "{{count}} reads" },
+          { key: "search", count: 0, one: "{{count}} search", other: "{{count}} searches" },
+        ]}
+        fallback=""
+      />
+    </span>
+  ),
+}
+
+export const Done = {
+  render: () => (
+    <span style={{ display: "flex", "align-items": "center", gap: "8px", "font-size": "14px", "font-weight": "500" }}>
+      <ToolStatusTitle active={false} activeText="Exploring" doneText="Explored" split={false} />
+      <span style={{ "font-weight": "400", color: "var(--text-base, #ccc)" }}>
+        <AnimatedCountList
+          items={[
+            { key: "read", count: 5, one: "{{count}} read", other: "{{count}} reads" },
+            { key: "search", count: 3, one: "{{count}} search", other: "{{count}} searches" },
+            { key: "list", count: 1, one: "{{count}} list", other: "{{count}} lists" },
+          ]}
+          fallback=""
+        />
+      </span>
+    </span>
+  ),
+}

package/src/components/tool-count-summary.tsx

@@ -0,0 +1,52 @@
+import { Index, createMemo } from "solid-js"
+import { AnimatedCountLabel } from "./tool-count-label"
+
+export type CountItem = {
+  key: string
+  count: number
+  one: string
+  other: string
+}
+
+export function AnimatedCountList(props: { items: CountItem[]; fallback?: string; class?: string }) {
+  const visible = createMemo(() => props.items.filter((item) => item.count > 0))
+  const fallback = createMemo(() => props.fallback ?? "")
+  const showEmpty = createMemo(() => visible().length === 0 && fallback().length > 0)
+
+  return (
+    <span data-component="tool-count-summary" class={props.class}>
+      <span data-slot="tool-count-summary-empty" data-active={showEmpty() ? "true" : "false"}>
+        <span data-slot="tool-count-summary-empty-inner">{fallback()}</span>
+      </span>
+
+      <Index each={props.items}>
+        {(item, index) => {
+          const active = createMemo(() => item().count > 0)
+          const hasPrev = createMemo(() => {
+            for (let i = index - 1; i >= 0; i--) {
+              if (props.items[i].count > 0) return true
+            }
+            return false
+          })
+
+          return (
+            <>
+              <span data-slot="tool-count-summary-prefix" data-active={active() && hasPrev() ? "true" : "false"}>
+                ,
+              </span>
+              <span data-slot="tool-count-summary-item" data-active={active() ? "true" : "false"}>
+                <span data-slot="tool-count-summary-item-inner">
+                  <AnimatedCountLabel
+                    one={item().one}
+                    other={item().other}
+                    count={Math.max(0, Math.round(item().count))}
+                  />
+                </span>
+              </span>
+            </>
+          )
+        }}
+      </Index>
+    </span>
+  )
+}

package/src/components/tool-error-card.css

@@ -0,0 +1,91 @@
+[data-component="card"][data-kind="tool-error-card"] {
+  --card-pad-y: 8px;
+  --card-line-pad: 12px;
+
+  [data-slot="basic-tool-tool-title"] {
+    color: var(--v2-text-text-base);
+  }
+
+  [data-slot="basic-tool-tool-subtitle"] {
+    color: var(--v2-text-text-muted);
+  }
+
+  [data-slot="collapsible-arrow"],
+  [data-slot="collapsible-arrow-icon"] {
+    color: var(--v2-text-text-faint);
+  }
+
+  > [data-component="collapsible"].tool-collapsible {
+    gap: 0px;
+  }
+
+  > [data-component="collapsible"].tool-collapsible[data-open="true"] {
+    gap: 4px;
+  }
+
+  [data-component="tool-error-card-icon"] [data-component="icon"] {
+    color: var(--card-accent);
+  }
+
+  [data-slot="tool-error-card-content"] {
+    position: relative;
+    padding-left: 24px;
+    margin-bottom: 8px;
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  > [data-component="collapsible"].tool-collapsible[data-open="true"] [data-slot="tool-error-card-content"] {
+    padding-right: 40px;
+  }
+
+  [data-slot="tool-error-card-copy"] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    will-change: opacity;
+  }
+
+  &:hover [data-slot="tool-error-card-copy"],
+  &:focus-within [data-slot="tool-error-card-copy"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  [data-slot="tool-error-card-content"] :where(*)::selection {
+    background: var(--v2-state-bg-danger);
+    color: var(--v2-text-text-base);
+  }
+
+  [data-slot="tool-error-card-content"] :where(*)::-moz-selection {
+    background: var(--v2-state-bg-danger);
+    color: var(--v2-text-text-base);
+  }
+}
+
+body:not([data-new-layout]) [data-component="card"][data-kind="tool-error-card"] {
+  [data-slot="basic-tool-tool-title"] {
+    color: var(--text-strong);
+  }
+
+  [data-slot="basic-tool-tool-subtitle"] {
+    color: var(--text-base);
+  }
+
+  [data-slot="collapsible-arrow"] {
+    color: var(--text-base);
+  }
+
+  [data-slot="collapsible-arrow-icon"] {
+    color: var(--icon-weaker);
+  }
+
+  [data-slot="tool-error-card-content"] :where(*)::selection,
+  [data-slot="tool-error-card-content"] :where(*)::-moz-selection {
+    background: var(--surface-critical-base);
+    color: var(--text-on-critical-base);
+  }
+}

package/src/components/tool-error-card.stories.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck
+import { ToolErrorCard } from "./tool-error-card"
+
+const docs = `### Overview
+Tool call failure summary styled like a tool trigger.
+
+### API
+- Required: \`tool\` (tool id, e.g. apply_patch, bash)
+- Required: \`error\` (error string)
+
+### Behavior
+- Collapsible; click header to expand/collapse.
+`
+
+const samples = [
+  {
+    tool: "apply_patch",
+    error:
+      "apply_patch verification failed: Failed to find expected lines in /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/session-turn.tsx",
+  },
+  {
+    tool: "bash",
+    error: "bash Command failed: exit code 1: bun test --watch",
+  },
+  {
+    tool: "read",
+    error:
+      "read File not found: /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/does-not-exist.tsx",
+  },
+  {
+    tool: "glob",
+    error: "glob Pattern error: Invalid glob pattern: **/*[",
+  },
+  {
+    tool: "grep",
+    error: "grep Regex error: Invalid regular expression: (unterminated group",
+  },
+  {
+    tool: "webfetch",
+    error: "webfetch Request failed: 502 Bad Gateway",
+  },
+  {
+    tool: "websearch",
+    error: "websearch Rate limited: Please try again in 30 seconds",
+  },
+  {
+    tool: "question",
+    error: "question Dismissed: user dismissed this question",
+  },
+]
+
+export default {
+  title: "UI/ToolErrorCard",
+  id: "components-tool-error-card",
+  component: ToolErrorCard,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  args: {
+    tool: "apply_patch",
+    error: samples[0].error,
+  },
+  argTypes: {
+    tool: {
+      control: "select",
+      options: ["apply_patch", "bash", "read", "glob", "grep", "webfetch", "websearch", "question"],
+    },
+    error: {
+      control: "text",
+    },
+  },
+  render: (props: { tool: string; error: string }) => {
+    return <ToolErrorCard tool={props.tool} error={props.error} />
+  },
+}
+
+export const All = {
+  render: () => {
+    return (
+      <div style="display: flex; flex-direction: column; gap: 12px; max-width: 720px;">
+        {samples.map((item) => (
+          <ToolErrorCard tool={item.tool} error={item.error} />
+        ))}
+      </div>
+    )
+  },
+}