@neurocode-ai/session-ui 1.18.8

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

@@ -0,0 +1,157 @@
+import { type ComponentProps, createMemo, Show, splitProps } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Card, CardDescription } from "@neurocode-ai/ui/card"
+import { Collapsible } from "@neurocode-ai/ui/collapsible"
+import { Icon } from "@neurocode-ai/ui/icon"
+import { IconButton } from "@neurocode-ai/ui/icon-button"
+import { Tooltip } from "@neurocode-ai/ui/tooltip"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+
+export interface ToolErrorCardProps extends Omit<ComponentProps<typeof Card>, "children" | "variant"> {
+  tool: string
+  error: string
+  title?: string
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  subtitle?: string
+  href?: string
+}
+
+export function ToolErrorCard(props: ToolErrorCardProps) {
+  const i18n = useI18n()
+  const [state, setState] = createStore({
+    open: props.defaultOpen ?? false,
+    copied: false,
+  })
+  const open = () => props.open ?? state.open
+  const copied = () => state.copied
+  const [split, rest] = splitProps(props, [
+    "tool",
+    "error",
+    "title",
+    "defaultOpen",
+    "open",
+    "onOpenChange",
+    "subtitle",
+    "href",
+  ])
+  const setOpen = (value: boolean) => {
+    if (props.open === undefined) setState("open", value)
+    props.onOpenChange?.(value)
+  }
+  const name = createMemo(() => {
+    if (split.title) return split.title
+    const map: Record<string, string> = {
+      read: "ui.tool.read",
+      list: "ui.tool.list",
+      glob: "ui.tool.glob",
+      grep: "ui.tool.grep",
+      task: "ui.tool.task",
+      webfetch: "ui.tool.webfetch",
+      websearch: "ui.tool.websearch",
+      bash: "ui.tool.shell",
+      shell: "ui.tool.shell",
+      patch: "ui.tool.patch",
+      apply_patch: "ui.tool.patch",
+      question: "ui.tool.questions",
+    }
+    const key = map[split.tool]
+    if (!key) return split.tool
+    if (!key.includes(".")) return key
+    return i18n.t(key)
+  })
+  const cleaned = createMemo(() => split.error.replace(/^Error:\s*/, "").trim())
+  const tail = createMemo(() => {
+    const value = cleaned()
+    const prefix = `${split.tool} `
+    if (value.startsWith(prefix)) return value.slice(prefix.length)
+    return value
+  })
+
+  const subtitle = createMemo(() => {
+    if (split.subtitle) return split.subtitle
+    const parts = tail().split(": ")
+    if (parts.length <= 1) return i18n.t("ui.toolErrorCard.failed")
+    const head = (parts[0] ?? "").trim()
+    if (!head) return i18n.t("ui.toolErrorCard.failed")
+    return head[0] ? head[0].toUpperCase() + head.slice(1) : i18n.t("ui.toolErrorCard.failed")
+  })
+
+  const body = createMemo(() => {
+    const parts = tail().split(": ")
+    if (parts.length <= 1) return cleaned()
+    return parts.slice(1).join(": ").trim() || cleaned()
+  })
+
+  const copy = async () => {
+    const text = cleaned()
+    if (!text) return
+    await navigator.clipboard.writeText(text)
+    setState("copied", true)
+    setTimeout(() => setState("copied", false), 2000)
+  }
+
+  return (
+    <Card {...rest} data-kind="tool-error-card" data-open={open() ? "true" : "false"} variant="error">
+      <Collapsible class="tool-collapsible" data-open={open() ? "true" : "false"} open={open()} onOpenChange={setOpen}>
+        <Collapsible.Trigger>
+          <div data-component="tool-trigger">
+            <div data-slot="basic-tool-tool-trigger-content">
+              <span data-slot="basic-tool-tool-indicator" data-component="tool-error-card-icon">
+                <Icon name="circle-ban-sign" size="small" style={{ "stroke-width": 1.5 }} />
+              </span>
+              <div data-slot="basic-tool-tool-info">
+                <div data-slot="basic-tool-tool-info-structured">
+                  <div data-slot="basic-tool-tool-info-main">
+                    <span data-slot="basic-tool-tool-title">{name()}</span>
+                    <Show
+                      when={split.href && split.subtitle}
+                      fallback={<span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>}
+                    >
+                      <a
+                        data-slot="basic-tool-tool-subtitle"
+                        class="clickable subagent-link"
+                        href={split.href!}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {subtitle()}
+                      </a>
+                    </Show>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Collapsible.Arrow />
+          </div>
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <div data-slot="tool-error-card-content">
+            <Show when={open()}>
+              <div data-slot="tool-error-card-copy">
+                <Tooltip
+                  value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.toolErrorCard.copyError")}
+                  placement="top"
+                  gutter={4}
+                >
+                  <IconButton
+                    icon={copied() ? "check" : "copy"}
+                    size="normal"
+                    variant="ghost"
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      void copy()
+                    }}
+                    aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.toolErrorCard.copyError")}
+                  />
+                </Tooltip>
+              </div>
+            </Show>
+            <Show when={body()}>{(value) => <CardDescription>{value()}</CardDescription>}</Show>
+          </div>
+        </Collapsible.Content>
+      </Collapsible>
+    </Card>
+  )
+}

package/src/components/tool-status-title.css

@@ -0,0 +1,89 @@
+[data-component="tool-status-title"] {
+  display: inline-flex;
+  align-items: baseline;
+  white-space: nowrap;
+  text-align: start;
+
+  [data-slot="tool-status-suffix"] {
+    display: inline-flex;
+    align-items: baseline;
+    white-space: nowrap;
+  }
+
+  [data-slot="tool-status-prefix"] {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  [data-slot="tool-status-swap"],
+  [data-slot="tool-status-tail"] {
+    display: inline-grid;
+    overflow: hidden;
+    justify-items: start;
+    transition: width var(--tool-motion-spring-ms, 480ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="tool-status-active"],
+  [data-slot="tool-status-done"] {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+    justify-self: start;
+    text-align: start;
+    transition-property: opacity, filter, transform;
+    transition-duration:
+      var(--tool-motion-fade-ms, 240ms), calc(var(--tool-motion-fade-ms, 240ms) * 0.8),
+      calc(var(--tool-motion-fade-ms, 240ms) * 0.8);
+    transition-timing-function: ease-out, ease-out, ease-out;
+  }
+
+  &[data-ready="false"] {
+    [data-slot="tool-status-swap"],
+    [data-slot="tool-status-tail"] {
+      transition-duration: 0ms;
+    }
+
+    [data-slot="tool-status-active"],
+    [data-slot="tool-status-done"] {
+      transition-duration: 0ms;
+    }
+  }
+
+  [data-slot="tool-status-active"] {
+    opacity: 0;
+    filter: blur(calc(var(--tool-motion-blur, 2px) * 0.45));
+    transform: translateY(0.03em);
+  }
+
+  [data-slot="tool-status-done"] {
+    color: var(--text-strong);
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+
+  &[data-active="true"] {
+    [data-slot="tool-status-active"] {
+      opacity: 1;
+      filter: blur(0);
+      transform: translateY(0);
+    }
+
+    [data-slot="tool-status-done"] {
+      opacity: 0;
+      filter: blur(calc(var(--tool-motion-blur, 2px) * 0.45));
+      transform: translateY(0.03em);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="tool-status-title"] [data-slot="tool-status-swap"],
+  [data-component="tool-status-title"] [data-slot="tool-status-tail"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="tool-status-title"] [data-slot="tool-status-active"],
+  [data-component="tool-status-title"] [data-slot="tool-status-done"] {
+    transition-duration: 0ms;
+  }
+}

package/src/components/tool-status-title.tsx

@@ -0,0 +1,133 @@
+import { Show, createEffect, createMemo, on, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { TextShimmer } from "@neurocode-ai/ui/text-shimmer"
+
+function common(active: string, done: string) {
+  const a = Array.from(active)
+  const b = Array.from(done)
+  let i = 0
+  while (i < a.length && i < b.length && a[i] === b[i]) i++
+  return {
+    prefix: a.slice(0, i).join(""),
+    active: a.slice(i).join(""),
+    done: b.slice(i).join(""),
+  }
+}
+
+function contentWidth(el: HTMLSpanElement | undefined) {
+  if (!el) return
+  return `${Math.ceil(el.getBoundingClientRect().width)}px`
+}
+
+export function ToolStatusTitle(props: {
+  active: boolean
+  activeText: string
+  doneText: string
+  class?: string
+  split?: boolean
+}) {
+  const split = createMemo(() => common(props.activeText, props.doneText))
+  const suffix = createMemo(
+    () => (props.split ?? true) && split().prefix.length >= 2 && split().active.length > 0 && split().done.length > 0,
+  )
+  const prefixLen = createMemo(() => Array.from(split().prefix).length)
+  const activeTail = createMemo(() => (suffix() ? split().active : props.activeText))
+  const doneTail = createMemo(() => (suffix() ? split().done : props.doneText))
+
+  const [state, setState] = createStore({
+    active: props.active,
+    animating: false,
+    width: undefined as string | undefined,
+  })
+  const width = () => state.width
+  const active = () => state.active
+  const animating = () => state.animating
+  let activeRef: HTMLSpanElement | undefined
+  let doneRef: HTMLSpanElement | undefined
+  let widthRef: HTMLSpanElement | undefined
+  let frame: number | undefined
+  let finishTimer: ReturnType<typeof setTimeout> | undefined
+
+  const finish = () => {
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    if (finishTimer !== undefined) clearTimeout(finishTimer)
+    frame = undefined
+    finishTimer = undefined
+    setState("animating", false)
+    setState("width", undefined)
+  }
+
+  const animate = () => {
+    const first = contentWidth(widthRef)
+    const next = props.active
+    finish()
+    setState("active", next)
+    if (!first) return
+
+    setState("animating", true)
+    setState("width", first)
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      const last = contentWidth(next ? activeRef : doneRef)
+      if (!last) {
+        finish()
+        return
+      }
+      if (first !== last) setState("width", last)
+      finishTimer = setTimeout(finish, 600)
+    })
+  }
+
+  createEffect(on([() => props.active, activeTail, doneTail], () => animate(), { defer: true }))
+
+  onCleanup(() => {
+    finish()
+  })
+
+  return (
+    <span
+      data-component="tool-status-title"
+      data-active={active() ? "true" : "false"}
+      data-ready={animating() ? "true" : "false"}
+      data-mode={suffix() ? "suffix" : "swap"}
+      class={props.class}
+      aria-label={active() ? props.activeText : props.doneText}
+    >
+      <Show
+        when={suffix()}
+        fallback={
+          <span data-slot="tool-status-swap" ref={widthRef} style={{ width: width() }}>
+            <Show when={animating() || active()}>
+              <span data-slot="tool-status-active" ref={activeRef}>
+                <TextShimmer text={activeTail()} active={active()} offset={0} />
+              </span>
+            </Show>
+            <Show when={animating() || !active()}>
+              <span data-slot="tool-status-done" ref={doneRef}>
+                <TextShimmer text={doneTail()} active={false} offset={0} />
+              </span>
+            </Show>
+          </span>
+        }
+      >
+        <span data-slot="tool-status-suffix">
+          <span data-slot="tool-status-prefix">
+            <TextShimmer text={split().prefix} active={active()} offset={0} />
+          </span>
+          <span data-slot="tool-status-tail" ref={widthRef} style={{ width: width() }}>
+            <Show when={animating() || active()}>
+              <span data-slot="tool-status-active" ref={activeRef}>
+                <TextShimmer text={activeTail()} active={active()} offset={prefixLen()} />
+              </span>
+            </Show>
+            <Show when={animating() || !active()}>
+              <span data-slot="tool-status-done" ref={doneRef}>
+                <TextShimmer text={doneTail()} active={false} offset={prefixLen()} />
+              </span>
+            </Show>
+          </span>
+        </span>
+      </Show>
+    </span>
+  )
+}

package/src/context/data.tsx

@@ -0,0 +1,64 @@
+import type { Message, Session, Part, SnapshotFileDiff, SessionStatus, Provider } from "@neurocode-ai/sdk/v2"
+import type { FileDiffInfo } from "@neurocode-ai/client/promise"
+import { createSimpleContext } from "@neurocode-ai/ui/context"
+import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
+
+export type NormalizedProviderListResponse = {
+  all: Map<string, Provider>
+  default: {
+    [key: string]: string
+  }
+  connected: Array<string>
+}
+
+type Data = {
+  agent?: {
+    name: string
+    color?: string
+  }[]
+  provider?: NormalizedProviderListResponse
+  session: Session[]
+  session_status: {
+    [sessionID: string]: SessionStatus
+  }
+  session_diff: {
+    [sessionID: string]: (SnapshotFileDiff | FileDiffInfo)[]
+  }
+  session_diff_preload?: {
+    [sessionID: string]: PreloadMultiFileDiffResult<any>[]
+  }
+  message: {
+    [sessionID: string]: Message[]
+  }
+  part: {
+    [messageID: string]: Part[]
+  }
+  part_text_accum_delta?: {
+    [partID: string]: string
+  }
+}
+
+export type NavigateToSessionFn = (sessionID: string) => void
+
+export type SessionHrefFn = (sessionID: string) => string
+
+export const { use: useData, provider: DataProvider } = createSimpleContext({
+  name: "Data",
+  init: (props: {
+    data: Data
+    directory: string
+    onNavigateToSession?: NavigateToSessionFn
+    onSessionHref?: SessionHrefFn
+  }) => {
+    return {
+      get store() {
+        return props.data
+      },
+      get directory() {
+        return props.directory
+      },
+      navigateToSession: props.onNavigateToSession,
+      sessionHref: props.onSessionHref,
+    }
+  },
+})

package/src/context/index.ts

@@ -0,0 +1 @@
+export * from "./data"

package/src/pierre/comment-hover.ts

@@ -0,0 +1,83 @@
+export type HoverCommentLine = {
+  lineNumber: number
+  side?: "additions" | "deletions"
+}
+
+export function createHoverCommentUtility(props: {
+  label: string
+  getHoveredLine: () => HoverCommentLine | undefined
+  onSelect: (line: HoverCommentLine) => void
+}) {
+  if (typeof document === "undefined") return
+
+  const button = document.createElement("button")
+  button.type = "button"
+  button.ariaLabel = props.label
+  button.textContent = "+"
+  button.style.width = "20px"
+  button.style.height = "20px"
+  button.style.display = "flex"
+  button.style.alignItems = "center"
+  button.style.justifyContent = "center"
+  button.style.border = "none"
+  button.style.borderRadius = "var(--radius-md)"
+  button.style.background = "var(--icon-interactive-base)"
+  button.style.color = "var(--white)"
+  button.style.boxShadow = "var(--shadow-xs)"
+  button.style.fontSize = "14px"
+  button.style.lineHeight = "1"
+  button.style.cursor = "pointer"
+  button.style.position = "relative"
+  button.style.left = "30px"
+  button.style.top = "calc((var(--diffs-line-height, 24px) - 20px) / 2)"
+
+  let line: HoverCommentLine | undefined
+
+  const sync = () => {
+    const next = props.getHoveredLine()
+    if (!next) return
+    line = next
+  }
+
+  // The hovered line changes when the pointer moves or when content scrolls under
+  // a stationary pointer, so track both with passive listeners instead of polling
+  // every animation frame. There is no teardown hook for this utility; like the
+  // rAF loop this replaced, the listeners self-detach on the first event after
+  // the button leaves the DOM.
+  const onHoverInvalidated = () => {
+    if (!button.isConnected) {
+      document.removeEventListener("pointermove", onHoverInvalidated)
+      document.removeEventListener("scroll", onHoverInvalidated, true)
+      return
+    }
+    sync()
+  }
+
+  const open = () => {
+    const next = props.getHoveredLine() ?? line
+    if (!next) return
+    props.onSelect(next)
+  }
+
+  document.addEventListener("pointermove", onHoverInvalidated, { passive: true })
+  document.addEventListener("scroll", onHoverInvalidated, { passive: true, capture: true })
+  button.addEventListener("mouseenter", sync)
+  button.addEventListener("mousemove", sync)
+  button.addEventListener("pointerdown", (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    sync()
+  })
+  button.addEventListener("mousedown", (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    sync()
+  })
+  button.addEventListener("click", (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    open()
+  })
+
+  return button
+}

package/src/pierre/commented-lines.ts

@@ -0,0 +1,91 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+import { diffLineIndex, diffRowIndex } from "./diff-selection"
+
+export type CommentSide = "additions" | "deletions"
+
+function annotationIndex(node: HTMLElement) {
+  const value = node.dataset.lineAnnotation?.split(",")[1]
+  if (!value) return
+  const line = parseInt(value, 10)
+  if (Number.isNaN(line)) return
+  return line
+}
+
+function clear(root: ShadowRoot) {
+  const marked = Array.from(root.querySelectorAll("[data-comment-selected]"))
+  for (const node of marked) {
+    if (!(node instanceof HTMLElement)) continue
+    node.removeAttribute("data-comment-selected")
+  }
+}
+
+export function markCommentedDiffLines(root: ShadowRoot, ranges: SelectedLineRange[]) {
+  clear(root)
+
+  const diffs = root.querySelector("[data-diff]")
+  if (!(diffs instanceof HTMLElement)) return
+
+  const split = diffs.dataset.diffType === "split"
+  const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter(
+    (node): node is HTMLElement => node instanceof HTMLElement,
+  )
+  if (rows.length === 0) return
+
+  const annotations = Array.from(diffs.querySelectorAll("[data-line-annotation]")).filter(
+    (node): node is HTMLElement => node instanceof HTMLElement,
+  )
+
+  for (const range of ranges) {
+    const start = diffRowIndex(root, split, range.start, range.side as CommentSide | undefined)
+    if (start === undefined) continue
+
+    const end = (() => {
+      const same = range.end === range.start && (range.endSide == null || range.endSide === range.side)
+      if (same) return start
+      return diffRowIndex(root, split, range.end, (range.endSide ?? range.side) as CommentSide | undefined)
+    })()
+    if (end === undefined) continue
+
+    const first = Math.min(start, end)
+    const last = Math.max(start, end)
+
+    for (const row of rows) {
+      const idx = diffLineIndex(split, row)
+      if (idx === undefined || idx < first || idx > last) continue
+      row.setAttribute("data-comment-selected", "")
+    }
+
+    for (const annotation of annotations) {
+      const idx = annotationIndex(annotation)
+      if (idx === undefined || idx < first || idx > last) continue
+      annotation.setAttribute("data-comment-selected", "")
+    }
+  }
+}
+
+export function markCommentedFileLines(root: ShadowRoot, ranges: SelectedLineRange[]) {
+  clear(root)
+
+  const annotations = Array.from(root.querySelectorAll("[data-line-annotation]")).filter(
+    (node): node is HTMLElement => node instanceof HTMLElement,
+  )
+
+  for (const range of ranges) {
+    const start = Math.max(1, Math.min(range.start, range.end))
+    const end = Math.max(range.start, range.end)
+
+    for (let line = start; line <= end; line++) {
+      const nodes = Array.from(root.querySelectorAll(`[data-line="${line}"], [data-column-number="${line}"]`))
+      for (const node of nodes) {
+        if (!(node instanceof HTMLElement)) continue
+        node.setAttribute("data-comment-selected", "")
+      }
+    }
+
+    for (const annotation of annotations) {
+      const line = annotationIndex(annotation)
+      if (line === undefined || line < start || line > end) continue
+      annotation.setAttribute("data-comment-selected", "")
+    }
+  }
+}

package/src/pierre/diff-selection.ts

@@ -0,0 +1,71 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+
+export type DiffSelectionSide = "additions" | "deletions"
+
+export function findDiffSide(node: HTMLElement): DiffSelectionSide {
+  const line = node.closest("[data-line], [data-alt-line]")
+  if (line instanceof HTMLElement) {
+    const type = line.dataset.lineType
+    if (type === "change-deletion") return "deletions"
+    if (type === "change-addition" || type === "change-additions") return "additions"
+  }
+
+  const code = node.closest("[data-code]")
+  if (!(code instanceof HTMLElement)) return "additions"
+  return code.hasAttribute("data-deletions") ? "deletions" : "additions"
+}
+
+export function diffLineIndex(split: boolean, node: HTMLElement) {
+  const raw = node.dataset.lineIndex
+  if (!raw) return
+
+  const values = raw
+    .split(",")
+    .map((x) => parseInt(x, 10))
+    .filter((x) => !Number.isNaN(x))
+  if (values.length === 0) return
+  if (!split) return values[0]
+  if (values.length === 2) return values[1]
+  return values[0]
+}
+
+export function diffRowIndex(root: ShadowRoot, split: boolean, line: number, side: DiffSelectionSide | undefined) {
+  const rows = Array.from(root.querySelectorAll(`[data-line="${line}"], [data-alt-line="${line}"]`)).filter(
+    (node): node is HTMLElement => node instanceof HTMLElement,
+  )
+  if (rows.length === 0) return
+
+  const target = side ?? "additions"
+  for (const row of rows) {
+    if (findDiffSide(row) === target) return diffLineIndex(split, row)
+    if (parseInt(row.dataset.altLine ?? "", 10) === line) return diffLineIndex(split, row)
+  }
+}
+
+export function fixDiffSelection(root: ShadowRoot | undefined, range: SelectedLineRange | null) {
+  if (!range) return range
+  if (!root) return
+
+  const diffs = root.querySelector("[data-diff]")
+  if (!(diffs instanceof HTMLElement)) return
+
+  const split = diffs.dataset.diffType === "split"
+  const start = diffRowIndex(root, split, range.start, range.side)
+  const end = diffRowIndex(root, split, range.end, range.endSide ?? range.side)
+
+  if (start === undefined || end === undefined) {
+    if (root.querySelector("[data-line], [data-alt-line]") == null) return
+    return null
+  }
+  if (start <= end) return range
+
+  const side = range.endSide ?? range.side
+  const swapped: SelectedLineRange = {
+    start: range.end,
+    end: range.start,
+  }
+
+  if (side) swapped.side = side
+  if (range.endSide && range.side) swapped.endSide = range.side
+  return swapped
+}