claude-plan-viewer 1.3.0 → 1.4.0

package/src/client/App.tsx

@@ -16,6 +16,7 @@ export function App() {
   const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
   const [showOverlay, setShowOverlay] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   // Filter state
   const {
@@ -35,11 +36,11 @@ export function App() {
   // Convert Set to array for API
   const projectsArray = useMemo(
     () => Array.from(selectedProjects),
-    [selectedProjects]
+    [selectedProjects],
   );
 
   // Fetch plans with server-side filtering
-  const { plans, loading, refresh, ensureContent } = usePlans({
+  const { plans, loading, refreshing, refresh, ensureContent } = usePlans({
     q: debouncedSearch,
     sort: sortKey,
     dir: sortDir,
@@ -52,6 +53,15 @@ export function App() {
   // Load content when plan is selected
   const handleSelectPlan = useCallback(
     async (plan: Plan | null) => {
+      // Update URL query parameter
+      const url = new URL(window.location.href);
+      if (plan) {
+        url.searchParams.set("plan", plan.filename);
+      } else {
+        url.searchParams.delete("plan");
+      }
+      window.history.replaceState({}, "", url.toString());
+
       if (plan) {
         const withContent = await ensureContent(plan);
         setSelectedPlan(withContent);
@@ -59,7 +69,7 @@ export function App() {
         setSelectedPlan(null);
       }
     },
-    [ensureContent]
+    [ensureContent],
   );
 
   // Open in editor
@@ -74,6 +84,20 @@ export function App() {
     navigator.clipboard.writeText(`claude --resume ${sessionId}`);
   }, []);
 
+  // Copy filepath
+  const handleCopyFilepath = useCallback((filepath: string) => {
+    navigator.clipboard.writeText(filepath);
+  }, []);
+
+  // Copy plan content
+  const handleCopyPlan = useCallback(() => {
+    if (selectedPlan?.content) {
+      navigator.clipboard.writeText(selectedPlan.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [selectedPlan]);
+
   // Clear search
   const handleClearSearch = useCallback(() => {
     setSearchQuery("");
@@ -92,19 +116,34 @@ export function App() {
     onClearSearch: handleClearSearch,
   });
 
-  // Auto-select first plan when plans change
+  // Select plan from URL or auto-select first plan
   useEffect(() => {
-    if (!selectedPlan && plans.length > 0) {
-      const firstPlan = plans[0];
-      if (firstPlan) {
-        handleSelectPlan(firstPlan);
+    if (plans.length === 0) return;
+
+    // Check URL for plan parameter
+    const url = new URL(window.location.href);
+    const planFromUrl = url.searchParams.get("plan");
+
+    if (planFromUrl) {
+      const matchingPlan = plans.find((p) => p.filename === planFromUrl);
+      if (matchingPlan && selectedPlan?.filename !== planFromUrl) {
+        handleSelectPlan(matchingPlan);
+        return;
       }
     }
+
+    // Fall back to selecting first plan if nothing selected
+    if (!selectedPlan) {
+      handleSelectPlan(plans[0]);
+    }
   }, [plans, selectedPlan, handleSelectPlan]);
 
   // Clear selection if selected plan is no longer in results
   useEffect(() => {
-    if (selectedPlan && !plans.find((p) => p.filename === selectedPlan.filename)) {
+    if (
+      selectedPlan &&
+      !plans.find((p) => p.filename === selectedPlan.filename)
+    ) {
       setSelectedPlan(null);
     }
   }, [plans, selectedPlan]);
@@ -130,6 +169,7 @@ export function App() {
           onToggleProject={toggleProject}
           onClearProjects={clearProjects}
           onRefresh={refresh}
+          refreshing={refreshing}
         />
 
         {plans.length === 0 ? (
@@ -156,6 +196,9 @@ export function App() {
         onOpenEditor={handleOpenEditor}
         onToggleOverlay={() => setShowOverlay(true)}
         onCopySession={handleCopySession}
+        onCopyFilepath={handleCopyFilepath}
+        onCopyPlan={handleCopyPlan}
+        copied={copied}
       />
 
       {showOverlay && selectedPlan && (
@@ -164,6 +207,8 @@ export function App() {
           onClose={() => setShowOverlay(false)}
           onOpenEditor={handleOpenEditor}
           onCopySession={handleCopySession}
+          onCopyPlan={handleCopyPlan}
+          copied={copied}
         />
       )}
 

package/src/client/components/DetailOverlay.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useRef } from "react";
+import { useFocusTrap } from "../hooks/useFocusTrap";
 import type { Plan } from "../types.ts";
 import { formatFullDate, formatSize } from "../utils/formatters.ts";
 import { Markdown } from "./Markdown.tsx";
@@ -8,6 +9,8 @@ interface DetailOverlayProps {
   onClose: () => void;
   onOpenEditor: () => void;
   onCopySession: (sessionId: string) => void;
+  onCopyPlan: () => void;
+  copied: boolean;
 }
 
 export function DetailOverlay({
@@ -15,7 +18,12 @@ export function DetailOverlay({
   onClose,
   onOpenEditor,
   onCopySession,
+  onCopyPlan,
+  copied,
 }: DetailOverlayProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(panelRef, true);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape" || e.key === "f") {
@@ -23,7 +31,7 @@ export function DetailOverlay({
         onClose();
       }
     },
-    [onClose]
+    [onClose],
   );
 
   useEffect(() => {
@@ -43,11 +51,20 @@ export function DetailOverlay({
       aria-hidden="false"
       onClick={onClose}
     >
-      <div className="detail-overlay-panel" onClick={(e) => e.stopPropagation()}>
+      <div
+        ref={panelRef}
+        className="detail-overlay-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="detail-overlay-title"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="detail-overlay-bar">
           <div className="detail-meta detail-overlay-meta">
-            {plan.project && <span className="project-tag">{plan.project}</span>}
-            <span>{plan.filename}</span>
+            {plan.project && (
+              <span className="project-tag">{plan.project}</span>
+            )}
+            <span id="detail-overlay-title">{plan.filename}</span>
             <span>{formatFullDate(plan.modified)}</span>
             <span>{formatSize(plan.size)}</span>
             <span>{plan.lineCount} lines</span>
@@ -61,14 +78,42 @@ export function DetailOverlay({
               </button>
             )}
           </div>
+          <button
+            className={copied ? "action-btn copied" : "action-btn"}
+            onClick={onCopyPlan}
+            title="Copy plan to clipboard"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="icon"
+            >
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+          </button>
           <button
             className="action-btn"
             onClick={onOpenEditor}
             title="Open in editor (Enter)"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon">
-              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="icon"
+            >
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
             </svg>
           </button>
           <button
@@ -76,7 +121,19 @@ export function DetailOverlay({
             onClick={onClose}
             title="Close fullscreen (Esc or F)"
           >
-            ×
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
           </button>
         </div>
         <div className="detail-overlay-content">

package/src/client/components/DetailPanel.tsx

@@ -1,5 +1,10 @@
 import type { Plan } from "../types.ts";
-import { formatFullDate, formatDateISO, formatSize } from "../utils/formatters.ts";
+import {
+  formatDate,
+  formatCompactDateTime,
+  formatCreatedShort,
+  isSameDay,
+} from "../utils/formatters.ts";
 import { Markdown } from "./Markdown.tsx";
 
 interface DetailPanelProps {
@@ -7,6 +12,9 @@ interface DetailPanelProps {
   onOpenEditor: () => void;
   onToggleOverlay: () => void;
   onCopySession: (sessionId: string) => void;
+  onCopyFilepath: (filepath: string) => void;
+  onCopyPlan: () => void;
+  copied: boolean;
 }
 
 export function DetailPanel({
@@ -14,13 +22,18 @@ export function DetailPanel({
   onOpenEditor,
   onToggleOverlay,
   onCopySession,
+  onCopyFilepath,
+  onCopyPlan,
+  copied,
 }: DetailPanelProps) {
   if (!plan) {
     return (
       <div id="detail-panel" className="detail-panel">
         <div className="detail-empty">
           <p>Select a plan to view details</p>
-          <p className="hint">Use ↑↓ arrows to navigate, Enter to open in editor</p>
+          <p className="hint">
+            Use ↑↓ arrows to navigate, Enter to open in editor
+          </p>
         </div>
       </div>
     );
@@ -32,14 +45,42 @@ export function DetailPanel({
         <div className="detail-header-top">
           <h2 className="detail-title">{plan.title}</h2>
           <div className="detail-actions">
+            <button
+              className={copied ? "action-btn copied" : "action-btn"}
+              onClick={onCopyPlan}
+              title="Copy plan to clipboard"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="icon"
+              >
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            </button>
             <button
               className="action-btn"
               onClick={onOpenEditor}
               title="Open in editor (Enter)"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon">
-                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="icon"
+              >
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
               </svg>
             </button>
             <button
@@ -53,13 +94,24 @@ export function DetailPanel({
         </div>
 
         <div className="detail-meta">
-          <span title={plan.modified}>
-            Modified: {formatFullDate(plan.modified)}
-          </span>
-          <span>Created: {formatDateISO(plan.created)}</span>
-
+          <span title={plan.modified}>{formatDate(plan.modified)}</span>
+          <span>{formatCompactDateTime(plan.modified)}</span>
+          {!isSameDay(plan.modified, plan.created) && (
+            <span className="created-date">
+              (created {formatCreatedShort(plan.created)})
+            </span>
+          )}
           <span>{plan.wordCount} words</span>
-          {plan.project && <span className="project-badge">{plan.project}</span>}
+          <button
+            className="filename-tag"
+            onClick={() => onCopyFilepath(plan.filepath)}
+            title={`Click to copy: ${plan.filepath}`}
+          >
+            {plan.filename}
+          </button>
+          {plan.project && (
+            <span className="project-badge">{plan.project}</span>
+          )}
           {plan.sessionId && (
             <button
               className="session-tag"

package/src/client/components/Header.tsx

@@ -9,6 +9,7 @@ interface HeaderProps {
   onToggleProject: (project: string) => void;
   onClearProjects: () => void;
   onRefresh: () => void;
+  refreshing: boolean;
 }
 
 export function Header({
@@ -19,13 +20,19 @@ export function Header({
   onToggleProject,
   onClearProjects,
   onRefresh,
+  refreshing,
 }: HeaderProps) {
   return (
     <div className="header">
       <div className="header-row">
         <h1>
-          <svg className="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+          <svg
+            className="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
           </svg>
           Claude Plan Viewer
         </h1>
@@ -40,13 +47,25 @@ export function Header({
           />
         )}
         <button
-          className="action-btn"
+          className={refreshing ? "action-btn loading" : "action-btn"}
           id="refresh-btn"
           onClick={onRefresh}
+          disabled={refreshing}
           title="Refresh plans"
         >
-          <svg className="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          <svg
+            className="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
           </svg>
         </button>
       </div>

package/src/client/components/HelpModal.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useRef } from "react";
+import { useFocusTrap } from "../hooks/useFocusTrap";
 
 interface HelpModalProps {
   onClose: () => void;
@@ -14,6 +15,9 @@ const SHORTCUTS = [
 ];
 
 export function HelpModal({ onClose }: HelpModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(modalRef, true);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape" || e.key === "?") {
@@ -21,7 +25,7 @@ export function HelpModal({ onClose }: HelpModalProps) {
         onClose();
       }
     },
-    [onClose]
+    [onClose],
   );
 
   useEffect(() => {
@@ -30,12 +34,31 @@ export function HelpModal({ onClose }: HelpModalProps) {
   }, [handleKeyDown]);
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="modal-content help-modal" onClick={(e) => e.stopPropagation()}>
+    <div className="modal-backdrop" onClick={onClose}>
+      <div
+        ref={modalRef}
+        className="modal help-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="help-modal-title"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="modal-header">
-          <h3>Keyboard Shortcuts</h3>
-          <button className="btn btn-secondary" onClick={onClose}>
-            ✕
+          <h3 id="help-modal-title">Keyboard Shortcuts</h3>
+          <button className="modal-close" onClick={onClose} title="Close (Esc)">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
           </button>
         </div>
         <div className="modal-body">

package/src/client/components/Markdown.tsx

@@ -1,16 +1,46 @@
-import { renderMarkdown } from "../utils/markdown.ts";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import remarkGfm from "remark-gfm";
 
 interface MarkdownProps {
   content: string;
 }
 
 export function Markdown({ content }: MarkdownProps) {
-  const html = renderMarkdown(content);
-
   return (
-    <div
-      className="markdown"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <div className="markdown">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            return !inline && match ? (
+              <SyntaxHighlighter
+                style={atomDark}
+                language={match[1]}
+                PreTag="div"
+                {...props}
+              >
+                {String(children).replace(/\n$/, "")}
+              </SyntaxHighlighter>
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          },
+          table({ children, ...props }) {
+            return (
+              <div className="markdown-table-wrapper">
+                <table {...props}>{children}</table>
+              </div>
+            );
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
   );
 }

package/src/client/components/PlanRow.tsx

@@ -9,7 +9,12 @@ interface PlanRowProps {
   onSelect: (plan: Plan) => void;
 }
 
-export function PlanRow({ plan, selected, searchQuery, onSelect }: PlanRowProps) {
+export function PlanRow({
+  plan,
+  selected,
+  searchQuery,
+  onSelect,
+}: PlanRowProps) {
   return (
     <tr
       className={selected ? "selected" : ""}
@@ -22,14 +27,18 @@ export function PlanRow({ plan, selected, searchQuery, onSelect }: PlanRowProps)
           data-filename={plan.filename}
           title={plan.title}
           dangerouslySetInnerHTML={{
-            __html: searchQuery ? highlightText(plan.title, searchQuery) : plan.title,
+            __html: searchQuery
+              ? highlightText(plan.title, searchQuery)
+              : plan.title,
           }}
         />
       </td>
       <td className="filename-cell">
         <span
           dangerouslySetInnerHTML={{
-            __html: searchQuery ? highlightText(plan.filename, searchQuery) : plan.filename,
+            __html: searchQuery
+              ? highlightText(plan.filename, searchQuery)
+              : plan.filename,
           }}
         />
       </td>
@@ -37,7 +46,9 @@ export function PlanRow({ plan, selected, searchQuery, onSelect }: PlanRowProps)
         {plan.project ? (
           <span
             dangerouslySetInnerHTML={{
-              __html: searchQuery ? highlightText(plan.project, searchQuery) : plan.project,
+              __html: searchQuery
+                ? highlightText(plan.project, searchQuery)
+                : plan.project,
             }}
           />
         ) : (

package/src/client/components/ProjectFilter.tsx

@@ -20,11 +20,9 @@ export function ProjectFilter({
     .map((p) => ({ value: p, label: p }));
 
   const handleChange = (
-    newValue: MultiValue<{ value: string; label: string }> | null
+    newValue: MultiValue<{ value: string; label: string }> | null,
   ) => {
-    const selectedSet = new Set(
-      (newValue ?? []).map((option) => option.value)
-    );
+    const selectedSet = new Set((newValue ?? []).map((option) => option.value));
 
     projects.forEach((project) => {
       const isSelected = selectedSet.has(project);
@@ -36,10 +34,7 @@ export function ProjectFilter({
   };
 
   const customStyles = {
-    control: (
-      base: object,
-      state: { isFocused: boolean }
-    ) => ({
+    control: (base: object, state: { isFocused: boolean }) => ({
       ...base,
       background: "var(--bg-tertiary)",
       border: "1px solid var(--border)",
@@ -100,14 +95,14 @@ export function ProjectFilter({
     }),
     option: (
       base: object,
-      state: { isSelected: boolean; isFocused: boolean }
+      state: { isSelected: boolean; isFocused: boolean },
     ) => ({
       ...base,
       background: state.isSelected
         ? "var(--accent-dim)"
         : state.isFocused
-        ? "var(--bg-hover)"
-        : "transparent",
+          ? "var(--bg-hover)"
+          : "transparent",
       color: "var(--text-primary)",
       fontSize: "12px",
       cursor: "pointer",

package/src/client/components/SearchInput.tsx

@@ -23,7 +23,13 @@ export function SearchInput({ value, onChange }: SearchInputProps) {
 
   return (
     <div className="search-wrapper">
-      <svg className="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <svg
+        className="search-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
         <circle cx="11" cy="11" r="8" />
         <path d="m21 21-4.35-4.35" />
       </svg>

package/src/client/components/index.ts

@@ -4,7 +4,6 @@ export { PlansTable } from "./PlansTable.tsx";
 export { DetailPanel } from "./DetailPanel.tsx";
 export { DetailOverlay } from "./DetailOverlay.tsx";
 export { SearchInput } from "./SearchInput.tsx";
-export { SortDropdown } from "./SortDropdown.tsx";
 export { ProjectFilter } from "./ProjectFilter.tsx";
 export { HelpModal } from "./HelpModal.tsx";
 export { Header } from "./Header.tsx";