npm - claude-plan-viewer - Versions diffs - 1.1.1 → 1.3.0 - Mend

claude-plan-viewer 1.1.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/index.html +2 -2
package/index.ts +220 -43
package/package.json +13 -3
package/src/client/App.tsx +173 -0
package/src/client/components/DetailOverlay.tsx +88 -0
package/src/client/components/DetailPanel.tsx +84 -0
package/src/client/components/Header.tsx +55 -0
package/src/client/components/HelpModal.tsx +58 -0
package/src/client/components/Markdown.tsx +16 -0
package/src/client/components/PlanRow.tsx +53 -0
package/src/client/components/PlansTable.tsx +94 -0
package/src/client/components/ProjectFilter.tsx +180 -0
package/src/client/components/SearchInput.tsx +42 -0
package/src/client/components/index.ts +10 -0
package/src/client/hooks/index.ts +3 -0
package/src/client/hooks/useDebounce.ts +17 -0
package/src/client/hooks/useFilters.ts +78 -0
package/src/client/hooks/useKeyboard.ts +114 -0
package/src/client/hooks/usePlans.ts +169 -0
package/src/client/hooks/useProjects.ts +21 -0
package/src/client/index.tsx +11 -0
package/src/client/types.ts +19 -0
package/src/client/utils/api.ts +38 -0
package/src/client/utils/formatters.ts +40 -0
package/src/client/utils/index.ts +15 -0
package/src/client/utils/markdown.ts +123 -0
package/src/client/utils/strings.ts +18 -0
package/styles.css +297 -118
package/frontend.ts +0 -843

package/index.html CHANGED Viewed

@@ -8,7 +8,7 @@
   <script src="./prism.bundle.js"></script>
 </head>
 <body>
-  <div id="app"></div>
-  <script type="module" src="./frontend.ts"></script>
+  <div id="root"></div>
+  <script type="module" src="./src/client/index.tsx"></script>
 </body>
 </html>

package/index.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-import { readdir, stat } from "node:fs/promises";
+import { readdir, stat, watch } from "node:fs/promises";
 import { join } from "node:path";
 import { homedir } from "node:os";
 import index from "./index.html";
@@ -8,16 +8,54 @@ import prismBundlePath from "./prism.bundle.js" with { type: "file" };
 const PLANS_DIR = join(homedir(), ".claude", "plans");
 const PROJECTS_DIR = join(homedir(), ".claude", "projects");
-// Parse --port from command line arguments (undefined = auto-assign)
-function getRequestedPort(): number | undefined {
-  const args = process.argv;
-  const portIndex = args.indexOf("--port");
-  const portArg = args[portIndex + 1];
-  if (portIndex !== -1 && portArg) {
-    const port = parseInt(portArg, 10);
-    if (!isNaN(port)) return port;
+interface CliArgs {
+  port?: number;
+  json?: boolean;
+  output?: string;
+}
+function parseCliArgs(): CliArgs {
+  const args: CliArgs = {};
+  const argv = process.argv.slice(2);
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    const nextArg = argv[i + 1];
+    if (arg === "--port" || arg === "-p") {
+      if (nextArg && !nextArg.startsWith("-")) {
+        args.port = parseInt(nextArg, 10);
+        i++;
+      }
+    } else if (arg === "--json" || arg === "-j") {
+      args.json = true;
+    } else if (arg === "--output" || arg === "-o") {
+      if (nextArg && !nextArg.startsWith("-")) {
+        args.output = nextArg;
+        i++;
+      }
+    }
+  }
+  return args;
+}
+async function exportPlansAsJson(outputPath?: string): Promise<void> {
+  const plans = await loadPlans();
+  const plansWithContent = plans.map((plan) => ({
+    ...plan,
+    content: contentCache.get(plan.filename) || "",
+  }));
+  const jsonOutput = JSON.stringify(plansWithContent, null, 2);
+  if (outputPath) {
+    await Bun.write(outputPath, jsonOutput);
+    console.log(`Exported ${plans.length} plans to ${outputPath}`);
+  } else {
+    console.log(jsonOutput);
   }
-  return undefined;
 }
 // Find an available port starting from the requested port
@@ -52,17 +90,21 @@ async function openInEditor(filepath: string): Promise<void> {
   }
 }
-interface Plan {
+interface PlanMetadata {
   filename: string;
   filepath: string;
   title: string;
-  content: string;
   size: number;
   modified: string;
   created: string;
   lineCount: number;
   wordCount: number;
   project: string | null;
+  sessionId: string | null;
+}
+interface Plan extends PlanMetadata {
+  content: string;
 }
 // Extract project name from a full path (cross-platform)
@@ -83,27 +125,56 @@ function extractProjectName(cwd: string): string {
 function extractCwdFromJsonl(content: string): string | null {
   if (!content) return null;
   const match = content.match(/"cwd":"([^"]+)"/);
-  if (!match) return null;
+  if (!match || !match[1]) return null;
   // Unescape JSON string (convert \\\\ to \\)
   return match[1].replace(/\\\\/g, "\\");
 }
-// Extract unique slugs from JSONL content
+// Extract slug -> sessionId mapping from JSONL content
+// Each line in JSONL may contain both "slug" and "sessionId" fields
+function extractSlugSessionMap(content: string): Map<string, string> {
+  if (!content) return new Map();
+  const slugSessionMap = new Map<string, string>();
+  // Process each line to find slug and sessionId pairs
+  const lines = content.split("\n");
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    const slugMatch = line.match(/"slug":"([\w-]+)"/);
+    const sessionMatch = line.match(/"sessionId":"([^"]+)"/);
+    if (slugMatch && slugMatch[1] && sessionMatch && sessionMatch[1]) {
+      slugSessionMap.set(slugMatch[1], sessionMatch[1]);
+    }
+  }
+  return slugSessionMap;
+}
+// Extract unique slugs from JSONL content (for backwards compatibility)
 function extractSlugsFromJsonl(content: string): string[] {
   if (!content) return [];
   const slugs = new Set<string>();
   const matches = content.matchAll(/"slug":"([\w-]+)"/g);
   for (const match of matches) {
-    slugs.add(match[1]);
+    if (match[1]) {
+      slugs.add(match[1]);
+    }
   }
   return Array.from(slugs);
 }
+interface SlugMetadata {
+  project: string;
+  sessionId: string | null;
+}
 interface ProjectMapping {
-  [slug: string]: string; // plan slug -> project name
+  [slug: string]: SlugMetadata;
 }
-// Build a mapping of plan slugs to project names by scanning Claude Code's project metadata
+// Build a mapping of plan slugs to project names and session IDs by scanning Claude Code's project metadata
 async function buildProjectMapping(): Promise<ProjectMapping> {
   const mapping: ProjectMapping = {};
@@ -115,12 +186,12 @@ async function buildProjectMapping(): Promise<ProjectMapping> {
       const dirStats = await stat(dirPath);
       if (!dirStats.isDirectory()) continue;
-      // Find JSONL files and extract cwd + slugs
+      // Find JSONL files and extract cwd + slugs + sessionIds
       const files = await readdir(dirPath);
       const jsonlFiles = files.filter((f) => f.endsWith(".jsonl"));
       let projectName: string | null = null;
-      const allSlugs: string[] = [];
+      const slugSessionMap = new Map<string, string>();
       for (const file of jsonlFiles) {
         try {
@@ -134,18 +205,23 @@ async function buildProjectMapping(): Promise<ProjectMapping> {
             }
           }
-          // Collect all slugs
-          const slugs = extractSlugsFromJsonl(content);
-          allSlugs.push(...slugs);
+          // Collect slug -> sessionId mappings
+          const fileSlugSessions = extractSlugSessionMap(content);
+          for (const [slug, sessionId] of fileSlugSessions) {
+            slugSessionMap.set(slug, sessionId);
+          }
         } catch {
           // Skip files that can't be read
         }
       }
-      // Map all slugs to this project
+      // Map all slugs to this project with their session IDs
       if (projectName) {
-        for (const slug of allSlugs) {
-          mapping[slug] = projectName;
+        for (const [slug, sessionId] of slugSessionMap) {
+          mapping[slug] = {
+            project: projectName,
+            sessionId: sessionId,
+          };
         }
       }
     }
@@ -156,9 +232,19 @@ async function buildProjectMapping(): Promise<ProjectMapping> {
   return mapping;
 }
-async function loadPlans(): Promise<Plan[]> {
-  // Build project mapping from Claude Code metadata
-  const projectMapping = await buildProjectMapping();
+let cachedPlans: PlanMetadata[] | null = null;
+let cachedProjectMapping: ProjectMapping | null = null;
+const contentCache = new Map<string, string>();
+async function loadPlans(): Promise<PlanMetadata[]> {
+  // Build or use cached project mapping
+  let projectMapping: ProjectMapping;
+  if (!cachedProjectMapping) {
+    projectMapping = await buildProjectMapping();
+    cachedProjectMapping = projectMapping;
+  } else {
+    projectMapping = cachedProjectMapping;
+  }
   const files = await readdir(PLANS_DIR);
   const mdFiles = files.filter((f) => f.endsWith(".md"));
@@ -167,6 +253,7 @@ async function loadPlans(): Promise<Plan[]> {
     mdFiles.map(async (filename) => {
       const filepath = join(PLANS_DIR, filename);
       const file = Bun.file(filepath);
       const [content, stats] = await Promise.all([
         file.text(),
         stat(filepath),
@@ -179,42 +266,120 @@ async function loadPlans(): Promise<Plan[]> {
       // Look up project from metadata using plan slug (filename without .md)
       const slug = filename.replace(".md", "");
+      const lineCount = content.split("\n").length;
+      const wordCount = content.split(/\s+/).filter(Boolean).length;
+      const metadata = projectMapping[slug];
+      // Cache content separately for search and lazy loading
+      contentCache.set(filename, content);
       return {
         filename,
         filepath,
         title,
-        content,
         size: stats.size,
         modified: stats.mtime.toISOString(),
         created: stats.birthtime.toISOString(),
-        lineCount: content.split("\n").length,
-        wordCount: content.split(/\s+/).filter(Boolean).length,
-        project: projectMapping[slug] || null,
+        lineCount,
+        wordCount,
+        project: metadata?.project || null,
+        sessionId: metadata?.sessionId || null,
       };
     })
   );
-  return plans.sort(
-    (a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime()
-  );
+  cachedPlans = plans;
+  return plans;
+}
+function invalidateCache() {
+  cachedPlans = null;
+  cachedProjectMapping = null;
+  contentCache.clear();
+}
+// Watch plans directory for changes and invalidate cache
+async function watchPlansDirectory() {
+  try {
+    const watcher = watch(PLANS_DIR);
+    for await (const event of watcher) {
+      if (event.filename?.endsWith(".md")) {
+        invalidateCache();
+      }
+    }
+  } catch {
+    // Directory may not exist or watching may not be supported
+  }
 }
 // Main server startup
 async function startServer() {
-  const requestedPort = getRequestedPort();
-  const port = await findAvailablePort(requestedPort ?? 3000);
+  const args = parseCliArgs();
+  const port = await findAvailablePort(args.port ?? 3000);
   const server = Bun.serve({
     port,
-    static: {
-      "/prism.bundle.js": Bun.file(prismBundlePath),
-    },
     routes: {
       "/": index,
-      "/api/plans": async () => {
-        const plans = await loadPlans();
-        return Response.json(plans);
+      "/api/projects": async () => {
+        // Lazy load cache on first request
+        if (!cachedPlans) {
+          await loadPlans();
+        }
+        const plans = cachedPlans || [];
+        const projects = [...new Set(plans.map(p => p.project).filter(Boolean))] as string[];
+        projects.sort((a, b) => a.localeCompare(b));
+        return Response.json({ projects });
+      },
+      "/api/plans": async (req) => {
+        // Lazy load cache on first request
+        if (!cachedPlans) {
+          await loadPlans();
+        }
+        const plans = cachedPlans || [];
+        // Strip content from response - will be fetched separately via /api/plans/{id}/content
+        const plansWithoutContent = plans.map(p => ({
+          filename: p.filename,
+          filepath: p.filepath,
+          title: p.title,
+          size: p.size,
+          modified: p.modified,
+          created: p.created,
+          lineCount: p.lineCount,
+          wordCount: p.wordCount,
+          project: p.project,
+          sessionId: p.sessionId,
+        }));
+        return Response.json({
+          plans: plansWithoutContent,
+        });
+      },
+      "/api/plans/:filename/content": async (req) => {
+        // Lazy load cache on first request
+        if (!cachedPlans) {
+          await loadPlans();
+        }
+        const filename = req.params.filename as string;
+        const content = contentCache.get(filename);
+        if (content === undefined) {
+          return new Response("Plan not found", { status: 404 });
+        }
+        return Response.json({ content });
+      },
+      "/api/refresh": {
+        POST: async () => {
+          invalidateCache();
+          await loadPlans();
+          return Response.json({ success: true });
+        },
       },
       "/api/open": {
         POST: async (req) => {
@@ -253,12 +418,24 @@ const c = {
 // Main entry point
 (async () => {
+  const args = parseCliArgs();
+  if (args.json) {
+    await exportPlansAsJson(args.output);
+    process.exit(0);
+  }
   const server = await startServer();
   const planCount = (await readdir(PLANS_DIR)).filter(f => f.endsWith('.md')).length;
+  // Start watching for file changes (runs in background)
+  watchPlansDirectory();
   console.log();
   console.log(`${c.bold}${c.magenta}  📋 Plans Viewer${c.reset}`);
   console.log(`${c.dim}  ─────────────────────────────${c.reset}`);
   console.log(`${c.green}  ✓${c.reset} Server running`);
+  console.log(`${c.green}  ✓${c.reset} Watching for file changes`);
   console.log();
   console.log(`${c.dim}  Local:${c.reset}   ${c.cyan}${c.bold}http://localhost:${server.port}${c.reset}`);
   console.log(`${c.dim}  Plans:${c.reset}   ${c.yellow}${planCount} plans${c.reset} in ${c.dim}${PLANS_DIR}${c.reset}`);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "claude-plan-viewer",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "A web-based viewer for Claude Code plan files",
   "type": "module",
   "bin": {
@@ -9,13 +9,15 @@
   "files": [
     "index.ts",
     "index.html",
-    "frontend.ts",
+    "src",
     "styles.css",
     "prism.bundle.js"
   ],
   "scripts": {
     "start": "bun index.ts",
     "dev": "bun --hot index.ts",
+    "test": "bun test index.test.ts frontend.test.ts",
+    "test:e2e": "bunx playwright test",
     "build": "bun build --compile --minify --bytecode ./index.ts --outfile ./dist/plans-viewer",
     "build:macos-arm64": "bun build --compile --target=bun-darwin-arm64 --minify --bytecode ./index.ts --outfile ./dist/plans-viewer-macos-arm64",
     "build:macos-x64": "bun build --compile --target=bun-darwin-x64 --minify --bytecode ./index.ts --outfile ./dist/plans-viewer-macos-x64",
@@ -45,9 +47,17 @@
     "bun": ">=1.0.0"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@playwright/test": "^1.57.0",
+    "@types/bun": "latest",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3"
   },
   "peerDependencies": {
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-select": "^5.10.2"
   }
 }

package/src/client/App.tsx ADDED Viewed

@@ -0,0 +1,173 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import type { Plan } from "./types.ts";
+import { usePlans } from "./hooks/usePlans.ts";
+import { useProjects } from "./hooks/useProjects.ts";
+import { useFilters } from "./hooks/useFilters.ts";
+import { useDebounce } from "./hooks/useDebounce.ts";
+import { useKeyboard } from "./hooks/useKeyboard.ts";
+import { openInEditor } from "./utils/api.ts";
+import { Header } from "./components/Header.tsx";
+import { PlansTable } from "./components/PlansTable.tsx";
+import { DetailPanel } from "./components/DetailPanel.tsx";
+import { DetailOverlay } from "./components/DetailOverlay.tsx";
+import { HelpModal } from "./components/HelpModal.tsx";
+export function App() {
+  const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  // Filter state
+  const {
+    searchQuery,
+    setSearchQuery,
+    sortKey,
+    sortDir,
+    setSort,
+    selectedProjects,
+    toggleProject,
+    clearProjects,
+  } = useFilters();
+  // Debounce search to avoid hitting API on every keystroke
+  const debouncedSearch = useDebounce(searchQuery, 300);
+  // Convert Set to array for API
+  const projectsArray = useMemo(
+    () => Array.from(selectedProjects),
+    [selectedProjects]
+  );
+  // Fetch plans with server-side filtering
+  const { plans, loading, refresh, ensureContent } = usePlans({
+    q: debouncedSearch,
+    sort: sortKey,
+    dir: sortDir,
+    projects: projectsArray,
+  });
+  // Fetch projects list
+  const { projects: allProjects } = useProjects();
+  // Load content when plan is selected
+  const handleSelectPlan = useCallback(
+    async (plan: Plan | null) => {
+      if (plan) {
+        const withContent = await ensureContent(plan);
+        setSelectedPlan(withContent);
+      } else {
+        setSelectedPlan(null);
+      }
+    },
+    [ensureContent]
+  );
+  // Open in editor
+  const handleOpenEditor = useCallback(async () => {
+    if (selectedPlan) {
+      await openInEditor(selectedPlan.filepath);
+    }
+  }, [selectedPlan]);
+  // Copy session ID
+  const handleCopySession = useCallback((sessionId: string) => {
+    navigator.clipboard.writeText(`claude --resume ${sessionId}`);
+  }, []);
+  // Clear search
+  const handleClearSearch = useCallback(() => {
+    setSearchQuery("");
+    const searchEl = document.getElementById("search") as HTMLInputElement;
+    searchEl?.blur();
+  }, [setSearchQuery]);
+  // Keyboard shortcuts
+  useKeyboard({
+    plans,
+    selectedPlan,
+    onSelectPlan: handleSelectPlan,
+    onOpenEditor: handleOpenEditor,
+    onToggleHelp: () => setShowHelp((prev) => !prev),
+    onToggleOverlay: () => setShowOverlay((prev) => !prev),
+    onClearSearch: handleClearSearch,
+  });
+  // Auto-select first plan when plans change
+  useEffect(() => {
+    if (!selectedPlan && plans.length > 0) {
+      const firstPlan = plans[0];
+      if (firstPlan) {
+        handleSelectPlan(firstPlan);
+      }
+    }
+  }, [plans, selectedPlan, handleSelectPlan]);
+  // Clear selection if selected plan is no longer in results
+  useEffect(() => {
+    if (selectedPlan && !plans.find((p) => p.filename === selectedPlan.filename)) {
+      setSelectedPlan(null);
+    }
+  }, [plans, selectedPlan]);
+  if (loading && plans.length === 0) {
+    return (
+      <div className="container">
+        <div className="loading-container">
+          <div className="loading">Loading plans...</div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="container">
+      <div id="list-panel" className="list-panel">
+        <Header
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          projects={allProjects}
+          selectedProjects={selectedProjects}
+          onToggleProject={toggleProject}
+          onClearProjects={clearProjects}
+          onRefresh={refresh}
+        />
+        {plans.length === 0 ? (
+          <div className="empty-state">
+            {searchQuery || selectedProjects.size > 0
+              ? "No plans match your filters"
+              : "No plans found"}
+          </div>
+        ) : (
+          <PlansTable
+            plans={plans}
+            selectedPlan={selectedPlan}
+            searchQuery={searchQuery}
+            sortKey={sortKey}
+            sortDir={sortDir}
+            onSelectPlan={handleSelectPlan}
+            onSort={setSort}
+          />
+        )}
+      </div>
+      <DetailPanel
+        plan={selectedPlan}
+        onOpenEditor={handleOpenEditor}
+        onToggleOverlay={() => setShowOverlay(true)}
+        onCopySession={handleCopySession}
+      />
+      {showOverlay && selectedPlan && (
+        <DetailOverlay
+          plan={selectedPlan}
+          onClose={() => setShowOverlay(false)}
+          onOpenEditor={handleOpenEditor}
+          onCopySession={handleCopySession}
+        />
+      )}
+      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
+    </div>
+  );
+}