@royalcat/opencode-dcp-rc 0.0.0-stage → 4.0.0

package/lib/tui/ui.tsx

@@ -0,0 +1,245 @@
+/** @jsxImportSource @opentui/solid */
+
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core"
+import type { JSX } from "solid-js"
+import { pct } from "./format"
+import type { Theme, ThemeColor, ViewApi } from "./types"
+
+// header (1-2) + divider (1) + footer (2) + gaps (3) + bottom padding (1)
+const FRAME_OVERHEAD = 9
+
+export function DcpFrame(props: {
+    api: ViewApi
+    title?: string
+    eyebrow: string
+    children: JSX.Element
+    onBack?: () => void
+}) {
+    const theme = props.api.theme.current
+    let body: ScrollBoxRenderable | undefined
+    let inner: BoxRenderable | undefined
+    function available() {
+        const height = props.api.renderer.height
+        return Math.max(10, height - Math.floor(height / 4) - 2) - FRAME_OVERHEAD
+    }
+    function resize() {
+        if (body) body.height = Math.min(inner?.height || available(), available())
+    }
+    return (
+        <box paddingLeft={3} paddingRight={3} paddingBottom={1} gap={1}>
+            <box flexDirection="row" justifyContent="space-between">
+                <box flexDirection="column">
+                    <text fg={theme.primary}>
+                        <b>{props.eyebrow}</b>
+                    </text>
+                    {props.title ? (
+                        <text fg={theme.text}>
+                            <b>{props.title}</b>
+                        </text>
+                    ) : null}
+                </box>
+                <text fg={theme.textMuted} onMouseUp={() => props.api.ui.dialog.clear()}>
+                    esc
+                </text>
+            </box>
+            <box height={1} border={["bottom"]} borderColor={theme.borderSubtle} />
+            <scrollbox
+                height={available()}
+                scrollY
+                ref={(r: ScrollBoxRenderable) => {
+                    body = r
+                    // Use the host renderer rather than a separate OpenTUI/Solid context.
+                    props.api.renderer.on("resize", resize)
+                    r.once("destroyed", () => props.api.renderer.off("resize", resize))
+                    resize()
+                }}
+            >
+                <box ref={(r: BoxRenderable) => (inner = r)} onSizeChange={resize}>
+                    {props.children}
+                </box>
+            </scrollbox>
+            <box flexDirection="row" justifyContent="space-between" paddingTop={1}>
+                {props.onBack ? (
+                    <FooterButton
+                        theme={theme}
+                        label="back"
+                        variant="muted"
+                        onClick={props.onBack}
+                    />
+                ) : (
+                    <box />
+                )}
+                <FooterButton
+                    theme={theme}
+                    label="close"
+                    variant="primary"
+                    onClick={() => props.api.ui.dialog.clear()}
+                />
+            </box>
+        </box>
+    )
+}
+
+function FooterButton(props: {
+    theme: Theme
+    label: string
+    variant: "muted" | "primary"
+    onClick: () => void
+}) {
+    const primary = props.variant === "primary"
+    return (
+        <box
+            paddingLeft={2}
+            paddingRight={2}
+            backgroundColor={primary ? props.theme.primary : props.theme.backgroundElement}
+            onMouseUp={props.onClick}
+        >
+            <text fg={primary ? props.theme.selectedListItemText : props.theme.text}>
+                {props.label}
+            </text>
+        </box>
+    )
+}
+
+export function Card(props: { theme: Theme; title: string; children: JSX.Element }) {
+    const accent = props.theme.primary
+    return (
+        <box
+            flexDirection="column"
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            paddingBottom={1}
+            backgroundColor={props.theme.backgroundElement}
+            border={["left"]}
+            borderColor={accent}
+            gap={1}
+        >
+            <text fg={accent}>
+                <b>{props.title}</b>
+            </text>
+            {props.children}
+        </box>
+    )
+}
+
+export function Metric(props: { theme: Theme; label: string; value: string; hint?: string }) {
+    return (
+        <box flexDirection="row" gap={2}>
+            <box width={24}>
+                <text fg={props.theme.textMuted}>{props.label}</text>
+            </box>
+            <box flexDirection="row" gap={1} flexGrow={1}>
+                <text fg={props.theme.text}>
+                    <b>{props.value}</b>
+                </text>
+                {props.hint ? <text fg={props.theme.textMuted}>{props.hint}</text> : null}
+            </box>
+        </box>
+    )
+}
+
+export function Progress(props: {
+    theme: Theme
+    label: string
+    value: number
+    total: number
+    color: ThemeColor
+    detail: string
+}) {
+    const width = 32
+    const filled =
+        props.total > 0 ? Math.max(0, Math.round((props.value / props.total) * width)) : 0
+    const empty = Math.max(0, width - filled)
+    return (
+        <box flexDirection="column" gap={0}>
+            <box flexDirection="row" gap={2}>
+                <box width={20}>
+                    <text fg={props.theme.text}>{props.label}</text>
+                </box>
+                <box flexDirection="row" gap={1} flexGrow={1}>
+                    <text fg={props.theme.text}>
+                        <b>{pct(props.value, props.total)}</b>
+                    </text>
+                    <text fg={props.theme.textMuted}>{props.detail}</text>
+                </box>
+            </box>
+            <box flexDirection="row">
+                <text fg={props.theme[props.color]}>{"█".repeat(filled)}</text>
+                <text fg={props.theme.borderSubtle}>{"░".repeat(empty)}</text>
+            </box>
+        </box>
+    )
+}
+
+export function PromptRow(props: {
+    theme: Theme
+    command: string
+    description: string
+    accent?: ThemeColor
+}) {
+    const accent = props.theme[props.accent ?? "accent"]
+    return (
+        <box flexDirection="row" gap={2}>
+            <box width={22}>
+                <text fg={accent}>
+                    <b>{props.command}</b>
+                </text>
+            </box>
+            <box flexGrow={1}>
+                <text fg={props.theme.text}>{props.description}</text>
+            </box>
+        </box>
+    )
+}
+
+export function StatusPill(props: {
+    theme: Theme
+    label: string
+    value: string
+    accent: ThemeColor
+}) {
+    const accent = props.theme[props.accent]
+    return (
+        <box flexDirection="row" justifyContent="space-between" paddingLeft={1} paddingRight={1}>
+            <box width={22}>
+                <text fg={props.theme.primary}>
+                    <b>{props.label}</b>
+                </text>
+            </box>
+            <text fg={accent}>
+                <b>{props.value}</b>
+            </text>
+        </box>
+    )
+}
+
+export function ActionRow(props: {
+    theme: Theme
+    title: string
+    detail: string
+    onClick: () => void
+}) {
+    const accent = props.theme.primary
+    return (
+        <box
+            flexDirection="row"
+            justifyContent="space-between"
+            paddingLeft={1}
+            paddingRight={1}
+            onMouseUp={props.onClick}
+        >
+            <box flexDirection="row" gap={2}>
+                <box width={12}>
+                    <text fg={accent}>
+                        <b>{props.title}</b>
+                    </text>
+                </box>
+                <text fg={props.theme.text}>{props.detail}</text>
+            </box>
+            <box paddingLeft={2} paddingRight={2} backgroundColor={accent}>
+                <text fg={props.theme.selectedListItemText}>open</text>
+            </box>
+        </box>
+    )
+}

package/lib/ui/notification.ts

@@ -0,0 +1,347 @@
+import type { Logger } from "../logger"
+import type { SessionState } from "../state"
+import {
+    formatPrunedItemsList,
+    formatProgressBar,
+    formatStatsHeader,
+    formatTokenCount,
+} from "./utils"
+import { ToolParameterEntry } from "../state"
+import { PluginConfig } from "../config"
+import { getActiveSummaryTokenUsage } from "../state/utils"
+
+export type PruneReason = "completion" | "noise" | "extraction"
+export const PRUNE_REASON_LABELS: Record<PruneReason, string> = {
+    completion: "Task Complete",
+    noise: "Noise Removal",
+    extraction: "Extraction",
+}
+
+interface CompressionNotificationEntry {
+    blockId: number
+    runId: number
+    summary: string
+    summaryTokens: number
+}
+
+function buildMinimalMessage(state: SessionState, reason: PruneReason | undefined): string {
+    const reasonSuffix = reason ? ` — ${PRUNE_REASON_LABELS[reason]}` : ""
+    return (
+        formatStatsHeader(state.stats.totalPruneTokens, state.stats.pruneTokenCounter) +
+        reasonSuffix
+    )
+}
+
+function buildDetailedMessage(
+    state: SessionState,
+    reason: PruneReason | undefined,
+    pruneToolIds: string[],
+    toolMetadata: Map<string, ToolParameterEntry>,
+    workingDirectory: string,
+): string {
+    let message = formatStatsHeader(state.stats.totalPruneTokens, state.stats.pruneTokenCounter)
+
+    if (pruneToolIds.length > 0) {
+        const pruneTokenCounterStr = `~${formatTokenCount(state.stats.pruneTokenCounter)}`
+        const reasonLabel = reason ? ` — ${PRUNE_REASON_LABELS[reason]}` : ""
+        message += `\n\n▣ Pruning (${pruneTokenCounterStr})${reasonLabel}`
+
+        const itemLines = formatPrunedItemsList(pruneToolIds, toolMetadata, workingDirectory)
+        message += "\n" + itemLines.join("\n")
+    }
+
+    return message.trim()
+}
+
+const TOAST_BODY_MAX_LINES = 12
+const TOAST_SUMMARY_MAX_CHARS = 600
+
+function truncateToastBody(body: string, maxLines: number = TOAST_BODY_MAX_LINES): string {
+    const lines = body.split("\n")
+    if (lines.length <= maxLines) {
+        return body
+    }
+    const kept = lines.slice(0, maxLines - 1)
+    const remaining = lines.length - maxLines + 1
+    return kept.join("\n") + `\n... and ${remaining} more`
+}
+
+function truncateToastSummary(summary: string, maxChars: number = TOAST_SUMMARY_MAX_CHARS): string {
+    if (summary.length <= maxChars) {
+        return summary
+    }
+    return summary.slice(0, maxChars - 3) + "..."
+}
+
+function truncateExtractedSection(
+    message: string,
+    maxChars: number = TOAST_SUMMARY_MAX_CHARS,
+): string {
+    const marker = "\n\n▣ Extracted"
+    const index = message.indexOf(marker)
+    if (index === -1) {
+        return message
+    }
+    const extracted = message.slice(index)
+    if (extracted.length <= maxChars) {
+        return message
+    }
+    return message.slice(0, index) + truncateToastSummary(extracted, maxChars)
+}
+
+export async function sendUnifiedNotification(
+    client: any,
+    logger: Logger,
+    config: PluginConfig,
+    state: SessionState,
+    sessionId: string,
+    pruneToolIds: string[],
+    toolMetadata: Map<string, ToolParameterEntry>,
+    reason: PruneReason | undefined,
+    params: any,
+    workingDirectory: string,
+): Promise<boolean> {
+    const hasPruned = pruneToolIds.length > 0
+    if (!hasPruned) {
+        return false
+    }
+
+    if (config.pruneNotification === "off") {
+        return false
+    }
+
+    const message =
+        config.pruneNotification === "minimal"
+            ? buildMinimalMessage(state, reason)
+            : buildDetailedMessage(state, reason, pruneToolIds, toolMetadata, workingDirectory)
+
+    if (config.pruneNotificationType === "toast") {
+        let toastMessage = truncateExtractedSection(message)
+        toastMessage =
+            config.pruneNotification === "minimal" ? toastMessage : truncateToastBody(toastMessage)
+
+        await client.tui.showToast({
+            body: {
+                title: "DCP: Compress Notification",
+                message: toastMessage,
+                variant: "info",
+                duration: 5000,
+            },
+        })
+        return true
+    }
+
+    await sendIgnoredMessage(client, sessionId, message, params, logger)
+    return true
+}
+
+function buildCompressionSummary(
+    entries: CompressionNotificationEntry[],
+    state: SessionState,
+): string {
+    if (entries.length === 1) {
+        return entries[0]?.summary ?? ""
+    }
+
+    return entries
+        .map((entry) => {
+            const topic =
+                state.prune.messages.blocksById.get(entry.blockId)?.topic ?? "(unknown topic)"
+            return `### ${topic}\n${entry.summary}`
+        })
+        .join("\n\n")
+}
+
+function getCompressionLabel(entries: CompressionNotificationEntry[]): string {
+    const runId = entries[0]?.runId
+    if (runId === undefined) {
+        return "Compression"
+    }
+
+    return `Compression #${runId}`
+}
+
+function formatCompressionMetrics(removedTokens: number, summaryTokens: number): string {
+    const metrics = [`-${formatTokenCount(removedTokens, true)} removed`]
+    if (summaryTokens > 0) {
+        metrics.push(`+${formatTokenCount(summaryTokens, true)} summary`)
+    }
+    return metrics.join(", ")
+}
+
+export async function sendCompressNotification(
+    client: any,
+    logger: Logger,
+    config: PluginConfig,
+    state: SessionState,
+    sessionId: string,
+    entries: CompressionNotificationEntry[],
+    batchTopic: string | undefined,
+    sessionMessageIds: string[],
+    params: any,
+): Promise<boolean> {
+    if (config.pruneNotification === "off") {
+        return false
+    }
+
+    if (entries.length === 0) {
+        return false
+    }
+
+    let message: string
+    const compressionLabel = getCompressionLabel(entries)
+    const summary = buildCompressionSummary(entries, state)
+    const summaryTokens = entries.reduce((total, entry) => total + entry.summaryTokens, 0)
+    const summaryTokensStr = formatTokenCount(summaryTokens)
+    const compressedTokens = entries.reduce((total, entry) => {
+        const compressionBlock = state.prune.messages.blocksById.get(entry.blockId)
+        if (!compressionBlock) {
+            logger.error("Compression block missing for notification", {
+                compressionId: entry.blockId,
+                sessionId,
+            })
+            return total
+        }
+
+        return total + compressionBlock.compressedTokens
+    }, 0)
+
+    const newlyCompressedMessageIds: string[] = []
+    const newlyCompressedToolIds: string[] = []
+    const seenMessageIds = new Set<string>()
+    const seenToolIds = new Set<string>()
+
+    for (const entry of entries) {
+        const compressionBlock = state.prune.messages.blocksById.get(entry.blockId)
+        if (!compressionBlock) {
+            continue
+        }
+
+        for (const messageId of compressionBlock.directMessageIds) {
+            if (seenMessageIds.has(messageId)) {
+                continue
+            }
+            seenMessageIds.add(messageId)
+            newlyCompressedMessageIds.push(messageId)
+        }
+
+        for (const toolId of compressionBlock.directToolIds) {
+            if (seenToolIds.has(toolId)) {
+                continue
+            }
+            seenToolIds.add(toolId)
+            newlyCompressedToolIds.push(toolId)
+        }
+    }
+
+    const topic =
+        batchTopic ??
+        (entries.length === 1
+            ? (state.prune.messages.blocksById.get(entries[0]?.blockId ?? -1)?.topic ??
+              "(unknown topic)")
+            : "(unknown topic)")
+
+    const totalActiveSummaryTkns = getActiveSummaryTokenUsage(state)
+    const totalGross = state.stats.totalPruneTokens + state.stats.pruneTokenCounter
+    const notificationHeader = `▣ DCP | ${formatCompressionMetrics(totalGross, totalActiveSummaryTkns)}`
+
+    if (config.pruneNotification === "minimal") {
+        message = `${notificationHeader} — ${compressionLabel}`
+    } else {
+        message = notificationHeader
+
+        const activePrunedMessages = new Map<string, number>()
+        for (const [messageId, entry] of state.prune.messages.byMessageId) {
+            if (entry.activeBlockIds.length > 0) {
+                activePrunedMessages.set(messageId, entry.tokenCount)
+            }
+        }
+        const progressBar = formatProgressBar(
+            sessionMessageIds,
+            activePrunedMessages,
+            newlyCompressedMessageIds,
+            50,
+        )
+        message += `\n\n${progressBar}`
+        message += `\n▣ ${compressionLabel} ${formatCompressionMetrics(compressedTokens, summaryTokens)}`
+        message += `\n→ Topic: ${topic}`
+        message += `\n→ Items: ${newlyCompressedMessageIds.length} messages`
+        if (newlyCompressedToolIds.length > 0) {
+            message += ` and ${newlyCompressedToolIds.length} tools compressed`
+        } else {
+            message += ` compressed`
+        }
+        if (config.compress.showCompression) {
+            message += `\n→ Compression (~${summaryTokensStr}): ${summary}`
+        }
+    }
+
+    if (config.pruneNotificationType === "toast") {
+        let toastMessage = message
+        if (config.compress.showCompression) {
+            const truncatedSummary = truncateToastSummary(summary)
+            if (truncatedSummary !== summary) {
+                toastMessage = toastMessage.replace(
+                    `\n→ Compression (~${summaryTokensStr}): ${summary}`,
+                    `\n→ Compression (~${summaryTokensStr}): ${truncatedSummary}`,
+                )
+            }
+        }
+        toastMessage =
+            config.pruneNotification === "minimal" ? toastMessage : truncateToastBody(toastMessage)
+
+        await client.tui.showToast({
+            body: {
+                title: "DCP: Compress Notification",
+                message: toastMessage,
+                variant: "info",
+                duration: 5000,
+            },
+        })
+        return true
+    }
+
+    await sendIgnoredMessage(client, sessionId, message, params, logger)
+    return true
+}
+
+export async function sendIgnoredMessage(
+    client: any,
+    sessionID: string,
+    text: string,
+    params: any,
+    logger: Logger,
+): Promise<void> {
+    const agent = params.agent || undefined
+    const variant = params.variant || undefined
+    const model =
+        params.providerId && params.modelId
+            ? {
+                  providerID: params.providerId,
+                  modelID: params.modelId,
+              }
+            : undefined
+
+    try {
+        await client.session.prompt({
+            path: {
+                id: sessionID,
+            },
+            body: {
+                noReply: true,
+                agent: agent,
+                model: model,
+                variant: variant,
+                parts: [
+                    {
+                        type: "text",
+                        text: text,
+                        ignored: true,
+                    },
+                ],
+            },
+        })
+    } catch (error: any) {
+        logger.error("Failed to send notification", { error: error.message })
+    }
+}