claude-plan-viewer 1.1.1 → 1.3.0

package/src/client/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/client/hooks/useFilters.ts

@@ -0,0 +1,78 @@
+import { useState, useCallback } from "react";
+import type { SortKey, SortDir } from "../types.ts";
+
+// Natural default sort direction per column type
+const SORT_DEFAULTS: Record<SortKey, SortDir> = {
+  title: "asc",      // A → Z
+  project: "asc",    // A → Z
+  size: "desc",      // Biggest first
+  lines: "desc",     // Biggest first
+  modified: "desc",  // Newest first
+  created: "desc",   // Newest first
+};
+
+interface UseFiltersReturn {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortKey: SortKey;
+  sortDir: SortDir;
+  setSort: (key: SortKey, dir?: SortDir) => void;
+  selectedProjects: Set<string>;
+  toggleProject: (project: string) => void;
+  clearProjects: () => void;
+}
+
+export function useFilters(): UseFiltersReturn {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortKey, setSortKey] = useState<SortKey>("modified");
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
+  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
+    new Set()
+  );
+
+  const setSort = useCallback((key: SortKey, dir?: SortDir) => {
+    if (dir) {
+      // Explicit direction provided
+      setSortKey(key);
+      setSortDir(dir);
+    } else {
+      setSortKey((prevKey) => {
+        if (prevKey === key) {
+          // Same column: toggle direction
+          setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
+        } else {
+          // New column: use its natural default
+          setSortDir(SORT_DEFAULTS[key]);
+        }
+        return key;
+      });
+    }
+  }, []);
+
+  const toggleProject = useCallback((project: string) => {
+    setSelectedProjects((prev) => {
+      const next = new Set(prev);
+      if (next.has(project)) {
+        next.delete(project);
+      } else {
+        next.add(project);
+      }
+      return next;
+    });
+  }, []);
+
+  const clearProjects = useCallback(() => {
+    setSelectedProjects(new Set());
+  }, []);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    sortKey,
+    sortDir,
+    setSort,
+    selectedProjects,
+    toggleProject,
+    clearProjects,
+  };
+}

package/src/client/hooks/useKeyboard.ts

@@ -0,0 +1,114 @@
+import { useEffect, useCallback } from "react";
+import type { Plan } from "../types.ts";
+
+interface UseKeyboardOptions {
+  plans: Plan[];
+  selectedPlan: Plan | null;
+  onSelectPlan: (plan: Plan | null) => void;
+  onOpenEditor: () => void;
+  onToggleHelp: () => void;
+  onToggleOverlay: () => void;
+  onClearSearch: () => void;
+}
+
+export function useKeyboard({
+  plans,
+  selectedPlan,
+  onSelectPlan,
+  onOpenEditor,
+  onToggleHelp,
+  onToggleOverlay,
+  onClearSearch,
+}: UseKeyboardOptions): void {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      // Cmd/Ctrl + K: Focus search
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const search = document.getElementById("search") as HTMLInputElement;
+        search?.focus();
+        search?.select();
+        return;
+      }
+
+      // Arrow navigation
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const idx = plans.findIndex(
+          (p) => p.filename === selectedPlan?.filename
+        );
+        let newIdx = e.key === "ArrowDown" ? idx + 1 : idx - 1;
+        if (newIdx < 0) newIdx = 0;
+        if (newIdx >= plans.length) newIdx = plans.length - 1;
+        const plan = plans[newIdx];
+        if (plan) {
+          onSelectPlan(plan);
+          document
+            .querySelector(`tr[data-filename="${plan.filename}"]`)
+            ?.scrollIntoView({ block: "nearest" });
+        }
+        return;
+      }
+
+      // Enter: Open in editor
+      if (e.key === "Enter" && selectedPlan) {
+        const activeEl = document.activeElement;
+        if (
+          activeEl?.tagName !== "INPUT" &&
+          activeEl?.tagName !== "TEXTAREA" &&
+          activeEl?.tagName !== "BUTTON"
+        ) {
+          e.preventDefault();
+          onOpenEditor();
+        }
+        return;
+      }
+
+      // Escape: Clear search or close modal
+      if (e.key === "Escape") {
+        onClearSearch();
+        return;
+      }
+
+      // ?: Toggle help
+      if (e.key === "?" && !e.metaKey && !e.ctrlKey) {
+        const activeEl = document.activeElement;
+        if (activeEl?.tagName !== "INPUT" && activeEl?.tagName !== "TEXTAREA") {
+          e.preventDefault();
+          onToggleHelp();
+        }
+        return;
+      }
+
+      // F: Toggle fullscreen overlay
+      if (
+        e.key === "f" &&
+        selectedPlan &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey
+      ) {
+        const activeEl = document.activeElement;
+        if (activeEl?.tagName !== "INPUT" && activeEl?.tagName !== "TEXTAREA") {
+          e.preventDefault();
+          onToggleOverlay();
+        }
+        return;
+      }
+    },
+    [
+      plans,
+      selectedPlan,
+      onSelectPlan,
+      onOpenEditor,
+      onToggleHelp,
+      onToggleOverlay,
+      onClearSearch,
+    ]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+}

package/src/client/hooks/usePlans.ts

@@ -0,0 +1,169 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import type { Plan, SortKey, SortDir } from "../types.ts";
+import { fetchPlans, fetchPlanContent, refreshCache } from "../utils/api.ts";
+
+export interface UsePlansParams {
+  q?: string;
+  sort?: SortKey;
+  dir?: SortDir;
+  projects?: string[];
+}
+
+interface UsePlansReturn {
+  plans: Plan[];
+  total: number;
+  loading: boolean;
+  refresh: () => Promise<void>;
+  ensureContent: (plan: Plan) => Promise<Plan>;
+}
+
+export function usePlans(
+  params: UsePlansParams = {},
+): UsePlansReturn {
+  const [allPlans, setAllPlans] = useState<Plan[]>([]);
+  const [loading, setLoading] = useState(true);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Cache content by filename to persist across filter changes
+  const contentCache = useRef<Map<string, string>>(new Map());
+
+  const loadAllPlans = useCallback(async () => {
+    // Cancel previous request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+
+    try {
+      setLoading(true);
+      const fetchedPlans = await fetchPlans(abortControllerRef.current.signal);
+
+      // Restore cached content
+      const plansWithContent = fetchedPlans.map((p) => ({
+        ...p,
+        content: contentCache.current.get(p.filename),
+      }));
+
+      setAllPlans(plansWithContent);
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") {
+        return;
+      }
+      console.error("Failed to load plans:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load all plans on mount and when parameters change
+  useEffect(() => {
+    loadAllPlans();
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [loadAllPlans]);
+
+  const refresh = useCallback(async () => {
+    contentCache.current.clear();
+    await refreshCache(); // Invalidate backend cache too
+    await loadAllPlans();
+  }, [loadAllPlans]);
+
+  const ensureContent = useCallback(
+    async (plan: Plan): Promise<Plan> => {
+      if (plan.content) return plan;
+
+      // Check cache
+      const cached = contentCache.current.get(plan.filename);
+      if (cached) {
+        const updatedPlan = { ...plan, content: cached };
+        setAllPlans((prev) =>
+          prev.map((p) => (p.filename === plan.filename ? updatedPlan : p))
+        );
+        return updatedPlan;
+      }
+
+      const content = await fetchPlanContent(plan.filename);
+      contentCache.current.set(plan.filename, content);
+      const updatedPlan = { ...plan, content };
+
+      // Update in state
+      setAllPlans((prev) =>
+        prev.map((p) => (p.filename === plan.filename ? updatedPlan : p))
+      );
+
+      return updatedPlan;
+    },
+    []
+  );
+
+  // Client-side filtering
+  const filteredPlans = useMemo(() => {
+    let filtered = allPlans;
+
+    if (params.q) {
+      const lowerQ = params.q.toLowerCase();
+      filtered = filtered.filter(p => {
+        const content = contentCache.current.get(p.filename) || "";
+        return (
+          p.title.toLowerCase().includes(lowerQ) ||
+          content.toLowerCase().includes(lowerQ) ||
+          p.filename.toLowerCase().includes(lowerQ) ||
+          (p.project?.toLowerCase().includes(lowerQ) ?? false)
+        );
+      });
+    }
+
+    if (params.projects && params.projects.length > 0) {
+      const projectFilterSet = new Set(params.projects);
+      filtered = filtered.filter(p => p.project && projectFilterSet.has(p.project));
+    }
+
+    return filtered;
+  }, [allPlans, params.q, params.projects]);
+
+  // Client-side sorting
+  const sortedPlans = useMemo(() => {
+    const { sort, dir } = params;
+    if (!sort) return filteredPlans;
+
+    const sorted = [...filteredPlans].sort((a, b) => {
+      let cmp = 0;
+      switch (sort) {
+        case "title":
+          cmp = a.title.localeCompare(b.title);
+          break;
+        case "project":
+          if (!a.project && !b.project) cmp = 0;
+          else if (!a.project) return 1;
+          else if (!b.project) return -1;
+          else cmp = a.project.localeCompare(b.project);
+          break;
+        case "size":
+          cmp = a.size - b.size;
+          break;
+        case "lines":
+          cmp = a.lineCount - b.lineCount;
+          break;
+        case "created":
+          cmp = new Date(a.created).getTime() - new Date(b.created).getTime();
+          break;
+        case "modified":
+        default:
+          cmp = new Date(a.modified).getTime() - new Date(b.modified).getTime();
+          break;
+      }
+      return dir === "asc" ? cmp : -cmp;
+    });
+
+    return sorted;
+  }, [filteredPlans, params.sort, params.dir]);
+
+  return {
+    plans: sortedPlans,
+    total: sortedPlans.length,
+    loading,
+    refresh,
+    ensureContent,
+  };
+}

package/src/client/hooks/useProjects.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { fetchProjects } from "../utils/api.ts";
+
+interface UseProjectsReturn {
+  projects: string[];
+  loading: boolean;
+}
+
+export function useProjects(): UseProjectsReturn {
+  const [projects, setProjects] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchProjects()
+      .then(setProjects)
+      .catch((err) => console.error("Failed to load projects:", err))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { projects, loading };
+}

package/src/client/index.tsx

@@ -0,0 +1,11 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+import "../../styles.css";
+
+const container = document.getElementById("root");
+if (!container) {
+  throw new Error("Root element not found");
+}
+
+const root = createRoot(container);
+root.render(<App />);

package/src/client/types.ts

@@ -0,0 +1,19 @@
+export interface PlanMetadata {
+  filename: string;
+  filepath: string;
+  title: string;
+  size: number;
+  modified: string;
+  created: string;
+  lineCount: number;
+  wordCount: number;
+  project: string | null;
+  sessionId: string | null;
+}
+
+export interface Plan extends PlanMetadata {
+  content?: string; // Lazy-loaded on demand
+}
+
+export type SortKey = "title" | "project" | "modified" | "size" | "lines" | "created";
+export type SortDir = "asc" | "desc";

package/src/client/utils/api.ts

@@ -0,0 +1,38 @@
+import type { Plan, PlanMetadata } from "../types.ts";
+
+export async function fetchPlans(signal?: AbortSignal): Promise<PlanMetadata[]> {
+  const url = new URL("/api/plans", window.location.origin);
+  const res = await fetch(url.toString(), { signal });
+  if (!res.ok) {
+    throw new Error(`Failed to fetch plans: ${res.statusText}`);
+  }
+  const data = await res.json();
+  return data.plans;
+}
+
+export async function fetchProjects(): Promise<string[]> {
+  const res = await fetch("/api/projects");
+  const data = await res.json();
+  return data.projects;
+}
+
+export async function fetchPlanContent(filename: string): Promise<string> {
+  const res = await fetch(`/api/plans/${encodeURIComponent(filename)}/content`);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch plan content: ${res.statusText}`);
+  }
+  const data = await res.json();
+  return data.content;
+}
+
+export async function openInEditor(filepath: string): Promise<void> {
+  await fetch("/api/open", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ filepath }),
+  });
+}
+
+export async function refreshCache(): Promise<void> {
+  await fetch("/api/refresh", { method: "POST" });
+}

package/src/client/utils/formatters.ts

@@ -0,0 +1,40 @@
+export function formatDate(iso: string): string {
+  const d = new Date(iso);
+  const now = new Date();
+  const diff = now.getTime() - d.getTime();
+
+  if (diff < 60000) return "just now";
+  if (diff < 3600000) return Math.floor(diff / 60000) + "m ago";
+  if (diff < 86400000) return Math.floor(diff / 3600000) + "h ago";
+  if (diff < 604800000) return Math.floor(diff / 86400000) + "d ago";
+
+  // Show year if not current year
+  if (d.getFullYear() !== now.getFullYear()) {
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  }
+
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+export function formatFullDate(iso: string): string {
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function formatDateISO(iso: string): string {
+  const d = new Date(iso);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + " B";
+  return (bytes / 1024).toFixed(1) + " KB";
+}

package/src/client/utils/index.ts

@@ -0,0 +1,15 @@
+export * from "./formatters.ts";
+export * from "./strings.ts";
+export * from "./markdown.ts";
+export * from "./api.ts";
+
+export function debounce<Args extends unknown[]>(
+  fn: (...args: Args) => void,
+  ms: number
+): (...args: Args) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Args) => {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), ms);
+  };
+}

package/src/client/utils/markdown.ts

@@ -0,0 +1,123 @@
+import { escapeHtml } from "./strings.ts";
+
+// Prism.js is loaded from CDN
+declare const Prism: {
+  highlight: (code: string, grammar: unknown, language: string) => string;
+  languages: Record<string, unknown>;
+};
+
+export function renderMarkdown(content: string): string {
+  // First, extract and process code blocks before escaping
+  const codeBlocks: string[] = [];
+  let processed = content.replace(
+    /```(\w*)\n([\s\S]*?)```/g,
+    (_, lang, code) => {
+      const language = lang || "plaintext";
+      const grammar = Prism.languages[language] || Prism.languages.plaintext;
+      let highlighted: string;
+      try {
+        highlighted = grammar
+          ? Prism.highlight(code, grammar, language)
+          : escapeHtml(code);
+      } catch {
+        highlighted = escapeHtml(code);
+      }
+      const block = `<pre class="language-${language}"><code class="language-${language}">${highlighted}</code></pre>`;
+      codeBlocks.push(block);
+      return `\x00CODE_BLOCK_${codeBlocks.length - 1}\x00`;
+    }
+  );
+
+  // Now escape the rest
+  let html = escapeHtml(processed);
+
+  // Restore code blocks
+  html = html.replace(/\x00CODE_BLOCK_(\d+)\x00/g, (_, idx) => codeBlocks[parseInt(idx)]);
+
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+  // Headers
+  html = html.replace(/^#### (.+)$/gm, "<h4>$1</h4>");
+  html = html.replace(/^### (.+)$/gm, "<h3>$1</h3>");
+  html = html.replace(/^## (.+)$/gm, "<h2>$1</h2>");
+  html = html.replace(/^# (.+)$/gm, "<h1>$1</h1>");
+
+  // Bold and italic
+  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+
+  // Blockquotes
+  html = html.replace(/^&gt; (.+)$/gm, "<blockquote><p>$1</p></blockquote>");
+
+  // Horizontal rules
+  html = html.replace(/^---$/gm, "<hr>");
+
+  // Links
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+
+  // Tables
+  html = html.replace(
+    /\|(.+)\|\n\|[-| ]+\|\n((?:\|.+\|\n?)+)/g,
+    (_, header, body) => {
+      const headers = header
+        .split("|")
+        .filter((c: string) => c.trim())
+        .map((c: string) => `<th>${c.trim()}</th>`)
+        .join("");
+      const rows = body
+        .trim()
+        .split("\n")
+        .map((row: string) => {
+          const cells = row
+            .split("|")
+            .filter((c: string) => c.trim())
+            .map((c: string) => `<td>${c.trim()}</td>`)
+            .join("");
+          return `<tr>${cells}</tr>`;
+        })
+        .join("");
+      return `<table><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
+    }
+  );
+
+  // Checkbox lists
+  html = html.replace(
+    /^- \[x\] (.+)$/gm,
+    '<li><input type="checkbox" checked disabled> $1</li>'
+  );
+  html = html.replace(
+    /^- \[ \] (.+)$/gm,
+    '<li><input type="checkbox" disabled> $1</li>'
+  );
+
+  // Regular lists
+  html = html.replace(/^- (.+)$/gm, "<li>$1</li>");
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>");
+
+  // Numbered lists
+  html = html.replace(/^\d+\. (.+)$/gm, "<li>$1</li>");
+
+  // Paragraphs - wrap remaining text blocks
+  const blocks = html.split(/\n\n+/);
+  html = blocks
+    .map((block) => {
+      const trimmed = block.trim();
+      if (!trimmed) return "";
+      if (
+        trimmed.startsWith("<h") ||
+        trimmed.startsWith("<ul") ||
+        trimmed.startsWith("<ol") ||
+        trimmed.startsWith("<pre") ||
+        trimmed.startsWith("<hr") ||
+        trimmed.startsWith("<blockquote") ||
+        trimmed.startsWith("<table")
+      ) {
+        return trimmed;
+      }
+      return "<p>" + trimmed.replace(/\n/g, "<br>") + "</p>";
+    })
+    .join("\n");
+
+  return html;
+}

package/src/client/utils/strings.ts

@@ -0,0 +1,18 @@
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+export function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function highlightText(text: string, query: string): string {
+  if (!query) return escapeHtml(text);
+  const escaped = escapeHtml(text);
+  const regex = new RegExp(`(${escapeRegex(query)})`, "gi");
+  return escaped.replace(regex, "<mark>$1</mark>");
+}