@cortexkit/opencode-magic-context 0.21.6 → 0.21.8

package/src/tui/index.tsx

@@ -6,7 +6,8 @@ import { createMemo } from "solid-js"
 import type { TuiPlugin, TuiPluginApi, TuiThemeCurrent } from "@opencode-ai/plugin/tui"
 import { createSidebarContentSlot } from "./slots/sidebar-content"
 import packageJson from "../../package.json"
-import { closeRpc, consumeTuiMessages, getCompartmentCount, initRpcClient, loadStatusDetail, requestRecomp, type StatusDetail } from "./data/context-db"
+import { closeRpc, consumeTuiMessages, getAnnouncement, getCompartmentCount, initRpcClient, loadStatusDetail, markAnnounced, requestRecomp, type StatusDetail } from "./data/context-db"
+import { formatThresholdPercent } from "../shared/format-threshold"
 import { detectConflicts } from "../shared/conflict-detector"
 import { fixConflicts } from "../shared/conflict-fixer"
 import { readJsoncFile } from "../shared/jsonc-parser"
@@ -260,27 +261,12 @@ const StatusDialog = (props: { api: TuiPluginApi; s: StatusDetail }) => {
         return { segs, total }
     }
 
-    const barWidth = 56
-    const barSegments = () => {
-        const { segs, total } = breakdownSegments()
-        if (segs.length === 0) return []
-
-        let widths = segs.map((seg) => Math.max(1, Math.round((seg.tokens / total) * barWidth)))
-        let sum = widths.reduce((a, b) => a + b, 0)
-        while (sum > barWidth) {
-            const maxIdx = widths.indexOf(Math.max(...widths))
-            if (widths[maxIdx] > 1) { widths[maxIdx]--; sum-- } else break
-        }
-        while (sum < barWidth) {
-            const maxIdx = widths.indexOf(Math.max(...widths))
-            widths[maxIdx]++; sum++
-        }
-
-        return segs.map((seg, i) => ({
-            chars: "█".repeat(widths[i] || 0),
-            color: seg.color,
-        }))
-    }
+    // The status-dialog breakdown bar uses flex layout (same approach as the
+    // sidebar breakdown). Each segment becomes a colored box with
+    // flexGrow=tokens and flexBasis=0, parent has width="100%", so opentui
+    // distributes the dialog's full width proportionally regardless of the
+    // dialog's actual rendered width.
+    const barSegments = () => breakdownSegments().segs.filter((seg) => seg.tokens > 0)
 
     return (
         <box flexDirection="column" width="100%" paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
@@ -296,17 +282,24 @@ const StatusDialog = (props: { api: TuiPluginApi; s: StatusDetail }) => {
                 them how close they are to compaction triggering. */}
             <box flexDirection="row" justifyContent="space-between" width="100%">
                 <text fg={s().usagePercentage >= 80 ? t().error : s().usagePercentage >= 65 ? t().warning : t().accent}>
-                    <b>{s().usagePercentage.toFixed(1)}%</b> / {s().executeThreshold}%
+                    <b>{s().usagePercentage.toFixed(1)}%</b> / {formatThresholdPercent(s().executeThreshold)}%
                 </text>
                 <text fg={s().usagePercentage >= 80 ? t().error : s().usagePercentage >= 65 ? t().warning : t().accent}>
                     {fmt(s().inputTokens)} / {contextLimit() > 0 ? fmt(contextLimit()) : "?"} tokens
                 </text>
             </box>
 
-            {/* Segmented breakdown bar */}
-            <box flexDirection="row">
-                {barSegments().map((seg, i) => (
-                    <text key={i} fg={seg.color}>{seg.chars}</text>
+            {/* Segmented breakdown bar: flex row of colored boxes filling
+                the dialog width. See barSegments comment above. */}
+            <box width="100%" flexDirection="row" height={1}>
+                {barSegments().map((seg) => (
+                    <box
+                        key={seg.label}
+                        flexGrow={Math.max(1, seg.tokens)}
+                        flexBasis={0}
+                        height={1}
+                        backgroundColor={seg.color}
+                    />
                 ))}
             </box>
 
@@ -341,7 +334,7 @@ const StatusDialog = (props: { api: TuiPluginApi; s: StatusDetail }) => {
                     <R t={t()} l="Configured" v={s().cacheTtl} />
                     <R t={t()} l="Last response" v={s().lastResponseTime > 0 ? `${Math.round(elapsed() / 1000)}s ago` : "never"} />
                     <R t={t()} l="Remaining" v={s().cacheExpired ? "expired" : `${Math.round(s().cacheRemainingMs / 1000)}s`} fg={s().cacheExpired ? t().warning : t().textMuted} />
-                    <R t={t()} l="Auto-execute" v={s().cacheExpired ? "yes (expired)" : `at TTL or ≥${s().executeThreshold}%`} fg={t().textMuted} />
+                    <R t={t()} l="Auto-execute" v={s().cacheExpired ? "yes (expired)" : `at TTL or ≥${formatThresholdPercent(s().executeThreshold)}%`} fg={t().textMuted} />
                     <box marginTop={1}>
                         <text fg={t().text}><b>Memory</b></text>
                     </box>
@@ -351,7 +344,7 @@ const StatusDialog = (props: { api: TuiPluginApi; s: StatusDetail }) => {
                 {/* Right column */}
                 <box flexDirection="column" flexGrow={1} flexBasis={0}>
                     <text fg={t().text}><b>Rolling Nudges</b></text>
-                    <R t={t()} l="Execute threshold" v={`${s().executeThreshold}%`} />
+                    <R t={t()} l="Execute threshold" v={`${formatThresholdPercent(s().executeThreshold)}%`} />
                     <R t={t()} l="Nudge anchor" v={`${fmt(s().lastNudgeTokens)} tok`} />
                     <R t={t()} l="Interval" v={`${fmt(s().nudgeInterval)} tok`} fg={t().textMuted} />
                     <R t={t()} l="Next nudge after" v={`${fmt(s().nextNudgeAfter)} tok`} />
@@ -563,6 +556,63 @@ function registerCommandPaletteEntries(api: TuiPluginApi): void {
     // via RPC.
 }
 
+/**
+ * Show the one-shot "What's new" dialog on TUI startup if the server tells us
+ * to. The server is the source of truth: it has the version + features
+ * constants AND owns the persistence file. We just render and report back.
+ *
+ * Failure-tolerant by design — if the server isn't ready or the RPC fails,
+ * we silently skip (the next TUI launch will retry).
+ */
+/**
+ * URLs render as plain text. Modern terminals (iTerm2, kitty, WezTerm, Ghostty,
+ * recent macOS Terminal) auto-detect URLs and let users Cmd-click; older
+ * terminals require manual copy. We tried opentui's `<a href>` JSX intrinsic
+ * for application-level OSC 8 clickability, but it's a span-like element that
+ * forced text out of opentui's word-wrap mode, causing bullets to bleed past
+ * the dialog border. Pure-string children of `<text>` wrap correctly, so the
+ * AFT-style DialogAlert + plain string is the right surface here.
+ */
+async function showStartupAnnouncement(api: TuiPluginApi): Promise<void> {
+    try {
+        const ann = await getAnnouncement()
+        if (!ann.show || !ann.version || !ann.features || ann.features.length === 0) return
+
+        const title = `Magic Context v${ann.version}`
+        const lines: string[] = [
+            "What's new:",
+            "",
+            ...ann.features.map((line) => `  • ${line}`),
+        ]
+        if (ann.footer && ann.footer.trim().length > 0) {
+            // Blank-line separator keeps the persistent footer (Discord invite,
+            // etc.) visually distinct from the version-specific bullets.
+            lines.push("", ann.footer)
+        }
+        const message = lines.join("\n")
+
+        api.ui.dialog.replace(
+            () => (
+                <api.ui.DialogAlert
+                    title={title}
+                    message={message}
+                    onConfirm={() => {
+                        void markAnnounced()
+                    }}
+                />
+            ),
+            () => {
+                // User dismissed via Escape rather than confirming. Mark
+                // dismissed anyway — they saw the dialog, that's the contract.
+                void markAnnounced()
+            },
+        )
+    } catch {
+        // RPC not ready yet (port file missing or transient HTTP failure) —
+        // silently skip. The next TUI start re-checks.
+    }
+}
+
 const tui: TuiPlugin = async (api, _options, meta) => {
     // Initialize RPC client for server communication
     const directory = api.state.path.directory ?? ""
@@ -623,6 +673,12 @@ const tui: TuiPlugin = async (api, _options, meta) => {
         return
     }
 
+    // Show one-shot release announcement after conflict gate.
+    // Fire-and-forget: if the server isn't ready or RPC fails, the next TUI
+    // launch will retry. Dialog only appears once per ANNOUNCEMENT_VERSION
+    // (persisted via mark-announced RPC writing last_announced_version).
+    void showStartupAnnouncement(api)
+
     // Note: if TUI plugin is loaded, tui.json already has our entry.
     // But if the user added it manually and later removes it, or if they
     // use setup/doctor which handles tui.json, this code is already running.

package/src/tui/slots/sidebar-content.tsx

@@ -3,6 +3,7 @@ import { createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
 import type { TuiSlotPlugin, TuiPluginApi, TuiThemeCurrent } from "@opencode-ai/plugin/tui"
 import packageJson from "../../../package.json"
 import { loadSidebarSnapshot, type SidebarSnapshot } from "../data/context-db"
+import { formatThresholdPercent } from "../../shared/format-threshold"
 
 const SINGLE_BORDER = { type: "single" } as any
 const REFRESH_DEBOUNCE_MS = 150
@@ -47,8 +48,13 @@ const TokenBreakdown = (props: {
     theme: TuiThemeCurrent
     snapshot: SidebarSnapshot
 }) => {
-    const barWidth = 36
-
+    // The bar is rendered as a flex row of colored boxes, each with
+    // flexGrow=tokens and flexBasis=0. opentui distributes the parent
+    // container's full width proportionally, so the bar always fills the
+    // sidebar regardless of terminal size. No hardcoded width is needed —
+    // this fixes both the over-wide bar that wrapped onto a second line on
+    // narrow sidebars (issue #90) and the under-wide bar that left empty
+    // space on the right on wide sidebars.
     const segments = createMemo<TokenSegment[]>(() => {
         const s = props.snapshot
         const total = s.inputTokens || 1
@@ -142,66 +148,33 @@ const TokenBreakdown = (props: {
 
     const totalTokens = createMemo(() => props.snapshot.inputTokens || 1)
 
-    // Calculate proportional widths for each segment
-    const segmentWidths = createMemo(() => {
-        const total = totalTokens()
-        const segs = segments()
-        if (segs.length === 0) return []
-
-        // Calculate raw proportions
-        const proportions = segs.map((seg) => seg.tokens / total)
-
-        // Convert to character widths. Minimum 1 char ONLY when the segment
-        // has tokens > 0 — zero-token segments (e.g. Conversation when the
-        // calibrator rounded it to zero) must get width 0 so the bar stays
-        // proportional. The legend row still renders for zero-token segments
-        // to keep the row stable.
-        let widths = segs.map((seg, i) =>
-            seg.tokens > 0 ? Math.max(1, Math.round(proportions[i] * barWidth)) : 0,
-        )
-
-        // Adjust to exactly barWidth
-        const sum = widths.reduce((a, b) => a + b, 0)
-        if (sum > barWidth) {
-            // Shrink from the largest segments
-            let excess = sum - barWidth
-            while (excess > 0) {
-                const maxIdx = widths.indexOf(Math.max(...widths))
-                if (widths[maxIdx] > 1) {
-                    widths[maxIdx]--
-                    excess--
-                } else {
-                    break
-                }
-            }
-        } else if (sum < barWidth) {
-            // Expand the largest segments
-            let deficit = barWidth - sum
-            while (deficit > 0) {
-                const maxIdx = widths.indexOf(Math.max(...widths))
-                widths[maxIdx]++
-                deficit--
-            }
-        }
-
-        return widths
-    })
-
-    const barSegments = createMemo(() => {
-        const segs = segments()
-        const widths = segmentWidths()
-        return segs.map((seg, i) => ({
-            chars: "█".repeat(widths[i] || 0),
-            color: seg.color,
-        }))
-    })
+    // Render-time segments for the bar. Zero-token segments are filtered out
+    // entirely (no flex weight, no rendered box) so they don't claim any
+    // width. Non-zero segments still get a Math.max(1, ...) floor on
+    // flexGrow so very small contributions remain visible as a thin sliver.
+    // The legend rows below show every segment (including zeros) for table
+    // stability — only the bar prunes them.
+    const barSegments = createMemo(() =>
+        segments().filter((seg) => seg.tokens > 0),
+    )
 
     return (
         <box width="100%" flexDirection="column">
-            {/* Segmented bar */}
-            <box flexDirection="row">
-                {barSegments().map((seg, i) => (
-                    <text key={i} fg={seg.color}>{seg.chars}</text>
+            {/* Segmented bar: a width="100%" flex row of colored boxes,
+                each with flexGrow proportional to its token count and
+                flexBasis=0. opentui distributes the parent's full width
+                proportionally, so the bar always fills the sidebar
+                regardless of terminal size. Height is fixed at 1 row;
+                backgroundColor renders the colored bar. */}
+            <box width="100%" flexDirection="row" height={1}>
+                {barSegments().map((seg) => (
+                    <box
+                        key={seg.key}
+                        flexGrow={Math.max(1, seg.tokens)}
+                        flexBasis={0}
+                        height={1}
+                        backgroundColor={seg.color}
+                    />
                 ))}
             </box>
 
@@ -370,7 +343,7 @@ const SidebarContent = (props: {
                                 "47.5% / 65%" tells the user how close they
                                 are to the next compaction trigger. */}
                             <text fg={contextSummaryColor()}>
-                                <b>{s()!.usagePercentage.toFixed(1)}%</b> / {s()!.executeThreshold}%
+                                <b>{s()!.usagePercentage.toFixed(1)}%</b> / {formatThresholdPercent(s()!.executeThreshold)}%
                             </text>
                             {/* Right: absolute token usage vs the model's
                                 full context window (separate from the
@@ -468,6 +441,24 @@ const SidebarContent = (props: {
                     />
                 </>
             )}
+
+            {/* Stats — v0.21.8 ships a single "Total tokens" number while we
+                figure out how to present the new-work / reprocessed
+                categorization without confusing users. The underlying
+                snapshot fields (newWorkTokens, totalInputTokens) and the
+                session_meta columns are still populated; only the UI is
+                simplified for now. */}
+            {s()?.totalInputTokens != null && (
+                <>
+                    <SectionHeader theme={props.theme} title="Stats" />
+                    <StatRow
+                        theme={props.theme}
+                        label="Total tokens"
+                        value={compactTokens(s()!.totalInputTokens ?? 0)}
+                        dim
+                    />
+                </>
+            )}
         </box>
     )
 }