@zerwiz/ymir 0.1.33 → 0.1.35

package/apps/sessrumnir/src/renderer/src/components/status-popover.tsx

@@ -0,0 +1,481 @@
+import { useState, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { findSessionPreview, getSessionTitle } from '../utils/session-title'
+import { processStatusLabel } from '../utils/process-status-label'
+import { useAppStore } from '../store'
+import { DEFAULT_AGENT_ENGINE_LABEL, agentEngineLabel } from '../../../shared/agent-engine-label'
+import { invocationToken } from '../../../shared/pi-command'
+import type { InstalledSkill } from '../../../shared/ipc-contracts'
+import { clsx } from 'clsx'
+import {
+  Activity,
+  Cpu,
+  Zap,
+  Layers,
+  Minimize2,
+  Puzzle,
+  Brain,
+  CheckCircle2,
+  Loader2,
+  ChevronRight,
+  RefreshCw,
+  Server,
+  Plug,
+  FileText,
+  BookOpen,
+} from 'lucide-react'
+
+interface CommandInfo {
+  name: string
+  description?: string
+  source: 'extension' | 'prompt' | 'skill'
+  path?: string
+}
+
+interface McpServer {
+  name: string
+  command: string
+  args: string[]
+  env: Record<string, string>
+  source: 'global' | 'project'
+  status: 'configured' | 'unknown'
+}
+
+const SCOPE_KEYS = {
+  global: 'status.scope.global',
+  project: 'status.scope.project',
+  package: 'status.scope.package',
+  cli: 'status.scope.cli',
+} as const satisfies Record<InstalledSkill['source'], string>
+
+export function StatusPopover(): React.JSX.Element {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const [commands, setCommands] = useState<CommandInfo[]>([])
+  const [skills, setSkills] = useState<InstalledSkill[]>([])
+  const [mcpServers, setMcpServers] = useState<McpServer[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const piStatus = useAppStore((state) => state.piStatus)
+  const engineLabel = useAppStore((state) => agentEngineLabel(state.piEngine) ?? DEFAULT_AGENT_ENGINE_LABEL)
+  const piPid = useAppStore((state) => state.piPid)
+  const piError = useAppStore((state) => state.piError)
+  const [errorCopied, setErrorCopied] = useState(false)
+  const sessionState = useAppStore((state) => state.sessionState)
+  const sessionList = useAppStore((state) => state.sessionList)
+  const sessionStats = useAppStore((state) => state.sessionStats)
+  const activeWorkspace = useAppStore((state) => state.activeWorkspace)
+  const compactContext = useAppStore((state) => state.compactContext)
+  const isCompacting = sessionState?.isCompacting ?? false
+  const ref = useRef<HTMLDivElement>(null)
+
+  // Some providers (e.g. lmstudio) return a fractional context-usage percent
+  // like 1.077270; round + clamp so it fits the fixed-width label instead of
+  // overflowing the popover.
+  const contextPct = sessionStats?.contextUsage
+    ? Math.min(100, Math.max(0, Math.round(sessionStats.contextUsage.percent ?? 0)))
+    : 0
+
+  // Load data when opened
+  useEffect(() => {
+    if (!isOpen) return
+
+    const loadData = async () => {
+      setLoading(true)
+      try {
+        const [cmds, skls, mcp] = await Promise.all([
+          window.piDesktop.piCommands.list().catch(() => []),
+          window.piDesktop.skills.list().catch(() => []),
+          window.piDesktop.mcpServers.list().catch(() => []),
+        ])
+        setCommands(cmds as CommandInfo[])
+        setSkills(skls as InstalledSkill[])
+        setMcpServers(mcp as McpServer[])
+      } catch {
+        // Silent failure
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadData()
+  }, [isOpen])
+
+  // Close on click outside
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+
+    document.addEventListener('mousedown', handleClick)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen])
+
+  // Group commands by source
+  const extensionCommands = commands.filter((c) => c.source === 'extension')
+  const promptCommands = commands.filter((c) => c.source === 'prompt')
+  const skillCommands = commands.filter((c) => c.source === 'skill')
+
+  const statusColor = {
+    running: 'bg-success',
+    starting: 'bg-warning animate-pulse',
+    error: 'bg-error',
+    stopped: 'bg-elevated',
+  }[piStatus]
+
+  return (
+    <div ref={ref} className="relative">
+      {/* Status trigger */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 rounded-md px-2 py-1 hover:bg-surface-hover transition-colors"
+        title={t('status.trigger.title')}
+      >
+        <div className={clsx('h-2 w-2 rounded-full', statusColor)} />
+        <Activity size={12} className="text-muted" />
+      </button>
+
+      {/* Popover */}
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-80 rounded-xl border border-border-strong bg-surface shadow-2xl shadow-black/50 overflow-hidden animate-fade-in z-50">
+          {/* Header */}
+          <div className="px-4 py-3 border-b border-border bg-surface/50">
+            <div className="flex items-center gap-2">
+              <Activity size={16} className="text-muted" />
+              <span className="text-sm font-medium text-primary">{t('status.header.title')}</span>
+            </div>
+          </div>
+
+          <div className="max-h-[70vh] overflow-y-auto">
+            {/* Agent process */}
+            <StatusSection title={t('status.agentSection.title', { agent: engineLabel })} icon={<Cpu size={13} />}>
+              <StatusRow
+                label={t('status.row.status')}
+                value={
+                  <span className="flex items-center gap-1.5">
+                    <span className={clsx('h-1.5 w-1.5 rounded-full', statusColor)} />
+                    {processStatusLabel(piStatus, t)}
+                    {piPid && <span className="text-faint">{t('status.pidLabel', { pid: piPid })}</span>}
+                  </span>
+                }
+              />
+              {piError && (
+                <div className="mt-2 rounded-md border border-error-bg bg-error-bg p-2">
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-[10px] uppercase tracking-wide text-error font-semibold">{t('status.row.error')}</span>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        navigator.clipboard.writeText(piError)
+                        setErrorCopied(true)
+                        setTimeout(() => setErrorCopied(false), 1500)
+                      }}
+                      className="text-[10px] text-error/80 hover:text-error"
+                    >
+                      {errorCopied ? t('status.errorCopied') : t('status.errorCopy')}
+                    </button>
+                  </div>
+                  <pre className="text-[11px] text-error whitespace-pre-wrap break-words max-h-40 overflow-y-auto font-mono">
+                    {piError}
+                  </pre>
+                </div>
+              )}
+              {sessionState?.model && (
+                <StatusRow
+                  label={t('status.row.model')}
+                  value={
+                    <span className="flex items-center gap-1">
+                      {sessionState.model.name}
+                      {sessionState.model.reasoning && (
+                        <Brain size={10} className="text-special" />
+                      )}
+                    </span>
+                  }
+                />
+              )}
+              {sessionState?.model && (
+                <StatusRow label={t('status.row.provider')} value={sessionState.model.provider} />
+              )}
+              {sessionState?.thinkingLevel && (
+                <StatusRow
+                  label={t('common.thinking')}
+                  value={
+                    <span className="flex items-center gap-1">
+                      <Zap size={10} className="text-warning" />
+                      {sessionState.thinkingLevel}
+                    </span>
+                  }
+                />
+              )}
+              {sessionState?.sessionId && (
+                <StatusRow label={t('status.row.session')} value={getSessionTitle(sessionState.sessionName, sessionState.sessionId, findSessionPreview(sessionList, sessionState.sessionFile))} />
+              )}
+            </StatusSection>
+
+            {/* Context & Tokens */}
+            {sessionStats && (
+              <StatusSection title={t('status.contextSection.title')} icon={<Layers size={13} />}>
+                {sessionStats.contextUsage && (
+                  <>
+                    <StatusRow
+                      label={t('status.row.window')}
+                      value={`${((sessionStats.contextUsage.tokens ?? 0) / 1000).toFixed(0)}k / ${(sessionStats.contextUsage.contextWindow / 1000).toFixed(0)}k`}
+                    />
+                    <StatusRow
+                      label={t('status.row.usage')}
+                      value={
+                        <div className="flex items-center gap-2">
+                          <div className="flex-1 h-1.5 bg-card rounded-full overflow-hidden">
+                            <div
+                              className={clsx(
+                                'h-full rounded-full transition-all',
+                                contextPct > 80
+                                  ? 'bg-error'
+                                  : contextPct > 60
+                                    ? 'bg-warning'
+                                    : 'bg-success'
+                              )}
+                              style={{ width: `${contextPct}%` }}
+                            />
+                          </div>
+                          <span className="text-[11px] w-8 shrink-0 text-right tabular-nums">
+                            {contextPct}%
+                          </span>
+                        </div>
+                      }
+                    />
+                  </>
+                )}
+                <StatusRow label={t('status.row.messages')} value={String(sessionStats.totalMessages)} />
+                <StatusRow label={t('status.row.cost')} value={`$${sessionStats.cost.toFixed(4)}`} />
+                <StatusRow
+                  label={t('status.row.tokens')}
+                  value={`${((sessionStats.tokens.input + sessionStats.tokens.output) / 1000).toFixed(1)}k`}
+                />
+                <button
+                  onClick={() => compactContext()}
+                  disabled={isCompacting}
+                  className="mt-1 flex w-full items-center justify-center gap-1.5 rounded-md bg-card px-3 py-1.5 text-xs text-secondary hover:bg-elevated disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  title={t('status.compactButton.title')}
+                >
+                  {isCompacting ? (
+                    <Loader2 size={12} className="animate-spin" />
+                  ) : (
+                    <Minimize2 size={12} />
+                  )}
+                  {isCompacting ? t('status.compactButton.compacting') : t('status.compactButton.compact')}
+                </button>
+              </StatusSection>
+            )}
+
+            {/* Workspace */}
+            {activeWorkspace && (
+              <StatusSection title={t('status.workspaceSection.title')} icon={<Server size={13} />}>
+                <StatusRow label={t('status.row.name')} value={activeWorkspace.name} />
+                <StatusRow label={t('status.row.path')} value={<span className="truncate block max-w-[180px]">{activeWorkspace.path}</span>} />
+              </StatusSection>
+            )}
+
+            {/* Extensions */}
+            {extensionCommands.length > 0 && (
+              <StatusSection title={t('status.extensionsSection.title')} icon={<Plug size={13} />} count={extensionCommands.length}>
+                {extensionCommands.slice(0, 10).map((cmd) => (
+                  <div key={cmd.name} className="flex items-center gap-2 py-0.5">
+                    <CheckCircle2 size={10} className="text-success shrink-0" />
+                    <span className="text-xs text-secondary truncate">/{cmd.name}</span>
+                    {cmd.description && (
+                      <span className="text-[10px] text-faint truncate ml-auto">{cmd.description}</span>
+                    )}
+                  </div>
+                ))}
+                {extensionCommands.length > 10 && (
+                  <div className="text-[10px] text-faint mt-1">
+                    {t('common.moreCount', { count: extensionCommands.length - 10 })}
+                  </div>
+                )}
+              </StatusSection>
+            )}
+
+            {/* Skills */}
+            {skills.length > 0 && (
+              <StatusSection title={t('common.skills')} icon={<Puzzle size={13} />} count={skills.length}>
+                {skills.slice(0, 8).map((skill) => (
+                  <div key={skill.path} className="flex items-center gap-2 py-0.5">
+                    <Puzzle size={10} className="text-special shrink-0" />
+                    <span className="text-xs text-secondary truncate">{skill.name}</span>
+                    <span className={clsx(
+                      'ml-auto text-[10px] px-1 rounded',
+                      skill.source === 'global'
+                        ? 'bg-accent-bg text-accent-fg'
+                        : 'bg-success-bg text-success'
+                    )}>
+                      {t(SCOPE_KEYS[skill.source])}
+                    </span>
+                  </div>
+                ))}
+                {skills.length > 8 && (
+                  <div className="text-[10px] text-faint mt-1">
+                    {t('common.moreCount', { count: skills.length - 8 })}
+                  </div>
+                )}
+              </StatusSection>
+            )}
+
+            {/* MCP Servers */}
+            <StatusSection title={t('status.mcpSection.title')} icon={<Plug size={13} />} count={mcpServers.length > 0 ? mcpServers.length : undefined}>
+              {mcpServers.length === 0 ? (
+                <div className="text-xs text-faint py-1">
+                  {t('status.noMcpServers')}
+                </div>
+              ) : (
+                mcpServers.map((server) => (
+                  <div key={server.name} className="flex items-center gap-2 py-1">
+                    <div className="h-1.5 w-1.5 rounded-full bg-success shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <div className="text-xs text-secondary font-medium">{server.name}</div>
+                      <div className="text-[10px] text-faint truncate">{server.command} {server.args.join(' ')}</div>
+                    </div>
+                    <span className={clsx(
+                      'text-[10px] px-1 rounded',
+                      server.source === 'global'
+                        ? 'bg-accent-bg text-accent-fg'
+                        : 'bg-success-bg text-success'
+                    )}>
+                      {t(SCOPE_KEYS[server.source])}
+                    </span>
+                  </div>
+                ))
+              )}
+            </StatusSection>
+
+            {/* Prompt Templates */}
+            {promptCommands.length > 0 && (
+              <StatusSection title={t('status.promptTemplatesSection.title')} icon={<FileText size={13} />} count={promptCommands.length}>
+                {promptCommands.slice(0, 6).map((cmd) => (
+                  <div key={cmd.name} className="flex items-center gap-2 py-0.5">
+                    <FileText size={10} className="text-info shrink-0" />
+                    <span className="text-xs text-secondary truncate">/{cmd.name}</span>
+                  </div>
+                ))}
+              </StatusSection>
+            )}
+
+            {/* MCP / Skill Commands */}
+            {skillCommands.length > 0 && (
+              <StatusSection title={t('status.skillCommandsSection.title')} icon={<BookOpen size={13} />} count={skillCommands.length}>
+                {skillCommands.slice(0, 6).map((cmd) => (
+                  <div key={cmd.name} className="flex items-center gap-2 py-0.5">
+                    <BookOpen size={10} className="text-warning shrink-0" />
+                    <span className="text-xs text-secondary truncate">{invocationToken(cmd.name, cmd.source)}</span>
+                  </div>
+                ))}
+              </StatusSection>
+            )}
+
+            {/* Loading */}
+            {loading && (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 size={16} className="animate-spin text-dim" />
+              </div>
+            )}
+
+            {/* Empty state */}
+            {!loading && commands.length === 0 && skills.length === 0 && (
+              <div className="py-6 text-center text-xs text-faint">
+                {t('status.noExtensionsOrSkills')}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="px-4 py-2 border-t border-border flex items-center justify-between text-[10px] text-faint">
+            <span>v{__APP_VERSION__}</span>
+            <button
+              onClick={() => {
+                useAppStore.getState().refreshSessionStats()
+              }}
+              className="flex items-center gap-1 hover:text-muted transition-colors"
+            >
+              <RefreshCw size={10} />
+              {t('common.refresh')}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Section ─────────────────────────────────────────────────────────────────
+
+function StatusSection({
+  title,
+  icon,
+  count,
+  children,
+}: {
+  title: string
+  icon: React.ReactNode
+  count?: number
+  children: React.ReactNode
+}): React.JSX.Element {
+  const [expanded, setExpanded] = useState(true)
+
+  return (
+    <div className="border-b border-border/50">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center gap-2 px-4 py-2 hover:bg-surface-hover/30 transition-colors"
+      >
+        <span className="text-dim">{icon}</span>
+        <span className="text-xs font-medium text-secondary flex-1 text-left">{title}</span>
+        {count !== undefined && (
+          <span className="text-[10px] text-faint bg-card rounded px-1.5 py-0.5">
+            {count}
+          </span>
+        )}
+        <ChevronRight
+          size={12}
+          className={clsx(
+            'text-faint transition-transform',
+            expanded && 'rotate-90'
+          )}
+        />
+      </button>
+      {expanded && (
+        <div className="px-4 pb-2 space-y-1">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Row ─────────────────────────────────────────────────────────────────────
+
+function StatusRow({
+  label,
+  value,
+}: {
+  label: string
+  value: React.ReactNode
+}): React.JSX.Element {
+  return (
+    <div className="flex items-center justify-between gap-2 py-0.5">
+      <span className="shrink-0 text-[11px] text-dim">{label}</span>
+      <span className="min-w-0 flex-1 truncate text-right text-[11px] text-secondary">{value}</span>
+    </div>
+  )
+}

package/apps/sessrumnir/src/renderer/src/components/streaming-bubble.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MarkdownRenderer } from './markdown-renderer'
+import { toolLabel, toolCallStatusLabel } from '../message-grouping'
+import { toolCallIconFor } from './tool-call-icon'
+import { useAppStore } from '../store'
+import { DEFAULT_SETTINGS } from '../../../shared/default-settings'
+import { Brain, Bot, Loader2 } from 'lucide-react'
+import { clsx } from 'clsx'
+
+interface StreamingBubbleProps {
+  content: string
+  thinking: string
+  toolCalls: Map<
+    string,
+    {
+      name: string
+      args: string
+      result?: string
+      isExecuting: boolean
+      isError?: boolean
+      startedAt?: number
+      durationMs?: number
+    }
+  >
+}
+
+export function StreamingBubble({ content, thinking, toolCalls }: StreamingBubbleProps): React.JSX.Element {
+  const { t } = useTranslation()
+  const thinkingEnabled = useAppStore(
+    (state) => state.settingsDraft.showThinking ?? state.settings?.showThinking ?? DEFAULT_SETTINGS.showThinking
+  )
+  const thinkingScrollRef = useRef<HTMLDivElement>(null)
+
+  // Follow the thinking tail only when the user is already at/near the bottom,
+  // so scrolling up mid-stream to re-read is not yanked back down.
+  useEffect(() => {
+    const el = thinkingScrollRef.current
+    if (!el) return
+    const distanceFromBottom = el.scrollHeight - el.clientHeight - el.scrollTop
+    if (distanceFromBottom <= 48) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [thinking])
+
+  return (
+    <div className="mb-4 animate-fade-in">
+      <div className="flex items-start gap-3">
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent-bg">
+          <Bot size={14} className="text-accent-fg animate-pulse" />
+        </div>
+
+        <div className="min-w-0 flex-1">
+          {thinking && thinkingEnabled && (
+            <div className="thinking-hover mb-2 min-w-0">
+              <div className="flex h-7 items-center gap-1.5 text-sm text-dim">
+                <Brain size={12} className="shrink-0" />
+                <Loader2 size={12} className="shrink-0 animate-spin text-special" />
+                <span>{t('common.thinking')}</span>
+              </div>
+              <div
+                ref={thinkingScrollRef}
+                className="max-h-36 min-w-0 overflow-x-hidden overflow-y-auto"
+              >
+                <div className="markdown-body font-sans italic text-sm text-muted break-words [overflow-wrap:anywhere] whitespace-pre-wrap">
+                  {thinking}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {toolCalls.size > 0 && (
+            <div className="mb-2 space-y-1">
+              {Array.from(toolCalls.entries()).map(([id, tc]) => {
+                const Icon = toolCallIconFor(tc.name)
+                return (
+                  <div
+                    key={id}
+                    className={clsx(
+                      'flex min-w-0 items-center gap-2 rounded-lg border px-3 py-2 text-sm',
+                      tc.isExecuting
+                        ? 'border-warning-bg bg-warning-bg text-warning'
+                        : tc.isError
+                          ? 'border-error-bg bg-surface/50 text-muted'
+                          : 'border-border bg-surface/50 text-muted'
+                    )}
+                  >
+                    {tc.isExecuting ? (
+                      <Loader2 size={12} className="shrink-0 animate-spin" />
+                    ) : (
+                      <Icon size={12} className="shrink-0" />
+                    )}
+                    <span className="min-w-0 truncate font-jetbrains">{toolLabel(tc.name, t)}</span>
+                    <span
+                      className={clsx(
+                        'ml-auto shrink-0 text-xs capitalize',
+                        tc.isExecuting && 'text-warning animate-pulse',
+                        !tc.isExecuting && tc.isError && 'text-error',
+                        !tc.isExecuting && !tc.isError && 'text-success'
+                      )}
+                    >
+                      {toolCallStatusLabel(tc.isExecuting ? 'running' : tc.isError ? 'error' : 'done', t)}
+                    </span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {content && (
+            // streaming-md places the caret ::after the last markdown block so it
+            // sits at the end of the current chunk (not on a line below it).
+            <div className="markdown-body streaming-md min-w-0 text-sm break-words [overflow-wrap:anywhere]">
+              <MarkdownRenderer content={content} />
+            </div>
+          )}
+
+          {!content && !thinking && toolCalls.size === 0 && (
+            <div className="flex h-7 items-center gap-2 text-sm text-dim">
+              <Loader2 size={12} className="animate-spin" />
+              {t('chat.waitingForResponse')}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}