@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/sessrumnir/src/renderer/src/components/diff-viewer.tsx

@@ -0,0 +1,318 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppStore } from '../store'
+import { DEFAULT_SETTINGS } from '../../../shared/default-settings'
+import { clsx } from 'clsx'
+import {
+  AlertTriangle,
+  GitCompare,
+  File,
+  RefreshCw,
+  ChevronDown,
+  ChevronRight,
+  X,
+  Loader2,
+} from 'lucide-react'
+import { formatIpcError } from '../utils/ipc-error'
+import { GitConveyorActions } from './git-conveyor-actions'
+
+interface DiffLine {
+  type: 'add' | 'remove' | 'context' | 'header' | 'hunk'
+  content: string
+  oldLine?: number
+  newLine?: number
+}
+
+interface DiffFileBlock {
+  oldPath: string
+  newPath: string
+  isNew: boolean
+  isDeleted: boolean
+  hunks: DiffLine[][]
+}
+
+interface DiffViewerProps {
+  onClose?: () => void
+}
+
+export function DiffViewer({ onClose }: DiffViewerProps = {}): React.JSX.Element {
+  const { t } = useTranslation()
+  const [files, setFiles] = useState<DiffFileBlock[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set())
+  const [stagedMode, setStagedMode] = useState(false)
+  const setCurrentView = useAppStore((state) => state.setCurrentView)
+
+  const loadDiff = useCallback(async () => {
+    setLoading(true)
+    try {
+      const diff = stagedMode
+        ? await window.piDesktop.files.getStagedDiff()
+        : await window.piDesktop.files.getDiff()
+      setFiles(parseDiff(diff))
+      setLoadError(null)
+    } catch (err) {
+      setFiles([])
+      setLoadError(formatIpcError(err))
+    } finally {
+      setLoading(false)
+    }
+  }, [stagedMode])
+
+  useEffect(() => {
+    loadDiff()
+  }, [loadDiff])
+
+  const toggleFile = (path: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+  }
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 border-b border-border px-4 py-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="order-1 flex min-w-0 flex-1 items-center gap-2">
+            <GitCompare size={16} className="shrink-0 text-muted" />
+            <h2 className="truncate text-sm font-medium text-primary">{t('diff.heading')}</h2>
+            <span className="shrink-0 rounded-full bg-card px-2 py-0.5 text-xs text-dim">
+              {t('diff.fileCount', { count: files.length })}
+            </span>
+          </div>
+          <div className="order-2 flex shrink-0 items-center gap-2">
+            <button
+              onClick={() => setStagedMode(!stagedMode)}
+              className={clsx(
+                'rounded px-2 py-1 text-xs transition-colors',
+                stagedMode
+                  ? 'bg-success-bg text-success'
+                  : 'bg-card text-muted hover:text-secondary'
+              )}
+            >
+              {stagedMode ? t('diff.stagedToggle') : t('diff.workingToggle')}
+            </button>
+            <button
+              onClick={loadDiff}
+              className="rounded p-1.5 text-dim transition-colors hover:bg-surface-hover hover:text-secondary"
+              aria-label={t('diff.refreshAriaLabel')}
+            >
+              <RefreshCw size={14} />
+            </button>
+            <button
+              onClick={() => {
+                if (onClose) {
+                  onClose()
+                } else {
+                  setCurrentView('chat')
+                }
+              }}
+              className="rounded p-1.5 text-dim transition-colors hover:bg-surface-hover hover:text-secondary"
+              aria-label={t('diff.closeAriaLabel')}
+            >
+              <X size={14} />
+            </button>
+          </div>
+          <div className="order-3 min-w-0 basis-full border-t border-border pt-2">
+            <GitConveyorActions onChanged={loadDiff} />
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 size={24} className="animate-spin text-dim" />
+          </div>
+        ) : loadError !== null ? (
+          <div className="flex flex-col items-center justify-center py-12 text-dim">
+            <AlertTriangle size={32} className="mb-3 text-warning" />
+            <p className="text-sm text-secondary">{t('diff.loadErrorTitle')}</p>
+            <p className="mt-1 max-w-md break-words px-4 text-center text-xs text-faint">{loadError}</p>
+            <button
+              onClick={loadDiff}
+              className="mt-3 rounded bg-card px-3 py-1 text-xs text-secondary transition-colors hover:bg-surface-hover"
+            >
+              {t('common.retry')}
+            </button>
+          </div>
+        ) : files.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-dim">
+            <GitCompare size={32} className="mb-3 text-faint" />
+            <p className="text-sm">{t('diff.noChanges')}</p>
+            <p className="mt-1 text-xs text-faint">
+              {stagedMode ? t('diff.noStagedChanges') : t('diff.workingTreeClean')}
+            </p>
+          </div>
+        ) : (
+          <div className="p-4 space-y-2">
+            {files.map((file) => (
+              <DiffFileEntry
+                key={file.newPath}
+                file={file}
+                expanded={expandedFiles.has(file.newPath)}
+                onToggle={() => toggleFile(file.newPath)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function DiffFileEntry({
+  file,
+  expanded,
+  onToggle,
+}: {
+  file: DiffFileBlock
+  expanded: boolean
+  onToggle: () => void
+}): React.JSX.Element {
+  const { t } = useTranslation()
+  const additions = file.hunks.flat().filter((l) => l.type === 'add').length
+  const deletions = file.hunks.flat().filter((l) => l.type === 'remove').length
+  // Diff body scales with the Code Editor font-size setting (like the code viewer).
+  const codeFontSize = useAppStore(
+    (state) => state.settingsDraft.codeEditorFontSize ?? state.settings?.codeEditorFontSize ?? DEFAULT_SETTINGS.codeEditorFontSize
+  )
+
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      {/* File header */}
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center gap-2 px-3 py-2 bg-surface/50 hover:bg-surface-hover/50 transition-colors"
+      >
+        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        <File size={14} className="shrink-0 text-dim" />
+        <span className="text-xs text-primary truncate">{file.newPath}</span>
+        <div className="ml-auto flex items-center gap-2 text-xs">
+          {file.isNew && (
+            <span className="rounded bg-success-bg px-1.5 py-0.5 text-success">{t('diff.newFileBadge')}</span>
+          )}
+          {file.isDeleted && (
+            <span className="rounded bg-error-bg px-1.5 py-0.5 text-error">{t('diff.deletedFileBadge')}</span>
+          )}
+          {additions > 0 && (
+            <span className="text-success">+{additions}</span>
+          )}
+          {deletions > 0 && (
+            <span className="text-error">-{deletions}</span>
+          )}
+        </div>
+      </button>
+
+      {/* Diff content */}
+      {expanded && (
+        <div className="border-t border-border overflow-x-auto">
+          <table className="font-jetbrains w-full" style={{ fontSize: `${codeFontSize}px` }}>
+            <tbody>
+              {file.hunks.map((hunk, hunkIdx) => (
+                <DiffHunk key={hunkIdx} lines={hunk} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function DiffHunk({ lines }: { lines: DiffLine[] }): React.JSX.Element {
+  return (
+    <>
+      {lines.map((line, i) => (
+        <tr
+          key={`${line.type}-${line.oldLine ?? ''}-${line.newLine ?? ''}-${i}`}
+          className={clsx(
+            line.type === 'add' && 'bg-success-bg',
+            line.type === 'remove' && 'bg-error-bg',
+            line.type === 'hunk' && 'bg-accent-bg',
+          )}
+        >
+          <td className="w-10 px-2 py-0.5 text-right text-faint select-none border-r border-border">
+            {line.oldLine ?? ''}
+          </td>
+          <td className="w-10 px-2 py-0.5 text-right text-faint select-none border-r border-border">
+            {line.newLine ?? ''}
+          </td>
+          <td className="w-6 px-1 py-0.5 text-center select-none">
+            {line.type === 'add' && <span className="text-success">+</span>}
+            {line.type === 'remove' && <span className="text-error">-</span>}
+            {line.type === 'context' && <span className="text-ghost"> </span>}
+            {line.type === 'hunk' && <span className="text-accent-fg">@</span>}
+          </td>
+          <td className="px-2 py-0.5 whitespace-pre text-secondary">
+            {line.content}
+          </td>
+        </tr>
+      ))}
+    </>
+  )
+}
+
+// ─── Diff Parser ─────────────────────────────────────────────────────────────
+
+function parseDiff(diffText: string): DiffFileBlock[] {
+  if (!diffText.trim()) return []
+
+  const files: DiffFileBlock[] = []
+  const fileBlocks = diffText.split(/^diff --git /m).filter(Boolean)
+
+  for (const block of fileBlocks) {
+    const lines = block.split('\n')
+
+    // Parse file paths from "a/path b/path"
+    const pathLine = lines[0] ?? ''
+    const pathMatch = pathLine.match(/^a\/(.+?) b\/(.+)$/)
+    const oldPath = pathMatch?.[1] ?? 'unknown'
+    const newPath = pathMatch?.[2] ?? oldPath
+
+    const isNew = lines.some((l) => l.startsWith('new file mode'))
+    const isDeleted = lines.some((l) => l.startsWith('deleted file mode'))
+
+    // Parse hunks
+    const hunks: DiffLine[][] = []
+    let currentHunk: DiffLine[] = []
+    let oldLine = 0
+    let newLine = 0
+
+    for (const line of lines) {
+      if (line.startsWith('@@')) {
+        if (currentHunk.length > 0) hunks.push(currentHunk)
+        currentHunk = []
+
+        const hunkMatch = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/)
+        if (hunkMatch) {
+          oldLine = parseInt(hunkMatch[1])
+          newLine = parseInt(hunkMatch[2])
+        }
+        currentHunk.push({ type: 'hunk', content: line })
+      } else if (line.startsWith('+') && !line.startsWith('+++')) {
+        currentHunk.push({ type: 'add', content: line.slice(1), newLine })
+        newLine++
+      } else if (line.startsWith('-') && !line.startsWith('---')) {
+        currentHunk.push({ type: 'remove', content: line.slice(1), oldLine })
+        oldLine++
+      } else if (line.startsWith(' ')) {
+        currentHunk.push({ type: 'context', content: line.slice(1), oldLine, newLine })
+        oldLine++
+        newLine++
+      }
+    }
+
+    if (currentHunk.length > 0) hunks.push(currentHunk)
+
+    files.push({ oldPath, newPath, isNew, isDeleted, hunks })
+  }
+
+  return files
+}

package/apps/sessrumnir/src/renderer/src/components/ember-background.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react'
+
+interface EmberBackgroundProps {
+  className?: string
+}
+
+/**
+ * EmberBackground — the hearth of the landing page, carried into the chat.
+ *
+ * The same little fire-dots that fly around the landing's hero (Ginnungagap):
+ * 26 embers rise slowly with a gentle sway, seeded fresh on any resize, drawn
+ * on one canvas behind the chat column. Purely decorative — pointer-events
+ * none, aria-hidden, subtle enough that text stays the master of the room.
+ */
+export function EmberBackground({ className = '' }: EmberBackgroundProps): React.JSX.Element {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const el = canvasRef.current
+    if (!el) return
+    const ctx = el.getContext('2d')
+    if (!ctx) return
+    const canvas: HTMLCanvasElement = el
+    const context: CanvasRenderingContext2D = ctx
+    const host = canvas.parentElement
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    let W = 0
+    let H = 0
+    let embers: Array<{ x: number; y: number; r: number; v: number; ph: number; sp: number }> = []
+    let haze: Array<{ x: number; y: number; r: number; v: number }> = []
+    let t = 0
+
+    function size() {
+      if (!host) return
+      const rect = host.getBoundingClientRect()
+      W = rect.width
+      H = rect.height
+      canvas.width = Math.max(1, W * dpr)
+      canvas.height = Math.max(1, H * dpr)
+      context.setTransform(dpr, 0, 0, dpr, 0, 0)
+    }
+    function init() {
+      embers = []
+      haze = []
+      for (let i = 0; i < 30; i++) {
+        embers.push({
+          x: Math.random() * W,
+          y: H + Math.random() * H * 0.3 - 6,
+          r: 1.0 + Math.random() * 1.6,
+          v: 0.14 + Math.random() * 0.34,
+          ph: Math.random() * 6.28,
+          sp: 0.6 + Math.random() * 1.4,
+        })
+      }
+      for (let i = 0; i < 6; i++) {
+        haze.push({
+          x: Math.random() * W,
+          y: H * 0.3 + Math.random() * H * 0.7,
+          r: 130 + Math.random() * 170,
+          v: (Math.random() - 0.5) * 0.15,
+        })
+      }
+    }
+    function frame() {
+      t += 0.016
+      context.clearRect(0, 0, W, H)
+      for (const ha of haze) {
+        ha.x += ha.v
+        if (ha.x < -ha.r) ha.x = W + ha.r
+        if (ha.x > W + ha.r) ha.x = -ha.r
+        const g = context.createRadialGradient(ha.x, ha.y, 0, ha.x, ha.y, ha.r)
+        g.addColorStop(0, 'rgba(214,138,64,0.030)')
+        g.addColorStop(1, 'rgba(0,0,0,0)')
+        context.fillStyle = g
+        context.beginPath()
+        context.arc(ha.x, ha.y, ha.r, 0, 6.283)
+        context.fill()
+      }
+      for (const e of embers) {
+        e.y -= e.v
+        e.x += Math.sin(t * e.sp + e.ph) * 0.18
+        if (e.y < -6) {
+          e.y = H + 6
+          e.x = Math.random() * W
+        }
+        const a = 0.26 + 0.4 * (0.5 + 0.5 * Math.sin(t * e.sp * 2 + e.ph))
+        context.fillStyle = 'rgba(236,166,84,' + a.toFixed(3) + ')'
+        context.beginPath()
+        context.arc(e.x, e.y, e.r, 0, 6.283)
+        context.fill()
+      }
+    }
+    function loop() {
+      frame()
+      raf = requestAnimationFrame(loop)
+    }
+    let raf = 0
+    function onResize() {
+      size()
+      init()
+    }
+    size()
+    init()
+    raf = requestAnimationFrame(loop)
+    window.addEventListener('resize', onResize)
+    return () => {
+      cancelAnimationFrame(raf)
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
+
+  return <canvas ref={canvasRef} aria-hidden="true" className={className} />
+}

package/apps/sessrumnir/src/renderer/src/components/error-boundary.tsx

@@ -0,0 +1,38 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { t } from '../../../shared/i18n'
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false }
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    console.error('[ErrorBoundary]', error, info.componentStack)
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback ?? (
+          <div className="flex items-center gap-1.5 rounded-md border border-error-bg bg-error-bg px-2 py-1 text-xs text-error">
+            <AlertTriangle size={12} className="shrink-0" />
+            {t('app.errorBoundary.fallback')}
+          </div>
+        )
+      )
+    }
+    return this.props.children
+  }
+}

package/apps/sessrumnir/src/renderer/src/components/extension-ui-dialog-helpers.test.ts

@@ -0,0 +1,43 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { isDialogToggleKey, splitPromptText, type ToggleKeyEvent } from './extension-ui-dialog-helpers'
+
+test('single-line prompt is all heading', () => {
+  assert.deepEqual(splitPromptText('Pick one'), { heading: 'Pick one', body: '' })
+})
+
+test('pi-ask-user prompt splits into question heading and context body (issue #61)', () => {
+  const text = 'Which shape?\n\nContext:\n- 2 params\n- 3 params'
+  assert.deepEqual(splitPromptText(text), {
+    heading: 'Which shape?',
+    body: 'Context:\n- 2 params\n- 3 params',
+  })
+})
+
+test('surrounding whitespace is trimmed from heading and body', () => {
+  assert.deepEqual(splitPromptText('  Title  \n\n  body line  \n'), {
+    heading: 'Title',
+    body: 'body line',
+  })
+})
+
+const chord = (overrides: Partial<ToggleKeyEvent>): ToggleKeyEvent => ({
+  code: 'KeyO',
+  altKey: true,
+  ctrlKey: false,
+  metaKey: false,
+  shiftKey: false,
+  ...overrides,
+})
+
+test('Alt+O toggles by physical key, so macOS Option+O still works', () => {
+  assert.equal(isDialogToggleKey(chord({})), true)
+})
+
+test('other modifiers or keys do not toggle', () => {
+  assert.equal(isDialogToggleKey(chord({ altKey: false })), false)
+  assert.equal(isDialogToggleKey(chord({ ctrlKey: true })), false)
+  assert.equal(isDialogToggleKey(chord({ metaKey: true })), false)
+  assert.equal(isDialogToggleKey(chord({ shiftKey: true })), false)
+  assert.equal(isDialogToggleKey(chord({ code: 'KeyP' })), false)
+})

package/apps/sessrumnir/src/renderer/src/components/extension-ui-dialog-helpers.ts

@@ -0,0 +1,51 @@
+/**
+ * Pure helpers for the extension-UI dialog (issue #61).
+ *
+ * Extensions such as pi-ask-user pack a whole question into the dialog title
+ * ("<question>\n\nContext:\n<context>"). The first line is the heading; the
+ * rest is body text whose line breaks must survive.
+ */
+
+const LINE_BREAK = '\n'
+
+/**
+ * Chord that hides or shows the pending prompt, mirroring Pi's terminal UI.
+ * Matched on the physical key: on macOS Option+O reports `key` as a symbol.
+ */
+export const DIALOG_TOGGLE_CODE = 'KeyO'
+export const DIALOG_TOGGLE_LABEL = 'Alt+O'
+
+export interface PromptText {
+  heading: string
+  body: string
+}
+
+/** Split multi-line prompt text into a one-line heading and the remaining body. */
+export function splitPromptText(text: string): PromptText {
+  const trimmed = text.trim()
+  const breakAt = trimmed.indexOf(LINE_BREAK)
+  if (breakAt === -1) return { heading: trimmed, body: '' }
+  return {
+    heading: trimmed.slice(0, breakAt).trim(),
+    body: trimmed.slice(breakAt + LINE_BREAK.length).trim(),
+  }
+}
+
+export interface ToggleKeyEvent {
+  code: string
+  altKey: boolean
+  ctrlKey: boolean
+  metaKey: boolean
+  shiftKey: boolean
+}
+
+/** True for the bare Alt+O chord (no other modifier) on any keyboard layout. */
+export function isDialogToggleKey(event: ToggleKeyEvent): boolean {
+  return (
+    event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.shiftKey &&
+    event.code === DIALOG_TOGGLE_CODE
+  )
+}