@neurocode-ai/session-ui 1.18.8

package/src/v2/components/basic-tool-v2.css

@@ -0,0 +1,163 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="basic-tool-v2"] {
+  --bt-title: var(--v2-text-text-base);
+  --bt-sep: var(--v2-text-text-muted);
+  --bt-subtitle: var(--v2-text-text-muted);
+  --bt-args: var(--v2-text-text-muted);
+  --bt-chevron: var(--v2-text-text-faint);
+  --bt-content: var(--v2-text-text-muted);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 4px 0;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+
+  [data-slot="basic-tool-v2-trigger"] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+    min-height: 20px;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+    color: inherit;
+    outline: none;
+  }
+
+  [data-slot="basic-tool-v2-trigger"]:focus-visible {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  [data-slot="basic-tool-v2-labels"] {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  [data-slot="basic-tool-v2-title"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: -0.04px;
+    color: var(--bt-title);
+    font-variation-settings: "slnt" 0;
+    user-select: none;
+  }
+
+  [data-slot="basic-tool-v2-sep"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 11px;
+    font-weight: 530;
+    line-height: 12px;
+    letter-spacing: 0.05px;
+    color: var(--bt-sep);
+    font-variation-settings: "slnt" 0;
+    user-select: none;
+  }
+
+  [data-slot="basic-tool-v2-subtitle"] {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: -0.04px;
+    color: var(--bt-subtitle);
+    font-variation-settings: "slnt" 0;
+    user-select: none;
+  }
+
+  [data-slot="basic-tool-v2-arg"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: -0.04px;
+    color: var(--bt-args);
+    font-variation-settings: "slnt" 0;
+    user-select: none;
+  }
+
+  [data-slot="basic-tool-v2-diff"] {
+    flex-shrink: 0;
+  }
+
+  [data-slot="basic-tool-v2-diff"] [data-component="diff-changes"] {
+    gap: 4px;
+  }
+
+  [data-slot="basic-tool-v2-chevron-wrap"] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    padding: 2px;
+    border-radius: 4px;
+    color: var(--bt-chevron);
+    user-select: none;
+  }
+
+  [data-slot="basic-tool-v2-chevron"] {
+    display: block;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    transition: transform 0.15s ease-out;
+  }
+
+  &[data-expanded] [data-slot="basic-tool-v2-chevron"] {
+    transform: rotate(90deg);
+  }
+
+  [data-slot="basic-tool-v2-content"] {
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  [data-slot="basic-tool-v2-content-inner"] {
+    font-size: 15px;
+    font-weight: 440;
+    line-height: 24px;
+    letter-spacing: 0;
+    color: var(--bt-content);
+    font-variation-settings: "slnt" 0;
+  }
+}

package/src/v2/components/basic-tool-v2.stories.tsx

@@ -0,0 +1,137 @@
+import { createSignal } from "solid-js"
+import { BasicToolV2 } from "./basic-tool-v2"
+
+const docs = `### Overview
+Compact collapsible tool row showing title, subtitle, args, and diff changes, with an expand/collapse chevron.
+
+### API
+- \`BasicToolV2\` wraps Kobalte \`Collapsible\`. Pass \`open\`, \`defaultOpen\`, and \`onOpenChange\` for controlled/uncontrolled disclosure.
+- \`trigger\` accepts either a \`BasicToolV2TriggerTitle\` object (title, subtitle, args, changes) or arbitrary JSX.
+- When \`status\` is \`"pending"\` or \`"running"\`, subtitle/args/chevron hide and the title shows a shimmer animation.
+- Pass \`children\` for expandable detail content.
+
+### Theming
+- Uses \`data-component="basic-tool-v2"\` and slot attributes; colors via \`--bt-*\` CSS variables.
+`
+
+export default {
+  title: "UI V2/BasicTool",
+  id: "components-basic-tool-v2",
+  component: BasicToolV2,
+  tags: ["autodocs"],
+  parameters: {
+    frameBackground: "#fff",
+    layout: "padded",
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Default = {
+  render: () => (
+    <BasicToolV2
+      trigger={{
+        title: "Read",
+        subtitle: "src/index.ts",
+        args: ["lines=1-50"],
+        changes: { additions: 12, deletions: 3 },
+      }}
+      defaultOpen={false}
+    >
+      File content appears here.
+    </BasicToolV2>
+  ),
+}
+
+export const Expanded = {
+  render: () => (
+    <BasicToolV2
+      trigger={{
+        title: "Read",
+        subtitle: "src/index.ts",
+        args: ["lines=1-50"],
+        changes: { additions: 12, deletions: 3 },
+      }}
+      defaultOpen={true}
+    >
+      File content appears here.
+    </BasicToolV2>
+  ),
+}
+
+export const Pending = {
+  render: () => (
+    <BasicToolV2
+      trigger={{
+        title: "Read",
+        subtitle: "src/index.ts",
+        args: ["lines=1-50"],
+        changes: { additions: 12, deletions: 3 },
+      }}
+      status="pending"
+    />
+  ),
+}
+
+export const NoChildren = {
+  render: () => (
+    <BasicToolV2
+      trigger={{
+        title: "Grep",
+        subtitle: "pattern=TODO",
+        args: ["recursive=true"],
+      }}
+    />
+  ),
+}
+
+export const CustomTrigger = {
+  render: () => (
+    <BasicToolV2
+      trigger={
+        <span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>
+      }
+    >
+      Expandable detail for custom trigger.
+    </BasicToolV2>
+  ),
+}
+
+export const Controlled = {
+  render: () => {
+    const [open, setOpen] = createSignal(false)
+    return (
+      <div style={{ display: "flex", "flex-direction": "column", gap: "16px", "max-width": "420px" }}>
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          style={{
+            padding: "4px 10px",
+            "font-size": "12px",
+            "border-radius": "6px",
+            border: "1px solid rgba(0,0,0,0.15)",
+            background: "#fff",
+            color: "#161616",
+            cursor: "pointer",
+          }}
+        >
+          Toggle from outside: {open() ? "Open" : "Closed"}
+        </button>
+        <BasicToolV2
+          trigger={{
+            title: "Write",
+            subtitle: "src/utils.ts",
+            changes: { additions: 8, deletions: 2 },
+          }}
+          open={open()}
+          onOpenChange={setOpen}
+        >
+          Controlled content.
+        </BasicToolV2>
+      </div>
+    )
+  },
+}

package/src/v2/components/basic-tool-v2.tsx

@@ -0,0 +1,139 @@
+import { Collapsible } from "@kobalte/core/collapsible"
+import { type ComponentProps, type JSX, For, Show, createMemo, splitProps } from "solid-js"
+import { DiffChanges } from "@neurocode-ai/ui/v2/diff-changes-v2"
+import { TextShimmerV2 } from "@neurocode-ai/ui/v2/text-shimmer-v2"
+import "./basic-tool-v2.css"
+
+function ChevronIcon() {
+  return (
+    <svg
+      data-slot="basic-tool-v2-chevron"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M6.75194 10.6243C6.41861 10.8187 6 10.5783 6 10.1924V5.80837C6 5.42247 6.41861 5.18204 6.75194 5.37648L10.5096 7.56846C10.8404 7.7614 10.8404 8.2393 10.5096 8.43224L6.75194 10.6243Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export interface BasicToolV2TriggerTitle {
+  title: string
+  subtitle?: string
+  args?: string[]
+  changes?: { additions: number; deletions: number } | { additions: number; deletions: number }[]
+  action?: JSX.Element
+}
+
+const isTriggerTitle = (val: unknown): val is BasicToolV2TriggerTitle =>
+  typeof val === "object" && val !== null && "title" in val && (typeof Node === "undefined" || !(val instanceof Node))
+
+export interface BasicToolV2Props extends Omit<ComponentProps<"div">, "children" | "title"> {
+  trigger: BasicToolV2TriggerTitle | JSX.Element
+  children?: JSX.Element
+  status?: string
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  onSubtitleClick?: () => void
+}
+
+export function BasicToolV2(props: BasicToolV2Props) {
+  const [local, rest] = splitProps(props, [
+    "trigger",
+    "children",
+    "status",
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "onSubtitleClick",
+    "class",
+    "classList",
+  ])
+
+  const pending = createMemo(() => local.status === "pending" || local.status === "running")
+
+  const hasChildren = createMemo(() => {
+    const c = local.children
+    if (c == null) return false
+    return true
+  })
+
+  const canExpand = createMemo(() => hasChildren() && !pending())
+
+  const handleOpenChange = (value: boolean) => {
+    if (pending()) return
+    local.onOpenChange?.(value)
+  }
+
+  return (
+    <Collapsible
+      {...rest}
+      data-component="basic-tool-v2"
+      open={local.open}
+      defaultOpen={local.defaultOpen}
+      onOpenChange={handleOpenChange}
+      disabled={!canExpand()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <Collapsible.Trigger as="div" role="button" data-slot="basic-tool-v2-trigger">
+        <div data-slot="basic-tool-v2-labels">
+          <Show when={isTriggerTitle(local.trigger) && local.trigger} fallback={local.trigger as JSX.Element}>
+            {(title) => (
+              <>
+                <span data-slot="basic-tool-v2-title">
+                  <TextShimmerV2 text={title().title} active={pending()} />
+                </span>
+                <Show when={!pending() && title().subtitle}>
+                  <span data-slot="basic-tool-v2-sep" aria-hidden="true">
+                    ·
+                  </span>
+                  <span
+                    data-slot="basic-tool-v2-subtitle"
+                    style={local.onSubtitleClick ? { cursor: "pointer" } : undefined}
+                    onClick={(e) => {
+                      if (local.onSubtitleClick) {
+                        e.stopPropagation()
+                        local.onSubtitleClick()
+                      }
+                    }}
+                  >
+                    {title().subtitle}
+                  </span>
+                </Show>
+                <Show when={!pending() && title().args?.length}>
+                  <For each={title().args}>{(arg) => <span data-slot="basic-tool-v2-arg">{arg}</span>}</For>
+                </Show>
+                <Show when={!pending() && title().changes}>
+                  <span data-slot="basic-tool-v2-diff">
+                    <DiffChanges changes={title().changes!} />
+                  </span>
+                </Show>
+                <Show when={!pending() && title().action}>{(action) => action()}</Show>
+              </>
+            )}
+          </Show>
+          <Show when={canExpand()}>
+            <span data-slot="basic-tool-v2-chevron-wrap">
+              <ChevronIcon />
+            </span>
+          </Show>
+        </div>
+      </Collapsible.Trigger>
+      <Show when={canExpand()}>
+        <Collapsible.Content data-slot="basic-tool-v2-content">
+          <div data-slot="basic-tool-v2-content-inner">{local.children}</div>
+        </Collapsible.Content>
+      </Show>
+    </Collapsible>
+  )
+}

package/src/v2/components/comment-card-v2.tsx

@@ -0,0 +1,64 @@
+import { createSignal, onCleanup, onMount, Show } from "solid-js"
+import { FileIcon } from "@neurocode-ai/ui/file-icon"
+import { getFilenameTruncated } from "@neurocode-ai/core/util/path"
+import { TooltipV2 } from "@neurocode-ai/ui/v2/tooltip-v2"
+import { AttachmentCardV2 } from "./attachment-card-v2"
+
+export function CommentCardV2(props: {
+  comment: string
+  path: string
+  selection?: { startLine: number; endLine: number }
+  active?: boolean
+  title?: string
+  tooltip?: boolean
+  wide?: boolean
+  onClick?: () => void
+}) {
+  let title: HTMLSpanElement | undefined
+  const [truncated, setTruncated] = createSignal(false)
+
+  onMount(() => {
+    const element = title
+    if (!element) return
+    const sync = () => setTruncated(element.scrollWidth > element.clientWidth)
+    const measure = () => requestAnimationFrame(sync)
+    const observer = new ResizeObserver(sync)
+    observer.observe(element)
+    measure()
+    void document.fonts?.ready.then(measure)
+    onCleanup(() => observer.disconnect())
+  })
+
+  return (
+    <TooltipV2
+      placement="top"
+      openDelay={1000}
+      value={props.title ?? props.comment}
+      disabled={!props.tooltip || !truncated()}
+      class={props.wide ? "w-full" : undefined}
+      contentStyle={{ "max-width": "320px", "white-space": "pre-wrap" }}
+    >
+      <AttachmentCardV2
+        title={props.comment}
+        active={props.active}
+        clickable={!!props.onClick}
+        wide={props.wide}
+        surface="base"
+        titleRef={(element) => {
+          title = element
+        }}
+        onClick={props.onClick}
+      >
+        <FileIcon node={{ path: props.path, type: "file" }} />
+        <span>
+          {getFilenameTruncated(props.path, 14)}
+          <Show when={props.selection}>
+            {(sel) =>
+              sel().startLine === sel().endLine ? `:${sel().startLine}` : `:${sel().startLine}-${sel().endLine}`
+            }
+          </Show>
+        </span>
+      </AttachmentCardV2>
+    </TooltipV2>
+  )
+}