@yeshwanthyk/coding-agent 0.2.2

package/src/components/Header.tsx

@@ -0,0 +1,218 @@
+/**
+ * Header - Single row, minimal by default, click to expand.
+ * Left: activity + model·thinking + progress bar + queue
+ * Right (expanded): branch + LSP
+ */
+
+import { Show, createMemo, createSignal } from "solid-js"
+import { useTheme } from "@yeshwanthyk/open-tui"
+import type { ThinkingLevel } from "@yeshwanthyk/agent-core"
+import type { LspManager, LspServerId } from "@yeshwanthyk/lsp"
+import type { ActivityState } from "../types.js"
+
+const LSP_SYMBOLS: Record<LspServerId, [string, string]> = {
+  typescript: ["⬡", "⬢"],
+  biome: ["✧", "✦"],
+  basedpyright: ["ψ", "Ψ"],
+  ruff: ["△", "▲"],
+  ty: ["τ", "Τ"],
+  gopls: ["◎", "◉"],
+  "rust-analyzer": ["⛭", "⚙"],
+}
+
+/** Robot face icons for each activity state */
+const ACTIVITY_FACES: Record<ActivityState, { face: string; label: string }> = {
+  idle: { face: "● ‿ ●", label: "ready" },
+  thinking: { face: "● ≋ ●", label: "think" },
+  streaming: { face: "● ◦ ●", label: "stream" },
+  tool: { face: "● ⏅ ●", label: "run" },
+  compacting: { face: "● ≡ ●", label: "pack" },
+}
+
+/** Animated faces for each active state */
+const ANIMATED_FACES: Partial<Record<ActivityState, string[]>> = {
+  streaming: ["● ◦ ●", "● ○ ●", "● ◦ ●", "● ∘ ●"],  // mouth moves (talking)
+  thinking: ["● ≋ ●", "● ~ ●", "● ≈ ●", "● ~ ●"],   // squiggly (pondering)
+  tool: ["● ⏅ ●", "● ⏆ ●", "● ⏅ ●", "● ⏆ ●"],      // steps running
+  compacting: ["● ≡ ●", "● = ●", "● - ●", "● = ●"], // compress animation
+}
+
+/** Fixed width for activity section to prevent layout shift */
+const ACTIVITY_WIDTH = 13
+
+/** Progress bar characters */
+const PROGRESS_FILLED = "━"
+const PROGRESS_EMPTY = "┄"
+const PROGRESS_BAR_LENGTH = 8
+
+import type { QueueCounts } from "@yeshwanthyk/runtime-effect/session/prompt-queue.js"
+
+export interface HeaderProps {
+  modelId: string
+  thinking: ThinkingLevel
+  contextTokens: number
+  contextWindow: number
+  queueCounts: QueueCounts
+  activityState: ActivityState
+  retryStatus: string | null
+  lspActive: boolean
+  spinnerFrame: number
+  lsp: LspManager
+}
+
+export function Header(props: HeaderProps) {
+  const { theme } = useTheme()
+  const [expanded, setExpanded] = createSignal(false)
+
+  // Model·thinking combined
+  const modelThinking = createMemo(() => {
+    const model = props.modelId.replace(/^claude-/, "").replace(/-latest$/, "")
+    if (props.thinking === "off") return model
+    // Abbreviate thinking level
+    const thinkingAbbrev: Record<ThinkingLevel, string> = {
+      off: "",
+      minimal: "min",
+      low: "low",
+      medium: "med",
+      high: "high",
+      xhigh: "xhi",
+    }
+    return `${model}·${thinkingAbbrev[props.thinking]}`
+  })
+
+  // Activity with robot face
+  const activity = createMemo(() => {
+    if (props.retryStatus) {
+      return { face: "● ! ●", label: "retry", color: theme.warning }
+    }
+    const state = props.activityState
+    const base = ACTIVITY_FACES[state]
+    
+    // Animate face for active states
+    let face = base.face
+    const frames = ANIMATED_FACES[state]
+    if (frames) {
+      const frameIndex = props.spinnerFrame % frames.length
+      face = frames[frameIndex] ?? base.face
+    }
+    
+    const color = state === "idle" ? theme.textMuted : theme.accent
+    return { face, label: base.label, color }
+  })
+
+  // Progress bar with percentage
+  const progressBar = createMemo(() => {
+    if (props.contextWindow <= 0) return null
+    const pct = props.contextTokens > 0 
+      ? Math.min(100, (props.contextTokens / props.contextWindow) * 100)
+      : 0
+    const filled = Math.round((pct / 100) * PROGRESS_BAR_LENGTH)
+    const empty = PROGRESS_BAR_LENGTH - filled
+    const bar = PROGRESS_FILLED.repeat(filled) + PROGRESS_EMPTY.repeat(empty)
+    const color = pct > 90 ? theme.error : pct > 70 ? theme.warning : pct > 40 ? theme.text : theme.success
+    return { bar, pct: Math.round(pct), color }
+  })
+
+  // Queue indicator
+  const queueIndicator = createMemo(() => {
+    const { steer, followUp } = props.queueCounts
+    if (steer <= 0 && followUp <= 0) return null
+    const parts: string[] = []
+    if (steer > 0) {
+      parts.push(`⚡${steer}`)
+    }
+    if (followUp > 0) {
+      parts.push(`…${followUp}`)
+    }
+    return parts.join(" ")
+  })
+
+
+  // LSP status
+  const lspStatus = createMemo(() => {
+    const servers = props.lsp.activeServers()
+    if (servers.length === 0) return null
+    const uniqueIds = [...new Set(servers.map((s) => s.serverId))]
+    const symbolIndex = props.lspActive ? 1 : 0
+    const symbols = uniqueIds.map((id) => LSP_SYMBOLS[id]?.[symbolIndex] ?? id).join("")
+    const counts = props.lsp.diagnosticCounts()
+    return { symbols, errors: counts.errors, warnings: counts.warnings }
+  })
+
+  const toggleExpanded = () => setExpanded((v) => !v)
+
+  return (
+<box
+      flexDirection="row"
+      flexShrink={0}
+      paddingLeft={1}
+      paddingRight={1}
+      border={["top", "bottom", "left", "right"]}
+      borderStyle="rounded"
+      borderColor={theme.border}
+      onMouseUp={(e: { isSelecting?: boolean }) => {
+        if (e.isSelecting) return
+        toggleExpanded()
+      }}
+    >
+      {/* Left section: Activity + Model·Thinking + Progress + Queue */}
+      <box flexDirection="row" flexShrink={0} gap={1}>
+        {/* Activity (fixed width) */}
+        <box minWidth={ACTIVITY_WIDTH}>
+          <text>
+            <span style={{ fg: activity().color }}>{activity().face}</span>
+            <span style={{ fg: theme.textMuted }}> {activity().label}</span>
+          </text>
+        </box>
+
+        {/* Model·Thinking */}
+        <text fg={theme.text}>{modelThinking()}</text>
+
+        {/* Progress bar */}
+        <Show when={progressBar()} keyed>
+          {(prog) => (
+            <text>
+              <span style={{ fg: prog.color }}>{prog.bar}</span>
+              <span style={{ fg: theme.textMuted }}>  {prog.pct}%</span>
+            </text>
+          )}
+        </Show>
+
+        {/* Queue */}
+        <Show when={queueIndicator()}>
+          <text fg={theme.warning}>{queueIndicator()}</text>
+        </Show>
+      </box>
+
+      {/* Spacer */}
+      <box flexGrow={1} />
+
+      {/* Right section (only when expanded): Branch + LSP */}
+      <Show when={expanded()}>
+        <box flexDirection="row" flexShrink={0} gap={1}>
+
+          {/* LSP */}
+          <Show when={lspStatus()} keyed>
+            {(lsp) => (
+              <text>
+                <span style={{ fg: props.lspActive ? theme.accent : theme.success }}>{lsp.symbols}</span>
+                <Show when={lsp.errors > 0 || lsp.warnings > 0}>
+                  <span style={{ fg: theme.textMuted }}> </span>
+                  <Show when={lsp.errors > 0}>
+                    <span style={{ fg: theme.error }}>{lsp.errors}</span>
+                  </Show>
+                  <Show when={lsp.errors > 0 && lsp.warnings > 0}>
+                    <span style={{ fg: theme.textMuted }}>/</span>
+                  </Show>
+                  <Show when={lsp.warnings > 0}>
+                    <span style={{ fg: theme.warning }}>{lsp.warnings}</span>
+                  </Show>
+                </Show>
+              </text>
+            )}
+          </Show>
+        </box>
+      </Show>
+    </box>
+  )
+}

package/src/components/MessageList.tsx

@@ -0,0 +1,380 @@
+/**
+ * MessageList component for rendering conversation content
+ */
+
+import { For, Show, Switch, Match, createMemo } from "solid-js"
+import { Markdown, useTheme } from "@yeshwanthyk/open-tui"
+import type { UIMessage, ToolBlock, ContentItem } from "../types.js"
+import { profile } from "../profiler.js"
+import { ToolBlock as ToolBlockComponent } from "../tui-open-rendering.js"
+
+// ----- Tool Block Wrapper -----
+
+function ToolBlockWrapper(props: {
+	tool: ToolBlock
+	isExpanded: (id: string) => boolean
+	onToggle: (id: string) => void
+	diffWrapMode: "word" | "none"
+	onEditFile?: (path: string, line?: number) => void
+}) {
+	const expanded = createMemo(() => props.isExpanded(props.tool.id))
+
+	return (
+		<ToolBlockComponent
+			name={props.tool.name}
+			args={props.tool.args}
+			output={props.tool.output || null}
+			editDiff={props.tool.editDiff || null}
+			isError={props.tool.isError}
+			isComplete={props.tool.isComplete}
+			expanded={expanded()}
+			diffWrapMode={props.diffWrapMode}
+			onToggleExpanded={() => props.onToggle(props.tool.id)}
+			onEditFile={props.onEditFile}
+			// Custom tool metadata for first-class rendering
+			label={props.tool.label}
+			source={props.tool.source}
+			sourcePath={props.tool.sourcePath}
+			result={props.tool.result}
+			renderCall={props.tool.renderCall}
+			renderResult={props.tool.renderResult}
+		/>
+	)
+}
+
+// ----- Thinking Block Wrapper -----
+
+const THINKING_MAX_WIDTH = 50
+
+function truncateThinking(text: string): string {
+	const firstLine = text.split("\n")[0] || ""
+	if (firstLine.length <= THINKING_MAX_WIDTH) return firstLine
+	return firstLine.slice(0, THINKING_MAX_WIDTH - 3) + "..."
+}
+
+function ThinkingBlockWrapper(props: {
+	id: string
+	summary: string
+	preview?: string
+	full: string
+	isExpanded: (id: string) => boolean
+	onToggle: (id: string) => void
+	concealMarkdown?: boolean
+}) {
+	const { theme } = useTheme()
+	const expanded = createMemo(() => props.isExpanded(props.id))
+	const preview = () => props.preview || truncateThinking(props.summary || props.full)
+
+	return (
+		<box paddingLeft={4} flexDirection="column">
+			<box
+				flexDirection="row"
+				onMouseUp={(e: { isSelecting?: boolean }) => {
+					if (e.isSelecting) return
+					props.onToggle(props.id)
+				}}
+			>
+				<text selectable={false} fg={theme.textMuted}>
+					{expanded() ? "▾" : "▸"} {preview()}
+				</text>
+			</box>
+			<Show when={expanded()}>
+				<box paddingLeft={2} paddingTop={1}>
+					<Markdown text={props.full} conceal={props.concealMarkdown} dim />
+				</box>
+			</Show>
+		</box>
+	)
+}
+
+// ----- Content Items Builder -----
+
+// Per-item cache: reuse ContentItem objects when data unchanged
+// Key format: "type:id" or "type:msgId:blockIdx"
+const itemCache = new Map<string, ContentItem>()
+let lastMessageCount = 0
+let lastFirstMessageId: string | null = null
+
+/** Get or create a cached ContentItem, preserving object identity when data matches */
+function getCachedItem<T extends ContentItem>(
+	key: string,
+	current: T,
+	isEqual: (a: T, b: T) => boolean
+): T {
+	const cached = itemCache.get(key) as T | undefined
+	if (cached && cached.type === current.type && isEqual(cached, current)) {
+		return cached
+	}
+	itemCache.set(key, current)
+	return current
+}
+
+export function buildContentItems(
+	messages: UIMessage[],
+	toolBlocks: ToolBlock[],
+	thinkingVisible: boolean
+): ContentItem[] {
+	// Prune stale cache entries when message count decreases (e.g., clear)
+	if (messages.length < lastMessageCount) {
+		itemCache.clear()
+	}
+	lastMessageCount = messages.length
+	const firstMessageId = messages.length > 0 ? messages[0].id : null
+	if (firstMessageId !== lastFirstMessageId) {
+		if (lastFirstMessageId !== null) itemCache.clear()
+		lastFirstMessageId = firstMessageId
+	}
+
+	const items: ContentItem[] = []
+	const renderedToolIds = new Set<string>()
+
+	for (let i = 0; i < messages.length; i++) {
+		const msg = messages[i]
+		const isLastMessage = i === messages.length - 1
+
+		if (msg.role === "user") {
+			const item: ContentItem = { type: "user", content: msg.content }
+			items.push(
+				getCachedItem(`user:${msg.id}`, item, (a, b) => a.content === b.content)
+			)
+		} else if (msg.role === "assistant") {
+			// Use contentBlocks if available (preserves interleaved order)
+			if (msg.contentBlocks && msg.contentBlocks.length > 0) {
+				for (let blockIdx = 0; blockIdx < msg.contentBlocks.length; blockIdx++) {
+					const block = msg.contentBlocks[blockIdx]
+					if (block.type === "thinking") {
+						if (thinkingVisible) {
+							const item: ContentItem = {
+								type: "thinking",
+									id: block.id,
+									summary: block.summary,
+									preview: block.preview,
+									full: block.full,
+									isStreaming: msg.isStreaming,
+								}
+							items.push(
+								getCachedItem(`thinking:${msg.id}:${block.id}`, item, (a, b) =>
+									a.type === "thinking" && b.type === "thinking" &&
+									a.full === b.full && a.isStreaming === b.isStreaming
+								)
+							)
+						}
+					} else if (block.type === "text") {
+						if (block.text) {
+							const item: ContentItem = { type: "assistant", content: block.text, isStreaming: msg.isStreaming }
+							if (msg.isStreaming) {
+								items.push(item)
+							} else {
+								items.push(
+									getCachedItem(`text:${msg.id}:${blockIdx}:final`, item, (a, b) =>
+										a.type === "assistant" && b.type === "assistant" &&
+										a.content === b.content && a.isStreaming === b.isStreaming
+									)
+								)
+							}
+						}
+					} else if (block.type === "tool") {
+						if (!renderedToolIds.has(block.tool.id)) {
+							const item: ContentItem = { type: "tool", tool: block.tool }
+							items.push(
+								getCachedItem(`tool:${block.tool.id}:${block.tool.isComplete}`, item, (a, b) =>
+									a.type === "tool" && b.type === "tool" &&
+									a.tool.id === b.tool.id && a.tool.isComplete === b.tool.isComplete &&
+									a.tool.output === b.tool.output &&
+									(a.tool.updateSeq ?? 0) === (b.tool.updateSeq ?? 0)
+								)
+							)
+							renderedToolIds.add(block.tool.id)
+						}
+					}
+				}
+			} else {
+				// Fallback: legacy format without contentBlocks
+				if (thinkingVisible && msg.thinking) {
+					const item: ContentItem = {
+						type: "thinking",
+						id: `thinking-${msg.id}`,
+						summary: msg.thinking.summary,
+						preview: msg.thinking.preview || truncateThinking(msg.thinking.summary || msg.thinking.full),
+						full: msg.thinking.full,
+						isStreaming: msg.isStreaming,
+					}
+					items.push(
+						getCachedItem(`thinking:${msg.id}`, item, (a, b) =>
+							a.type === "thinking" && b.type === "thinking" &&
+							a.full === b.full && a.isStreaming === b.isStreaming
+						)
+					)
+				}
+
+				for (const tool of msg.tools || []) {
+					if (!renderedToolIds.has(tool.id)) {
+						const item: ContentItem = { type: "tool", tool }
+						items.push(
+							getCachedItem(`tool:${tool.id}:${tool.isComplete}`, item, (a, b) =>
+								a.type === "tool" && b.type === "tool" &&
+								a.tool.id === b.tool.id && a.tool.isComplete === b.tool.isComplete &&
+								a.tool.output === b.tool.output &&
+								(a.tool.updateSeq ?? 0) === (b.tool.updateSeq ?? 0)
+							)
+						)
+						renderedToolIds.add(tool.id)
+					}
+				}
+
+				if (msg.content) {
+					const item: ContentItem = { type: "assistant", content: msg.content, isStreaming: msg.isStreaming }
+					if (msg.isStreaming) {
+						items.push(item)
+					} else {
+						items.push(
+							getCachedItem(`text:${msg.id}:final`, item, (a, b) =>
+								a.type === "assistant" && b.type === "assistant" &&
+								a.content === b.content && a.isStreaming === b.isStreaming
+							)
+						)
+					}
+				}
+			}
+
+			// For last message, include orphan toolBlocks from global state
+			if (isLastMessage) {
+				for (const tool of toolBlocks) {
+					if (!renderedToolIds.has(tool.id)) {
+						const item: ContentItem = { type: "tool", tool }
+						items.push(
+							getCachedItem(`tool:${tool.id}:${tool.isComplete}`, item, (a, b) =>
+								a.type === "tool" && b.type === "tool" &&
+								a.tool.id === b.tool.id && a.tool.isComplete === b.tool.isComplete &&
+								a.tool.output === b.tool.output &&
+								(a.tool.updateSeq ?? 0) === (b.tool.updateSeq ?? 0)
+							)
+						)
+						renderedToolIds.add(tool.id)
+					}
+				}
+			}
+		} else if (msg.role === "shell") {
+			const item: ContentItem = {
+				type: "shell",
+				command: msg.command,
+				output: msg.output,
+				exitCode: msg.exitCode,
+				truncated: msg.truncated,
+				tempFilePath: msg.tempFilePath,
+			}
+			items.push(
+				getCachedItem(`shell:${msg.id}`, item, (a, b) =>
+					a.type === "shell" && b.type === "shell" &&
+					a.command === b.command && a.output === b.output
+				)
+			)
+		}
+	}
+
+	return items
+}
+
+// ----- MessageList Component -----
+
+export interface MessageListProps {
+	messages: UIMessage[]
+	toolBlocks: ToolBlock[]
+	thinkingVisible: boolean
+	diffWrapMode: "word" | "none"
+	concealMarkdown?: boolean
+	isToolExpanded: (id: string) => boolean
+	toggleToolExpanded: (id: string) => void
+	isThinkingExpanded: (id: string) => boolean
+	toggleThinkingExpanded: (id: string) => void
+	onEditFile?: (path: string, line?: number) => void
+}
+
+export function MessageList(props: MessageListProps) {
+	const { theme } = useTheme()
+
+	const contentItems = createMemo(() =>
+		profile("build_content_items", () =>
+			buildContentItems(props.messages, props.toolBlocks, props.thinkingVisible)
+		)
+	)
+
+	return (
+		<box flexDirection="column" gap={1} paddingTop={1}>
+			<For each={contentItems()}>
+				{(item) => (
+					<Switch>
+						<Match when={item.type === "user" && item}>
+							{(userItem) => (
+								<box paddingLeft={1}>
+									<text fg={theme.primary}>
+										<span>{"§ "}</span>
+										{userItem().content}
+									</text>
+								</box>
+							)}
+						</Match>
+						<Match when={item.type === "thinking" && item}>
+							{(thinkingItem) => (
+								<ThinkingBlockWrapper
+									id={thinkingItem().id}
+									summary={thinkingItem().summary}
+									preview={thinkingItem().preview}
+									full={thinkingItem().full}
+									isExpanded={props.isThinkingExpanded}
+									onToggle={props.toggleThinkingExpanded}
+									concealMarkdown={props.concealMarkdown}
+								/>
+							)}
+						</Match>
+						<Match when={item.type === "assistant" && item}>
+							{(assistantItem) => (
+								<box paddingLeft={1}>
+									<Markdown
+										text={assistantItem().content}
+										conceal={props.concealMarkdown}
+										streaming={assistantItem().isStreaming}
+									/>
+								</box>
+							)}
+						</Match>
+						<Match when={item.type === "tool" && item}>
+							{(toolItem) => (
+								<box paddingLeft={6}>
+									<ToolBlockWrapper
+										tool={toolItem().tool}
+										isExpanded={props.isToolExpanded}
+										onToggle={props.toggleToolExpanded}
+										diffWrapMode={props.diffWrapMode}
+										onEditFile={props.onEditFile}
+									/>
+								</box>
+							)}
+						</Match>
+						<Match when={item.type === "shell" && item}>
+							{(shellItem) => (
+								<box paddingLeft={1} flexDirection="column">
+									<text fg={theme.warning}>
+										<span>{"$ "}</span>
+										{shellItem().command}
+									</text>
+									<Show when={shellItem().output}>
+										<box paddingLeft={2} paddingTop={1}>
+											<text fg={theme.textMuted}>{shellItem().output}</text>
+										</box>
+									</Show>
+									<Show when={shellItem().exitCode !== null && shellItem().exitCode !== 0}>
+										<text fg={theme.error}>{`exit ${shellItem().exitCode}`}</text>
+									</Show>
+									<Show when={shellItem().truncated && shellItem().tempFilePath}>
+										<text fg={theme.textMuted}>{`[truncated, full output: ${shellItem().tempFilePath}]`}</text>
+									</Show>
+								</box>
+							)}
+						</Match>
+					</Switch>
+				)}
+			</For>
+		</box>
+	)
+}

package/src/config.ts

@@ -0,0 +1 @@
+export * from "@yeshwanthyk/runtime-effect/config";

package/src/domain/commands/builtin/clear.ts

@@ -0,0 +1,14 @@
+import type { CommandDefinition } from "../types.js"
+
+export const clearCommand: CommandDefinition = {
+	name: "clear",
+	execute: (_args, ctx) => {
+		ctx.setMessages(() => [])
+		ctx.setToolBlocks(() => [])
+		ctx.setContextTokens(0)
+		ctx.setCacheStats(null)
+		ctx.agent.reset()
+		void ctx.hookRunner?.emit({ type: "session.clear", sessionId: null })
+		return true
+	},
+}