@neurocode-ai/session-ui 1.18.8

package/src/v2/components/session-review-v2.tsx

@@ -0,0 +1,340 @@
+import { IconButton } from "@neurocode-ai/ui/icon-button"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import { SegmentedControlItemV2, SegmentedControlV2 } from "@neurocode-ai/ui/v2/segmented-control-v2"
+import { TextInputV2 } from "@neurocode-ai/ui/v2/text-input-v2"
+import { KeybindV2 } from "@neurocode-ai/ui/v2/keybind-v2"
+import { Icon } from "@neurocode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@neurocode-ai/ui/v2/icon-button-v2"
+import { TooltipV2 } from "@neurocode-ai/ui/v2/tooltip-v2"
+import type { SessionReviewDiffStyle } from "../../components/session-review"
+import { ResizeHandle } from "@neurocode-ai/ui/resize-handle"
+import { ScrollView } from "@neurocode-ai/ui/scroll-view"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { Show, createEffect, createMemo, createSignal, type JSX } from "solid-js"
+import { getWorkerPool } from "../../pierre/worker"
+import { SessionFilePanelV2, SessionFilePanelV2Empty } from "./session-file-panel-v2"
+
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT = 240
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN = 200
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX = 480
+
+export type SessionReviewExpandMode = "expand" | "collapse"
+
+export type SessionReviewV2Props = {
+  title?: JSX.Element
+  stats?: JSX.Element
+  empty?: JSX.Element
+  sidebarOpen?: boolean
+  sidebar?: JSX.Element
+  activeFile?: string
+  files: string[]
+  onSelectFile: (file: string) => void
+  diffStyle: SessionReviewDiffStyle
+  onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
+  expandMode: SessionReviewExpandMode
+  onExpandModeChange: (mode: SessionReviewExpandMode) => void
+  preview?: JSX.Element
+  hasDiffs: boolean
+}
+
+export type SessionReviewV2SidebarProps = {
+  open: boolean
+  transition: boolean
+  title?: JSX.Element
+  stats?: JSX.Element
+  filter: string
+  onFilterChange: (value: string) => void
+  onFilterKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>
+  filterAutofocus?: boolean
+  filterRef?: (element: HTMLInputElement) => void
+  filterControls?: string
+  filterActiveDescendant?: string
+  filterExpanded?: boolean
+  width?: number
+  onWidthChange?: (width: number) => void
+  minWidth?: number
+  maxWidth?: number
+  viewportRef?: (element: HTMLDivElement) => void
+  children?: JSX.Element
+}
+
+export function SessionReviewV2Sidebar(props: SessionReviewV2SidebarProps) {
+  const i18n = useI18n()
+  const [resizing, setResizing] = createSignal(false)
+  const width = () => props.width ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT
+  const minWidth = () => props.minWidth ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN
+  const maxWidth = () => props.maxWidth ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX
+
+  createEffect(() => {
+    if (!resizing()) return
+    const stop = () => setResizing(false)
+    makeEventListener(document, "pointerup", stop)
+    makeEventListener(document, "pointercancel", stop)
+  })
+
+  return (
+    <div data-component="session-review-v2-sidebar-root">
+      <Show when={props.open}>
+        <aside
+          data-slot="session-review-v2-sidebar"
+          data-transition={props.transition ? "" : undefined}
+          data-resizing={resizing() ? "" : undefined}
+          style={{ width: `${width()}px` }}
+        >
+          <div data-slot="session-review-v2-sidebar-header">
+            <div data-slot="session-review-v2-sidebar-title">{props.title}</div>
+            {props.stats}
+          </div>
+          <div data-slot="session-review-v2-sidebar-filter">
+            <TextInputV2
+              type="search"
+              value={props.filter}
+              onInput={(event) => props.onFilterChange(event.currentTarget.value)}
+              onKeyDown={props.onFilterKeyDown}
+              autofocus={props.filterAutofocus}
+              ref={props.filterRef}
+              role={props.filterControls ? "combobox" : undefined}
+              aria-autocomplete={props.filterControls ? "list" : undefined}
+              aria-controls={props.filterControls}
+              aria-activedescendant={props.filterActiveDescendant}
+              aria-expanded={props.filterControls ? props.filterExpanded : undefined}
+              showClearButton={props.filter.length > 0}
+              clearLabel={i18n.t("ui.list.clearFilter")}
+              onClearClick={() => props.onFilterChange("")}
+              placeholder={i18n.t("ui.sessionReviewV2.filterFiles")}
+              aria-label={i18n.t("ui.sessionReviewV2.filterFiles")}
+              leadingIcon={
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M12.25 12.25L10.0625 10.0625M11.0833 6.41667C11.0833 8.994 8.994 11.0833 6.41667 11.0833C3.83934 11.0833 1.75 8.994 1.75 6.41667C1.75 3.83934 3.83934 1.75 6.41667 1.75C8.994 1.75 11.0833 3.83934 11.0833 6.41667Z"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                  />
+                </svg>
+              }
+            />
+          </div>
+          <ScrollView
+            data-slot="session-review-v2-sidebar-tree"
+            class="group/file-tree-v2"
+            thumbVisibility="scroll"
+            viewportRef={props.viewportRef}
+          >
+            {props.children}
+          </ScrollView>
+        </aside>
+      </Show>
+      <Show when={props.open && props.onWidthChange}>
+        <div data-slot="session-review-v2-sidebar-resize" onPointerDown={() => setResizing(true)}>
+          <ResizeHandle
+            direction="horizontal"
+            size={width()}
+            min={minWidth()}
+            max={maxWidth()}
+            onResize={(next) => props.onWidthChange?.(next)}
+            onDblClick={() => props.onWidthChange?.(SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT)}
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export function SessionReviewV2(props: SessionReviewV2Props) {
+  const i18n = useI18n()
+
+  createEffect(() => {
+    getWorkerPool(props.diffStyle)
+  })
+
+  const fileIndex = () => {
+    const files = props.files
+    if (files.length === 0) return -1
+
+    const active = props.activeFile
+    const i = active ? files.indexOf(active) : -1
+    if (i >= 0) return i
+    return 0
+  }
+
+  const prev = () => {
+    return props.files[fileIndex() - 1]
+  }
+
+  const next = () => {
+    return props.files[fileIndex() + 1]
+  }
+
+  const canCycle = () => props.files.length > 0
+  const showCollapsedMeta = () => props.sidebarOpen === false
+  // Memoize slot getters so Show conditions do not instantiate throwaway elements.
+  const title = createMemo(() => props.title)
+  const stats = createMemo(() => props.stats)
+
+  const cycle = (file: string | undefined) => {
+    if (!file) return
+    props.onSelectFile(file)
+  }
+
+  // The prev/next tooltips advertise < and >; keep the keys working while the
+  // pane is mounted, but never while typing in an input or comment editor.
+  makeEventListener(document, "keydown", (event) => {
+    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return
+    if (event.key !== "<" && event.key !== ">") return
+    const target = event.target
+    if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select"))) return
+    if (!props.hasDiffs || !canCycle()) return
+    const file = event.key === "<" ? prev() : next()
+    if (!file) return
+    event.preventDefault()
+    cycle(file)
+  })
+
+  const toolbarStart = () => (
+    <>
+      <Show when={showCollapsedMeta()}>
+        <div data-slot="session-review-v2-toolbar-collapsed-meta">
+          <Show when={title()}>
+            <div data-slot="session-review-v2-toolbar-title">{title()}</div>
+          </Show>
+          {stats()}
+          <Show when={canCycle()}>
+            <span data-slot="session-review-v2-file-position">
+              {fileIndex() + 1}/{props.files.length}
+            </span>
+          </Show>
+        </div>
+      </Show>
+      <div class="flex items-center">
+        <TooltipV2
+          openDelay={2000}
+          inactive={!prev()}
+          value={
+            <>
+              {i18n.t("ui.sessionReviewV2.previousFile")}
+              <KeybindV2 keys={["<"]} variant="neutral" />
+            </>
+          }
+        >
+          <IconButton
+            icon="arrow-left"
+            variant="ghost"
+            size="small"
+            class="session-review-v2-file-nav-button"
+            disabled={!prev()}
+            onClick={() => cycle(prev())}
+            aria-label={i18n.t("ui.sessionReviewV2.previousFile")}
+          />
+        </TooltipV2>
+        <TooltipV2
+          openDelay={2000}
+          inactive={!next()}
+          value={
+            <>
+              {i18n.t("ui.sessionReviewV2.nextFile")}
+              <KeybindV2 keys={[">"]} variant="neutral" />
+            </>
+          }
+        >
+          <IconButton
+            icon="arrow-right"
+            variant="ghost"
+            size="small"
+            class="session-review-v2-file-nav-button"
+            disabled={!next()}
+            onClick={() => cycle(next())}
+            aria-label={i18n.t("ui.sessionReviewV2.nextFile")}
+          />
+        </TooltipV2>
+      </div>
+    </>
+  )
+
+  const toolbarEnd = () => (
+    <>
+      <SegmentedControlV2
+        value={props.expandMode}
+        onChange={(value) => {
+          if (value !== "expand" && value !== "collapse") return
+          props.onExpandModeChange(value)
+        }}
+        class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
+        aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
+      >
+        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+          <SegmentedControlItemV2 value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
+            <Icon name="expand" />
+          </SegmentedControlItemV2>
+        </TooltipV2>
+        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+          <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+            <Icon name="collapse" />
+          </SegmentedControlItemV2>
+        </TooltipV2>
+      </SegmentedControlV2>
+      <Show when={props.onDiffStyleChange}>
+        <SegmentedControlV2
+          value={props.diffStyle}
+          onChange={(value) => {
+            if (value !== "unified" && value !== "split") return
+            props.onDiffStyleChange?.(value)
+          }}
+          class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
+          aria-label={i18n.t("ui.sessionReviewV2.diffView")}
+        >
+          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+            <SegmentedControlItemV2 value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+              <Icon name="unified" />
+            </SegmentedControlItemV2>
+          </TooltipV2>
+          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+            <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
+              <Icon name="split" />
+            </SegmentedControlItemV2>
+          </TooltipV2>
+        </SegmentedControlV2>
+      </Show>
+    </>
+  )
+
+  return (
+    <SessionFilePanelV2
+      sidebar={props.sidebar}
+      toolbar={props.hasDiffs}
+      toolbarStart={toolbarStart()}
+      toolbarEnd={toolbarEnd()}
+    >
+      <Show when={props.hasDiffs} fallback={props.empty}>
+        <Show when={props.activeFile} fallback={<SessionFilePanelV2Empty>{props.empty}</SessionFilePanelV2Empty>}>
+          {props.preview}
+        </Show>
+      </Show>
+    </SessionFilePanelV2>
+  )
+}
+
+export function SessionReviewV2SidebarToggle(props: { opened: boolean; disabled?: boolean; onToggle: () => void }) {
+  const i18n = useI18n()
+
+  return (
+    <TooltipV2 value={i18n.t("ui.sessionReviewV2.toggleSidebar")}>
+      <IconButtonV2
+        variant="ghost"
+        size="small"
+        class="session-review-v2-sidebar-toggle"
+        aria-label={i18n.t("ui.sessionReviewV2.toggleSidebar")}
+        aria-expanded={props.opened}
+        disabled={props.disabled}
+        onClick={props.onToggle}
+        icon={<Icon name="filetree" />}
+      />
+    </TooltipV2>
+  )
+}

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

@@ -0,0 +1,200 @@
+[data-component="tool-error-card"] {
+  --tec-border: var(--v2-state-fg-danger);
+  --tec-title: var(--v2-text-text-base);
+  --tec-sep: var(--v2-text-text-muted);
+  --tec-subtitle: var(--v2-text-text-muted);
+  --tec-suffix: var(--v2-text-text-faint);
+  --tec-chevron: var(--v2-text-text-faint);
+  --tec-icon: var(--v2-icon-icon-base);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 0;
+  width: 100%;
+  padding: 0 0 0 10px;
+  gap: 8px;
+  border-left: 2px solid var(--tec-border);
+  font-variant-numeric: tabular-nums;
+
+  [data-slot="tool-error-card-trigger"] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+    min-height: 24px;
+    padding: 2px 0;
+    margin: 0;
+    text-align: left;
+    color: inherit;
+    outline: none;
+    border-radius: 2px;
+  }
+
+  [data-slot="tool-error-card-trigger"]:focus-visible {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 2px;
+  }
+
+  [data-slot="tool-error-card-icon-wrap"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 20px;
+    box-sizing: border-box;
+    color: var(--tec-icon);
+  }
+
+  [data-slot="tool-error-card-ban"] {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  [data-slot="tool-error-card-loader"] {
+    display: block;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    animation: tool-error-card-spin 0.65s linear infinite;
+    transform-origin: 50% 50%;
+  }
+
+  [data-slot="tool-error-card-main"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    min-height: 20px;
+    flex: 1 1 auto;
+  }
+
+  [data-slot="tool-error-card-labels"] {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  [data-slot="tool-error-card-title"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    max-width: 100%;
+    height: 20px;
+    font-size: 13px;
+    font-weight: 530;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+    color: var(--tec-title);
+    user-select: none;
+  }
+
+  [data-slot="tool-error-card-sep"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 20px;
+    font-size: 11px;
+    font-weight: 530;
+    line-height: 20px;
+    letter-spacing: 0.05px;
+    color: var(--tec-sep);
+    user-select: none;
+  }
+
+  [data-slot="tool-error-card-subtitle"] {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    height: 20px;
+    flex: 0 1 auto;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+    color: var(--tec-subtitle);
+    user-select: none;
+  }
+
+  a[data-slot="tool-error-card-subtitle"] {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    height: 20px;
+    flex: 0 1 auto;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    user-select: none;
+  }
+
+  [data-slot="tool-error-card-chevron-wrap"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 14px;
+    height: 20px;
+    color: var(--tec-chevron);
+    user-select: none;
+  }
+
+  [data-slot="tool-error-card-chevron"] {
+    display: block;
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--tec-chevron);
+    transition: transform 0.15s ease-out;
+  }
+
+  &[data-expanded] [data-slot="tool-error-card-chevron"] {
+    transform: rotate(90deg);
+  }
+
+  [data-slot="tool-error-card-content"] {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  [data-slot="tool-error-card-suffix"] {
+    padding: 0 0 0 24px;
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: -0.04px;
+    color: var(--tec-suffix);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+}
+
+@keyframes tool-error-card-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,91 @@
+import { createSignal } from "solid-js"
+import { ButtonV2 } from "@neurocode-ai/ui/v2/button-v2"
+import { ToolErrorCardV2, type ToolErrorCardV2Props } from "./tool-error-card-v2"
+
+const docs = `### Overview
+Compact tool error row with optional expandable detail, aligned to the OpenCode design system spec.
+
+### API
+- \`ToolErrorCardV2\` wraps Kobalte \`Collapsible\` directly. Pass \`open\`, \`defaultOpen\`, and \`onOpenChange\` like any disclosure (controlled when \`open\` is defined).
+- Without a non-empty \`suffix\`, the card is not expandable (\`disabled\` on the collapsible root).
+
+### Theming
+- Uses \`data-component="tool-error-card"\` and slot attributes; colors are CSS variables on the root (\`--tec-*\`).
+`
+
+export default {
+  title: "UI V2/ToolErrorCard",
+  id: "components-tool-error-card-v2",
+  component: ToolErrorCardV2,
+  tags: ["autodocs"],
+  parameters: {
+    frameBackground: "#fff",
+    layout: "padded",
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    title: "Read",
+    subtitle: "Permission denied",
+    suffix: "The tool could not access the requested path.",
+    defaultOpen: false,
+  } satisfies ToolErrorCardV2Props,
+  render: (args: ToolErrorCardV2Props) => <ToolErrorCardV2 {...args} />,
+}
+
+export const Loading = {
+  args: {
+    title: "Read",
+    subtitle: "Working",
+    suffix: "Details appear when the tool finishes.",
+    loading: true,
+    defaultOpen: false,
+  } satisfies ToolErrorCardV2Props,
+  render: (args: ToolErrorCardV2Props) => <ToolErrorCardV2 {...args} />,
+}
+
+export const SubtitleLink = {
+  args: {
+    title: "Task",
+    subtitle: "View logs",
+    subtitleHref: "https://example.com",
+    suffix: "Subagent exited with code 1.",
+    defaultOpen: false,
+  } satisfies ToolErrorCardV2Props,
+  render: (args: ToolErrorCardV2Props) => <ToolErrorCardV2 {...args} />,
+}
+
+export const NoSuffixDisabled = {
+  args: {
+    title: "List",
+    subtitle: "No detail",
+    defaultOpen: false,
+  } satisfies ToolErrorCardV2Props,
+  render: (args: ToolErrorCardV2Props) => <ToolErrorCardV2 {...args} />,
+}
+
+export const Controlled = {
+  render: () => {
+    const [open, setOpen] = createSignal(false)
+    return (
+      <div style={{ display: "flex", "flex-direction": "column", gap: "24px", "max-width": "420px" }}>
+        <ButtonV2 type="button" classList={{ "w-fit": true }} onClick={() => setOpen((o) => !o)}>
+          Toggle from outside: {open() ? "Open" : "Closed"}
+        </ButtonV2>
+        <ToolErrorCardV2
+          title="Grep"
+          subtitle="Timeout"
+          suffix="Operation exceeded 30s."
+          open={open()}
+          onOpenChange={setOpen}
+        />
+      </div>
+    )
+  },
+}