@neurocode-ai/session-ui 1.18.8

package/src/pierre/index.ts

@@ -0,0 +1,186 @@
+import { DiffLineAnnotation, FileContents, FileDiffOptions, type SelectedLineRange } from "@pierre/diffs"
+import { ComponentProps } from "solid-js"
+import { lineCommentStyles } from "../components/line-comment-styles"
+
+export type DiffProps<T = {}> = FileDiffOptions<T> & {
+  before: FileContents
+  after: FileContents
+  annotations?: DiffLineAnnotation<T>[]
+  selectedLines?: SelectedLineRange | null
+  commentedLines?: SelectedLineRange[]
+  onLineNumberSelectionEnd?: (selection: SelectedLineRange | null) => void
+  onRendered?: () => void
+  class?: string
+  classList?: ComponentProps<"div">["classList"]
+}
+
+const unsafeCSS = `
+:host {
+  --diffs-bg: var(--opencode-diffs-bg, var(--color-background-stronger));
+}
+
+[data-diff],
+[data-file] {
+  /* Pierre 1.2 mixes these override targets at 12% in light mode and 20% in dark mode. */
+  --diffs-bg-deletion-override: light-dark(
+    color-mix(in lab, var(--diffs-bg) 33.333%, var(--diffs-deletion-base)),
+    color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-deletion-base))
+  );
+  --diffs-bg-addition-override: light-dark(
+    color-mix(in lab, var(--diffs-bg) 33.333%, var(--diffs-addition-base)),
+    color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-addition-base))
+  );
+  --diffs-selection-base: var(--surface-warning-strong);
+  --diffs-selection-border: var(--border-warning-base);
+  --diffs-selection-number-fg: #1c1917;
+  /* Use explicit alpha instead of color-mix(..., transparent) to avoid Safari's non-premultiplied interpolation bugs. */
+  --diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--surface-warning-base) r g b / 0.65));
+  --diffs-bg-selection-number: var(
+    --diffs-bg-selection-number-override,
+    rgb(from var(--surface-warning-base) r g b / 0.85)
+  );
+  --diffs-bg-selection-text: rgb(from var(--surface-warning-strong) r g b / 0.2);
+}
+
+:host([data-color-scheme='dark']) [data-diff],
+:host([data-color-scheme='dark']) [data-file] {
+  --diffs-selection-number-fg: #fdfbfb;
+  --diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--solaris-dark-6) r g b / 0.65));
+  --diffs-bg-selection-number: var(
+    --diffs-bg-selection-number-override,
+    rgb(from var(--solaris-dark-6) r g b / 0.85)
+  );
+}
+
+[data-diff] ::selection,
+[data-file] ::selection {
+  background-color: var(--diffs-bg-selection-text);
+}
+
+::highlight(opencode-find) {
+  background-color: rgb(from var(--surface-warning-base) r g b / 0.35);
+}
+
+::highlight(opencode-find-current) {
+  background-color: rgb(from var(--surface-warning-strong) r g b / 0.55);
+}
+
+[data-diff] [data-line][data-comment-selected]:not([data-selected-line]) {
+  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
+}
+
+[data-file] [data-line][data-comment-selected]:not([data-selected-line]) {
+  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
+}
+
+[data-diff] [data-column-number][data-comment-selected]:not([data-selected-line]) {
+  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number);
+  color: var(--diffs-selection-number-fg);
+}
+
+[data-file] [data-column-number][data-comment-selected]:not([data-selected-line]) {
+  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number);
+  color: var(--diffs-selection-number-fg);
+}
+
+[data-diff] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] {
+  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
+}
+
+[data-file] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] {
+  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
+}
+
+[data-diff] [data-line][data-selected-line] {
+  background-color: var(--diffs-bg-selection);
+  box-shadow: inset 2px 0 0 var(--diffs-selection-border);
+}
+
+[data-file] [data-line][data-selected-line] {
+  background-color: var(--diffs-bg-selection);
+  box-shadow: inset 2px 0 0 var(--diffs-selection-border);
+}
+
+[data-diff] [data-column-number][data-selected-line] {
+  background-color: var(--diffs-bg-selection-number);
+  color: var(--diffs-selection-number-fg);
+}
+
+[data-file] [data-column-number][data-selected-line] {
+  background-color: var(--diffs-bg-selection-number);
+  color: var(--diffs-selection-number-fg);
+}
+
+[data-diff] [data-column-number][data-line-type='context'][data-selected-line],
+[data-diff] [data-column-number][data-line-type='context-expanded'][data-selected-line],
+[data-diff] [data-column-number][data-line-type='change-addition'][data-selected-line],
+[data-diff] [data-column-number][data-line-type='change-deletion'][data-selected-line] {
+  color: var(--diffs-selection-number-fg);
+}
+
+/* The deletion word-diff emphasis is stronger than additions; soften it while selected so the selection highlight reads consistently. */
+[data-diff] [data-line][data-line-type='change-deletion'][data-selected-line] {
+  --diffs-bg-deletion-emphasis: light-dark(
+    rgb(from var(--diffs-deletion-base) r g b / 0.07),
+    rgb(from var(--diffs-deletion-base) r g b / 0.1)
+  );
+}
+
+[data-diff-header],
+[data-diff],
+[data-file] {
+  [data-separator] {
+    height: 24px;
+  }
+  [data-column-number] {
+    background-color: var(--diffs-bg);
+    cursor: default !important;
+  }
+
+  &[data-interactive-line-numbers] [data-column-number] {
+    cursor: default !important;
+  }
+
+  &[data-interactive-lines] [data-line] {
+    cursor: auto !important;
+  }
+  [data-code] {
+    overflow-x: auto !important;
+    overflow-y: clip !important;
+  }
+}
+
+${lineCommentStyles}
+
+`
+
+export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
+  return {
+    theme: "OpenCode",
+    themeType: "system",
+    disableLineNumbers: false,
+    overflow: "wrap",
+    diffStyle: style ?? "unified",
+    diffIndicators: "bars",
+    lineHoverHighlight: "both",
+    disableBackground: false,
+    expansionLineCount: 20,
+    hunkSeparators: "line-info-basic",
+    lineDiffType: style === "split" ? "word-alt" : "none",
+    maxLineDiffLength: 1000,
+    maxLineLengthForHighlighting: 1000,
+    disableFileHeader: true,
+    unsafeCSS,
+  } as const
+}
+
+export const styleVariables = {
+  "--diffs-font-family": "var(--font-family-mono)",
+  "--diffs-font-size": "var(--font-size-small)",
+  "--diffs-line-height": "24px",
+  "--diffs-tab-size": 2,
+  "--diffs-font-features": "var(--font-family-mono--font-feature-settings)",
+  "--diffs-header-font-family": "var(--font-family-sans)",
+  "--diffs-gap-block": 0,
+  "--diffs-min-number-column-width": "4ch",
+}

package/src/pierre/media.ts

@@ -0,0 +1,110 @@
+import type { FileContent } from "@neurocode-ai/sdk/v2"
+
+export type MediaKind = "image" | "audio" | "svg"
+
+const imageExtensions = new Set(["png", "jpg", "jpeg", "gif", "webp", "avif", "bmp", "ico", "tif", "tiff", "heic"])
+const audioExtensions = new Set(["mp3", "wav", "ogg", "m4a", "aac", "flac", "opus"])
+
+type MediaValue = unknown
+
+function mediaRecord(value: unknown) {
+  if (!value || typeof value !== "object") return
+  return value as Partial<FileContent> & {
+    content?: unknown
+    encoding?: unknown
+    mimeType?: unknown
+    type?: unknown
+  }
+}
+
+export function normalizeMimeType(type: string | undefined) {
+  if (!type) return
+  const mime = type.split(";", 1)[0]?.trim().toLowerCase()
+  if (!mime) return
+  if (mime === "audio/x-aac") return "audio/aac"
+  if (mime === "audio/x-m4a") return "audio/mp4"
+  return mime
+}
+
+export function fileExtension(path: string | undefined) {
+  if (!path) return ""
+  const idx = path.lastIndexOf(".")
+  if (idx === -1) return ""
+  return path.slice(idx + 1).toLowerCase()
+}
+
+export function mediaKindFromPath(path: string | undefined): MediaKind | undefined {
+  const ext = fileExtension(path)
+  if (ext === "svg") return "svg"
+  if (imageExtensions.has(ext)) return "image"
+  if (audioExtensions.has(ext)) return "audio"
+}
+
+export function isBinaryContent(value: MediaValue) {
+  return mediaRecord(value)?.type === "binary"
+}
+
+function validDataUrl(value: string, kind: MediaKind) {
+  if (kind === "svg") return value.startsWith("data:image/svg+xml") ? value : undefined
+  if (kind === "image") return value.startsWith("data:image/") ? value : undefined
+  if (value.startsWith("data:audio/x-aac;")) return value.replace("data:audio/x-aac;", "data:audio/aac;")
+  if (value.startsWith("data:audio/x-m4a;")) return value.replace("data:audio/x-m4a;", "data:audio/mp4;")
+  if (value.startsWith("data:audio/")) return value
+}
+
+export function dataUrlFromMediaValue(value: MediaValue, kind: MediaKind) {
+  if (!value) return
+
+  if (typeof value === "string") {
+    return validDataUrl(value, kind)
+  }
+
+  const record = mediaRecord(value)
+  if (!record) return
+
+  if (typeof record.content !== "string") return
+
+  const mime = normalizeMimeType(typeof record.mimeType === "string" ? record.mimeType : undefined)
+  if (!mime) return
+
+  if (kind === "svg") {
+    if (mime !== "image/svg+xml") return
+    if (record.encoding === "base64") return `data:image/svg+xml;base64,${record.content}`
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(record.content)}`
+  }
+
+  if (kind === "image" && !mime.startsWith("image/")) return
+  if (kind === "audio" && !mime.startsWith("audio/")) return
+  if (record.encoding !== "base64") return
+
+  return `data:${mime};base64,${record.content}`
+}
+
+function decodeBase64Utf8(value: string) {
+  if (typeof atob !== "function") return
+
+  try {
+    const raw = atob(value)
+    const bytes = Uint8Array.from(raw, (x) => x.charCodeAt(0))
+    if (typeof TextDecoder === "function") return new TextDecoder().decode(bytes)
+    return raw
+  } catch {}
+}
+
+export function svgTextFromValue(value: MediaValue) {
+  const record = mediaRecord(value)
+  if (!record) return
+  if (typeof record.content !== "string") return
+
+  const mime = normalizeMimeType(typeof record.mimeType === "string" ? record.mimeType : undefined)
+  if (mime !== "image/svg+xml") return
+  if (record.encoding === "base64") return decodeBase64Utf8(record.content)
+  return record.content
+}
+
+export function hasMediaValue(value: MediaValue) {
+  if (typeof value === "string") return value.length > 0
+  const record = mediaRecord(value)
+  if (!record) return false
+  return typeof record.content === "string" && record.content.length > 0
+}

package/src/pierre/selection-bridge.ts

@@ -0,0 +1,132 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+
+type SelectionKey = "ui.sessionReview.selection.line" | "ui.sessionReview.selection.lines"
+type SelectionVars = Record<string, string | number>
+
+type PointerMode = "none" | "text" | "numbers"
+type Side = SelectedLineRange["side"]
+type LineSpan = Pick<SelectedLineRange, "start" | "end">
+
+export function formatSelectedLineLabel(range: LineSpan, t: (key: SelectionKey, params: SelectionVars) => string) {
+  const start = Math.min(range.start, range.end)
+  const end = Math.max(range.start, range.end)
+  if (start === end) return t("ui.sessionReview.selection.line", { line: start })
+  return t("ui.sessionReview.selection.lines", { start, end })
+}
+
+export function previewSelectedLines(source: string, range: LineSpan) {
+  const start = Math.max(1, Math.min(range.start, range.end))
+  const end = Math.max(range.start, range.end)
+  const lines = source.split("\n").slice(start - 1, end)
+  if (lines.length === 0) return
+  return lines.slice(0, 2).join("\n")
+}
+
+export function cloneSelectedLineRange(range: SelectedLineRange): SelectedLineRange {
+  const next: SelectedLineRange = {
+    start: range.start,
+    end: range.end,
+  }
+
+  if (range.side) next.side = range.side
+  if (range.endSide) next.endSide = range.endSide
+  return next
+}
+
+export function lineInSelectedRange(range: SelectedLineRange | null | undefined, line: number, side?: Side) {
+  if (!range) return false
+
+  const start = Math.min(range.start, range.end)
+  const end = Math.max(range.start, range.end)
+  if (line < start || line > end) return false
+  if (!side) return true
+
+  const first = range.side
+  const last = range.endSide ?? first
+  if (!first && !last) return true
+  if (!first || !last) return (first ?? last) === side
+  if (first === last) return first === side
+  if (line === start) return first === side
+  if (line === end) return last === side
+  return true
+}
+
+export function isSingleLineSelection(range: SelectedLineRange | null) {
+  if (!range) return false
+  return range.start === range.end && (range.endSide == null || range.endSide === range.side)
+}
+
+export function toRange(source: Range | StaticRange): Range {
+  if (source instanceof Range) return source
+  const range = new Range()
+  range.setStart(source.startContainer, source.startOffset)
+  range.setEnd(source.endContainer, source.endOffset)
+  return range
+}
+
+export function restoreShadowTextSelection(root: ShadowRoot | undefined, range: Range | undefined) {
+  if (!root || !range) return
+
+  requestAnimationFrame(() => {
+    const selection =
+      (root as unknown as { getSelection?: () => Selection | null }).getSelection?.() ?? window.getSelection()
+    if (!selection) return
+
+    try {
+      selection.removeAllRanges()
+      selection.addRange(range)
+    } catch {}
+  })
+}
+
+export function createLineNumberSelectionBridge() {
+  let mode: PointerMode = "none"
+  let line: number | undefined
+  let moved = false
+  let pending = false
+
+  const clear = () => {
+    mode = "none"
+    line = undefined
+    moved = false
+  }
+
+  return {
+    begin(numberColumn: boolean, next: number | undefined) {
+      if (!numberColumn) {
+        mode = "text"
+        return
+      }
+
+      mode = "numbers"
+      line = next
+      moved = false
+    },
+    track(buttons: number, next: number | undefined) {
+      if (mode !== "numbers") return false
+
+      if ((buttons & 1) === 0) {
+        clear()
+        return true
+      }
+
+      if (next !== undefined && line !== undefined && next !== line) moved = true
+      return true
+    },
+    finish() {
+      const current = mode
+      pending = current === "numbers" && moved
+      clear()
+      return current
+    },
+    consume(range: SelectedLineRange | null) {
+      const result = pending && !isSingleLineSelection(range)
+      pending = false
+      return result
+    },
+    reset() {
+      pending = false
+      clear()
+    },
+  }
+}

package/src/pierre/virtualizer.ts

@@ -0,0 +1,100 @@
+import { type VirtualFileMetrics, Virtualizer } from "@pierre/diffs"
+
+type Target = {
+  key: Document | HTMLElement
+  root: Document | HTMLElement
+  content: HTMLElement | undefined
+}
+
+type Entry = {
+  virtualizer: Virtualizer
+  refs: number
+}
+
+const cache = new WeakMap<Document | HTMLElement, Entry>()
+
+export const virtualMetrics: Partial<VirtualFileMetrics> = {
+  lineHeight: 24,
+  hunkSeparatorHeight: 24,
+  spacing: 0,
+}
+
+function scrollable(value: string) {
+  return value === "auto" || value === "scroll" || value === "overlay"
+}
+
+function scrollRoot(container: HTMLElement) {
+  let node = container.parentElement
+  while (node) {
+    const style = getComputedStyle(node)
+    if (scrollable(style.overflowY)) return node
+    node = node.parentElement
+  }
+}
+
+function target(container: HTMLElement): Target | undefined {
+  if (typeof document === "undefined") return
+
+  const review = container.closest("[data-component='session-review']")
+  if (review instanceof HTMLElement) {
+    const root = scrollRoot(container) ?? review
+    const content = review.querySelector("[data-slot='session-review-container']")
+    return {
+      key: review,
+      root,
+      content: content instanceof HTMLElement ? content : undefined,
+    }
+  }
+
+  const root = scrollRoot(container)
+  if (root) {
+    const content = root.querySelector("[role='log']")
+    return {
+      key: root,
+      root,
+      content: content instanceof HTMLElement ? content : undefined,
+    }
+  }
+
+  return {
+    key: document,
+    root: document,
+    content: undefined,
+  }
+}
+
+export function acquireVirtualizer(container: HTMLElement) {
+  const resolved = target(container)
+  if (!resolved) return
+
+  let entry = cache.get(resolved.key)
+  if (!entry) {
+    const virtualizer = new Virtualizer()
+    virtualizer.setup(resolved.root, resolved.content)
+    entry = {
+      virtualizer,
+      refs: 0,
+    }
+    cache.set(resolved.key, entry)
+  }
+
+  entry.refs += 1
+  let done = false
+
+  return {
+    virtualizer: entry.virtualizer,
+    release() {
+      if (done) return
+      done = true
+
+      const current = cache.get(resolved.key)
+      if (!current) return
+
+      current.refs -= 1
+      if (current.refs > 0) return
+
+      current.virtualizer.cleanUp()
+      cache.delete(resolved.key)
+    },
+  }
+}

package/src/pierre/worker.ts

@@ -0,0 +1,52 @@
+import { WorkerPoolManager } from "@pierre/diffs/worker"
+import ShikiWorkerUrl from "@pierre/diffs/worker/worker.js?worker&url"
+
+export type WorkerPoolStyle = "unified" | "split"
+
+export function workerFactory(): Worker {
+  return new Worker(ShikiWorkerUrl, { type: "module" })
+}
+
+function createPool(lineDiffType: "none" | "word-alt") {
+  const pool = new WorkerPoolManager(
+    {
+      workerFactory,
+      // poolSize defaults to 8. More workers = more parallelism but
+      // also more memory. Too many can actually slow things down.
+      // NOTE: 2 is probably better for OpenCode, as I think 8 might be
+      // a bit overkill, especially because Safari has a significantly slower
+      // boot up time for workers
+      poolSize: 2,
+    },
+    {
+      theme: "OpenCode",
+      lineDiffType,
+      preferredHighlighter: "shiki-wasm",
+    },
+  )
+
+  void pool.initialize()
+  return pool
+}
+
+let unified: WorkerPoolManager | undefined
+let split: WorkerPoolManager | undefined
+
+export function getWorkerPool(style: WorkerPoolStyle | undefined): WorkerPoolManager | undefined {
+  if (typeof window === "undefined") return
+
+  if (style === "split") {
+    if (!split) split = createPool("word-alt")
+    return split
+  }
+
+  if (!unified) unified = createPool("none")
+  return unified
+}
+
+export function getWorkerPools() {
+  return {
+    unified: getWorkerPool("unified"),
+    split: getWorkerPool("split"),
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,14 @@
+@layer theme, base, components, utilities;
+
+@import "../components/basic-tool.css" layer(components);
+@import "../components/file.css" layer(components);
+@import "../components/markdown.css" layer(components);
+@import "../components/message-part.css" layer(components);
+@import "../components/message-nav.css" layer(components);
+@import "../components/session-review.css" layer(components);
+@import "../components/session-turn.css" layer(components);
+@import "../components/shell-submessage.css" layer(components);
+@import "../components/tool-count-label.css" layer(components);
+@import "../components/tool-count-summary.css" layer(components);
+@import "../components/tool-error-card.css" layer(components);
+@import "../components/tool-status-title.css" layer(components);

package/src/v2/components/attachment-card-v2.css

@@ -0,0 +1,70 @@
+[data-component="attachment-card-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  box-sizing: border-box;
+  width: 160px;
+  min-width: 160px;
+  max-width: 160px;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--v2-overlay-simple-overlay-hover);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-base);
+  cursor: default;
+
+  &[data-wide] {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  &[data-surface="base"] {
+    background: var(--v2-background-bg-base);
+  }
+
+  &[data-active] {
+    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
+  }
+
+  &[data-clickable] {
+    cursor: pointer;
+  }
+
+  [data-slot="attachment-card-v2-title"],
+  [data-slot="attachment-card-v2-subtitle"] {
+    max-width: 100%;
+    font-family: var(--v2-font-family-sans, "Inter", sans-serif);
+    font-style: normal;
+    font-size: 11px;
+    line-height: 12px;
+    letter-spacing: 0.05px;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="attachment-card-v2-title"] {
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 530;
+    color: var(--v2-text-text-base);
+  }
+
+  [data-slot="attachment-card-v2-subtitle"] {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    font-weight: 440;
+    color: var(--v2-text-text-muted);
+
+    [data-component="file-icon"] {
+      width: 12px;
+      height: 12px;
+      flex: none;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import type { JSX } from "solid-js"
+import "./attachment-card-v2.css"
+
+/** Shared 160px two-line card used by v2 file and comment attachments in the composer and timeline. */
+export function AttachmentCardV2(props: {
+  title: string
+  active?: boolean
+  clickable?: boolean
+  wide?: boolean
+  surface?: "base"
+  /** native title attribute */
+  hover?: string
+  titleRef?: (element: HTMLSpanElement) => void
+  onClick?: () => void
+  children: JSX.Element
+}) {
+  return (
+    <div
+      data-component="attachment-card-v2"
+      data-active={props.active ? "true" : undefined}
+      data-clickable={props.clickable ? "true" : undefined}
+      data-wide={props.wide ? "true" : undefined}
+      data-surface={props.surface}
+      title={props.hover}
+      onClick={() => props.onClick?.()}
+    >
+      <span ref={(element) => props.titleRef?.(element)} data-slot="attachment-card-v2-title">
+        {props.title}
+      </span>
+      <span data-slot="attachment-card-v2-subtitle">{props.children}</span>
+    </div>
+  )
+}