claude-plan-viewer 1.3.0 → 1.4.0

package/src/client/hooks/useFilters.ts

@@ -3,12 +3,12 @@ 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
+  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 {
@@ -27,7 +27,7 @@ export function useFilters(): UseFiltersReturn {
   const [sortKey, setSortKey] = useState<SortKey>("modified");
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
-    new Set()
+    new Set(),
   );
 
   const setSort = useCallback((key: SortKey, dir?: SortDir) => {

package/src/client/hooks/useFocusTrap.ts

@@ -0,0 +1,70 @@
+import { type RefObject, useEffect, useRef } from "react";
+
+export function useFocusTrap(
+  containerRef: RefObject<HTMLElement | null>,
+  isOpen: boolean,
+) {
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isOpen || !containerRef.current) return;
+
+    // Store the previously focused element
+    previousFocusRef.current = document.activeElement as HTMLElement;
+
+    // Get all focusable elements within the container
+    const getFocusableElements = () => {
+      const container = containerRef.current;
+      if (!container) return [];
+      return Array.from(
+        container.querySelectorAll<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+        ),
+      ).filter(
+        (el) => !el.hasAttribute("disabled") && el.offsetParent !== null,
+      );
+    };
+
+    // Focus first element
+    const focusableElements = getFocusableElements();
+    const firstFocusable = focusableElements[0];
+    if (firstFocusable) {
+      firstFocusable.focus();
+    }
+
+    // Handle Tab key to trap focus
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      const elements = getFocusableElements();
+      if (elements.length === 0) return;
+
+      const firstElement = elements[0];
+      const lastElement = elements[elements.length - 1];
+
+      if (!firstElement || !lastElement) return;
+
+      if (e.shiftKey) {
+        // Shift+Tab: if on first element, go to last
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab: if on last element, go to first
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      // Restore focus when modal closes
+      previousFocusRef.current?.focus();
+    };
+  }, [isOpen, containerRef]);
+}

package/src/client/hooks/useKeyboard.ts

@@ -35,7 +35,7 @@ export function useKeyboard({
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
         const idx = plans.findIndex(
-          (p) => p.filename === selectedPlan?.filename
+          (p) => p.filename === selectedPlan?.filename,
         );
         let newIdx = e.key === "ArrowDown" ? idx + 1 : idx - 1;
         if (newIdx < 0) newIdx = 0;
@@ -104,7 +104,7 @@ export function useKeyboard({
       onToggleHelp,
       onToggleOverlay,
       onClearSearch,
-    ]
+    ],
   );
 
   useEffect(() => {

package/src/client/hooks/usePlans.ts

@@ -1,6 +1,7 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import type { Plan, SortKey, SortDir } from "../types.ts";
-import { fetchPlans, fetchPlanContent, refreshCache } from "../utils/api.ts";
+import { useCallback, useRef, useMemo, useState } from "react";
+import useSWR from "swr";
+import type { Plan, SortKey, SortDir, PlanMetadata } from "../types.ts";
+import { fetchPlanContent, refreshCache } from "../utils/api.ts";
 
 export interface UsePlansParams {
   q?: string;
@@ -13,89 +14,76 @@ interface UsePlansReturn {
   plans: Plan[];
   total: number;
   loading: boolean;
+  refreshing: 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);
+const plansFetcher = async (url: string): Promise<PlanMetadata[]> => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch plans: ${res.statusText}`);
+  }
+  const data = await res.json();
+  return data.plans;
+};
 
+export function usePlans(params: UsePlansParams = {}): UsePlansReturn {
   // Cache content by filename to persist across filter changes
   const contentCache = useRef<Map<string, string>>(new Map());
+  const [refreshing, setRefreshing] = useState(false);
+
+  const {
+    data: fetchedPlans,
+    isLoading: loading,
+    mutate,
+  } = useSWR<PlanMetadata[]>("/api/plans", plansFetcher, {
+    onErrorRetry: (error, _key, _config, revalidate, { retryCount }) => {
+      // Don't retry on 4xx errors
+      if (error.status >= 400 && error.status < 500) return;
+      // Retry up to 5 times on network errors with exponential backoff
+      if (retryCount >= 5) return;
+      setTimeout(() => revalidate({ retryCount }), 500 * (retryCount + 1));
+    },
+    revalidateOnFocus: false,
+  });
+
+  // Merge fetched plans with cached content
+  const allPlans = useMemo(() => {
+    if (!fetchedPlans) return [];
+    return fetchedPlans.map((p) => ({
+      ...p,
+      content: contentCache.current.get(p.filename),
+    }));
+  }, [fetchedPlans]);
 
-  const loadAllPlans = useCallback(async () => {
-    // Cancel previous request
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-    abortControllerRef.current = new AbortController();
-
+  const refresh = useCallback(async () => {
+    setRefreshing(true);
     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;
+      contentCache.current.clear();
+      const { before, after } = await refreshCache();
+      // Only reload if count changed
+      if (before !== after) {
+        await mutate();
       }
-      console.error("Failed to load plans:", err);
     } finally {
-      setLoading(false);
+      setRefreshing(false);
     }
-  }, []);
+  }, [mutate]);
 
-  // Load all plans on mount and when parameters change
-  useEffect(() => {
-    loadAllPlans();
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, [loadAllPlans]);
+  const ensureContent = useCallback(async (plan: Plan): Promise<Plan> => {
+    if (plan.content) return plan;
 
-  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))
-      );
+    // Check cache
+    const cached = contentCache.current.get(plan.filename);
+    if (cached) {
+      return { ...plan, content: cached };
+    }
 
-      return updatedPlan;
-    },
-    []
-  );
+    const content = await fetchPlanContent(plan.filename);
+    contentCache.current.set(plan.filename, content);
+    return { ...plan, content };
+  }, []);
 
   // Client-side filtering
   const filteredPlans = useMemo(() => {
@@ -103,7 +91,7 @@ export function usePlans(
 
     if (params.q) {
       const lowerQ = params.q.toLowerCase();
-      filtered = filtered.filter(p => {
+      filtered = filtered.filter((p) => {
         const content = contentCache.current.get(p.filename) || "";
         return (
           p.title.toLowerCase().includes(lowerQ) ||
@@ -116,7 +104,9 @@ export function usePlans(
 
     if (params.projects && params.projects.length > 0) {
       const projectFilterSet = new Set(params.projects);
-      filtered = filtered.filter(p => p.project && projectFilterSet.has(p.project));
+      filtered = filtered.filter(
+        (p) => p.project && projectFilterSet.has(p.project),
+      );
     }
 
     return filtered;
@@ -163,6 +153,7 @@ export function usePlans(
     plans: sortedPlans,
     total: sortedPlans.length,
     loading,
+    refreshing,
     refresh,
     ensureContent,
   };

package/src/client/hooks/useProjects.ts

@@ -1,21 +1,34 @@
-import { useState, useEffect } from "react";
-import { fetchProjects } from "../utils/api.ts";
+import useSWR from "swr";
 
 interface UseProjectsReturn {
   projects: string[];
   loading: boolean;
 }
 
-export function useProjects(): UseProjectsReturn {
-  const [projects, setProjects] = useState<string[]>([]);
-  const [loading, setLoading] = useState(true);
+const projectsFetcher = async (url: string): Promise<string[]> => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch projects: ${res.statusText}`);
+  }
+  const data = await res.json();
+  return data.projects;
+};
 
-  useEffect(() => {
-    fetchProjects()
-      .then(setProjects)
-      .catch((err) => console.error("Failed to load projects:", err))
-      .finally(() => setLoading(false));
-  }, []);
+export function useProjects(): UseProjectsReturn {
+  const { data: projects = [], isLoading: loading } = useSWR<string[]>(
+    "/api/projects",
+    projectsFetcher,
+    {
+      onErrorRetry: (error, _key, _config, revalidate, { retryCount }) => {
+        // Don't retry on 4xx errors
+        if (error.status >= 400 && error.status < 500) return;
+        // Retry up to 5 times on network errors with exponential backoff
+        if (retryCount >= 5) return;
+        setTimeout(() => revalidate({ retryCount }), 500 * (retryCount + 1));
+      },
+      revalidateOnFocus: false,
+    },
+  );
 
   return { projects, loading };
 }

package/src/client/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { App } from "./App.tsx";
-import "../../styles.css";
+import "../styles/styles.css";
 
 const container = document.getElementById("root");
 if (!container) {

package/src/client/types.ts

@@ -15,5 +15,11 @@ export interface Plan extends PlanMetadata {
   content?: string; // Lazy-loaded on demand
 }
 
-export type SortKey = "title" | "project" | "modified" | "size" | "lines" | "created";
+export type SortKey =
+  | "title"
+  | "project"
+  | "modified"
+  | "size"
+  | "lines"
+  | "created";
 export type SortDir = "asc" | "desc";

package/src/client/utils/api.ts

@@ -1,6 +1,8 @@
 import type { Plan, PlanMetadata } from "../types.ts";
 
-export async function fetchPlans(signal?: AbortSignal): Promise<PlanMetadata[]> {
+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) {
@@ -33,6 +35,13 @@ export async function openInEditor(filepath: string): Promise<void> {
   });
 }
 
-export async function refreshCache(): Promise<void> {
-  await fetch("/api/refresh", { method: "POST" });
-}
+export interface RefreshResponse {
+  success: boolean;
+  before: number;
+  after: number;
+}
+
+export async function refreshCache(): Promise<RefreshResponse> {
+  const res = await fetch("/api/refresh", { method: "POST" });
+  return res.json();
+}

package/src/client/utils/formatters.ts

@@ -10,7 +10,11 @@ export function formatDate(iso: string): string {
 
   // 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",
+      year: "numeric",
+    });
   }
 
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -26,15 +30,40 @@ export function formatFullDate(iso: string): string {
   });
 }
 
-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";
 }
+
+export function formatCompactDateTime(iso: string): string {
+  const d = new Date(iso);
+  const now = new Date();
+
+  const time = d.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+
+  const dateOpts: Intl.DateTimeFormatOptions = {
+    month: "short",
+    day: "numeric",
+  };
+  if (d.getFullYear() !== now.getFullYear()) {
+    dateOpts.year = "numeric";
+  }
+
+  const date = d.toLocaleDateString("en-US", dateOpts);
+  return `${date} · ${time}`;
+}
+
+export function isSameDay(iso1: string, iso2: string): boolean {
+  const d1 = new Date(iso1);
+  const d2 = new Date(iso2);
+  return d1.toDateString() === d2.toDateString();
+}
+
+export function formatCreatedShort(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}

package/src/client/utils/index.ts

@@ -1,15 +1,3 @@
 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/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Claude Plans Viewer</title>
+    <link rel="stylesheet" href="./styles/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./client/index.tsx"></script>
+  </body>
+</html>