herm-tui 1.0.0-dev.1 → 1.0.0-dev.3

package/src/tabs/Analytics.tsx

@@ -1,154 +0,0 @@
-import { useState, useEffect, useCallback, useMemo, memo } from "react"
-import { useKeyboard, useTerminalDimensions } from "@opentui/react"
-import type { RGBA } from "@opentui/core"
-import { analytics, type Analytics as Data, type NameRow } from "../utils/hermes-analytics"
-import { useKeys } from "../keys"
-import { useTheme } from "../theme"
-import { TabShell } from "../ui/shell"
-import { Col, Hdr } from "../ui/table"
-import { fmt, cost, trunc } from "../ui/fmt"
-
-// ─── Charts ──────────────────────────────────────────────────────────
-
-const BLOCKS = " ▁▂▃▄▅▆▇█"
-
-// Multi-row vertical bar chart. Each column is one datum; each row is
-// a vertical slice rendered bottom-up with 1/8-block glyphs, so a
-// 7-row chart has 56 intensity levels — enough to see day-over-day
-// movement that a single-row sparkline flattens.
-const rows = (vals: number[], h: number): string[] => {
-  const peak = Math.max(1, ...vals)
-  const ticks = vals.map(v => Math.round((h * 8 * v) / peak))
-  return Array.from({ length: h }, (_, r) => {
-    const floor = (h - 1 - r) * 8
-    return ticks.map(t => BLOCKS[Math.max(0, Math.min(8, t - floor))]).join("")
-  })
-}
-
-const Chart = memo((p: { data: Data; h: number }) => {
-  const theme = useTheme().theme
-  const days = p.data.byDay
-  const vals = days.map(d => d.cost)
-  const peak = Math.max(...vals, 0.01)
-  const axis = (v: number) => cost(v).padStart(7)
-  const md = (s: string) => s.slice(5)   // yyyy-mm-dd → mm-dd
-  return (
-    <box flexDirection="column">
-      {rows(vals, p.h).map((line, i) => (
-        <box key={i} height={1} flexDirection="row">
-          <box width={8} flexShrink={0}>
-            <text fg={theme.textMuted}>
-              {i === 0 ? axis(peak) : i === p.h - 1 ? axis(0) : ""}
-            </text>
-          </box>
-          <text fg={theme.primary}>{line}</text>
-        </box>
-      ))}
-      <box height={1} flexDirection="row">
-        <box width={8} flexShrink={0} />
-        <text fg={theme.textMuted}>
-          {days.length > 0
-            ? `${md(days[0].date)}${" ".repeat(Math.max(0, days.length - 10))}${md(days[days.length - 1].date)}`
-            : ""}
-        </text>
-      </box>
-    </box>
-  )
-})
-
-// Ranked name+count list with horizontal bar. Shared by Tools/Sources.
-const Rank = memo((p: { title: string; rows: NameRow[]; fg: RGBA; n?: number }) => {
-  const theme = useTheme().theme
-  const top = p.rows.slice(0, p.n ?? 10)
-  const peak = Math.max(1, ...top.map(r => r.n))
-  const total = p.rows.reduce((a, r) => a + r.n, 0)
-  return (
-    <box flexDirection="column" flexGrow={1} flexBasis={0} minWidth={0}>
-      <box height={1}><text fg={theme.textMuted}>{p.title}</text></box>
-      {top.length === 0
-        ? <box height={1}><text fg={theme.textMuted}>—</text></box>
-        : top.map(r => (
-            <box key={r.name} height={1} flexDirection="row">
-              <Col w={18}>{trunc(r.name, 17)}</Col>
-              <Col w={12} fg={p.fg}>{"▇".repeat(Math.max(1, Math.round(10 * r.n / peak)))}</Col>
-              <Col w={7} right>{fmt(r.n)}</Col>
-              <Col w={6} right fg={theme.textMuted}>
-                {total ? `${Math.round(100 * r.n / total)}%` : ""}
-              </Col>
-            </box>
-          ))}
-    </box>
-  )
-})
-
-// ─── Tab ─────────────────────────────────────────────────────────────
-
-export const Analytics = memo((props: { focused?: boolean }) => {
-  const theme = useTheme().theme
-  const dims = useTerminalDimensions()
-  const [days, setDays] = useState(7)
-  const [data, setData] = useState<Data>(() => analytics(7))
-
-  const load = useCallback(() => setData(analytics(days)), [days])
-  useEffect(load, [load])
-
-  const keys = useKeys()
-  useKeyboard((key) => {
-    if (!props.focused) return
-    if (keys.match("list.refresh", key)) return load()
-    if (key.raw === "1") return setDays(1)
-    if (key.raw === "7") return setDays(7)
-    if (key.raw === "3") return setDays(30)
-    if (key.raw === "9") return setDays(90)
-  })
-
-  const t = data.total
-  const tok = t.input + t.output
-  const title = useMemo(() =>
-    `Analytics · ${days}d · ${t.sessions} sess · ${fmt(tok)} tok · ${cost(t.cost)}`,
-    [days, t.sessions, tok, t.cost])
-
-  const wide = dims.width >= 110
-  const chartH = dims.height >= 40 ? 8 : 6
-
-  return (
-    <TabShell title={title} hint="1/7/3/9 period · r reload">
-      <box height={1}><text fg={theme.textMuted}>
-        {`Cost per day  ·  ${fmt(t.input)} in · ${fmt(t.output)} out · ${fmt(t.cache)} cache · ${fmt(t.calls)} tool calls`}
-      </text></box>
-      <Chart data={data} h={chartH} />
-
-      <box height={1} />
-      <Hdr>
-        <Col grow min={18} fg={theme.textMuted}>Model</Col>
-        <Col w={6} right fg={theme.textMuted}>sess</Col>
-        <Col w={9} right fg={theme.textMuted}>in</Col>
-        <Col w={9} right fg={theme.textMuted}>out</Col>
-        <Col w={9} right fg={theme.textMuted}>cache</Col>
-        <Col w={9} right fg={theme.textMuted}>cost</Col>
-      </Hdr>
-      <scrollbox scrollY flexGrow={1}>
-        <box flexDirection="column" width="100%">
-          {data.byModel.length === 0
-            ? <box height={1}><text fg={theme.textMuted}>no sessions in range</text></box>
-            : data.byModel.map(m => (
-                <box key={m.model} height={1} flexDirection="row">
-                  <Col grow min={18}>{trunc(m.model, 40)}</Col>
-                  <Col w={6} right fg={theme.textMuted}>{String(m.sessions)}</Col>
-                  <Col w={9} right>{fmt(m.input)}</Col>
-                  <Col w={9} right>{fmt(m.output)}</Col>
-                  <Col w={9} right fg={theme.textMuted}>{fmt(m.cache)}</Col>
-                  <Col w={9} right fg={theme.accent}>{cost(m.cost)}</Col>
-                </box>
-              ))}
-        </box>
-      </scrollbox>
-
-      <box height={1} />
-      <box flexDirection={wide ? "row" : "column"} gap={wide ? 2 : 1}>
-        <Rank title="Tools" rows={data.byTool} fg={theme.success} />
-        <Rank title="Sources" rows={data.bySource} fg={theme.info} n={6} />
-      </box>
-    </TabShell>
-  )
-})

package/src/tabs/Chat.tsx

@@ -1,50 +0,0 @@
-import { memo } from "react"
-import { MessageList } from "../components/chat/MessageList"
-import type { PromptWire } from "../components/chat/MessageItem"
-import { ThoughtCloud } from "../components/chat/ThoughtCloud"
-import { useTheme } from "../theme"
-import type { Message } from "../types/message"
-
-export const Chat = memo(({
-  messages,
-  streaming,
-  prompt,
-  cloud,
-  cloudH,
-  pick,
-  onResize,
-  onPick,
-  onClose,
-  onRewind,
-}: {
-  messages: Message[]
-  streaming: boolean
-  prompt?: PromptWire
-  cloud: boolean
-  cloudH: number
-  pick?: Message
-  onResize: (h: number) => void
-  onPick: (m?: Message) => void
-  onClose: () => void
-  onRewind?: (m: Message) => void
-}) => {
-  const theme = useTheme().theme
-  return (
-    <box
-      flexGrow={1}
-      flexDirection="column"
-      position="relative"
-      backgroundColor={theme.background}
-    >
-      <MessageList messages={messages} streaming={streaming} prompt={prompt} onRewind={onRewind} onPick={onPick} />
-      {cloud ? (
-        <box position="absolute" top={0} left={0} right={0} zIndex={1}>
-          <ThoughtCloud
-            height={cloudH} messages={messages}
-            pick={pick} onResize={onResize} onClose={onClose}
-          />
-        </box>
-      ) : null}
-    </box>
-  )
-})