@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/sessrumnir/src/renderer/src/components/code-editor.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef } from 'react'
+import { basicSetup, EditorView } from 'codemirror'
+import { syntaxHighlighting } from '@codemirror/language'
+import { getCodeEditorLanguageExtensions } from './code-editor-language'
+import { themedHighlightStyle } from './code-editor-highlight'
+import { useAppStore } from '../store'
+import { useAppliedThemeId } from '../hooks'
+import { isLightTheme } from '../utils/theme'
+import { DEFAULT_SETTINGS } from '../../../shared/default-settings'
+
+interface CodeEditorProps {
+  filePath: string
+  value: string
+  readOnly?: boolean
+  onChange?: (value: string) => void
+}
+
+export function CodeEditor({
+  filePath,
+  value,
+  readOnly = true,
+  onChange,
+}: CodeEditorProps): React.JSX.Element {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  const onChangeRef = useRef(onChange)
+  const lightTheme = isLightTheme(useAppliedThemeId())
+  const fontSize = useAppStore((state) => state.settingsDraft.codeEditorFontSize ?? state.settings?.codeEditorFontSize)
+
+  useEffect(() => {
+    onChangeRef.current = onChange
+  }, [onChange])
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Clear any leftover DOM from a previous view before mounting the new one
+    containerRef.current.innerHTML = ''
+
+    // Tell CodeMirror whether the active app theme is dark so its base theme
+    // picks the right fallback styles (drop cursor, selection layer, etc.).
+
+    const view = new EditorView({
+      doc: value,
+      parent: containerRef.current,
+      extensions: [
+        basicSetup,
+        ...getCodeEditorLanguageExtensions(filePath),
+        // Must NOT be { fallback: true } — basicSetup registers
+        // defaultHighlightStyle as non-fallback, so a fallback registration
+        // here would lose to its near-grayscale palette.
+        syntaxHighlighting(themedHighlightStyle),
+        EditorView.editable.of(!readOnly),
+        EditorView.lineWrapping,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onChangeRef.current?.(update.state.doc.toString())
+          }
+        }),
+        EditorView.theme({
+          '&': {
+            height: '100%',
+            backgroundColor: 'var(--color-app)',
+            color: 'var(--color-primary)',
+            fontSize: `${fontSize ?? DEFAULT_SETTINGS.codeEditorFontSize}px`,
+          },
+          '.cm-editor': {
+            height: '100%',
+          },
+          '.cm-scroller': {
+            fontFamily: "'IBM Plex Mono', 'JetBrains Mono Variable', 'OpenMoji Color', 'Fira Code', 'Cascadia Code', monospace",
+          },
+          '.cm-content': {
+            caretColor: 'var(--color-primary)',
+          },
+          '.cm-gutters': {
+            backgroundColor: 'var(--color-app)',
+            color: 'var(--color-muted)',
+            borderRight: '1px solid var(--color-border)',
+          },
+          '.cm-activeLine': {
+            backgroundColor: 'var(--cm-active-line-bg)',
+          },
+          '.cm-activeLineGutter': {
+            backgroundColor: 'var(--cm-active-line-bg)',
+          },
+          '.cm-selectionMatch': {
+            backgroundColor: 'var(--cm-selection-match-bg)',
+          },
+          '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {
+            backgroundColor: 'var(--cm-selection-bg)',
+          },
+          '&.cm-focused': {
+            outline: 'none',
+          },
+        }, { dark: !lightTheme }),
+      ],
+    })
+    viewRef.current = view
+
+    return () => {
+      view.destroy()
+      viewRef.current = null
+    }
+    // `value` is intentionally omitted: it only seeds the initial doc here.
+    // Subsequent changes are applied via dispatch in the effect below so the
+    // view (cursor position, undo history) isn't torn down on every keystroke.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filePath, readOnly, lightTheme, fontSize])
+
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view) return
+
+    const current = view.state.doc.toString()
+    if (current === value) return
+
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: current.length,
+        insert: value,
+      },
+    })
+  }, [value])
+
+  return <div ref={containerRef} className="h-full min-h-0" />
+}

package/apps/sessrumnir/src/renderer/src/components/command-palette.tsx

@@ -0,0 +1,315 @@
+import { useState, useMemo, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Check, File, Layers, MessageSquare, Search } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useAppStore } from '../store'
+import { useCommandCatalog } from '../hooks'
+import { CommandResults } from './command-results'
+import {
+  BUILTIN_SOURCE,
+  filterCommands,
+  groupCommands,
+  invocationToken,
+  type PiCommand,
+} from '../../../shared/pi-command'
+import {
+  filterSessions,
+  filterWorkspaces,
+  MAX_FILE_RESULTS,
+  type SwitcherItem,
+} from '../utils/quick-switcher'
+import { rankFileResults } from '../utils/rank-file-results'
+import { createStaleGuard } from '../utils/stale-guard'
+import { getSessionTitle } from '../utils/session-title'
+import { isImagePath } from './chat-file-link'
+import type { FileSearchResult } from '../../../shared/ipc-contracts'
+
+const FILE_SEARCH_DEBOUNCE_MS = 150
+
+/** A palette row: a command, or a workspace / session / file switcher hit. */
+type PaletteEntry = PiCommand | SwitcherItem
+
+/**
+ * Quick switcher opened with Ctrl/Cmd+K: commands plus workspaces, sessions,
+ * and files in one searchable list. Chosen commands insert their token at the
+ * composer caret (builtins run their GUI action instead), so an existing
+ * draft is never overwritten. A leading `/` narrows to commands only, the
+ * inline slash popup's territory. Switcher picks go through the store's
+ * guarded actions (streaming/dirty-editor confirms), so a decline is safe.
+ */
+export function CommandPalette(): React.JSX.Element | null {
+  const { t } = useTranslation()
+  const open = useAppStore((s) => s.commandPaletteOpen)
+  const setCommandPalette = useAppStore((s) => s.setCommandPalette)
+  const insertPrompt = useAppStore((s) => s.insertPrompt)
+  const workspaces = useAppStore((s) => s.workspaces)
+  const activeWorkspace = useAppStore((s) => s.activeWorkspace)
+  const sessionList = useAppStore((s) => s.sessionList)
+  const { builtins, allCommands } = useCommandCatalog()
+
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [fileResults, setFileResults] = useState<FileSearchResult[]>([])
+  const inputRef = useRef<HTMLInputElement>(null)
+  const searchGuard = useMemo(() => createStaleGuard(), [])
+
+  // A leading slash keeps the old commands-only behavior.
+  const commandsOnly = query.trimStart().startsWith('/')
+  const switcherQuery = commandsOnly ? '' : query.trim()
+
+  const commandResults = useMemo(() => filterCommands(allCommands, query), [allCommands, query])
+  const { grouped, flat: commandFlat } = useMemo(() => groupCommands(commandResults, t), [commandResults, t])
+
+  const workspaceItems = useMemo<SwitcherItem[]>(
+    () =>
+      commandsOnly
+        ? []
+        : filterWorkspaces(workspaces, switcherQuery).map((workspace) => ({ kind: 'workspace', workspace })),
+    [commandsOnly, workspaces, switcherQuery]
+  )
+  // Sessions and files only make sense against a typed query.
+  const sessionItems = useMemo<SwitcherItem[]>(
+    () =>
+      switcherQuery === ''
+        ? []
+        : filterSessions(sessionList, switcherQuery).map((session) => ({ kind: 'session', session })),
+    [sessionList, switcherQuery]
+  )
+  const fileItems = useMemo<SwitcherItem[]>(
+    () => fileResults.map((result) => ({ kind: 'file', result })),
+    [fileResults]
+  )
+
+  const entries = useMemo<PaletteEntry[]>(
+    () => [...commandFlat, ...workspaceItems, ...sessionItems, ...fileItems],
+    [commandFlat, workspaceItems, sessionItems, fileItems]
+  )
+
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setActiveIndex(0)
+      setFileResults([])
+      // Sessions may be stale if nothing refreshed the list recently.
+      void useAppStore.getState().refreshSessionList()
+      requestAnimationFrame(() => inputRef.current?.focus())
+    }
+  }, [open])
+
+  useEffect(() => {
+    setActiveIndex((i) => Math.min(i, Math.max(0, entries.length - 1)))
+  }, [entries.length])
+
+  // Debounced workspace file search; the guard drops out-of-order responses.
+  useEffect(() => {
+    if (!open || switcherQuery === '') {
+      // Also invalidates any in-flight search — without this, clearing the
+      // query (or typing '/') would let a slow response repopulate the list.
+      searchGuard.begin()
+      setFileResults([])
+      return
+    }
+    const isCurrent = searchGuard.begin()
+    const timer = window.setTimeout(async () => {
+      try {
+        const results = await window.piDesktop.files.search(switcherQuery)
+        if (isCurrent()) setFileResults(rankFileResults(results, switcherQuery).slice(0, MAX_FILE_RESULTS))
+      } catch {
+        // No workspace or search failure — the Files section just stays empty.
+        if (isCurrent()) setFileResults([])
+      }
+    }, FILE_SEARCH_DEBOUNCE_MS)
+    return () => window.clearTimeout(timer)
+  }, [open, switcherQuery, searchGuard])
+
+  if (!open) return null
+
+  const close = (): void => setCommandPalette(false)
+
+  const openFile = async (result: FileSearchResult): Promise<void> => {
+    const ok = await useAppStore.getState().setPreviewTarget({
+      kind: isImagePath(result.name) ? 'image' : 'code',
+      name: result.name,
+      path: result.path,
+      relativePath: result.relativePath,
+    })
+    // The preview pane lives in the chat view.
+    if (ok && useAppStore.getState().currentView !== 'chat') {
+      useAppStore.getState().setCurrentView('chat')
+    }
+  }
+
+  // Run the chosen entry; choosing nothing (Enter on an empty result list)
+  // just closes — the composer draft is never touched.
+  const choose = (entry: PaletteEntry | undefined): void => {
+    if (entry) {
+      if ('kind' in entry) {
+        if (entry.kind === 'workspace') {
+          if (entry.workspace.id !== activeWorkspace?.id) {
+            void useAppStore.getState().activateWorkspace(entry.workspace.id)
+          }
+        } else if (entry.kind === 'session') {
+          void useAppStore.getState().openSessionItem(entry.session)
+        } else {
+          void openFile(entry.result)
+        }
+      } else if (entry.source === BUILTIN_SOURCE) {
+        builtins.find((b) => b.name === entry.name)?.run()
+      } else {
+        insertPrompt(invocationToken(entry.name, entry.source))
+      }
+    }
+    close()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent): void => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      close()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.min(i + 1, entries.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault()
+      choose(entries[activeIndex])
+    }
+  }
+
+  const sections: Array<{ id: string; label: string; items: SwitcherItem[]; startIndex: number }> = []
+  let offset = commandFlat.length
+  for (const [id, label, items] of [
+    ['workspaces', t('palette.sections.workspaces'), workspaceItems],
+    ['sessions', t('palette.sections.sessions'), sessionItems],
+    ['files', t('palette.sections.files'), fileItems],
+  ] as const) {
+    if (items.length > 0) sections.push({ id, label, items, startIndex: offset })
+    offset += items.length
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 px-4 pt-24"
+      onClick={close}
+    >
+      <div
+        className="w-full max-w-lg overflow-hidden rounded-lg border border-border-strong bg-surface shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
+          <Search size={15} className="shrink-0 text-dim" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t('palette.searchPlaceholder')}
+            className="flex-1 bg-transparent text-sm text-primary placeholder:text-faint outline-none"
+          />
+        </div>
+        <div className="max-h-72 overflow-y-auto py-1">
+          {entries.length === 0 ? (
+            <div className="px-3 py-6 text-center text-sm text-faint">{t('palette.noMatches')}</div>
+          ) : (
+            <>
+              {commandFlat.length > 0 && (
+                <CommandResults
+                  grouped={grouped}
+                  flat={commandFlat}
+                  activeIndex={activeIndex}
+                  onSelect={choose}
+                  onHover={setActiveIndex}
+                />
+              )}
+              {sections.map((section) => (
+                <div key={section.id}>
+                  <div className="px-3 py-1 text-[10px] uppercase tracking-wide text-faint">
+                    {section.label}
+                  </div>
+                  {section.items.map((item, itemIndex) => {
+                    const index = section.startIndex + itemIndex
+                    return (
+                      <SwitcherRow
+                        key={switcherKey(item)}
+                        item={item}
+                        active={index === activeIndex}
+                        activeWorkspaceId={activeWorkspace?.id ?? null}
+                        onSelect={() => choose(item)}
+                        onHover={() => setActiveIndex(index)}
+                      />
+                    )
+                  })}
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+        <div className="border-t border-border px-3 py-1.5 text-[10px] text-faint">
+          {t('palette.navigationHint')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function switcherKey(item: SwitcherItem): string {
+  if (item.kind === 'workspace') return `ws:${item.workspace.id}`
+  if (item.kind === 'session') return `session:${item.session.path}`
+  return `file:${item.result.path}`
+}
+
+function SwitcherRow({
+  item,
+  active,
+  activeWorkspaceId,
+  onSelect,
+  onHover,
+}: {
+  item: SwitcherItem
+  active: boolean
+  activeWorkspaceId: string | null
+  onSelect: () => void
+  onHover: () => void
+}): React.JSX.Element {
+  return (
+    <button
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onSelect}
+      onMouseEnter={onHover}
+      className={clsx(
+        'flex w-full items-center gap-2 px-3 py-2 text-left transition-colors',
+        active ? 'bg-card' : 'hover:bg-surface-hover/50'
+      )}
+    >
+      {item.kind === 'workspace' && (
+        <>
+          <Layers size={14} className="shrink-0" style={{ color: item.workspace.color }} />
+          <span className="truncate text-sm text-primary">{item.workspace.name}</span>
+          {item.workspace.id === activeWorkspaceId && (
+            <Check size={12} className="shrink-0 text-success" />
+          )}
+          <span className="ml-auto line-clamp-1 text-xs text-dim">{item.workspace.path}</span>
+        </>
+      )}
+      {item.kind === 'session' && (
+        <>
+          <MessageSquare size={14} className="shrink-0 text-dim" />
+          <span className="truncate text-sm text-primary">
+            {getSessionTitle(item.session.name, item.session.sessionId, item.session.preview)}
+          </span>
+          <span className="ml-auto line-clamp-1 text-xs text-dim">{item.session.projectName}</span>
+        </>
+      )}
+      {item.kind === 'file' && (
+        <>
+          <File size={14} className="shrink-0 text-dim" />
+          <span className="truncate text-sm text-primary">{item.result.name}</span>
+          <span className="ml-auto line-clamp-1 text-xs text-dim">{item.result.relativePath}</span>
+        </>
+      )}
+    </button>
+  )
+}

package/apps/sessrumnir/src/renderer/src/components/command-results.tsx

@@ -0,0 +1,80 @@
+import { clsx } from 'clsx'
+import { useTranslation } from 'react-i18next'
+import {
+  BUILTIN_SOURCE,
+  commandDisplayName,
+  commandSourceLabel,
+  type CommandGroup,
+  type PiCommand,
+} from '../../../shared/pi-command'
+
+const SOURCE_BADGE: Record<string, string> = {
+  skill: 'bg-special-bg text-special',
+  prompt: 'bg-accent-bg text-accent-fg',
+  [BUILTIN_SOURCE]: 'bg-warning-bg text-warning',
+  extension: 'bg-success-bg text-success',
+}
+
+interface CommandResultsProps {
+  grouped: CommandGroup[]
+  flat: PiCommand[]
+  activeIndex: number
+  onSelect: (cmd: PiCommand) => void
+  onHover: (index: number) => void
+}
+
+/**
+ * Grouped command rows shared by the Ctrl+K palette and the composer's inline
+ * slash popup. mousedown is prevented so clicking a row never blurs whichever
+ * input is driving the list (a blur would close the popup before onClick).
+ */
+export function CommandResults({
+  grouped,
+  flat,
+  activeIndex,
+  onSelect,
+  onHover,
+}: CommandResultsProps): React.JSX.Element {
+  const { t } = useTranslation()
+  return (
+    <>
+      {grouped.map((group) => (
+        <div key={group.id}>
+          <div className="px-3 py-1 text-[10px] uppercase tracking-wide text-faint">
+            {group.label}
+          </div>
+          {group.items.map((cmd) => {
+            const index = flat.indexOf(cmd)
+            return (
+              <button
+                key={`${cmd.source}:${cmd.name}`}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => onSelect(cmd)}
+                onMouseEnter={() => onHover(index)}
+                className={clsx(
+                  'flex w-full items-center gap-2 px-3 py-2 text-left transition-colors',
+                  index === activeIndex ? 'bg-card' : 'hover:bg-surface-hover/50'
+                )}
+              >
+                <span
+                  className={clsx(
+                    'shrink-0 rounded px-1.5 py-0.5 text-[10px] uppercase',
+                    SOURCE_BADGE[cmd.source] ?? 'bg-card text-muted'
+                  )}
+                >
+                  {commandSourceLabel(cmd.source, t)}
+                </span>
+                {/* The name never shrinks (issue #60): the description is the
+                    part that truncates when the row runs out of room. */}
+                <span className="shrink-0 whitespace-nowrap text-sm text-primary">
+                  {commandDisplayName(cmd)}
+                </span>
+                <span className="ml-auto min-w-0 truncate text-xs text-dim">{cmd.description}</span>
+              </button>
+            )
+          })}
+        </div>
+      ))}
+    </>
+  )
+}

package/apps/sessrumnir/src/renderer/src/components/composer-permission-menu.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from 'react'
+import { ChevronUp, Check } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { clsx } from 'clsx'
+import type { PermissionMode } from '../../../shared/ipc-contracts'
+import {
+  DEFAULT_PERMISSION_MODE,
+  PERMISSION_MODE_OPTIONS,
+  PERMISSION_MODE_LABEL_KEYS,
+  PERMISSION_MODE_DESCRIPTION_KEYS,
+} from './permission-mode'
+
+interface ComposerPermissionMenuProps {
+  value: PermissionMode | null | undefined
+  onChange: (mode: PermissionMode) => Promise<void> | void
+}
+
+/**
+ * Compact permission-mode picker for the composer toolbar (same modes as review).
+ */
+export function ComposerPermissionMenu({ value, onChange }: ComposerPermissionMenuProps): React.JSX.Element {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const mode = value ?? DEFAULT_PERMISSION_MODE
+  const isTrusted = mode === 'trusted'
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleClick = (event: MouseEvent): void => {
+      if (ref.current && !ref.current.contains(event.target as Node)) setIsOpen(false)
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [isOpen])
+
+  const handleSelect = async (next: PermissionMode): Promise<void> => {
+    setSaving(true)
+    try {
+      await onChange(next)
+      setIsOpen(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen((open) => !open)}
+        className={clsx(
+          'flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors',
+          isTrusted
+            ? 'bg-warning/15 text-warning hover:bg-warning/35'
+            : 'hover:bg-highlight-strong text-secondary hover:text-primary'
+        )}
+        title={t(PERMISSION_MODE_DESCRIPTION_KEYS[mode]).replace(/\.$/, '')}
+      >
+        {t(PERMISSION_MODE_LABEL_KEYS[mode])}
+        <ChevronUp
+          size={12}
+          className={clsx(
+            'transition-transform',
+            isTrusted ? 'text-warning/70' : 'text-dim',
+            isOpen && 'rotate-180'
+          )}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-full left-0 z-50 mb-1 min-w-[180px] rounded-lg border border-border-strong bg-app py-1 shadow-xl shadow-black/40">
+          <div className="px-3 pb-0.5 pt-1 text-[11px] text-dim">{t('composer.permissionMenu.title')}</div>
+          {PERMISSION_MODE_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              disabled={saving}
+              onClick={() => handleSelect(option.value)}
+              className="hover:bg-highlight flex w-full items-center justify-between gap-6 whitespace-nowrap px-3 py-1 text-left text-xs text-primary transition-colors disabled:opacity-60"
+            >
+              <span>{t(PERMISSION_MODE_LABEL_KEYS[option.value])}</span>
+              {option.value === mode && <Check size={12} className="shrink-0 text-muted" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}