opencode-extended-sidebar 0.2.90

package/src/pware.oc.perf/pware.oc.perf.self.ts

@@ -0,0 +1,179 @@
+/**
+ * Plugin self-cost: event/scan/tick latency + renderer FPS. Pure accumulators, safe on any host.
+ */
+import {
+  SELF_PHASE_EVENT,
+  SELF_PHASE_SCAN,
+  SELF_PHASE_TICK,
+  type SelfPhase,
+} from "../pware.oc.core/constants/pware.oc.core.constants.phase.js"
+import { debugActive, profileActive } from "../pware.oc.core/pware.oc.core.debug.js"
+
+export type { SelfPhase }
+
+export type SelfBucket = { n: number; sum: number; max: number }
+
+export type SelfStats = {
+  [SELF_PHASE_EVENT]: SelfBucket
+  [SELF_PHASE_SCAN]: SelfBucket
+  [SELF_PHASE_TICK]: SelfBucket
+  /** Last known renderer FPS, null until first read. */
+  fps: number | null
+  /** Last known average frame time in ms, null until first read. */
+  frameMs: number | null
+}
+
+const PHASES: SelfPhase[] = [SELF_PHASE_EVENT, SELF_PHASE_SCAN, SELF_PHASE_TICK]
+
+const buckets: Record<SelfPhase, SelfBucket> = {
+  [SELF_PHASE_EVENT]: { n: 0, sum: 0, max: 0 },
+  [SELF_PHASE_SCAN]: { n: 0, sum: 0, max: 0 },
+  [SELF_PHASE_TICK]: { n: 0, sum: 0, max: 0 },
+}
+
+let fps: number | null = null
+let frameMs: number | null = null
+
+/** Test override for the diagnostic gate — null delegates to the env-driven loggers. */
+let selfDiagForced: boolean | null = null
+
+/**
+ * True while a debug or profile logger is active. Self-cost instrumentation is
+ * purely diagnostic, so production (neither env var set) pays nothing for it.
+ */
+export function selfDiagActive(): boolean {
+  return selfDiagForced ?? (debugActive() || profileActive())
+}
+
+/** Test hook — force the gate on/off without touching process.env. */
+export function setSelfDiagForced(on: boolean | null): void {
+  selfDiagForced = on
+}
+
+/**
+ * Measures fn with performance.now(), accumulates into bucket `label`, returns fn's result.
+ * When neither the debug nor the profile logger is active the fn runs bare — no clock read,
+ * no accumulator writes. Throws propagate.
+ */
+export function selfTime<T>(label: SelfPhase, fn: () => T): T {
+  if (!selfDiagActive()) return fn()
+  const start = performance.now()
+  try {
+    return fn()
+  } finally {
+    const elapsed = performance.now() - start
+    const b = buckets[label]
+    b.n += 1
+    b.sum += elapsed
+    if (elapsed > b.max) b.max = elapsed
+  }
+}
+
+/** Shallow copy of current stats (never hand out the internal object). */
+export function readSelfStats(): SelfStats {
+  return {
+    event: { ...buckets.event },
+    scan: { ...buckets.scan },
+    tick: { ...buckets.tick },
+    fps,
+    frameMs,
+  }
+}
+
+/** Zero all buckets and fps/frameMs. Test helper + used on remount. */
+export function resetSelfStats(): void {
+  for (const phase of PHASES) {
+    buckets[phase].n = 0
+    buckets[phase].sum = 0
+    buckets[phase].max = 0
+  }
+  fps = null
+  frameMs = null
+}
+
+/** Record the latest renderer read. fps/frameMs null clears. */
+export function setSelfFps(nextFps: number | null, nextFrameMs: number | null): void {
+  fps = nextFps
+  frameMs = nextFrameMs
+}
+
+function finitePositive(v: unknown): v is number {
+  return typeof v === "number" && Number.isFinite(v) && v > 0
+}
+
+type RendererLike = {
+  getStats?: unknown
+  getNativeStats?: unknown
+}
+
+/**
+ * Null-safe renderer stats read. Accepts any object (the host's CliRenderer).
+ * Tries getStats() first (has .fps), falls back to getNativeStats().averageFrameTime,
+ * returns { fps, frameMs } where both are numbers|null. Never throws — any missing
+ * method / exception yields { fps: null, frameMs: null }.
+ */
+export function readRendererFps(renderer: unknown): { fps: number | null; frameMs: number | null } {
+  let outFps: number | null = null
+  let outFrameMs: number | null = null
+  if (renderer === null || typeof renderer !== "object") return { fps: outFps, frameMs: outFrameMs }
+
+  const r = renderer as RendererLike
+
+  try {
+    if (typeof r.getStats === "function") {
+      const stats: unknown = r.getStats.call(renderer)
+      if (stats !== null && typeof stats === "object") {
+        const raw = (stats as { fps?: unknown }).fps
+        if (finitePositive(raw)) outFps = Math.round(raw)
+      }
+    }
+  } catch {
+    // getStats threw — leave outFps null and fall back below
+  }
+
+  if (outFps === null) {
+    try {
+      if (typeof r.getNativeStats === "function") {
+        const stats: unknown = r.getNativeStats.call(renderer)
+        if (stats !== null && typeof stats === "object") {
+          const avg = (stats as { averageFrameTime?: unknown }).averageFrameTime
+          if (finitePositive(avg)) outFrameMs = Math.round(avg * 10) / 10
+        }
+      }
+    } catch {
+      // getNativeStats threw — leave outFrameMs null
+    }
+  }
+
+  return { fps: outFps, frameMs: outFrameMs }
+}
+
+/** Round ms to 1 decimal for sub-second self timings (the reader's formatDuration is coarse). */
+function ms1(x: number): string {
+  return String(Math.round(x * 10) / 10)
+}
+
+function phasePart(b: SelfBucket, suffix: string): string | null {
+  if (b.n === 0) return null
+  return `${ms1(b.sum / b.n)}ms/${suffix}`
+}
+
+/**
+ * Pure line text for the status row, e.g. "self 0.4ms/ev · 1.2ms/sc · 59fps".
+ */
+export function formatSelfLine(stats: SelfStats): string {
+  const parts: string[] = []
+  const ev = phasePart(stats.event, "ev")
+  const sc = phasePart(stats.scan, "sc")
+  const tk = phasePart(stats.tick, "tk")
+  if (ev) parts.push(ev)
+  if (sc) parts.push(sc)
+  if (tk) parts.push(tk)
+  if (stats.fps != null) {
+    parts.push(`${stats.fps}fps`)
+  } else if (stats.frameMs != null) {
+    parts.push(`${String(Math.round(stats.frameMs))}ms/f`)
+  }
+  if (parts.length === 0) return "self —"
+  return `self ${parts.join(" · ")}`
+}

package/src/pware.oc.perf/pware.oc.perf.view.tsx

@@ -0,0 +1,462 @@
+/** @jsxImportSource @opentui/solid */
+/** Perf tab: where a session's wall clock goes, per model and per tool. */
+import { createMemo, For, Show, type JSX } from "solid-js"
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import { ClickText, toneColor, type ThemeColors } from "../pware.oc.ui/pware.oc.ui.chrome.js"
+import { FoldSection, RowList, useFold, useReveal } from "../pware.oc.ui/pware.oc.ui.sections.js"
+import { openPerfCharts, openPerfLog } from "../pware.oc.ui/pware.oc.ui.menudialogs.js"
+import type { PerfLogKind } from "./pware.oc.perf.reader.js"
+import {
+  type ModelPerf,
+  type PerfSnapshot,
+  type SessionPerf,
+  type ToolPerf,
+} from "./pware.oc.perf.reader.js"
+import { THINK_GLYPH, directionGlyph, spinnerFrame, type GlyphSpec } from "../pware.oc.ui/pware.oc.ui.glyphs.js"
+import {
+  PERF_LOG_KIND_MODELS,
+  PERF_LOG_KIND_TIME,
+  PERF_PHASE_IDLE,
+  PERF_PHASE_RECV,
+  PERF_PHASE_THINK,
+  PERF_PHASE_TOOL,
+  PERF_PHASE_WAIT,
+  type PerfPhase,
+} from "../pware.oc.core/constants/pware.oc.core.constants.phase.js"
+import {
+  FLOW_RECV,
+  FLOW_TOOL,
+  FLOW_WAIT,
+} from "../pware.oc.core/constants/pware.oc.core.constants.pulse.js"
+import {
+  formatDuration,
+  formatPercent,
+  formatRate,
+  formatSpan,
+  packChips,
+  packStackedRow,
+  timeSummary,
+  tokenSummary,
+  type Chip,
+  type FlowDir,
+} from "../pware.oc.core/pware.oc.core.pulse.js"
+import { clipMiddleWidth, strWidth } from "../pware.oc.core/pware.oc.core.width.js"
+import { asciiTrend, shareBar } from "./pware.oc.perf.charts.js"
+
+const KV_FOLD_MODELS = "oes.fold.perf.models"
+const KV_FOLD_TIME = "oes.fold.perf.time"
+const KV_FOLD_TOOLS = "oes.fold.perf.tools"
+const KV_FOLD_TREND = "oes.fold.perf.trend"
+const KV_FOLD_HISTORY = "oes.fold.perf.history"
+
+const PHASES: Array<{ key: PerfPhase; spec: GlyphSpec; label: string }> = [
+  { key: PERF_PHASE_WAIT, spec: directionGlyph(FLOW_WAIT)!, label: "wait" },
+  { key: PERF_PHASE_THINK, spec: { char: THINK_GLYPH, tone: "primary" }, label: "think" },
+  { key: PERF_PHASE_RECV, spec: directionGlyph(FLOW_RECV)!, label: "recv" },
+  { key: PERF_PHASE_TOOL, spec: directionGlyph(FLOW_TOOL)!, label: "tools" },
+  { key: PERF_PHASE_IDLE, spec: { char: "·", tone: "textMuted" }, label: "idle" },
+]
+
+function MetricRow(props: {
+  glyph: string
+  glyphFg: string
+  name: string
+  nameFg: string
+  chips: Chip[]
+  chipFg?: (chip: Chip) => string
+  lineMax: number
+  bold?: boolean
+  minName?: number
+  onSelect?: () => void
+}): JSX.Element {
+  const body = createMemo(() => {
+    const room = Math.max(4, props.lineMax - 2)
+    const minName = props.minName ?? 6
+    const chips = packChips(minName, props.chips, room)
+    const used = chips.reduce((sum, c) => sum + strWidth(c.text) + 1, 0)
+    const name = clipMiddleWidth(props.name, Math.max(minName, room - used))
+    return { name, chips }
+  })
+  return (
+    <box flexDirection="row" onMouseUp={props.onSelect}>
+      <text fg={props.glyphFg}>{`${props.glyph} `}</text>
+      <ClickText fg={props.nameFg} bold={Boolean(props.bold)} underline={Boolean(props.onSelect)}>
+        {body().name}
+      </ClickText>
+      <For each={body().chips}>
+        {(chip) => (
+          <text fg={props.chipFg ? props.chipFg(chip) : props.nameFg}>{` ${chip.text}`}</text>
+        )}
+      </For>
+    </box>
+  )
+}
+
+function PhaseRow(props: {
+  spec: GlyphSpec
+  label: string
+  ms: number
+  share: number | null
+  colors: ThemeColors
+  lineMax: number
+  onSelect?: () => void
+}): JSX.Element {
+  const fg = () => toneColor(props.spec.tone, props.colors)
+  // Fixed columns keep every bar starting and ending on the same screen column.
+  const barWidth = () => Math.max(4, props.lineMax - 18)
+  return (
+    <box flexDirection="row" onMouseUp={props.onSelect}>
+      <text fg={fg()}>{`${props.spec.char} `}</text>
+      <ClickText fg={props.colors.textMuted} underline={Boolean(props.onSelect)}>
+        {props.label.padEnd(5)}
+      </ClickText>
+      <text fg={fg()}>{` ${shareBar(props.share, barWidth())}`}</text>
+      <text fg={props.colors.textMuted}>
+        {` ${formatPercent(props.share).padStart(4)} ${formatSpan(props.ms).padStart(4)}`}
+      </text>
+    </box>
+  )
+}
+
+function ModelRow(props: {
+  model: ModelPerf
+  colors: ThemeColors
+  lineMax: number
+  /** Fast glyph tick — read only in the live glyph. */
+  glyphFrame: () => number
+  live: boolean
+}): JSX.Element {
+  const m = () => props.model
+  const stacked = () =>
+    packStackedRow(
+      m().model,
+      [
+        { text: `${m().turns}×`, rank: 2 },
+        { text: m().waitMs != null ? `↑${formatDuration(m().waitMs)}` : "", rank: 0 },
+        { text: m().thinkMs != null ? `∴${formatDuration(m().thinkMs)}` : "", rank: 3 },
+        { text: m().recvMs != null ? `↓${formatDuration(m().recvMs)}` : "", rank: 1 },
+        { text: formatRate(m().tokensPerSec), rank: 4 },
+      ],
+      props.lineMax,
+    )
+  const name = () => stacked().name
+  const chips = () => stacked().chips
+  const chipFg = (_chip: Chip): string => props.colors.textMuted
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row">
+        <text fg={props.live ? props.colors.success : props.colors.textMuted}>
+          {`${props.live ? spinnerFrame(props.glyphFrame()) : "•"} `}
+        </text>
+        <text fg={props.colors.text}>{name()}</text>
+      </box>
+      <box flexDirection="row" paddingLeft={2}>
+        <For each={chips()}>
+          {(chip, i) => (
+            <text fg={chipFg(chip)}>{i() === 0 ? chip.text : ` ${chip.text}`}</text>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}
+
+function ToolRow(props: {
+  tool: ToolPerf
+  share: number | null
+  colors: ThemeColors
+  lineMax: number
+  onSelect?: () => void
+}): JSX.Element {
+  const t = () => props.tool
+  const chips = (): Chip[] => [
+    { text: `${t().count}×`, rank: 2 },
+    { text: formatDuration(t().avgMs), rank: 0 },
+    { text: t().errors > 0 ? `×${t().errors}` : "", rank: 1 },
+    { text: shareBar(props.share, 4), rank: 3 },
+  ]
+  const chipFg = (chip: Chip): string => {
+    if (chip.text.startsWith("×")) return props.colors.error || props.colors.text
+    return props.colors.textMuted
+  }
+  return (
+    <MetricRow
+      glyph={t().errors > 0 ? "×" : "→"}
+      glyphFg={t().errors > 0 ? props.colors.error || props.colors.text : props.colors.textMuted}
+      name={t().name}
+      nameFg={props.colors.text}
+      chips={chips()}
+      chipFg={chipFg}
+      lineMax={props.lineMax}
+      minName={6}
+      onSelect={props.onSelect}
+    />
+  )
+}
+
+function HistoryRow(props: {
+  row: SessionPerf
+  colors: ThemeColors
+  lineMax: number
+  current: boolean
+  onSelect: () => void
+}): JSX.Element {
+  const r = () => props.row
+  const chips = (): Chip[] => [
+    { text: `${r().turns}×`, rank: 2 },
+    { text: r().waitMs != null ? `↑${formatDuration(r().waitMs)}` : "", rank: 0 },
+    { text: r().toolShare != null ? `→${formatPercent(r().toolShare)}` : "", rank: 1 },
+  ]
+  const chipFg = (_chip: Chip): string => props.colors.textMuted
+  return (
+    <MetricRow
+      glyph="•"
+      glyphFg={props.colors.textMuted}
+      name={r().title}
+      nameFg={props.colors.text}
+      bold={props.current}
+      chips={chips()}
+      chipFg={chipFg}
+      lineMax={props.lineMax}
+      minName={8}
+      onSelect={props.onSelect}
+    />
+  )
+}
+
+function TrendChart(props: {
+  label: string
+  values: Array<number | null>
+  fg: string
+  colors: ThemeColors
+  lineMax: number
+}): JSX.Element {
+  const lines = () =>
+    asciiTrend(props.values, { width: Math.max(8, props.lineMax - 10), height: 3 }).split("\n")
+  return (
+    <box flexDirection="column">
+      <text fg={props.colors.textMuted}>{props.label}</text>
+      <For each={lines()}>
+        {(line) => <text fg={props.fg}>{line || " "}</text>}
+      </For>
+    </box>
+  )
+}
+
+export type PerfPanelProps = {
+  api: TuiPluginApi
+  perf: PerfSnapshot
+  colors: ThemeColors
+  lineMax: number
+  rows: number
+  /** Fast glyph tick — read only in the live glyph, so the panel is not rebuilt per tick. */
+  glyphFrame: () => number
+  /** Phase the watched session is in right now, plus how long it has lasted. */
+  livePhase: FlowDir | null
+  livePhaseMs: number | null
+  currentSessionId: string
+  dbPath: string
+  turns: number
+  onSelect: (sessionId: string) => void
+}
+
+export function PerfPanel(props: PerfPanelProps): JSX.Element {
+  const foldModels = useFold(props.api, KV_FOLD_MODELS)
+  const foldTime = useFold(props.api, KV_FOLD_TIME)
+  const foldTools = useFold(props.api, KV_FOLD_TOOLS)
+  const foldTrend = useFold(props.api, KV_FOLD_TREND)
+  const foldHistory = useFold(props.api, KV_FOLD_HISTORY)
+
+  const totals = () => props.perf.totals
+  const wall = () => Math.max(1, totals().wallMs)
+  const activeTimeMs = () => Math.max(0, totals().wallMs - totals().phases.idle)
+  const phases = () =>
+    PHASES.map((p) => ({ ...p, ms: totals().phases[p.key] })).filter(
+      (p) => p.ms > 0 || p.key === PERF_PHASE_WAIT || p.key === PERF_PHASE_TOOL,
+    )
+  const modelsReveal = useReveal(props.rows)
+  const toolsReveal = useReveal(props.rows)
+  const historyReveal = useReveal(props.rows)
+  const toolTotal = () => props.perf.tools.reduce((sum, t) => sum + t.totalMs, 0)
+  const trendWait = () => props.perf.trend.map((p) => p.waitMs)
+  const trendRate = () => props.perf.trend.map((p) => p.tokensPerSec)
+  const hasTrend = () =>
+    props.perf.trend.length > 1 &&
+    (trendWait().some((v) => v != null) || trendRate().some((v) => v != null))
+
+  const openLog = (kind: PerfLogKind, toolFilter?: string) =>
+    openPerfLog(props.api, props.colors, {
+      dbPath: props.dbPath,
+      sessionId: props.currentSessionId,
+      turns: props.turns,
+      kind,
+      toolFilter,
+    })
+
+  const openCharts = () =>
+    openPerfCharts(props.api, props.colors, {
+      perf: props.perf,
+      currentSessionId: props.currentSessionId,
+    })
+
+  const liveLabel = () => {
+    const dir = props.livePhase
+    if (!dir) return null
+    const label = dir === FLOW_WAIT ? "wait" : dir === FLOW_RECV ? "recv" : "tool"
+    const fg = toneColor(directionGlyph(dir)!.tone, props.colors)
+    return { label, fg, ms: props.livePhaseMs }
+  }
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <Show when={liveLabel()}>
+        {(live) => (
+          <box flexDirection="row">
+            <text fg={live().fg}>{`${spinnerFrame(props.glyphFrame())} ${live().label}`}</text>
+            <text fg={props.colors.textMuted}>
+              {live().ms != null ? ` ${formatDuration(live().ms)}` : ""}
+            </text>
+          </box>
+        )}
+      </Show>
+
+      <Show when={props.perf.totals.turns > 0} fallback={null}>
+        <box flexDirection="column" gap={1}>
+          <FoldSection
+            title="Models"
+            open={foldModels.open()}
+            count={props.perf.models.length}
+            suffix={tokenSummary(totals())}
+            colors={props.colors}
+            onToggle={foldModels.toggle}
+            onDetail={() => openLog(PERF_LOG_KIND_MODELS)}
+          >
+            <RowList
+              items={props.perf.models}
+              budget={props.rows + modelsReveal.more()}
+              colors={props.colors}
+              renderItem={(m) => (
+                <ModelRow
+                  model={m}
+                  colors={props.colors}
+                  lineMax={props.lineMax}
+                  glyphFrame={props.glyphFrame}
+                  live={Boolean(props.livePhase) && m === props.perf.models[0]}
+                />
+              )}
+              more={{ onReveal: modelsReveal.reveal }}
+            />
+          </FoldSection>
+
+          <FoldSection
+            title="Time"
+            open={foldTime.open()}
+            suffix={timeSummary({
+              turns: totals().turns,
+              durationMs: activeTimeMs(),
+              errors: totals().errors,
+              aborts: totals().aborts,
+            })}
+            colors={props.colors}
+            onToggle={foldTime.toggle}
+            onDetail={() => openLog(PERF_LOG_KIND_TIME)}
+          >
+            <For each={phases()}>
+              {(p) => (
+                <PhaseRow
+                  spec={p.spec}
+                  label={p.label}
+                  ms={p.ms}
+                  share={p.ms / wall()}
+                  colors={props.colors}
+                  lineMax={props.lineMax}
+                  onSelect={() => openLog(p.key)}
+                />
+              )}
+            </For>
+          </FoldSection>
+
+          <Show when={props.perf.tools.length > 0}>
+              <FoldSection
+                title="Slow tools"
+                open={foldTools.open()}
+                count={props.perf.tools.length}
+                suffix={formatSpan(toolTotal())}
+                colors={props.colors}
+                onToggle={foldTools.toggle}
+                onDetail={() => openLog(PERF_PHASE_TOOL)}
+              >
+                <RowList
+                  items={props.perf.tools}
+                  budget={props.rows + toolsReveal.more()}
+                  colors={props.colors}
+                  renderItem={(t) => (
+                    <ToolRow
+                      tool={t}
+                      share={toolTotal() > 0 ? t.totalMs / toolTotal() : null}
+                      colors={props.colors}
+                      lineMax={props.lineMax}
+                      onSelect={() => openLog(PERF_PHASE_TOOL, t.name)}
+                    />
+                  )}
+                  more={{ onReveal: toolsReveal.reveal }}
+                />
+              </FoldSection>
+          </Show>
+
+          <Show when={hasTrend()}>
+              <FoldSection
+                title="Trend"
+                open={foldTrend.open()}
+                count={props.perf.trend.length}
+                colors={props.colors}
+                onToggle={foldTrend.toggle}
+                onDetail={() => openCharts()}
+              >
+                <TrendChart
+                  label={PERF_PHASE_WAIT}
+                  values={trendWait()}
+                  fg={props.colors.warning || props.colors.text}
+                  colors={props.colors}
+                  lineMax={props.lineMax}
+                />
+                <TrendChart
+                  label="tok/s"
+                  values={trendRate()}
+                  fg={props.colors.success}
+                  colors={props.colors}
+                  lineMax={props.lineMax}
+                />
+              </FoldSection>
+          </Show>
+
+          <Show when={props.perf.history.length > 0}>
+            <FoldSection
+              title="History"
+              open={foldHistory.open()}
+              count={props.perf.history.length}
+              colors={props.colors}
+              onToggle={foldHistory.toggle}
+            >
+              <RowList
+                items={props.perf.history}
+                budget={props.rows + historyReveal.more()}
+                colors={props.colors}
+                renderItem={(row) => (
+                  <HistoryRow
+                    row={row}
+                    colors={props.colors}
+                    lineMax={props.lineMax}
+                    current={row.id === props.currentSessionId}
+                    onSelect={() => props.onSelect(row.id)}
+                  />
+                )}
+                more={{ onReveal: historyReveal.reveal }}
+              />
+            </FoldSection>
+          </Show>
+        </box>
+      </Show>
+    </box>
+  )
+}

package/src/pware.oc.runtime/index.ts

@@ -0,0 +1,13 @@
+/**
+ * pware.oc.runtime
+ *
+ * Runtime composition: the only layer that combines opencode + omo into one
+ * snapshot, plus the monitor that keeps it fresh and the My work queue.
+ */
+export * from "./pware.oc.runtime.monitor.js"
+export * from "./pware.oc.runtime.source.js"
+export * from "./pware.oc.runtime.snapshotClient.js"
+export * from "./pware.oc.runtime.mywork.js"
+export * from "./pware.oc.runtime.mywork-enrich.js"
+export * from "./pware.oc.runtime.questions.js"
+export * from "./resolver/index.js"