compressed-context 0.1.0 → 0.1.1

package/src/tui/panel/data.ts

@@ -1,105 +1,105 @@
-import type { Context } from "@opencode/plugin/tui/context"
-import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
-
-import type { SummaryBlock } from "../../shared/blocks.ts"
-import type { CacheSample } from "../../shared/cache.ts"
-import { contextRpc } from "../../shared/rpc.ts"
-import type { Settings } from "../../shared/settings.ts"
-import { parseStats, STATS_KEY, TERMINAL_KEY, type ContextStats } from "../../shared/stats.ts"
-
-/** Panel 需要的服务端数据；全部是响应式 accessor。 */
-export interface PanelData {
-  readonly stats: Accessor<ContextStats | undefined>
-  readonly terminal: Accessor<string | undefined>
-  readonly cache: Accessor<readonly CacheSample[]>
-  readonly blocks: Accessor<readonly SummaryBlock[]>
-}
-
-/**
- * 输入：TUI 上下文 + sessionID + 设置 accessor。
- * 输出：统计 / 终止原因 / 缓存历史 / 摘要块。
- * 预期：挂载时拉取，usage/compaction/idle 时刷新；设置开关变化时重新拉取。
- */
-export function usePanelData(input: {
-  readonly context: Context
-  readonly sessionID: string
-  readonly settings: Accessor<Settings>
-}): PanelData {
-  const [stats, setStats] = createSignal<ContextStats>()
-  const [terminal, setTerminal] = createSignal<string>()
-  const [cache, setCache] = createSignal<readonly CacheSample[]>([])
-  const [blocks, setBlocks] = createSignal<readonly SummaryBlock[]>([])
-  const rpc = () => contextRpc(input.context.client)
-
-  /** 输入：无；输出：无；预期：从服务端拉取该会话持久化的缓存历史。 */
-  const refreshCache = async (): Promise<void> => {
-    try {
-      const got = await rpc().cacheHistoryGet({ sessionID: input.sessionID })
-      setCache(got.samples)
-    } catch {
-      // server plugin not loaded；保留上一次数据
-    }
-  }
-
-  /** 输入：无；输出：无；预期：从服务端拉取 active 摘要链。 */
-  const refreshBlocks = async (): Promise<void> => {
-    if (!input.settings().showSummaries) return
-    try {
-      const got = await rpc().blocksGet({ sessionID: input.sessionID })
-      setBlocks(got.blocks)
-    } catch {
-      // server plugin not loaded；保留上一次数据
-    }
-  }
-
-  /** 输入：无；输出：无；预期：从服务端重新拉取 session metadata 里的统计。 */
-  const refresh = async (): Promise<void> => {
-    try {
-      const info = await input.context.client.session.get({ sessionID: input.sessionID })
-      setStats(parseStats(info.metadata?.[STATS_KEY]))
-      const rawTerminal = info.metadata?.[TERMINAL_KEY]
-      setTerminal(typeof rawTerminal === "string" ? rawTerminal : undefined)
-    } catch {
-      // 统计缺失不影响主界面，保持上一次的值
-    }
-  }
-
-  // 显示开关变化时重新拉取；首次挂载也会跑一次。
-  createEffect(() => {
-    if (input.settings().showCacheChart || input.settings().showCacheLog) void refreshCache()
-  })
-  createEffect(() => {
-    if (input.settings().showSummaries) void refreshBlocks()
-  })
-
-  createEffect(() => {
-    void refresh()
-  })
-
-  onCleanup(
-    input.context.data.on("session.usage.updated", (event) => {
-      if (event.data.sessionID !== input.sessionID) return
-      void refresh()
-      // 缓存历史由服务端在 usage.updated 时补写；这里同步刷新面板。
-      if (input.settings().showCacheChart || input.settings().showCacheLog) void refreshCache()
-    }),
-  )
-  onCleanup(
-    input.context.data.on("session.compaction.ended", (event) => {
-      if (event.data.sessionID !== input.sessionID) return
-      void refresh()
-      void refreshCache()
-      void refreshBlocks()
-    }),
-  )
-  onCleanup(
-    input.context.data.on("session.idle", (event) => {
-      if (event.data.sessionID !== input.sessionID) return
-      void refresh()
-      void refreshCache()
-      void refreshBlocks()
-    }),
-  )
-
-  return { stats, terminal, cache, blocks }
-}
+import type { Context } from "@opencode/plugin/tui/context"
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
+
+import type { SummaryBlock } from "../../shared/blocks.ts"
+import type { CacheSample } from "../../shared/cache.ts"
+import { contextRpc } from "../../shared/rpc.ts"
+import type { Settings } from "../../shared/settings.ts"
+import { parseStats, STATS_KEY, TERMINAL_KEY, type ContextStats } from "../../shared/stats.ts"
+
+/** Panel 需要的服务端数据；全部是响应式 accessor。 */
+export interface PanelData {
+  readonly stats: Accessor<ContextStats | undefined>
+  readonly terminal: Accessor<string | undefined>
+  readonly cache: Accessor<readonly CacheSample[]>
+  readonly blocks: Accessor<readonly SummaryBlock[]>
+}
+
+/**
+ * 输入：TUI 上下文 + sessionID + 设置 accessor。
+ * 输出：统计 / 终止原因 / 缓存历史 / 摘要块。
+ * 预期：挂载时拉取，usage/compaction/idle 时刷新；设置开关变化时重新拉取。
+ */
+export function usePanelData(input: {
+  readonly context: Context
+  readonly sessionID: string
+  readonly settings: Accessor<Settings>
+}): PanelData {
+  const [stats, setStats] = createSignal<ContextStats>()
+  const [terminal, setTerminal] = createSignal<string>()
+  const [cache, setCache] = createSignal<readonly CacheSample[]>([])
+  const [blocks, setBlocks] = createSignal<readonly SummaryBlock[]>([])
+  const rpc = () => contextRpc(input.context.client)
+
+  /** 输入：无；输出：无；预期：从服务端拉取该会话持久化的缓存历史。 */
+  const refreshCache = async (): Promise<void> => {
+    try {
+      const got = await rpc().cacheHistoryGet({ sessionID: input.sessionID })
+      setCache(got.samples)
+    } catch {
+      // server plugin not loaded；保留上一次数据
+    }
+  }
+
+  /** 输入：无；输出：无；预期：从服务端拉取 active 摘要链。 */
+  const refreshBlocks = async (): Promise<void> => {
+    if (!input.settings().showSummaries) return
+    try {
+      const got = await rpc().blocksGet({ sessionID: input.sessionID })
+      setBlocks(got.blocks)
+    } catch {
+      // server plugin not loaded；保留上一次数据
+    }
+  }
+
+  /** 输入：无；输出：无；预期：从服务端重新拉取 session metadata 里的统计。 */
+  const refresh = async (): Promise<void> => {
+    try {
+      const info = await input.context.client.session.get({ sessionID: input.sessionID })
+      setStats(parseStats(info.metadata?.[STATS_KEY]))
+      const rawTerminal = info.metadata?.[TERMINAL_KEY]
+      setTerminal(typeof rawTerminal === "string" ? rawTerminal : undefined)
+    } catch {
+      // 统计缺失不影响主界面，保持上一次的值
+    }
+  }
+
+  // 显示开关变化时重新拉取；首次挂载也会跑一次。
+  createEffect(() => {
+    if (input.settings().showCacheChart || input.settings().showCacheLog) void refreshCache()
+  })
+  createEffect(() => {
+    if (input.settings().showSummaries) void refreshBlocks()
+  })
+
+  createEffect(() => {
+    void refresh()
+  })
+
+  onCleanup(
+    input.context.data.on("session.usage.updated", (event) => {
+      if (event.data.sessionID !== input.sessionID) return
+      void refresh()
+      // 缓存历史由服务端在 usage.updated 时补写；这里同步刷新面板。
+      if (input.settings().showCacheChart || input.settings().showCacheLog) void refreshCache()
+    }),
+  )
+  onCleanup(
+    input.context.data.on("session.compaction.ended", (event) => {
+      if (event.data.sessionID !== input.sessionID) return
+      void refresh()
+      void refreshCache()
+      void refreshBlocks()
+    }),
+  )
+  onCleanup(
+    input.context.data.on("session.idle", (event) => {
+      if (event.data.sessionID !== input.sessionID) return
+      void refresh()
+      void refreshCache()
+      void refreshBlocks()
+    }),
+  )
+
+  return { stats, terminal, cache, blocks }
+}

package/src/tui/panel/index.tsx

@@ -1,176 +1,176 @@
-import type { Context } from "@opencode/plugin/tui/context"
-import { createMemo, For, Show } from "solid-js"
-
-import { resolveMessages } from "../../i18n/index.ts"
-import { formatTokens } from "../../shared/format.ts"
-import { effectiveLimit, localeArgument, type Settings } from "../../shared/settings.ts"
-import { scaleCategories } from "../../shared/stats.ts"
-import { mix, toHex, toRgb, type Rgb } from "../chart/color.ts"
-import type { UpdateSettings } from "../types.ts"
-import { CacheSection } from "./cache.tsx"
-import { usePanelData } from "./data.ts"
-import { SummarySection } from "./summaries.tsx"
-
-/**
- * 输入：该分类占上下文总量的百分比 + 主题。
- * 输出：0%-50%-100% 依次绿-黄-红的连续插值。
- * 预期：每个百分比都有独立颜色；主题色不可解析时回退到内置色。
- */
-function occupancyColor(pct: number, theme: Context["theme"]): string {
-  const green = toRgb(theme.text.feedback.success.base) ?? ([34, 197, 94] as Rgb)
-  const yellow = toRgb(theme.text.feedback.warning.base) ?? ([234, 179, 8] as Rgb)
-  const red = toRgb(theme.text.feedback.error.base) ?? ([239, 68, 68] as Rgb)
-  const ratio = Math.min(1, Math.max(0, pct / 100))
-  if (ratio <= 0.5) return toHex(mix(green, yellow, ratio * 2))
-  return toHex(mix(yellow, red, (ratio - 0.5) * 2))
-}
-
-/**
- * 输入：0-100 的百分比。
- * 输出：OpenTUI 的百分比宽度类型 `${number}%`。
- * 预期：先转字符串再断言——模板里直接插数字会被 lint 规则拦住，
- *       而 OpenTUI 只接受 `${number}%` 这种字面量类型。
- */
-function percentWidth(value: number): `${number}%` {
-  const clamped = Math.min(100, Math.max(0, value))
-  return `${clamped.toString()}%` as `${number}%`
-}
-
-/**
- * 输入：TUI 上下文 + sessionID + 设置。
- * 输出：侧栏里的上下文分类面板（可折叠），外加缓存命中与摘要块。
- * 预期：分类条总量交给内置 Context 区块；缓存历史由服务端持久化，TUI 只读。
- */
-export function Panel(props: {
-  readonly context: Context
-  readonly sessionID: string
-  readonly settings: Settings
-  readonly updateSettings: UpdateSettings
-}) {
-  const theme = props.context.theme
-  const copy = createMemo(() => resolveMessages(localeArgument(props.settings.locale)))
-  const data = usePanelData({
-    context: props.context,
-    sessionID: props.sessionID,
-    settings: () => props.settings,
-  })
-
-  const session = createMemo(() => props.context.data.session.get(props.sessionID))
-  const messages = createMemo(() => props.context.data.session.message.list(props.sessionID))
-
-  /** 最后一条 assistant；模型上限和 usage 分开取，避免 provider 没给 usage 时连上限都丢。 */
-  const lastAssistant = createMemo(() => {
-    const list = messages()
-    for (let index = list.length - 1; index >= 0; index -= 1) {
-      const message = list[index]
-      if (message?.type === "assistant") return message
-    }
-    return undefined
-  })
-
-  /** 模型原生窗口：从最后一条 assistant 的模型解析。 */
-  const nativeLimit = createMemo(() => {
-    const message = lastAssistant()
-    if (message === undefined) return 0
-    const model = props.context.data.location.model
-      .list(session()?.location)
-      ?.find((item) => item.providerID === message.model.providerID && item.id === message.model.id)
-    return model?.limit.context ?? 0
-  })
-
-  /** 真实 prompt token：只算 input + cache，output/reasoning 不属于本轮输入。 */
-  const realUsed = createMemo(() => {
-    const tokens = lastAssistant()?.tokens
-    if (tokens === undefined) return undefined
-    const used = tokens.input + tokens.cache.read + tokens.cache.write
-    return used > 0 ? used : undefined
-  })
-
-  /** 上下文占用：真实 usage 优先，缺失时才回退到服务端估算。 */
-  const contextTokens = createMemo(() => realUsed() ?? data.stats()?.estimatedTotal ?? 0)
-
-  /** 实际生效的上下文上限：自定义优先，否则模型原生。 */
-  const limit = createMemo(() => effectiveLimit(props.settings, nativeLimit()))
-
-  /** 仅当用户自定义上限时展示百分比（auto 时内置区块已经显示了）。 */
-  const percent = createMemo(() => {
-    const max = limit()
-    if (max === undefined || max <= 0) return undefined
-    return Math.round((contextTokens() / max) * 100)
-  })
-
-  const rows = createMemo(() => {
-    const value = data.stats()
-    if (value === undefined || value.estimatedTotal <= 0) return []
-    return scaleCategories(value, contextTokens()).filter((row) => row.value > 0)
-  })
-
-  const toggleExpanded = (): void => {
-    void props.updateSettings((draft) => {
-      draft.expanded = !draft.expanded
-    })
-  }
-
-  return (
-    <Show when={props.settings.enabled}>
-      <box width="100%" flexDirection="column">
-        <box flexDirection="row" height={1} onMouseDown={toggleExpanded}>
-          <box flexDirection="row" gap={1}>
-            <text fg={theme.text.base}>{props.settings.expanded ? "▼" : "▶"}</text>
-            <text fg={theme.text.base}>
-              <b>{copy().title}</b>
-            </text>
-            <Show when={props.settings.contextLimit !== "auto" && percent() !== undefined}>
-              <text fg={occupancyColor(percent() ?? 0, theme)}>
-                {`(${(percent() ?? 0).toString()}%)`}
-              </text>
-            </Show>
-          </box>
-        </box>
-        <Show when={data.terminal()}>
-          <text fg={theme.text.feedback.error.base} wrapMode="word">
-            {`⚠ ${copy().terminal}`}
-          </text>
-        </Show>
-        <Show when={props.settings.expanded}>
-          <box flexDirection="column" width="100%" paddingLeft={2}>
-            <For each={rows()}>
-              {(row) => (
-                <box flexDirection="row" height={1} gap={1}>
-                  <text fg={theme.text.muted} width={10} flexShrink={0}>
-                    {copy().labels[row.key]}
-                  </text>
-                  <box flexGrow={1} height={1} backgroundColor={theme.background.raised.high}>
-                    <box height={1} width={percentWidth(row.pct)} backgroundColor={occupancyColor(row.pct, theme)} />
-                  </box>
-                  <text fg={theme.text.muted} width={4} flexShrink={0} textAlign="right">
-                    {`${row.pct.toString()}%`}
-                  </text>
-                  <text fg={theme.text.muted} width={7} flexShrink={0} textAlign="right">
-                    {`${copy().approximate}${formatTokens(row.value)}`}
-                  </text>
-                </box>
-              )}
-            </For>
-          </box>
-        </Show>
-
-        <CacheSection
-          theme={theme}
-          copy={copy()}
-          settings={props.settings}
-          updateSettings={props.updateSettings}
-          samples={data.cache()}
-        />
-        <SummarySection
-          context={props.context}
-          theme={theme}
-          copy={copy()}
-          settings={props.settings}
-          updateSettings={props.updateSettings}
-          blocks={data.blocks()}
-        />
-      </box>
-    </Show>
-  )
-}
+import type { Context } from "@opencode/plugin/tui/context"
+import { createMemo, For, Show } from "solid-js"
+
+import { resolveMessages } from "../../i18n/index.ts"
+import { formatTokens } from "../../shared/format.ts"
+import { effectiveLimit, localeArgument, type Settings } from "../../shared/settings.ts"
+import { scaleCategories } from "../../shared/stats.ts"
+import { mix, toHex, toRgb, type Rgb } from "../chart/color.ts"
+import type { UpdateSettings } from "../types.ts"
+import { CacheSection } from "./cache.tsx"
+import { usePanelData } from "./data.ts"
+import { SummarySection } from "./summaries.tsx"
+
+/**
+ * 输入：该分类占上下文总量的百分比 + 主题。
+ * 输出：0%-50%-100% 依次绿-黄-红的连续插值。
+ * 预期：每个百分比都有独立颜色；主题色不可解析时回退到内置色。
+ */
+function occupancyColor(pct: number, theme: Context["theme"]): string {
+  const green = toRgb(theme.text.feedback.success.base) ?? ([34, 197, 94] as Rgb)
+  const yellow = toRgb(theme.text.feedback.warning.base) ?? ([234, 179, 8] as Rgb)
+  const red = toRgb(theme.text.feedback.error.base) ?? ([239, 68, 68] as Rgb)
+  const ratio = Math.min(1, Math.max(0, pct / 100))
+  if (ratio <= 0.5) return toHex(mix(green, yellow, ratio * 2))
+  return toHex(mix(yellow, red, (ratio - 0.5) * 2))
+}
+
+/**
+ * 输入：0-100 的百分比。
+ * 输出：OpenTUI 的百分比宽度类型 `${number}%`。
+ * 预期：先转字符串再断言——模板里直接插数字会被 lint 规则拦住，
+ *       而 OpenTUI 只接受 `${number}%` 这种字面量类型。
+ */
+function percentWidth(value: number): `${number}%` {
+  const clamped = Math.min(100, Math.max(0, value))
+  return `${clamped.toString()}%` as `${number}%`
+}
+
+/**
+ * 输入：TUI 上下文 + sessionID + 设置。
+ * 输出：侧栏里的上下文分类面板（可折叠），外加缓存命中与摘要块。
+ * 预期：分类条总量交给内置 Context 区块；缓存历史由服务端持久化，TUI 只读。
+ */
+export function Panel(props: {
+  readonly context: Context
+  readonly sessionID: string
+  readonly settings: Settings
+  readonly updateSettings: UpdateSettings
+}) {
+  const theme = props.context.theme
+  const copy = createMemo(() => resolveMessages(localeArgument(props.settings.locale)))
+  const data = usePanelData({
+    context: props.context,
+    sessionID: props.sessionID,
+    settings: () => props.settings,
+  })
+
+  const session = createMemo(() => props.context.data.session.get(props.sessionID))
+  const messages = createMemo(() => props.context.data.session.message.list(props.sessionID))
+
+  /** 最后一条 assistant；模型上限和 usage 分开取，避免 provider 没给 usage 时连上限都丢。 */
+  const lastAssistant = createMemo(() => {
+    const list = messages()
+    for (let index = list.length - 1; index >= 0; index -= 1) {
+      const message = list[index]
+      if (message?.type === "assistant") return message
+    }
+    return undefined
+  })
+
+  /** 模型原生窗口：从最后一条 assistant 的模型解析。 */
+  const nativeLimit = createMemo(() => {
+    const message = lastAssistant()
+    if (message === undefined) return 0
+    const model = props.context.data.location.model
+      .list(session()?.location)
+      ?.find((item) => item.providerID === message.model.providerID && item.id === message.model.id)
+    return model?.limit.context ?? 0
+  })
+
+  /** 真实 prompt token：只算 input + cache，output/reasoning 不属于本轮输入。 */
+  const realUsed = createMemo(() => {
+    const tokens = lastAssistant()?.tokens
+    if (tokens === undefined) return undefined
+    const used = tokens.input + tokens.cache.read + tokens.cache.write
+    return used > 0 ? used : undefined
+  })
+
+  /** 上下文占用：真实 usage 优先，缺失时才回退到服务端估算。 */
+  const contextTokens = createMemo(() => realUsed() ?? data.stats()?.estimatedTotal ?? 0)
+
+  /** 实际生效的上下文上限：自定义优先，否则模型原生。 */
+  const limit = createMemo(() => effectiveLimit(props.settings, nativeLimit()))
+
+  /** 仅当用户自定义上限时展示百分比（auto 时内置区块已经显示了）。 */
+  const percent = createMemo(() => {
+    const max = limit()
+    if (max === undefined || max <= 0) return undefined
+    return Math.round((contextTokens() / max) * 100)
+  })
+
+  const rows = createMemo(() => {
+    const value = data.stats()
+    if (value === undefined || value.estimatedTotal <= 0) return []
+    return scaleCategories(value, contextTokens()).filter((row) => row.value > 0)
+  })
+
+  const toggleExpanded = (): void => {
+    void props.updateSettings((draft) => {
+      draft.expanded = !draft.expanded
+    })
+  }
+
+  return (
+    <Show when={props.settings.enabled}>
+      <box width="100%" flexDirection="column">
+        <box flexDirection="row" height={1} onMouseDown={toggleExpanded}>
+          <box flexDirection="row" gap={1}>
+            <text fg={theme.text.base}>{props.settings.expanded ? "▼" : "▶"}</text>
+            <text fg={theme.text.base}>
+              <b>{copy().title}</b>
+            </text>
+            <Show when={props.settings.contextLimit !== "auto" && percent() !== undefined}>
+              <text fg={occupancyColor(percent() ?? 0, theme)}>
+                {`(${(percent() ?? 0).toString()}%)`}
+              </text>
+            </Show>
+          </box>
+        </box>
+        <Show when={data.terminal()}>
+          <text fg={theme.text.feedback.error.base} wrapMode="word">
+            {`⚠ ${copy().terminal}`}
+          </text>
+        </Show>
+        <Show when={props.settings.expanded}>
+          <box flexDirection="column" width="100%" paddingLeft={2}>
+            <For each={rows()}>
+              {(row) => (
+                <box flexDirection="row" height={1} gap={1}>
+                  <text fg={theme.text.muted} width={10} flexShrink={0}>
+                    {copy().labels[row.key]}
+                  </text>
+                  <box flexGrow={1} height={1} backgroundColor={theme.background.raised.high}>
+                    <box height={1} width={percentWidth(row.pct)} backgroundColor={occupancyColor(row.pct, theme)} />
+                  </box>
+                  <text fg={theme.text.muted} width={4} flexShrink={0} textAlign="right">
+                    {`${row.pct.toString()}%`}
+                  </text>
+                  <text fg={theme.text.muted} width={7} flexShrink={0} textAlign="right">
+                    {`${copy().approximate}${formatTokens(row.value)}`}
+                  </text>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+
+        <CacheSection
+          theme={theme}
+          copy={copy()}
+          settings={props.settings}
+          updateSettings={props.updateSettings}
+          samples={data.cache()}
+        />
+        <SummarySection
+          context={props.context}
+          theme={theme}
+          copy={copy()}
+          settings={props.settings}
+          updateSettings={props.updateSettings}
+          blocks={data.blocks()}
+        />
+      </box>
+    </Show>
+  )
+}