@miphamai/cli 0.3.0 → 0.5.0

package/src/artifacts/server.ts

@@ -0,0 +1,374 @@
+import { createServer, type Server } from 'node:http'
+import { createReadStream, existsSync, statSync } from 'node:fs'
+import { join, normalize, extname } from 'node:path'
+import { ARTIFACT_ALLOWED_EXTENSIONS } from '../shared/constants'
+import { readManifest } from './manifest'
+import { ArtifactVersioning } from './versioning'
+import type { ArtifactEntry } from '../shared/types'
+
+// ── SSE client tracking ──
+interface SseClient {
+  id: number
+  res: any
+}
+
+/**
+ * Embedded HTTP server for serving artifact files (.html, .svg).
+ *
+ * Phase 2 additions:
+ * - Gallery page at / with dark-themed card layout
+ * - SSE /events endpoint for live reload
+ * - Versioned file serving (name.v2.html)
+ * - Port auto-increment on conflict
+ */
+export class ArtifactServer {
+  private server: Server | null = null
+  private port: number
+  private artifactsDir: string
+  private started = false
+  private sseClients: SseClient[] = []
+  private sseIdCounter = 0
+  private versioning: ArtifactVersioning
+
+  constructor(artifactsDir: string, preferredPort: number) {
+    this.artifactsDir = artifactsDir
+    this.port = preferredPort
+    this.versioning = new ArtifactVersioning(artifactsDir)
+  }
+
+  /** Notify all connected SSE clients to reload. Called after artifact changes. */
+  notifyReload(): void {
+    for (const client of this.sseClients) {
+      try {
+        client.res.write('event: reload\ndata: {}\n\n')
+      } catch {
+        // Client disconnected — will be cleaned up on next request
+      }
+    }
+  }
+
+  async start(maxTries = 10): Promise<number> {
+    if (this.started) return this.port
+
+    for (let attempt = 0; attempt < maxTries; attempt++) {
+      const port = this.port + attempt
+      try {
+        await this.listenOn(port)
+        this.port = port
+        this.started = true
+        return port
+      } catch (err: unknown) {
+        if ((err as NodeJS.ErrnoException).code !== 'EADDRINUSE') throw err
+      }
+    }
+
+    throw new Error(`Artifact server could not find an available port after ${maxTries} attempts.`)
+  }
+
+  stop(): void {
+    // Close all SSE connections
+    for (const client of this.sseClients) {
+      try {
+        client.res.end()
+      } catch {
+        /* ignore */
+      }
+    }
+    this.sseClients = []
+
+    if (this.server) {
+      this.server.close()
+      this.server = null
+      this.started = false
+    }
+  }
+
+  getPort(): number {
+    return this.port
+  }
+  isRunning(): boolean {
+    return this.started
+  }
+
+  resolveFile(urlPath: string): { filePath: string; error?: string; status?: number } {
+    const cleaned = urlPath.replace(/^\/+/, '')
+    const normalized = normalize(cleaned)
+    if (normalized.startsWith('..') || normalized.includes('/../')) {
+      return { filePath: '', error: 'Path traversal rejected', status: 403 }
+    }
+
+    const fullPath = join(this.artifactsDir, normalized)
+    const ext = extname(fullPath).toLowerCase()
+    if (!ARTIFACT_ALLOWED_EXTENSIONS.includes(ext)) {
+      return { filePath: '', error: `File type "${ext}" not served`, status: 403 }
+    }
+
+    return { filePath: fullPath }
+  }
+
+  // ── Private ──
+
+  private listenOn(port: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const srv = createServer((req, res) => {
+        this.handleRequest(req, res)
+      })
+      srv.on('error', reject)
+      srv.listen(port, () => {
+        this.server = srv
+        resolve()
+      })
+    })
+  }
+
+  private handleRequest(req: { method?: string; url?: string }, res: any): void {
+    if (req.method !== 'GET') {
+      res.writeHead(405, { Allow: 'GET' })
+      res.end('Method Not Allowed')
+      return
+    }
+
+    const urlPath = req.url || '/'
+
+    // SSE endpoint
+    if (urlPath === '/events') {
+      this.handleSse(res)
+      return
+    }
+
+    // Name-based SSE endpoint: GET /:name/sse
+    if (urlPath.endsWith('/sse') && urlPath.length > 4) {
+      const name = urlPath.slice(1, -4) // strip leading '/' and trailing '/sse'
+      if (name.length > 0 && !name.includes('/')) {
+        this.handleNameSse(name, res)
+        return
+      }
+    }
+
+    // Gallery page
+    if (urlPath === '/' || urlPath === '/index.html') {
+      this.serveGallery(res)
+      return
+    }
+
+    // Artifact file
+    this.serveArtifact(urlPath, res)
+  }
+
+  // ── SSE ──
+
+  private handleSse(res: any): void {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Access-Control-Allow-Origin': '*',
+    })
+
+    const client: SseClient = { id: ++this.sseIdCounter, res }
+    this.sseClients.push(client)
+
+    // Send initial heartbeat
+    res.write(':ok\n\n')
+
+    // Clean up on close
+    res.on('close', () => {
+      this.sseClients = this.sseClients.filter((c) => c.id !== client.id)
+    })
+  }
+
+  /** Per-artifact SSE stream: pushes content updates to connected browsers every 500ms. */
+  private handleNameSse(name: string, res: any): void {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Access-Control-Allow-Origin': '*',
+    })
+
+    const interval = setInterval(() => {
+      const content = this.versioning.getVersion(name)
+      if (content) {
+        res.write(`data: ${JSON.stringify({ type: 'update', name, content })}\n\n`)
+      }
+    }, 500)
+
+    res.on('close', () => clearInterval(interval))
+  }
+
+  // ── Gallery Page ──
+
+  private serveGallery(res: any): void {
+    const manifest = readManifest(this.artifactsDir)
+    const artifacts = manifest.artifacts
+
+    const cards =
+      artifacts.length === 0
+        ? `<div style="grid-column: 1/-1; text-align: center; padding: 60px 20px; color: #666;">
+           <p style="font-size: 48px; margin: 0 0 16px 0;">🎨</p>
+           <p style="font-size: 16px;">No artifacts yet.</p>
+           <p style="font-size: 13px; color: #555;">Ask the AI to create one with the Artifact tool.</p>
+         </div>`
+        : artifacts.map((a) => this.artifactCard(a)).join('\n')
+
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mipham Code — Artifacts</title>
+<style>
+  :root {
+    --bg: #0d1117; --surface: #161b22; --border: #30363d;
+    --text: #c9d1d9; --muted: #8b949e; --accent: #58a6ff;
+    --green: #3fb950; --orange: #d2991d; --purple: #a371f7;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background: var(--bg); color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    min-height: 100vh;
+  }
+  header {
+    background: var(--surface); border-bottom: 1px solid var(--border);
+    padding: 20px 32px; display: flex; align-items: center; justify-content: space-between;
+  }
+  header h1 { font-size: 20px; font-weight: 600; }
+  header .meta { font-size: 13px; color: var(--muted); }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px; padding: 24px 32px;
+  }
+  .card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 8px; padding: 20px; transition: border-color .15s;
+    text-decoration: none; color: inherit; display: block;
+  }
+  .card:hover { border-color: var(--accent); }
+  .card .icon { font-size: 32px; margin-bottom: 12px; }
+  .card .name { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--accent); }
+  .card .row { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 12px; }
+  .card .badge {
+    display: inline-block; padding: 1px 6px; border-radius: 3px;
+    font-size: 11px; font-weight: 600;
+  }
+  .badge-html { background: #1f3a5f; color: var(--accent); }
+  .badge-svg { background: #2d1f4e; color: var(--purple); }
+  .badge-version { background: #2d2d1f; color: var(--orange); }
+  footer {
+    padding: 16px 32px; border-top: 1px solid var(--border);
+    font-size: 12px; color: var(--muted); display: flex; gap: 16px;
+  }
+  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 4px; }
+</style>
+</head>
+<body>
+<header>
+  <div>
+    <h1>🎨 Mipham Code Artifacts</h1>
+    <p style="font-size:13px;color:var(--muted);margin-top:4px;">
+      Interactive visual output from your AI sessions
+    </p>
+  </div>
+  <div class="meta">
+    <div><span class="dot"></span> Server running</div>
+    <div>Port ${this.port}</div>
+  </div>
+</header>
+<div class="grid">${cards}</div>
+<footer>
+  <span>${artifacts.length} artifact${artifacts.length === 1 ? '' : 's'}</span>
+  <span>·</span>
+  <span>Open in terminal: <code>/artifact open &lt;name&gt;</code></span>
+  <span>·</span>
+  <span>Auto-refresh active</span>
+</footer>
+<script>
+  // SSE auto-refresh
+  const es = new EventSource('/events')
+  es.addEventListener('reload', () => location.reload())
+</script>
+</body>
+</html>`
+
+    res.writeHead(200, {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-cache',
+    })
+    res.end(html)
+  }
+
+  private artifactCard(a: ArtifactEntry): string {
+    const icon = a.type === 'svg' ? '🖼' : '📊'
+    const sizeStr =
+      a.size < 1024
+        ? `${a.size}B`
+        : a.size < 1_048_576
+          ? `${(a.size / 1024).toFixed(1)}KB`
+          : `${(a.size / 1_048_576).toFixed(1)}MB`
+    const date = a.createdAt.slice(0, 16).replace('T', ' ')
+    const versionInfo =
+      a.versions && a.versions.length > 1
+        ? `<span class="badge badge-version">${a.versions.length} versions</span>`
+        : ''
+
+    return `<a class="card" href="/${a.sessionId}/${a.name}.${a.type === 'svg' ? 'svg' : 'html'}">
+  <div class="icon">${icon}</div>
+  <div class="name">${this.escapeHtml(a.name)}</div>
+  <div class="row">
+    <span class="badge badge-${a.type}">${a.type.toUpperCase()}</span>
+    <span>${sizeStr}</span>
+    <span>${date}</span>
+    ${versionInfo}
+  </div>
+  <div class="row">
+    <span>session: ${a.sessionId}</span>
+  </div>
+</a>`
+  }
+
+  // ── Artifact Serving ──
+
+  private serveArtifact(urlPath: string, res: any): void {
+    const { filePath, error, status } = this.resolveFile(urlPath)
+
+    if (error) {
+      res.writeHead(status || 403, { 'Content-Type': 'text/plain' })
+      res.end(error)
+      return
+    }
+
+    if (!existsSync(filePath)) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' })
+      res.end('Artifact not found')
+      return
+    }
+
+    const ext = extname(filePath).toLowerCase()
+    const mimeType = ext === '.svg' ? 'image/svg+xml' : 'text/html; charset=utf-8'
+    const size = statSync(filePath).size
+
+    res.writeHead(200, {
+      'Content-Type': mimeType,
+      'Content-Length': size,
+      'Content-Security-Policy':
+        "default-src 'self'; style-src 'unsafe-inline'; script-src 'none'; img-src data: 'self';",
+      'X-Content-Type-Options': 'nosniff',
+      'Cache-Control': 'no-cache',
+    })
+
+    const stream = createReadStream(filePath)
+    stream.pipe(res)
+    stream.on('error', () => {
+      if (!res.headersSent) {
+        res.writeHead(500)
+        res.end('Stream error')
+      }
+    })
+  }
+
+  private escapeHtml(s: string): string {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  }
+}

package/src/artifacts/versioning.ts

@@ -0,0 +1,127 @@
+import { mkdirSync, writeFileSync, readFileSync, existsSync, readdirSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { homedir } from 'node:os'
+
+const DEFAULT_VERSIONS_DIR = join(homedir(), '.mipham', 'artifacts')
+
+export interface ArtifactVersion {
+  name: string
+  version: number
+  path: string
+  createdAt: string
+  size: number
+}
+
+/**
+ * Manages artifact version snapshots on disk.
+ *
+ * Directory layout:
+ *   <dir>/<name>/versions/v1.html
+ *   <dir>/<name>/versions/v2.html
+ *   <dir>/<name>/current.html     (latest snapshot)
+ *   <dir>/<name>/manifest.json    ({ name, currentVersion, versionCount })
+ */
+export class ArtifactVersioning {
+  private dir: string
+
+  constructor(dir?: string) {
+    this.dir = dir ?? DEFAULT_VERSIONS_DIR
+    mkdirSync(this.dir, { recursive: true })
+  }
+
+  /** Save a new version of an artifact. Returns the assigned version number. */
+  saveVersion(name: string, content: string): number {
+    const artifactDir = join(this.dir, name)
+    const versionsDir = join(artifactDir, 'versions')
+    mkdirSync(versionsDir, { recursive: true })
+
+    // Determine next version number
+    const existing = this.listVersions(name)
+    const nextVersion = (existing.length > 0 ? Math.max(...existing.map((v) => v.version)) : 0) + 1
+
+    // Save versioned file
+    const versionPath = join(versionsDir, `v${nextVersion}.html`)
+    writeFileSync(versionPath, content, 'utf-8')
+
+    // Update current.html
+    writeFileSync(join(artifactDir, 'current.html'), content, 'utf-8')
+
+    // Update manifest
+    writeFileSync(
+      join(artifactDir, 'manifest.json'),
+      JSON.stringify(
+        {
+          name,
+          currentVersion: nextVersion,
+          versionCount: nextVersion,
+        },
+        null,
+        2,
+      ),
+    )
+
+    return nextVersion
+  }
+
+  /** List all saved versions for an artifact, newest first. */
+  listVersions(name: string): ArtifactVersion[] {
+    const versionsDir = join(this.dir, name, 'versions')
+    if (!existsSync(versionsDir)) return []
+
+    try {
+      return readdirSync(versionsDir)
+        .filter((f) => f.startsWith('v') && f.endsWith('.html'))
+        .map((f) => {
+          const vNum = parseInt(f.replace('v', '').replace('.html', ''), 10)
+          const path = join(versionsDir, f)
+          const stat = statSync(path)
+          return {
+            name,
+            version: vNum,
+            path,
+            createdAt: stat.birthtime.toISOString(),
+            size: stat.size,
+          }
+        })
+        .sort((a, b) => b.version - a.version)
+    } catch {
+      return []
+    }
+  }
+
+  /**
+   * Get artifact content.
+   * - If a version number is given, returns that specific version.
+   * - Otherwise returns the latest (current.html).
+   * Returns null if the requested version does not exist.
+   */
+  getVersion(name: string, version?: number): string | null {
+    const artifactDir = join(this.dir, name)
+
+    if (version !== undefined) {
+      const vPath = join(artifactDir, 'versions', `v${version}.html`)
+      return existsSync(vPath) ? readFileSync(vPath, 'utf-8') : null
+    }
+
+    const currentPath = join(artifactDir, 'current.html')
+    return existsSync(currentPath) ? readFileSync(currentPath, 'utf-8') : null
+  }
+
+  /** Produce a simple line-by-line text diff between two versions. */
+  diff(name: string, v1: number, v2: number): string {
+    const content1 = this.getVersion(name, v1) || ''
+    const content2 = this.getVersion(name, v2) || ''
+    const lines1 = content1.split('\n')
+    const lines2 = content2.split('\n')
+
+    const diffLines: string[] = []
+    const maxLen = Math.max(lines1.length, lines2.length)
+    for (let i = 0; i < maxLen; i++) {
+      if (lines1[i] !== lines2[i]) {
+        if (lines1[i] !== undefined) diffLines.push(`- ${lines1[i]}`)
+        if (lines2[i] !== undefined) diffLines.push(`+ ${lines2[i]}`)
+      }
+    }
+    return diffLines.length > 0 ? diffLines.join('\n') : '(no changes)'
+  }
+}

package/src/core/context-compact.ts

@@ -0,0 +1,50 @@
+import type { ContextManager, Summarizer } from './context'
+import { snipMessages } from './context-snip'
+
+/**
+ * Layer 3: Reactive Compact — API-based summarization.
+ *
+ * When the context exceeds the compaction threshold, uses an LLM summarizer
+ * to condense the conversation history, keeping recent messages intact.
+ *
+ * After compaction, the context contains:
+ * 1. A summary message of the truncated history
+ * 2. The most recent N messages (kept intact)
+ * 3. The system prompt (unchanged)
+ */
+export async function reactiveCompact(
+  context: ContextManager,
+  summarizer: Summarizer,
+  heading: string,
+  keepRecent: number = 20,
+): Promise<void> {
+  const messages = context.getMessages()
+
+  if (messages.length <= keepRecent + 4) return
+
+  // First, run snip to remove empty pairs
+  const { messages: snipped } = snipMessages(messages)
+
+  if (snipped.length <= keepRecent + 4) return
+
+  // Split: old messages to summarize, recent messages to keep
+  const toSummarize = snipped.slice(0, -keepRecent)
+  const toKeep = snipped.slice(-keepRecent)
+
+  // Generate summary
+  let summary: string
+  try {
+    summary = await summarizer(toSummarize, heading)
+  } catch {
+    // On summarizer failure, do a simple truncation
+    summary = `Earlier conversation (${toSummarize.length} messages) omitted due to context limits.`
+  }
+
+  // Rebuild messages: summary + recent
+  const summaryMsg = {
+    role: 'user' as const,
+    content: `[Earlier conversation summary — ${heading}]: ${summary.slice(0, 2000)}`,
+  }
+
+  context.replaceMessages([summaryMsg, ...toKeep])
+}

package/src/core/context-drain.ts

@@ -0,0 +1,54 @@
+import type { ContextManager } from './context'
+
+const MINIMAL_KEEP = 5
+let drainLevel = 0
+
+/**
+ * Layer 4: Emergency Drain — 413 error recovery.
+ *
+ * Called when a 413 (context too large) error is received.
+ * Progressively strips messages until the context fits:
+ *
+ * Level 1: Drop earliest 50% of messages
+ * Level 2+: Keep only system prompt + last 5 messages
+ *
+ * Returns true if recovery was possible, false if context is already minimal.
+ */
+export async function emergencyDrain(context: ContextManager): Promise<boolean> {
+  const messages = context.getMessages()
+
+  if (messages.length <= MINIMAL_KEEP) {
+    return false // Already minimal, cannot drain further
+  }
+
+  if (drainLevel === 0) {
+    // First attempt: drop earliest 50%
+    const keepCount = Math.max(MINIMAL_KEEP, Math.floor(messages.length / 2))
+    const kept = messages.slice(-keepCount)
+    context.replaceMessages(kept)
+    drainLevel++
+    return true
+  }
+
+  // Subsequent attempts: keep only system + last MINIMAL_KEEP messages
+  const kept = messages.slice(-MINIMAL_KEEP)
+
+  // Add a summary placeholder if we're dropping a lot
+  if (messages.length > MINIMAL_KEEP * 2) {
+    const summaryMsg = {
+      role: 'user' as const,
+      content: `[Emergency context drain: ${messages.length - MINIMAL_KEEP} earlier messages discarded due to token limit.]`,
+    }
+    context.replaceMessages([summaryMsg, ...kept])
+  } else {
+    context.replaceMessages(kept)
+  }
+
+  drainLevel++
+  return true
+}
+
+/** Reset drain level (call at session start). */
+export function resetDrainLevel(): void {
+  drainLevel = 0
+}