claude-plan-viewer 1.1.0 → 1.3.0

package/src/client/components/DetailOverlay.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useCallback } from "react";
+import type { Plan } from "../types.ts";
+import { formatFullDate, formatSize } from "../utils/formatters.ts";
+import { Markdown } from "./Markdown.tsx";
+
+interface DetailOverlayProps {
+  plan: Plan;
+  onClose: () => void;
+  onOpenEditor: () => void;
+  onCopySession: (sessionId: string) => void;
+}
+
+export function DetailOverlay({
+  plan,
+  onClose,
+  onOpenEditor,
+  onCopySession,
+}: DetailOverlayProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "f") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [handleKeyDown]);
+
+  return (
+    <div
+      className="detail-overlay is-open"
+      id="detail-overlay"
+      aria-hidden="false"
+      onClick={onClose}
+    >
+      <div className="detail-overlay-panel" 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>
+            <span>{formatFullDate(plan.modified)}</span>
+            <span>{formatSize(plan.size)}</span>
+            <span>{plan.lineCount} lines</span>
+            {plan.sessionId && (
+              <button
+                className="session-tag"
+                onClick={() => onCopySession(plan.sessionId!)}
+                title={`Click to copy: claude --resume ${plan.sessionId}`}
+              >
+                {plan.sessionId.split("-")[0]}
+              </button>
+            )}
+          </div>
+          <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>
+          </button>
+          <button
+            className="modal-close"
+            onClick={onClose}
+            title="Close fullscreen (Esc or F)"
+          >
+            ×
+          </button>
+        </div>
+        <div className="detail-overlay-content">
+          <Markdown content={plan.content || ""} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/DetailPanel.tsx

@@ -0,0 +1,84 @@
+import type { Plan } from "../types.ts";
+import { formatFullDate, formatDateISO, formatSize } from "../utils/formatters.ts";
+import { Markdown } from "./Markdown.tsx";
+
+interface DetailPanelProps {
+  plan: Plan | null;
+  onOpenEditor: () => void;
+  onToggleOverlay: () => void;
+  onCopySession: (sessionId: string) => void;
+}
+
+export function DetailPanel({
+  plan,
+  onOpenEditor,
+  onToggleOverlay,
+  onCopySession,
+}: 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>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div id="detail-panel" className="detail-panel">
+      <div className="detail-header">
+        <div className="detail-header-top">
+          <h2 className="detail-title">{plan.title}</h2>
+          <div className="detail-actions">
+            <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>
+            </button>
+            <button
+              className="action-btn"
+              onClick={onToggleOverlay}
+              title="Fullscreen (F)"
+            >
+              ⛶
+            </button>
+          </div>
+        </div>
+
+        <div className="detail-meta">
+          <span title={plan.modified}>
+            Modified: {formatFullDate(plan.modified)}
+          </span>
+          <span>Created: {formatDateISO(plan.created)}</span>
+
+          <span>{plan.wordCount} words</span>
+          {plan.project && <span className="project-badge">{plan.project}</span>}
+          {plan.sessionId && (
+            <button
+              className="session-tag"
+              onClick={() => onCopySession(plan.sessionId!)}
+              title={`Click to copy: claude --resume ${plan.sessionId}`}
+            >
+              {plan.sessionId.split("-")[0]}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="detail-content">
+        {plan.content ? (
+          <Markdown content={plan.content} />
+        ) : (
+          <div className="loading">Loading content...</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/Header.tsx

@@ -0,0 +1,55 @@
+import { SearchInput } from "./SearchInput.tsx";
+import { ProjectFilter } from "./ProjectFilter.tsx";
+
+interface HeaderProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  projects: string[];
+  selectedProjects: Set<string>;
+  onToggleProject: (project: string) => void;
+  onClearProjects: () => void;
+  onRefresh: () => void;
+}
+
+export function Header({
+  searchQuery,
+  onSearchChange,
+  projects,
+  selectedProjects,
+  onToggleProject,
+  onClearProjects,
+  onRefresh,
+}: 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>
+          Claude Plan Viewer
+        </h1>
+        <div className="header-spacer" />
+        <SearchInput value={searchQuery} onChange={onSearchChange} />
+        {projects.length > 0 && (
+          <ProjectFilter
+            projects={projects}
+            selectedProjects={selectedProjects}
+            onToggle={onToggleProject}
+            onClear={onClearProjects}
+          />
+        )}
+        <button
+          className="action-btn"
+          id="refresh-btn"
+          onClick={onRefresh}
+          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>
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/client/components/HelpModal.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useCallback } from "react";
+
+interface HelpModalProps {
+  onClose: () => void;
+}
+
+const SHORTCUTS = [
+  { keys: "↑ / ↓", description: "Navigate plans" },
+  { keys: "Enter", description: "Open in editor" },
+  { keys: "F", description: "Toggle fullscreen" },
+  { keys: "⌘K", description: "Focus search" },
+  { keys: "Esc", description: "Clear search / Close" },
+  { keys: "?", description: "Toggle help" },
+];
+
+export function HelpModal({ onClose }: HelpModalProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "?") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content help-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>Keyboard Shortcuts</h3>
+          <button className="btn btn-secondary" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+        <div className="modal-body">
+          <table className="shortcuts-table">
+            <tbody>
+              {SHORTCUTS.map((shortcut) => (
+                <tr key={shortcut.keys}>
+                  <td className="shortcut-keys">
+                    <kbd>{shortcut.keys}</kbd>
+                  </td>
+                  <td className="shortcut-desc">{shortcut.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/Markdown.tsx

@@ -0,0 +1,16 @@
+import { renderMarkdown } from "../utils/markdown.ts";
+
+interface MarkdownProps {
+  content: string;
+}
+
+export function Markdown({ content }: MarkdownProps) {
+  const html = renderMarkdown(content);
+
+  return (
+    <div
+      className="markdown"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/src/client/components/PlanRow.tsx

@@ -0,0 +1,53 @@
+import type { Plan } from "../types.ts";
+import { formatDate, formatSize } from "../utils/formatters.ts";
+import { highlightText } from "../utils/strings.ts";
+
+interface PlanRowProps {
+  plan: Plan;
+  selected: boolean;
+  searchQuery: string;
+  onSelect: (plan: Plan) => void;
+}
+
+export function PlanRow({ plan, selected, searchQuery, onSelect }: PlanRowProps) {
+  return (
+    <tr
+      className={selected ? "selected" : ""}
+      data-filename={plan.filename}
+      onMouseDown={() => onSelect(plan)}
+    >
+      <td className="title-cell">
+        <button
+          className="title-btn"
+          data-filename={plan.filename}
+          title={plan.title}
+          dangerouslySetInnerHTML={{
+            __html: searchQuery ? highlightText(plan.title, searchQuery) : plan.title,
+          }}
+        />
+      </td>
+      <td className="filename-cell">
+        <span
+          dangerouslySetInnerHTML={{
+            __html: searchQuery ? highlightText(plan.filename, searchQuery) : plan.filename,
+          }}
+        />
+      </td>
+      <td className="project-cell">
+        {plan.project ? (
+          <span
+            dangerouslySetInnerHTML={{
+              __html: searchQuery ? highlightText(plan.project, searchQuery) : plan.project,
+            }}
+          />
+        ) : (
+          "—"
+        )}
+      </td>
+      <td className="num-cell">{formatSize(plan.size)}</td>
+      <td className="num-cell">{plan.lineCount}</td>
+      <td className="meta-cell">{formatDate(plan.modified)}</td>
+      <td className="meta-cell">{formatDate(plan.created)}</td>
+    </tr>
+  );
+}

package/src/client/components/PlansTable.tsx

@@ -0,0 +1,94 @@
+import type { Plan, SortKey, SortDir } from "../types.ts";
+import { PlanRow } from "./PlanRow.tsx";
+
+interface PlansTableProps {
+  plans: Plan[];
+  selectedPlan: Plan | null;
+  searchQuery: string;
+  sortKey: SortKey;
+  sortDir: SortDir;
+  onSelectPlan: (plan: Plan) => void;
+  onSort: (key: SortKey) => void;
+}
+
+export function PlansTable({
+  plans,
+  selectedPlan,
+  searchQuery,
+  sortKey,
+  sortDir,
+  onSelectPlan,
+  onSort,
+}: PlansTableProps) {
+  const getSortClass = (key: SortKey) => {
+    if (sortKey === key) {
+      return `sorted ${sortDir}`;
+    }
+    return "";
+  };
+
+  return (
+    <div className="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th
+              data-sort="title"
+              className={getSortClass("title")}
+              onClick={() => onSort("title")}
+            >
+              Title <span className="sort-icon">▲</span>
+            </th>
+            <th className="no-sort">Filename</th>
+            <th
+              data-sort="project"
+              className={getSortClass("project")}
+              onClick={() => onSort("project")}
+            >
+              Project <span className="sort-icon">▲</span>
+            </th>
+            <th
+              data-sort="size"
+              className={`num-col ${getSortClass("size")}`}
+              onClick={() => onSort("size")}
+            >
+              Size <span className="sort-icon">▲</span>
+            </th>
+            <th
+              data-sort="lines"
+              className={`num-col ${getSortClass("lines")}`}
+              onClick={() => onSort("lines")}
+            >
+              Lines <span className="sort-icon">▲</span>
+            </th>
+            <th
+              data-sort="modified"
+              className={getSortClass("modified")}
+              onClick={() => onSort("modified")}
+            >
+              Modified <span className="sort-icon">▲</span>
+            </th>
+            <th
+              data-sort="created"
+              className={getSortClass("created")}
+              onClick={() => onSort("created")}
+            >
+              Created <span className="sort-icon">▲</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody id="plans-table">
+          {plans.map((plan) => (
+            <PlanRow
+              key={plan.filename}
+              plan={plan}
+              selected={selectedPlan?.filename === plan.filename}
+              searchQuery={searchQuery}
+              onSelect={onSelectPlan}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/client/components/ProjectFilter.tsx

@@ -0,0 +1,180 @@
+import Select, { type MultiValue } from "react-select";
+
+interface ProjectFilterProps {
+  projects: string[];
+  selectedProjects: Set<string>;
+  onToggle: (project: string) => void;
+  onClear: () => void;
+}
+
+export function ProjectFilter({
+  projects,
+  selectedProjects,
+  onToggle,
+  onClear,
+}: ProjectFilterProps) {
+  const options = projects.map((p) => ({ value: p, label: p }));
+
+  const selectedOptions = projects
+    .filter((p) => selectedProjects.has(p))
+    .map((p) => ({ value: p, label: p }));
+
+  const handleChange = (
+    newValue: MultiValue<{ value: string; label: string }> | null
+  ) => {
+    const selectedSet = new Set(
+      (newValue ?? []).map((option) => option.value)
+    );
+
+    projects.forEach((project) => {
+      const isSelected = selectedSet.has(project);
+      const wasSelected = selectedProjects.has(project);
+      if (isSelected !== wasSelected) {
+        onToggle(project);
+      }
+    });
+  };
+
+  const customStyles = {
+    control: (
+      base: object,
+      state: { isFocused: boolean }
+    ) => ({
+      ...base,
+      background: "var(--bg-tertiary)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius-md)",
+      minHeight: "28px",
+      fontSize: "11px",
+      color: "var(--text-secondary)",
+      boxShadow: "none",
+      cursor: "pointer",
+      transition: "border-color 0.15s, box-shadow 0.15s",
+      "&:hover": {
+        borderColor: "var(--border-light)",
+      },
+      ...(state.isFocused
+        ? {
+            borderColor: "var(--accent)",
+            boxShadow: "var(--focus-ring)",
+          }
+        : {}),
+    }),
+    placeholder: (base: object) => ({
+      ...base,
+      color: "var(--text-muted)",
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+    }),
+    dropdownIndicator: (base: object) => ({
+      ...base,
+      color: "var(--text-muted)",
+      padding: "4px 6px",
+      "&:hover": {
+        color: "var(--text-secondary)",
+      },
+    }),
+    clearIndicator: (base: object) => ({
+      ...base,
+      color: "var(--text-muted)",
+      padding: "4px",
+      "&:hover": {
+        color: "var(--text-primary)",
+      },
+    }),
+    menu: (base: object) => ({
+      ...base,
+      background: "var(--bg-secondary)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius-lg)",
+      boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
+      marginTop: "4px",
+      overflow: "hidden",
+      zIndex: 60,
+    }),
+    menuList: (base: object) => ({
+      ...base,
+      padding: "4px",
+      maxHeight: "280px",
+    }),
+    option: (
+      base: object,
+      state: { isSelected: boolean; isFocused: boolean }
+    ) => ({
+      ...base,
+      background: state.isSelected
+        ? "var(--accent-dim)"
+        : state.isFocused
+        ? "var(--bg-hover)"
+        : "transparent",
+      color: "var(--text-primary)",
+      fontSize: "12px",
+      cursor: "pointer",
+      borderRadius: "var(--radius-sm)",
+      padding: "6px 8px",
+      margin: "0 2px",
+      "&:active": {
+        background: "var(--bg-hover)",
+      },
+    }),
+    multiValue: (base: object) => ({
+      ...base,
+      background: "var(--bg-tertiary)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius-sm)",
+    }),
+    multiValueLabel: (base: object) => ({
+      ...base,
+      color: "var(--text-primary)",
+      fontSize: "10px",
+      fontFamily: "ui-monospace, SFMono-Regular, monospace",
+      padding: "2px 4px",
+    }),
+    multiValueRemove: (base: object) => ({
+      ...base,
+      color: "var(--text-muted)",
+      padding: "0 2px",
+      "&:hover": {
+        background: "transparent",
+        color: "var(--text-primary)",
+      },
+    }),
+    noOptionsMessage: (base: object) => ({
+      ...base,
+      color: "var(--text-muted)",
+      fontSize: "12px",
+    }),
+    indicatorSeparator: (base: object) => ({
+      ...base,
+      backgroundColor: "var(--border)",
+    }),
+  };
+
+  const selectedCount = selectedProjects.size;
+
+  return (
+    <div className="project-select-wrapper">
+      <Select
+        isMulti
+        options={options}
+        value={selectedOptions}
+        onChange={handleChange}
+        styles={customStyles}
+        placeholder={
+          <span>
+            Projects
+            {selectedCount > 0 && (
+              <span className="project-badge">{selectedCount}</span>
+            )}
+          </span>
+        }
+        noOptionsMessage={() => "No projects"}
+        isClearable={true}
+        closeMenuOnSelect={false}
+        hideSelectedOptions={false}
+        controlShouldRenderValue={false}
+      />
+    </div>
+  );
+}

package/src/client/components/SearchInput.tsx

@@ -0,0 +1,42 @@
+import { useRef, useEffect } from "react";
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function SearchInput({ value, onChange }: SearchInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div className="search-wrapper">
+      <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>
+      <input
+        ref={inputRef}
+        type="text"
+        id="search"
+        className="search-input"
+        placeholder="Search plans..."
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <span className="search-kbd">⌘K</span>
+    </div>
+  );
+}

package/src/client/components/index.ts

@@ -0,0 +1,10 @@
+export { Markdown } from "./Markdown.tsx";
+export { PlanRow } from "./PlanRow.tsx";
+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";

package/src/client/hooks/index.ts

@@ -0,0 +1,3 @@
+export { usePlans } from "./usePlans.ts";
+export { useFilters } from "./useFilters.ts";
+export { useKeyboard } from "./useKeyboard.ts";