@workerdeck/ui 0.13.0 → 0.16.0

package/src/components/terminal/affordances.tsx

@@ -0,0 +1,118 @@
+import { createContext, useContext, useState, type ReactNode } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+/**
+ * The things a terminal cannot do, and this can.
+ *
+ * The theme's whole discipline is that it renders like a CLI — but it is not a
+ * CLI, and refusing every affordance a pointer makes possible would be cosplay
+ * rather than design. A terminal cannot highlight the row under your cursor and
+ * cannot put a copy button on a block of output; a web view can do both for free
+ * and they are genuinely useful.
+ *
+ * The rule that keeps this honest is that **each one costs no layout**. A hover
+ * fill is a background. An action button is an overlay at the row's right edge,
+ * one line tall, absolutely positioned so it displaces nothing. Turn them all
+ * off and every glyph is on exactly the same cell it was on — which is what
+ * makes `off` a real option rather than a degraded mode, and why it is the mode
+ * a host projecting to a real terminal would choose.
+ *
+ * Off by nothing in particular: both default **on**, because the surface these
+ * render on is a browser and pretending otherwise helps nobody. A host that
+ * wants the pure article passes `affordances={false}`.
+ */
+export type TerminalAffordances = {
+  /** Fill the row under the pointer, on anything pressable. */
+  hover?: boolean
+  /** Reveal a row's actions (copy, and whatever a row adds) on hover or focus. */
+  actions?: boolean
+}
+
+const DEFAULTS: Required<TerminalAffordances> = { hover: true, actions: true }
+
+const AffordanceContext = createContext<Required<TerminalAffordances>>(DEFAULTS)
+
+export function useAffordances(): Required<TerminalAffordances> {
+  return useContext(AffordanceContext)
+}
+
+/** Resolve the surface's prop — `false` means none, `true`/absent means all. */
+export function resolveAffordances(
+  value: TerminalAffordances | boolean | undefined,
+): Required<TerminalAffordances> {
+  if (value === false) return { hover: false, actions: false }
+  if (value === true || value === undefined) return DEFAULTS
+  return { ...DEFAULTS, ...value }
+}
+
+export function AffordanceProvider({
+  value,
+  children,
+}: {
+  value: Required<TerminalAffordances>
+  children: ReactNode
+}) {
+  return <AffordanceContext.Provider value={value}>{children}</AffordanceContext.Provider>
+}
+
+/**
+ * A block that reveals its actions on hover.
+ *
+ * Wraps rather than decorates because the actions belong to the *block* — a
+ * message is many rows and its copy button belongs at the top right of all of
+ * them, not on whichever row the pointer happens to be over.
+ */
+export function WithActions({
+  actions,
+  children,
+  className,
+}: {
+  actions: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  const { actions: enabled } = useAffordances()
+  if (!enabled) return <>{children}</>
+  return (
+    <div className={cn('term-hoverable', className)}>
+      {children}
+      <div className='term-actions'>{actions}</div>
+    </div>
+  )
+}
+
+/**
+ * Copy, as a character.
+ *
+ * `⧉` and `✓` rather than an SVG for the same reason the rest of the theme uses
+ * glyphs: an icon drawn at some other size sits between the cells everything
+ * else is on, and reads as a button borrowed from another application. The tick
+ * replaces the glyph in place, so the confirmation costs no width either.
+ */
+export function CopyAction({ text, label = 'Copy' }: { text: string; label?: string }) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      type='button'
+      className='term-action'
+      title={label}
+      aria-label={label}
+      onClick={(event) => {
+        // The row underneath is usually pressable (a tool call expands); copying
+        // is not expanding.
+        event.stopPropagation()
+        void navigator.clipboard
+          ?.writeText(text)
+          .then(() => {
+            setCopied(true)
+            setTimeout(() => setCopied(false), 1200)
+          })
+          // No toast, no error row: a refused clipboard (an insecure origin, a
+          // denied permission) is the host's business, and a failed copy that
+          // says nothing is better than a transcript that grows an error.
+          .catch(() => {})
+      }}>
+      {copied ? '✓' : '⧉'}
+    </button>
+  )
+}

package/src/components/terminal/diff.tsx

@@ -0,0 +1,130 @@
+import type { FilePatch, PatchHunk } from '@workerdeck/protocol'
+import { Row } from './row.tsx'
+
+/**
+ * A file edit, drawn the way the CLI draws it: a right-aligned line-number
+ * column, a one-column `+`/`-` marker, and the line — with added and removed
+ * rows carrying a full-bleed wash.
+ *
+ * The line numbers are the engine's own, off the wire (protocol's
+ * {@link FilePatch}). Nothing here computes one: this component has never seen
+ * the file, and a number it invented would be worse than no number at all —
+ * it would look authoritative and send the reader to the wrong line.
+ *
+ * The whole row — number, marker and text — is one {@link Row}, with the number
+ * and marker as its gutter. That is what keeps a wrapped line hanging under the
+ * text rather than under the numbers, and it is why the gutter width is computed
+ * rather than fixed: a four-digit file and a two-digit one both put their first
+ * character of code on a whole column.
+ */
+
+/** Which side of the edit a body line belongs to, from its unified-diff prefix. */
+type LineKind = 'context' | 'add' | 'remove'
+
+const kindOf = (line: string): LineKind =>
+  line.startsWith('+') ? 'add' : line.startsWith('-') ? 'remove' : 'context'
+
+/**
+ * The rows of one hunk, each with the line number it has *in the file*.
+ *
+ * Two counters, because a diff is two files interleaved: an added line has a
+ * number only in the new file, a removed line only in the old one, and context
+ * advances both. Showing the new number for adds and the old number for removes
+ * is what makes the column mean "where do I find this line", which is the only
+ * reason to print it.
+ */
+function hunkRows(hunk: PatchHunk): { kind: LineKind; number: number; text: string }[] {
+  let oldLine = hunk.oldStart
+  let newLine = hunk.newStart
+  const rows = []
+  for (const line of hunk.lines) {
+    const kind = kindOf(line)
+    // The prefix is diff syntax, not content — the marker column says it now.
+    const text = line.slice(1)
+    if (kind === 'add') rows.push({ kind, number: newLine++, text })
+    else if (kind === 'remove') rows.push({ kind, number: oldLine++, text })
+    else {
+      rows.push({ kind, number: newLine, text })
+      oldLine++
+      newLine++
+    }
+  }
+  return rows
+}
+
+const MARKER = { context: ' ', add: '+', remove: '-' } as const
+
+/**
+ * A patch for a change that has **not happened yet** — an approval prompt's
+ * `Edit`, where the input names the old and new text but no line numbers exist
+ * because the edit has not been applied and this client has never read the file.
+ *
+ * `newStart: 0` is how it says so, and {@link TerminalDiff} reads that back: a
+ * diff whose hunks all start at zero renders without a number column rather than
+ * printing a column of zeroes or inventing an offset.
+ */
+export function previewPatch(input: unknown): FilePatch | undefined {
+  const edit = input as { file_path?: unknown; old_string?: unknown; new_string?: unknown } | null
+  const before = typeof edit?.old_string === 'string' ? edit.old_string : undefined
+  const after = typeof edit?.new_string === 'string' ? edit.new_string : undefined
+  if (before === undefined && after === undefined) return undefined
+  const lines = [
+    ...(before ? before.split('\n').map((line) => `-${line}`) : []),
+    ...(after ? after.split('\n').map((line) => `+${line}`) : []),
+  ]
+  if (lines.length === 0) return undefined
+  return {
+    ...(typeof edit?.file_path === 'string' && { path: edit.file_path }),
+    hunks: [{ oldStart: 0, oldLines: 0, newStart: 0, newLines: 0, lines }],
+  }
+}
+
+export function TerminalDiff({ patch }: { patch: FilePatch }) {
+  const rows = patch.hunks.map(hunkRows)
+  // Numbers only when the engine gave any (see `previewPatch`): a column of
+  // zeroes would look like line 0 of the file, which is a lie about where to
+  // look — and a diff with no numbers is honest about having none.
+  const numbered = patch.hunks.some((hunk) => hunk.newStart > 0)
+  // Wide enough for the largest number any row will print, so the marker and the
+  // code start on the same column throughout — including across a hunk boundary,
+  // where the numbers jump.
+  const width = numbered ? String(Math.max(...rows.flat().map((row) => row.number), 1)).length : 0
+  // number + space + marker + space (or just the marker and a space)
+  const columns = numbered ? width + 3 : 2
+
+  return (
+    <div className='term-diff'>
+      {rows.map((hunk, index) => (
+        <div key={index}>
+          {/* Hunks are not adjacent in the file, and a blank line would say they
+              were merely a paragraph apart. The CLI's separator is the honest
+              one: a row that says lines were skipped. */}
+          {index > 0 ? (
+            <Row columns={columns} glyph={' '.repeat(width) + ' ⋮'} tone='faint' />
+          ) : null}
+          {hunk.map((row, line) => (
+            <Row
+              key={line}
+              columns={columns}
+              data-diff={row.kind}
+              glyph={
+                numbered
+                  ? `${String(row.number).padStart(width)} ${MARKER[row.kind]}`
+                  : MARKER[row.kind]
+              }
+              // `pre-wrap` on the body already keeps the code's own indentation;
+              // an empty line still has to occupy its row, hence the space.
+              >
+              {row.text || ' '}
+            </Row>
+          ))}
+        </div>
+      ))}
+      {patch.truncated ? (
+        <Row columns={columns} tone='faint'>
+          … diff truncated
+        </Row>
+      ) : null}
+    </div>
+  )
+}