@ogulcancelik/pi-spar 0.1.0 → 0.1.2

package/README.md

@@ -13,7 +13,7 @@ pi install npm:@ogulcancelik/pi-spar
 Configure which models are available for sparring:
 
 ```
-/spar-models
+/spmodels
 ```
 
 This shows all models from your pi configuration and lets you assign short aliases (e.g., `opus`, `gpt`).
@@ -29,7 +29,7 @@ The extension provides a `spar` tool the agent can use, plus commands for viewin
 The agent uses this automatically when you ask it to consult another model:
 
 ```
-"spar with gpt5 about whether this architecture makes sense"
+"spar with gpt about whether this architecture makes sense"
 "ask opus to review the error handling in src/auth.ts"
 ```
 
@@ -39,13 +39,15 @@ Sessions persist — follow up, push back, disagree. The peer can read files, gr
 
 | Command | Description |
 |---------|-------------|
-| `/spar-models` | Configure available sparring models |
-| `/peek [session]` | Watch a spar session in a floating overlay |
-| `/peek-all` | List all sessions, pick one to peek |
+| `/spmodels` | Configure available sparring models |
+| `/spar [session]` | Watch a spar session in a floating overlay |
+| `/spview` | Browse all sessions — view, peek, or delete |
 
-### Peek
+### Peek overlay
 
-The peek overlay renders the spar conversation using the same components as pi's main TUI — same message styling, same syntax-highlighted tool output, same everything. It's pi inside pi.
+`/spar` opens a floating overlay that renders the spar conversation using the same components as pi's main TUI — same message styling, same syntax-highlighted tool output, same everything. It's pi inside pi.
+
+![peek overlay demo](./assets/peek-demo.jpg)
 
 - **j/k** or **↑/↓** — scroll
 - **g/G** — jump to top/bottom
@@ -53,6 +55,16 @@ The peek overlay renders the spar conversation using the same components as pi's
 
 Live sessions auto-scroll as the peer model responds.
 
+### Session browser
+
+`/spview` opens an inline session browser:
+
+- **j/k** or **↑/↓** — navigate
+- **enter** — open peek overlay for selected session
+- **d** — delete selected session
+- **D** — delete all non-active sessions
+- **q** or **Esc** — close
+
 ## License
 
 MIT

package/core.ts

@@ -222,7 +222,8 @@ class EventBroadcaster {
 	// Track state for sync on connect
 	private currentStatus: "thinking" | "streaming" | "tool" | "done" = "thinking";
 	private currentToolName?: string;
-	private currentPartialMessage: any = null; // The full partial AssistantMessage
+	private currentPartialMessage: any = null;
+	private currentUserMessage: any = null;
 
 	constructor(sessionId: string) {
 		this.socketPath = getSocketPath(sessionId);
@@ -244,6 +245,7 @@ class EventBroadcaster {
 				status: this.currentStatus,
 				toolName: this.currentToolName,
 				partialMessage: this.currentPartialMessage,
+				userMessage: this.currentUserMessage,
 			};
 			try { conn.write(JSON.stringify(syncEvent) + "\n"); } catch {}
 			
@@ -262,7 +264,9 @@ class EventBroadcaster {
 
 	broadcast(event: any): void {
 		// Track state for sync
-		if (event.type === "message_start" && event.message?.role === "assistant") {
+		if (event.type === "message_start" && event.message?.role === "user") {
+			this.currentUserMessage = event.message;
+		} else if (event.type === "message_start" && event.message?.role === "assistant") {
 			this.currentPartialMessage = event.message;
 			this.currentStatus = "thinking";
 		} else if (event.type === "message_update" && event.message?.role === "assistant") {
@@ -279,6 +283,7 @@ class EventBroadcaster {
 			this.currentToolName = event.toolName;
 		} else if (event.type === "message_end" || event.type === "agent_end") {
 			this.currentPartialMessage = null;
+			this.currentUserMessage = null;
 			this.currentStatus = "done";
 			this.currentToolName = undefined;
 		}
@@ -443,6 +448,24 @@ export function sessionExists(name: string): boolean {
 	return fs.existsSync(getSessionInfoPath(name));
 }
 
+/**
+ * Delete a session and all its files (.jsonl, .info.json, .log)
+ */
+export function deleteSession(name: string): void {
+	validateSessionName(name);
+	const files = [
+		getSessionFilePath(name),
+		getSessionInfoPath(name),
+		getSessionLogPath(name),
+	];
+	for (const f of files) {
+		try { if (fs.existsSync(f)) fs.unlinkSync(f); } catch {}
+	}
+	// Clean up socket if still around
+	const socketPath = getSocketPath(name);
+	try { if (fs.existsSync(socketPath)) fs.unlinkSync(socketPath); } catch {}
+}
+
 /**
  * Get session info
  */

package/index.ts

@@ -2,13 +2,13 @@
  * Spar Extension - Agent-to-agent sparring
  * 
  * Provides a `spar` tool for back-and-forth dialogue with peer AI models,
- * plus /peek and /peek-all commands for viewing spar sessions.
+ * plus /spar and /spview commands for viewing spar sessions.
  */
 
 import type { ExtensionAPI, Theme } from "@mariozechner/pi-coding-agent";
 import { StringEnum } from "@mariozechner/pi-ai";
 import { Type } from "@sinclair/typebox";
-import { Text, Container, Spacer, SelectList, Input, matchesKey, type SelectItem, type SelectListTheme } from "@mariozechner/pi-tui";
+import { Text, Container, Spacer, SelectList, Input, matchesKey, truncateToWidth, type SelectItem, type SelectListTheme } from "@mariozechner/pi-tui";
 import {
 	sendMessage,
 	listSessions,
@@ -17,6 +17,7 @@ import {
 	getConfiguredModelsDescription,
 	loadSparConfig,
 	saveSparConfig,
+	deleteSession,
 	type SparModelConfig,
 	DEFAULT_TIMEOUT,
 } from "./core.js";
@@ -48,7 +49,7 @@ function suggestAlias(provider: string, modelId: string): string {
 
 export default function (pi: ExtensionAPI) {
 	// ==========================================================================
-	// Tool Registration — called on load and after /spar-models changes config
+	// Tool Registration — model aliases are configured via /spmodels
 	// ==========================================================================
 
 	pi.registerTool({
@@ -117,7 +118,7 @@ spar({
 				description: "Message to send (required for send)",
 			})),
 			model: Type.Optional(Type.String({
-				description: "Model alias (from /spar-models) or provider:model. Required for first message in a session.",
+				description: "Model alias (from /spmodels) or provider:model. Required for first message in a session.",
 			})),
 			thinking: Type.Optional(StringEnum(["off", "minimal", "low", "medium", "high"] as const, {
 				description: "Thinking level (default: high)",
@@ -437,14 +438,14 @@ spar({
 	});
 
 	// ==========================================================================
-	// Command: /spar-models — configure available sparring models
+	// Command: /spmodels — configure available sparring models
 	// ==========================================================================
 
-	pi.registerCommand("spar-models", {
+	pi.registerCommand("spmodels", {
 		description: "Configure models available for sparring",
 		handler: async (_args, ctx) => {
 			if (!ctx.hasUI) {
-				ctx.ui.notify("Interactive mode required for /spar-models", "warning");
+				ctx.ui.notify("Interactive mode required for /spmodels", "warning");
 				return;
 			}
 
@@ -603,11 +604,11 @@ spar({
 	});
 
 	// ==========================================================================
-	// Commands: /peek and /peek-all
+	// Commands: /spar and /spview
 	// ==========================================================================
 
-	pi.registerCommand("peek", {
-		description: "Peek at a spar session. Usage: /peek [session-name]",
+	pi.registerCommand("spar", {
+		description: "Peek at a spar session. Usage: /spar [session-name]",
 		getArgumentCompletions: (prefix: string) => {
 			const sessions = listPeekableSessions();
 			const items = sessions.map((s) => ({
@@ -632,7 +633,7 @@ spar({
 			if (!sessionId) {
 				const available = listPeekableSessions();
 				if (available.length > 0) {
-					ctx.ui.notify(`No recent spar. Try: /peek ${available[0].name}`, "info");
+					ctx.ui.notify(`No recent spar. Try: /spar ${available[0].name}`, "info");
 				} else {
 					ctx.ui.notify("No spar sessions found", "info");
 				}
@@ -660,100 +661,164 @@ spar({
 		},
 	});
 
-	pi.registerCommand("peek-all", {
-		description: "List all spar sessions and pick one to peek",
+	pi.registerCommand("spview", {
+		description: "Browse spar sessions — view, peek, or delete",
 		handler: async (_args, ctx) => {
-			const sessions = listPeekableSessions();
+			const result = await ctx.ui.custom<{ action: "peek"; name: string } | undefined>(
+				(tui, theme, _kb, done) => {
+					let selectedIndex = 0;
+					let cachedLines: string[] | undefined;
 
-			if (sessions.length === 0) {
-				ctx.ui.notify("No spar sessions found", "info");
-				return;
-			}
+					const fg = theme.fg.bind(theme);
+
+					function refresh() {
+						cachedLines = undefined;
+						tui.requestRender();
+					}
 
-			// Use custom component with SelectList for proper filtering/pagination
-			const selected = await ctx.ui.custom<string | null>((tui, theme, _kb, done) => {
-				const items: SelectItem[] = sessions.map((s) => {
-					const status = s.active ? "●" : "○";
-					const model = s.model ? `[${s.model}]` : "";
-					const age = s.lastActivity ? formatAge(s.lastActivity) : "";
-					const msgs = s.messageCount > 0 ? `${s.messageCount}msg` : "";
-					// Format: "● session-name [gpt5] 3msg 2h"
-					const desc = [model, msgs, age].filter(Boolean).join(" ");
 					return {
-						value: s.name,
-						label: `${status} ${s.name}`,
-						description: desc,
-					};
-				});
+						render(width: number): string[] {
+							if (cachedLines) return cachedLines;
 
-				const selectList = new SelectList(items, 15, {
-					selectedPrefix: (t: string) => theme.bg("selectedBg", theme.fg("accent", t)),
-					selectedText: (t: string) => theme.bg("selectedBg", t),
-					description: (t: string) => theme.fg("muted", t),
-					scrollInfo: (t: string) => theme.fg("dim", t),
-					noMatch: (t: string) => theme.fg("warning", t),
-				});
+							const sessions = listPeekableSessions();
+							if (selectedIndex >= sessions.length) selectedIndex = Math.max(0, sessions.length - 1);
 
-				selectList.onSelect = (item) => done(item.value);
-				selectList.onCancel = () => done(null);
+							const lines: string[] = [];
 
-				// Wrapper with filter display
-				let filter = "";
-				const filterText = new Text("", 0, 0);
-				
-				const updateFilterDisplay = () => {
-					if (filter) {
-						filterText.text = theme.fg("dim", "Filter: ") + theme.fg("accent", filter) + theme.fg("dim", "▏");
-					} else {
-						filterText.text = theme.fg("dim", "Type to filter...");
-					}
-				};
-				updateFilterDisplay();
-
-				const container = new Container();
-				container.addChild(new Text(theme.fg("accent", "Spar Sessions") + theme.fg("dim", " (↑↓ navigate, enter select, esc cancel)"), 0, 1));
-				container.addChild(filterText);
-				container.addChild(selectList);
-
-				(container as any).handleInput = (data: string) => {
-					if (matchesKey(data, "escape")) {
-						done(null);
-					} else if (matchesKey(data, "return")) {
-						selectList.handleInput(data);
-					} else if (matchesKey(data, "up") || matchesKey(data, "down")) {
-						selectList.handleInput(data);
-						tui.requestRender();
-					} else if (matchesKey(data, "backspace")) {
-						filter = filter.slice(0, -1);
-						selectList.setFilter(filter);
-						updateFilterDisplay();
-						tui.requestRender();
-					} else if (data.length === 1 && data >= " ") {
-						filter += data;
-						selectList.setFilter(filter);
-						updateFilterDisplay();
-						tui.requestRender();
-					}
-				};
+							lines.push(fg("accent", "─".repeat(width)));
+							lines.push(fg("accent", theme.bold(" Spar Sessions")) + fg("dim", ` (${sessions.length})`));
+							lines.push("");
 
-				return container;
-			});
+							if (sessions.length === 0) {
+								lines.push(fg("dim", "  No spar sessions found"));
+							} else {
+								// Table header
+								const header = [
+									"name".padEnd(30),
+									"model".padEnd(8),
+									"msgs".padStart(5),
+									"age".padStart(6),
+								].join(" ");
+								lines.push(fg("dim", `    ${header}`));
+
+								// Paginated viewport — show PAGE_SIZE rows around selection
+								const PAGE_SIZE = 15;
+								let viewStart = 0;
+								if (sessions.length > PAGE_SIZE) {
+									// Keep selection centered in viewport
+									viewStart = Math.max(0, Math.min(
+										selectedIndex - Math.floor(PAGE_SIZE / 2),
+										sessions.length - PAGE_SIZE,
+									));
+								}
+								const viewEnd = Math.min(viewStart + PAGE_SIZE, sessions.length);
 
-			if (!selected) return;
+								if (viewStart > 0) {
+									lines.push(fg("dim", `    ↑ ${viewStart} more`));
+								}
 
-			await ctx.ui.custom<void>(
-				(tui, theme, _kb, done) => new SparPeekOverlay(tui, theme, selected, done),
-				{
-					overlay: true,
-					overlayOptions: {
-						anchor: "right-center",
-						width: "45%",
-						minWidth: 50,
-						maxHeight: 60,
-						margin: { right: 2, top: 2, bottom: 2 },
-					},
-				}
+								for (let i = viewStart; i < viewEnd; i++) {
+									const s = sessions[i];
+									const isSelected = i === selectedIndex;
+									const prefix = isSelected ? fg("accent", "→ ") : "  ";
+									const icon = s.active ? fg("success", "●") : fg("dim", "○");
+
+									const row = [
+										s.name.slice(0, 30).padEnd(30),
+										(s.model || "—").padEnd(8),
+										String(s.messageCount || 0).padStart(5),
+										(s.lastActivity ? formatAge(s.lastActivity) : "—").padStart(6),
+									].join(" ");
+
+									const color = isSelected ? "accent" : s.active ? "text" : "muted";
+									lines.push(truncateToWidth(`${prefix}${icon} ${fg(color, row)}`, width));
+								}
+
+								if (viewEnd < sessions.length) {
+									lines.push(fg("dim", `    ↓ ${sessions.length - viewEnd} more`));
+								}
+							}
+
+							lines.push("");
+
+							// Contextual help
+							const helpParts = ["↑↓ navigate"];
+							if (sessions.length > 0) {
+								helpParts.push("enter peek");
+								helpParts.push("d delete");
+								helpParts.push("D delete all");
+							}
+							helpParts.push("esc close");
+							lines.push(fg("dim", ` ${helpParts.join(" · ")}`));
+
+							lines.push(fg("accent", "─".repeat(width)));
+
+							cachedLines = lines;
+							return lines;
+						},
+
+						handleInput(data: string): void {
+							const sessions = listPeekableSessions();
+
+							if (matchesKey(data, "escape") || data === "q") {
+								done(undefined);
+								return;
+							}
+							if (matchesKey(data, "up") || data === "k") {
+								selectedIndex = selectedIndex <= 0 ? sessions.length - 1 : selectedIndex - 1;
+								refresh();
+								return;
+							}
+							if (matchesKey(data, "down") || data === "j") {
+								selectedIndex = selectedIndex >= sessions.length - 1 ? 0 : selectedIndex + 1;
+								refresh();
+								return;
+							}
+							if (matchesKey(data, "return")) {
+								if (sessions.length > 0 && sessions[selectedIndex]) {
+									done({ action: "peek", name: sessions[selectedIndex].name });
+								}
+								return;
+							}
+							if (data === "d") {
+								if (sessions.length > 0 && sessions[selectedIndex]) {
+									deleteSession(sessions[selectedIndex].name);
+									refresh();
+								}
+								return;
+							}
+							if (data === "D") {
+								for (const s of sessions) {
+									if (!s.active) deleteSession(s.name);
+								}
+								refresh();
+								return;
+							}
+						},
+
+						invalidate(): void {
+							cachedLines = undefined;
+						},
+					};
+				},
 			);
+
+			// Open peek if selected
+			if (result?.action === "peek") {
+				await ctx.ui.custom<void>(
+					(tui, theme, _kb, done) => new SparPeekOverlay(tui, theme, result.name, done),
+					{
+						overlay: true,
+						overlayOptions: {
+							anchor: "right-center",
+							width: "45%",
+							minWidth: 50,
+							maxHeight: 60,
+							margin: { right: 2, top: 2, bottom: 2 },
+						},
+					},
+				);
+			}
 		},
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogulcancelik/pi-spar",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Agent-to-agent sparring for pi. Back-and-forth conversations with peer AI models for debugging, design review, and challenging your thinking.",
   "type": "module",
   "keywords": [
@@ -35,6 +35,7 @@
     "index.ts",
     "core.ts",
     "peek.ts",
+    "assets/peek-demo.jpg",
     "README.md",
     "LICENSE"
   ]

package/peek.ts

@@ -355,6 +355,16 @@ export class SparPeekOverlay {
 			this.status = event.status || "thinking";
 			this.toolName = event.toolName;
 
+			// If there's a user message that hasn't been persisted to file yet, show it
+			if (event.userMessage) {
+				const text = this.getUserText(event.userMessage);
+				if (text) {
+					this.chatContainer.addChild(
+						new UserMessageComponent(text, getMarkdownTheme()),
+					);
+				}
+			}
+
 			// If there's a partial message, use it directly (faithful reconstruction)
 			if (event.partialMessage) {
 				this.streamingMessage = event.partialMessage;
@@ -383,8 +393,16 @@ export class SparPeekOverlay {
 				}
 			}
 		} else if (event.type === "message_start") {
-			// New assistant message — create streaming component (same as interactive-mode)
-			if (event.message?.role === "assistant") {
+			if (event.message?.role === "user") {
+				// User message — render immediately (same as interactive-mode)
+				const text = this.getUserText(event.message);
+				if (text) {
+					this.chatContainer.addChild(
+						new UserMessageComponent(text, getMarkdownTheme()),
+					);
+				}
+			} else if (event.message?.role === "assistant") {
+				// New assistant message — create streaming component
 				this.cleanupStreaming();
 				this.streamingMessage = event.message;
 				this.streamingComponent = new AssistantMessageComponent(
@@ -583,7 +601,7 @@ export class SparPeekOverlay {
 			this.followMode = false;
 			this.scrollOffset = 0;
 			this.tui.requestRender();
-		} else if (data === "G") {
+		} else if (data === "G" || matchesKey(data, "shift+g")) {
 			this.followMode = true;
 			this.scrollOffset = 999999;
 			this.tui.requestRender();