@zerwiz/ymir 0.1.33 → 0.1.35

package/apps/sessrumnir/src/renderer/src/components/context-menu.tsx

@@ -0,0 +1,457 @@
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { clsx } from 'clsx'
+import {
+  Copy,
+  Scissors,
+  ClipboardPaste,
+  TextSelect,
+  ExternalLink,
+  Search,
+  Archive,
+  ArchiveRestore,
+  Trash2,
+  MessageSquare,
+  StickyNote,
+  Pencil,
+  Workflow as WorkflowIcon,
+} from 'lucide-react'
+import type { SessionListItem } from '../../../shared/ipc-contracts'
+import { useAppStore } from '../store'
+import { getSessionTitle } from '../utils/session-title'
+import { t } from '../../../shared/i18n'
+
+interface ContextMenuItem {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  shortcut?: string
+  disabled?: boolean
+  divider?: boolean
+  action: () => void
+}
+
+interface ContextMenuState {
+  visible: boolean
+  x: number
+  y: number
+  items: ContextMenuItem[]
+}
+
+const MENU_WIDTH = 220
+const MENU_ITEM_HEIGHT = 32
+const PADDING = 8
+
+export function useContextMenu(): {
+  show: (e: React.MouseEvent, items: ContextMenuItem[]) => void
+  hide: () => void
+  ContextMenuComponent: React.JSX.Element | null
+} {
+  const [state, setState] = useState<ContextMenuState>({
+    visible: false,
+    x: 0,
+    y: 0,
+    items: [],
+  })
+
+  const menuRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLElement | null>(null)
+
+  const show = useCallback((e: React.MouseEvent, items: ContextMenuItem[]) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Remember the element to restore focus to when the menu closes.
+    triggerRef.current = document.activeElement as HTMLElement | null
+
+    // Calculate position, keeping menu within viewport
+    let x = e.clientX
+    let y = e.clientY
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    if (x + MENU_WIDTH > viewportWidth - PADDING) {
+      x = viewportWidth - MENU_WIDTH - PADDING
+    }
+
+    const estimatedHeight = items.filter((i) => !i.divider).length * MENU_ITEM_HEIGHT + 20
+    if (y + estimatedHeight > viewportHeight - PADDING) {
+      y = viewportHeight - estimatedHeight - PADDING
+    }
+
+    setState({ visible: true, x, y, items })
+  }, [])
+
+  const hide = useCallback(() => {
+    setState((prev) => ({ ...prev, visible: false }))
+  }, [])
+
+  // Close on click outside
+  useEffect(() => {
+    if (!state.visible) return
+
+    const handleClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        hide()
+      }
+    }
+
+    const handleEscape = (e: KeyboardEvent) => {
+      // Escape closes; Tab dismisses so focus isn't trapped behind the menu.
+      if (e.key === 'Escape' || e.key === 'Tab') hide()
+    }
+
+    // Delay to avoid immediate close from the same right-click
+    const timer = setTimeout(() => {
+      document.addEventListener('click', handleClick)
+      document.addEventListener('keydown', handleEscape)
+    }, 10)
+
+    return () => {
+      clearTimeout(timer)
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [state.visible, hide])
+
+  // Close on scroll
+  useEffect(() => {
+    if (!state.visible) return
+    const handleScroll = () => hide()
+    window.addEventListener('scroll', handleScroll, true)
+    return () => window.removeEventListener('scroll', handleScroll, true)
+  }, [state.visible, hide])
+
+  // Move focus into the menu when it opens; restore it to the trigger on close.
+  useEffect(() => {
+    if (state.visible) {
+      menuRef.current?.querySelector<HTMLButtonElement>('button')?.focus()
+    } else if (triggerRef.current) {
+      triggerRef.current.focus()
+      triggerRef.current = null
+    }
+  }, [state.visible])
+
+  const component = state.visible ? (
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-orientation="vertical"
+      className="fixed z-[9999] min-w-[180px] rounded-lg border border-border-strong bg-surface py-1 shadow-xl shadow-black/40 animate-fade-in"
+      style={{ left: state.x, top: state.y }}
+    >
+      {state.items.map((item) => {
+        if (item.divider) {
+          return <div key={item.id} className="my-1 border-t border-border" />
+        }
+
+        return (
+          <button
+            key={item.id}
+            role="menuitem"
+            onClick={(e) => {
+              e.stopPropagation()
+              if (!item.disabled) {
+                item.action()
+                hide()
+              }
+            }}
+            disabled={item.disabled}
+            className={clsx(
+              'flex w-full items-center gap-2.5 px-3 py-1.5 text-sm transition-colors',
+              item.disabled
+                ? 'text-faint cursor-not-allowed'
+                : 'text-secondary hover:bg-surface-hover hover:text-primary'
+            )}
+          >
+            {item.icon && (
+              <span className="w-4 h-4 flex items-center justify-center text-dim">
+                {item.icon}
+              </span>
+            )}
+            <span className="flex-1 text-left">{item.label}</span>
+            {item.shortcut && (
+              <span className="text-xs text-faint ml-4">{item.shortcut}</span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  ) : null
+
+  return { show, hide, ContextMenuComponent: component }
+}
+
+// ─── Built-in Context Menu Items ─────────────────────────────────────────────
+
+function getSelectedText(): string {
+  const selection = window.getSelection()
+  return selection?.toString() ?? ''
+}
+
+export function buildDefaultContextMenu(): ContextMenuItem[] {
+  const selectedText = getSelectedText()
+  const hasSelection = selectedText.length > 0
+
+  return [
+    {
+      id: 'copy',
+      label: t('common.copy'),
+      icon: <Copy size={14} />,
+      shortcut: t('contextMenu.shortcuts.copy'),
+      disabled: !hasSelection,
+      action: () => {
+        if (hasSelection) {
+          navigator.clipboard.writeText(selectedText)
+        }
+      },
+    },
+    {
+      id: 'cut',
+      label: t('common.cut'),
+      icon: <Scissors size={14} />,
+      shortcut: t('contextMenu.shortcuts.cut'),
+      disabled: !hasSelection,
+      action: () => {
+        if (hasSelection) {
+          navigator.clipboard.writeText(selectedText)
+          // Try to delete the selection (works in input/textarea)
+          document.execCommand('delete')
+        }
+      },
+    },
+    {
+      id: 'paste',
+      label: t('common.paste'),
+      icon: <ClipboardPaste size={14} />,
+      shortcut: t('contextMenu.shortcuts.paste'),
+      action: async () => {
+        try {
+          const text = await navigator.clipboard.readText()
+          // Try to paste into focused element
+          const active = document.activeElement as HTMLInputElement | HTMLTextAreaElement | null
+          if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+            const start = active.selectionStart ?? 0
+            const end = active.selectionEnd ?? 0
+            const before = active.value.slice(0, start)
+            const after = active.value.slice(end)
+            active.value = before + text + after
+            active.selectionStart = active.selectionEnd = start + text.length
+            active.dispatchEvent(new Event('input', { bubbles: true }))
+          } else {
+            document.execCommand('insertText', false, text)
+          }
+        } catch {
+          // Clipboard API may be blocked
+        }
+      },
+    },
+    {
+      id: 'divider-1',
+      label: '',
+      divider: true,
+      action: () => {},
+    },
+    {
+      id: 'select-all',
+      label: t('common.selectAll'),
+      icon: <TextSelect size={14} />,
+      shortcut: t('contextMenu.shortcuts.selectAll'),
+      action: () => {
+        document.execCommand('selectAll')
+      },
+    },
+    {
+      id: 'copy-all',
+      label: t('contextMenu.copyAllVisibleText'),
+      icon: <Copy size={14} />,
+      disabled: !hasSelection,
+      action: () => {
+        if (hasSelection) {
+          navigator.clipboard.writeText(selectedText)
+        }
+      },
+    },
+  ]
+}
+
+export function buildCodeBlockContextMenu(code: string): ContextMenuItem[] {
+  return [
+    {
+      id: 'copy-code',
+      label: t('contextMenu.copyCodeBlock'),
+      icon: <Copy size={14} />,
+      shortcut: t('contextMenu.shortcuts.copyCodeBlock'),
+      action: () => navigator.clipboard.writeText(code),
+    },
+    {
+      id: 'search-code',
+      label: t('contextMenu.searchSelection'),
+      icon: <Search size={14} />,
+      disabled: !getSelectedText(),
+      action: () => {
+        const text = getSelectedText()
+        if (text) {
+          window.piDesktop.system.openExternal(
+            `https://www.google.com/search?q=${encodeURIComponent(text)}`
+          )
+        }
+      },
+    },
+    ...buildDefaultContextMenu(),
+  ]
+}
+
+export function buildMessageContextMenu(
+  messageContent: string,
+  onAddToNotes: (text: string) => void
+): ContextMenuItem[] {
+  const selectedText = getSelectedText()
+  const hasSelection = selectedText.length > 0
+
+  return [
+    {
+      id: 'copy-message',
+      label: t('contextMenu.copyMessage'),
+      icon: <Copy size={14} />,
+      action: () => navigator.clipboard.writeText(messageContent),
+    },
+    {
+      id: 'copy-selection',
+      label: t('contextMenu.copySelection'),
+      icon: <Copy size={14} />,
+      disabled: !hasSelection,
+      action: () => {
+        if (hasSelection) navigator.clipboard.writeText(selectedText)
+      },
+    },
+    {
+      id: 'add-to-notes',
+      label: hasSelection ? t('contextMenu.addSelectionToNotes') : t('contextMenu.addMessageToNotes'),
+      icon: <StickyNote size={14} />,
+      action: () => onAddToNotes(hasSelection ? selectedText : messageContent),
+    },
+    {
+      id: 'divider-1',
+      label: '',
+      divider: true,
+      action: () => {},
+    },
+    ...buildDefaultContextMenu(),
+  ]
+}
+
+/**
+ * Right-click menu for session entries (sidebar Recent Sessions list,
+ * Sessions panel rows). Centralizes the Open / Archive / Delete actions
+ * so both surfaces show the same behavior.
+ */
+export interface SessionContextMenuActions {
+  onOpen: (session: SessionListItem) => void
+  onArchive: (sessionId: string) => void
+  onUnarchive: (sessionId: string) => void
+  onDelete: (session: SessionListItem) => void
+  // Optional: when provided, a "Rename…" item is shown (above Delete). Callers
+  // pass this only for the active session, since Pi's rename targets it.
+  onRename?: (session: SessionListItem) => void
+  // Optional: when provided, a "Workflow Runs" item is shown (below Open). It
+  // must open scoped to Pi's header UUID — the identifier runs carry — never
+  // the session filename stem.
+  onRuns?: (session: SessionListItem) => void
+}
+
+export function buildSessionContextMenu(
+  session: SessionListItem,
+  isArchived: boolean,
+  actions: SessionContextMenuActions
+): ContextMenuItem[] {
+  const displayName = getSessionTitle(session.name, session.sessionId, session.preview)
+  const items: ContextMenuItem[] = [
+    {
+      id: 'session-open',
+      label: t('contextMenu.openSession'),
+      icon: <MessageSquare size={14} />,
+      action: () => actions.onOpen(session),
+    },
+    ...(actions.onRuns
+      ? [{
+          id: 'session-runs',
+          label: t('contextMenu.workflowRuns'),
+          icon: <WorkflowIcon size={14} />,
+          action: () => actions.onRuns!(session),
+        }]
+      : []),
+    {
+      id: 'divider-session-1',
+      label: '',
+      divider: true,
+      action: () => {},
+    },
+    isArchived
+      ? {
+          id: 'session-unarchive',
+          label: t('contextMenu.unarchive'),
+          icon: <ArchiveRestore size={14} />,
+          action: () => actions.onUnarchive(session.sessionId),
+        }
+      : {
+          id: 'session-archive',
+          label: t('contextMenu.archive'),
+          icon: <Archive size={14} />,
+          action: () => actions.onArchive(session.sessionId),
+        },
+  ]
+
+  if (actions.onRename) {
+    items.push({
+      id: 'session-rename',
+      label: t('contextMenu.rename'),
+      icon: <Pencil size={14} />,
+      action: () => actions.onRename!(session),
+    })
+  }
+
+  items.push({
+    id: 'session-delete',
+    label: t('contextMenu.deleteSessionLabel'),
+    icon: <Trash2 size={14} />,
+    action: async () => {
+      // Confirm before destructive action via an in-app themed dialog (not the
+      // native window.confirm, which mismatches the theme and leaves the
+      // Electron window without keyboard focus). Trash is recoverable when
+      // installed; without it, delete is permanent — the wording is honest.
+      const ok = await useAppStore.getState().requestConfirm({
+        title: t('contextMenu.deleteSessionConfirmTitle'),
+        message: t('contextMenu.deleteSessionConfirmMessage', { name: displayName }),
+        confirmLabel: t('common.delete'),
+        danger: true,
+      })
+      if (ok) actions.onDelete(session)
+    },
+  })
+
+  return items
+}
+
+export function buildLinkContextMenu(url: string): ContextMenuItem[] {
+  return [
+    {
+      id: 'open-link',
+      label: t('contextMenu.openLink'),
+      icon: <ExternalLink size={14} />,
+      action: () => window.piDesktop.system.openExternal(url),
+    },
+    {
+      id: 'copy-link',
+      label: t('contextMenu.copyLink'),
+      icon: <Copy size={14} />,
+      action: () => navigator.clipboard.writeText(url),
+    },
+    {
+      id: 'divider-1',
+      label: '',
+      divider: true,
+      action: () => {},
+    },
+    ...buildDefaultContextMenu(),
+  ]
+}

package/apps/sessrumnir/src/renderer/src/components/copy-button.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clsx } from 'clsx'
+import { Copy, Check } from 'lucide-react'
+
+export function CopyButton({
+  text,
+  className,
+}: {
+  text: string
+  className?: string
+}): React.JSX.Element {
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    void navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      title={copied ? t('common.copied') : t('common.copy')}
+      aria-label={copied ? t('common.copied') : t('common.copy')}
+      className={clsx(
+        'z-10 rounded p-1 text-dim transition-colors hover:bg-surface-hover hover:text-primary',
+        className
+      )}
+    >
+      {copied ? <Check size={12} /> : <Copy size={12} />}
+    </button>
+  )
+}

package/apps/sessrumnir/src/renderer/src/components/council-panels.tsx

@@ -0,0 +1,193 @@
+import React from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useAppStore, type CouncilPhase } from '../store'
+import { councilAgentLabel, type ConsultantStatus } from '../../../shared/council-config'
+
+const COUNCIL_PHASE_KEYS = {
+  detecting: 'council.phase.detecting',
+  consulting: 'council.phase.consulting',
+  merging: 'council.phase.merging',
+  'awaiting-approval': 'council.phase.awaitingApproval',
+  refused: 'council.phase.refused',
+} as const satisfies Record<CouncilPhase, string>
+
+const COUNCIL_STATUS_KEYS = {
+  contributed: 'council.status.contributed',
+  'timed-out': 'council.status.timedOut',
+  errored: 'council.status.errored',
+} as const satisfies Record<ConsultantStatus, string>
+
+function formatElapsed(seconds: number): string {
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+export function CouncilPanels(): React.JSX.Element | null {
+  const { t } = useTranslation()
+  const run = useAppStore((s) => s.councilRun)
+  const approve = useAppStore((s) => s.approveCouncilPlan)
+  const revise = useAppStore((s) => s.reviseCouncilPlan)
+  const cancel = useAppStore((s) => s.cancelCouncil)
+  const isStreaming = useAppStore((s) => s.isStreaming)
+  const [reviseText, setReviseText] = React.useState('')
+
+  const consulting = run?.phase === 'consulting'
+  const startedAt = run?.startedAt
+  const phase = run?.phase
+  const [elapsed, setElapsed] = React.useState(0)
+  const [collapsed, setCollapsed] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!consulting || !startedAt) {
+      setElapsed(0)
+      return
+    }
+    const tick = (): void => setElapsed(Math.floor((Date.now() - startedAt) / 1000))
+    tick()
+    const interval = setInterval(tick, 1000)
+    return () => clearInterval(interval)
+  }, [consulting, startedAt])
+
+  // Expand while consultants stream; collapse once a plan is ready so the
+  // consensus output below stays readable. The user can still toggle manually.
+  React.useEffect(() => {
+    if (phase === 'consulting') setCollapsed(false)
+    else if (phase === 'awaiting-approval') setCollapsed(true)
+  }, [phase])
+
+  if (!run) return null
+
+  const awaiting = run.phase === 'awaiting-approval'
+
+  return (
+    <div className="my-2 rounded-lg border border-border-strong bg-surface/60 p-3">
+      <button
+        type="button"
+        onClick={() => setCollapsed((c) => !c)}
+        className="flex w-full items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted hover:text-primary"
+      >
+        {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+        <span>{t('council.header', { phase: t(COUNCIL_PHASE_KEYS[run.phase]) })}</span>
+        {consulting && startedAt ? <span className="text-dim">({formatElapsed(elapsed)})</span> : null}
+        {collapsed && run.results.length > 0 ? (
+          <span className="ml-2 normal-case text-dim">
+            {run.results.map((r) => `${councilAgentLabel(r.id)} ${r.status === 'contributed' ? '✓' : '✕'}`).join(' · ')}
+          </span>
+        ) : null}
+      </button>
+
+      {!collapsed && (
+        <div className="mt-2">
+          {run.phase === 'refused' && <div className="text-sm text-warning">{run.reason}</div>}
+
+          {/* Live streaming view while consultants are working. */}
+          {run.phase === 'consulting' && (run.members?.length ?? 0) > 0 && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              {run.members!.map((id) => {
+                const text = run.partials?.[id] ?? ''
+                return (
+                  <div key={id} className="rounded border border-border bg-app p-2">
+                    <div className="mb-1 flex items-center justify-between">
+                      <span className="text-sm text-primary">{councilAgentLabel(id)}</span>
+                      <span className="text-xs text-accent-fg">{text ? t('council.status.streaming') : t('council.status.working')}</span>
+                    </div>
+                    <pre className="max-h-40 overflow-auto whitespace-pre-wrap text-xs text-muted">
+                      {text}
+                    </pre>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {run.results.length > 0 && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              {run.results.map((r) => (
+                <div key={r.id} className="rounded border border-border bg-app p-2">
+                  <div className="mb-1 flex items-center justify-between">
+                    <span className="text-sm text-primary">{councilAgentLabel(r.id)}</span>
+                    <span
+                      className={`text-xs ${r.status === 'contributed' ? 'text-success' : 'text-warning'}`}
+                    >
+                      {t(COUNCIL_STATUS_KEYS[r.status])}
+                    </span>
+                  </div>
+                  <pre className="max-h-40 overflow-auto whitespace-pre-wrap text-xs text-muted">
+                    {r.plan ?? r.error ?? ''}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Consensus plan from the read-only arbiter: streamed while merging, then */}
+      {/* held here for review. Stays visible even when the consultant cards are  */}
+      {/* collapsed, and is never sent to the live session until the user         */}
+      {/* approves it below. */}
+      {(run.phase === 'merging' || awaiting) && (
+        <div className="mt-2 rounded border border-border bg-app p-2">
+          <div className="mb-1 flex items-center justify-between">
+            <span className="text-sm text-primary">{t('council.consensusPlan.heading')}</span>
+            <span className="text-xs text-accent-fg">
+              {run.phase === 'merging' ? (run.consensus ? t('council.status.merging') : t('council.status.working')) : t('council.status.readyForReview')}
+            </span>
+          </div>
+          <pre className="max-h-80 overflow-auto whitespace-pre-wrap text-xs text-secondary">
+            {run.consensus ?? ''}
+          </pre>
+        </div>
+      )}
+
+      {/* Approval controls stay visible even when the cards are collapsed. */}
+      {awaiting && (
+        <div className="mt-3 space-y-2">
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={reviseText}
+              onChange={(e) => setReviseText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && reviseText.trim() && !isStreaming) {
+                  void revise(reviseText)
+                  setReviseText('')
+                }
+              }}
+              placeholder={t('council.consensusPlan.reviseInputPlaceholder')}
+              disabled={isStreaming}
+              className="flex-1 rounded-md border border-border-strong bg-surface px-3 py-1.5 text-sm text-primary placeholder:text-faint focus:border-focus focus:outline-none disabled:opacity-50"
+            />
+            <button
+              disabled={isStreaming || !reviseText.trim()}
+              className="rounded border border-border-strong px-3 py-1 text-sm text-secondary hover:bg-surface-hover disabled:opacity-50"
+              onClick={() => {
+                void revise(reviseText)
+                setReviseText('')
+              }}
+            >
+              {t('council.consensusPlan.reviseButton')}
+            </button>
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              className="rounded px-3 py-1 text-sm text-secondary hover:bg-surface-hover"
+              onClick={cancel}
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              disabled={isStreaming}
+              className="rounded bg-accent px-3 py-1 text-sm text-inverse hover:bg-accent-hover disabled:opacity-50"
+              onClick={() => void approve()}
+            >
+              {t('council.consensusPlan.implementButton')}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}