@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/cli.ts

@@ -80,9 +80,7 @@ async function clearStaleServerLock(): Promise<void> {
       try {
         const lock = JSON.parse(content) as { pid?: number };
         pid = lock.pid;
-      } catch {
-        // Ignore malformed lock files and fall back to age-based cleanup.
-      }
+      } catch {}
     }
 
     if (age > SERVER_LOCK_MAX_AGE_MS || (pid !== undefined && !isAlive(pid))) {
@@ -138,12 +136,10 @@ async function discoverServer(): Promise<ServerInfo | null> {
     const content = readFileSync(SERVER_INFO_PATH, "utf-8");
     const info: ServerInfo = JSON.parse(content);
 
-    // Verify the process is alive
     if (!isAlive(info.pid)) {
       return null;
     }
 
-    // Verify health endpoint responds
     try {
       const res = await fetch(`http://127.0.0.1:${info.port}/api/health`);
       if (!res.ok) return null;
@@ -252,7 +248,6 @@ function findReviewableFiles(dir: string): FileEntry[] {
   try {
     const entries = readdirSync(dir);
     for (const entry of entries) {
-      // Skip hidden directories and node_modules
       if (entry.startsWith(".") || entry === "node_modules") continue;
 
       const fullPath = join(dir, entry);
@@ -338,9 +333,7 @@ async function markOnboarded(): Promise<void> {
   try {
     const content = readFileSync(SETTINGS_PATH, "utf-8");
     settings = JSON.parse(content);
-  } catch {
-    // No existing settings
-  }
+  } catch {}
   settings.onboarded = true;
   const dir = join(os.homedir(), ".readit");
   await fs.mkdir(dir, { recursive: true });
@@ -428,7 +421,7 @@ const WELCOME_PATH = join(os.homedir(), ".readit", "welcome.md");
 program
   .name("readit")
   .description("Review Markdown documents with inline comments")
-  .version("0.1.3");
+  .version("0.2.0");
 
 program
   .command("list")
@@ -462,9 +455,7 @@ program
           `    ${commentCount} comment${commentCount !== 1 ? "s" : ""}`,
         );
         console.log();
-      } catch {
-        // Skip unreadable files
-      }
+      } catch {}
     }
   });
 
@@ -499,7 +490,6 @@ program
           `Selected: "${comment.selectedText.slice(0, 80)}${comment.selectedText.length > 80 ? "..." : ""}"`,
         );
         console.log(`Comment: ${comment.comment}`);
-        console.log(`Created: ${comment.createdAt}`);
         console.log();
       }
     } catch (err) {
@@ -560,16 +550,13 @@ program
         process.exit(1);
       }
 
-      // Snapshot previous session before startServer() overwrites server.json
       let previousPort: number | undefined;
       try {
         const info = JSON.parse(readFileSync(SERVER_INFO_PATH, "utf-8"));
         if (!isAlive(info.pid)) {
           previousPort = info.port;
         }
-      } catch {
-        // No previous session — will open browser normally
-      }
+      } catch {}
 
       try {
         const { url, server } = await startServer({
@@ -613,12 +600,10 @@ ${fileList.join("\n")}
           open(url);
         }
 
-        // Mark onboarding complete on first server start
         if (fileArgs.length === 0) {
           await markOnboarded();
         }
 
-        // Graceful shutdown on Ctrl+C
         process.on("SIGINT", async () => {
           console.log("\n\nShutting down...");
           server.stop();
@@ -643,7 +628,6 @@ program
   .option("--host <address>", "Host for new server (if starting)", "127.0.0.1")
   .action(
     async (fileArgs: string[], options: { port: string; host: string }) => {
-      // Resolve and validate files
       const resolvedFiles: { path: string }[] = [];
       for (const arg of fileArgs) {
         const inputPath = resolve(process.cwd(), arg);
@@ -716,4 +700,182 @@ ${fileList.join("\n")}
     },
   );
 
+program
+  .command("completion")
+  .argument("[shell]", "Shell type (zsh, bash, fish)", "zsh")
+  .description("Output shell completion and integration script")
+  .action((shell: string) => {
+    const shellDir = join(import.meta.dir, "..", "shell");
+
+    switch (shell) {
+      case "zsh": {
+        // Output the full zsh integration:
+        //   1. _readit compdef (loaded into fpath via autoload) - handles @ prefix
+        //   2. readit.zsh widget (accept-line bracket stripping + syntax highlighting)
+        const widgetPath = join(shellDir, "readit.zsh");
+        const compPath = join(shellDir, "_readit");
+
+        if (!existsSync(widgetPath) || !existsSync(compPath)) {
+          console.log(generateInlineZshCompletion());
+          return;
+        }
+
+        // Wrap the compdef in an autoload function so eval works cleanly
+        const compdefContent = readFileSync(compPath, "utf-8");
+        const widgetContent = readFileSync(widgetPath, "utf-8");
+
+        const lines: string[] = [];
+        lines.push("# readit shell integration for zsh");
+        lines.push('# Add to your .zshrc: eval "$(readit completion zsh)"');
+        lines.push("");
+        lines.push("# ── _readit compdef (autoloaded) ──");
+        lines.push(
+          "# This handles: subcommand/option completion + @ file autocomplete",
+        );
+        lines.push(
+          "# Renders [file.md] in a native multi-column grid via compadd",
+        );
+        lines.push("");
+        // Replace #compdef with autoload -Uz _readit; _readit() { ... }
+        lines.push(
+          compdefContent
+            .replace(
+              /^#compdef readit\n/,
+              "autoload -Uz _readit\n_readit() {\n",
+            )
+            .replace(/\n_readit "\$@"\n?$/, "\n}\n"),
+        );
+        lines.push("");
+        lines.push("# ── readit.zsh (sourced) ──");
+        lines.push(
+          "# This handles: @[...] bracket stripping on Enter + syntax highlighting",
+        );
+        lines.push("");
+        // Strip the shebang and guard from the widget since it's being eval'd
+        lines.push(
+          widgetContent
+            .replace(/^#!/, "#")
+            .replace(/\n\(\( \$\+ functions\[_readit_plugin_loaded\] \)\)/, ""),
+        );
+        console.log(lines.join("\n"));
+        break;
+      }
+      case "bash":
+        console.log(generateBashCompletion());
+        break;
+      case "fish":
+        console.log(generateFishCompletion());
+        break;
+      default:
+        console.error(`error: unsupported shell: ${shell}`);
+        console.error("Supported shells: zsh, bash, fish");
+        process.exit(1);
+    }
+  });
+
 program.parse();
+
+function generateInlineZshCompletion(): string {
+  return `
+#compdef readit
+
+_readit_markdown_files() {
+  local -a files
+  files=( \${(f)"$(find . -type f \\( -name '*.md' -o -name '*.markdown' \\) -not -path '*/\\.*' -not -path '*/node_modules/*' 2>/dev/null | sed 's|^\\./||')"} )
+  _describe -t files 'markdown files' files
+}
+
+_readit() {
+  local context state state_descr line
+  typeset -A opt_args
+  _arguments -C '1:command:->cmd_or_files' '*::arg:->args'
+  case "$state" in
+    cmd_or_files)
+      local -a commands=(
+        'open:Add files to running server'
+        'list:List files with comments'
+        'show:Show comments for a file'
+        'completion:Output shell completion script'
+      )
+      _alternative 'commands:command:compadd -a commands' 'files:markdown file:_readit_markdown_files'
+      ;;
+    args)
+      case "\${line[1]}" in
+        open) _arguments '*:file:_readit_markdown_files' ;;
+        show) _arguments '1:file:_files -g "*.md *.markdown"' ;;
+        *) _arguments '*:file:_readit_markdown_files' ;;
+      esac
+      ;;
+  esac
+}
+_readit "$@"
+`.trim();
+}
+
+function generateBashCompletion(): string {
+  return `
+# readit bash completion
+# Add to .bashrc: eval "$(readit completion bash)"
+
+_readit_completions() {
+  local cur prev commands
+  COMPREPLY=()
+  cur="\${COMP_WORDS[COMP_CWORD]}"
+  prev="\${COMP_WORDS[COMP_CWORD-1]}"
+  commands="open list show completion"
+
+  if [[ \${COMP_CWORD} -eq 1 ]]; then
+    COMPREPLY=( $(compgen -W "\${commands}" -- "\${cur}") )
+    # Also complete markdown files
+    local files=$(find . -type f \\( -name '*.md' -o -name '*.markdown' \\) \\
+      -not -path '*/.*' -not -path '*/node_modules/*' 2>/dev/null | sed 's|^\\./||')
+    COMPREPLY+=( $(compgen -W "\${files}" -- "\${cur}") )
+    return 0
+  fi
+
+  case "\${COMP_WORDS[1]}" in
+    open|show)
+      local files=$(find . -type f \\( -name '*.md' -o -name '*.markdown' \\) \\
+        -not -path '*/.*' -not -path '*/node_modules/*' 2>/dev/null | sed 's|^\\./||')
+      COMPREPLY=( $(compgen -W "\${files}" -- "\${cur}") )
+      ;;
+    completion)
+      COMPREPLY=( $(compgen -W "zsh bash fish" -- "\${cur}") )
+      ;;
+  esac
+  return 0
+}
+
+complete -F _readit_completions readit
+`.trim();
+}
+
+function generateFishCompletion(): string {
+  return `
+# readit fish completion
+# Add to config.fish: readit completion fish | source
+
+# Disable file completions by default
+complete -c readit -f
+
+# Subcommands
+complete -c readit -n '__fish_use_subcommand' -a 'open' -d 'Add files to running server'
+complete -c readit -n '__fish_use_subcommand' -a 'list' -d 'List files with comments'
+complete -c readit -n '__fish_use_subcommand' -a 'show' -d 'Show comments for a file'
+complete -c readit -n '__fish_use_subcommand' -a 'completion' -d 'Output shell completion script'
+
+# Options
+complete -c readit -s p -l port -d 'Port to run server on'
+complete -c readit -l host -d 'Host address to bind to'
+complete -c readit -l no-open -d "Don't automatically open browser"
+complete -c readit -l clean -d 'Clear existing comments'
+
+# File arguments for default command and open
+complete -c readit -n '__fish_use_subcommand' -F -a '(find . -type f \\( -name "*.md" -o -name "*.markdown" \\) -not -path "*/.*" -not -path "*/node_modules/*" 2>/dev/null | sed "s|^\\./||")'
+complete -c readit -n '__fish_seen_subcommand_from open' -F -a '(find . -type f \\( -name "*.md" -o -name "*.markdown" \\) -not -path "*/.*" -not -path "*/node_modules/*" 2>/dev/null | sed "s|^\\./||")'
+complete -c readit -n '__fish_seen_subcommand_from show' -F -a '(find . -type f \\( -name "*.md" -o -name "*.markdown" \\) -not -path "*/.*" -not -path "*/node_modules/*" 2>/dev/null | sed "s|^\\./||")'
+
+# Shell completions for completion subcommand
+complete -c readit -n '__fish_seen_subcommand_from completion' -a 'zsh bash fish'
+`.trim();
+}

package/src/components/ActionsMenu.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+import {
+  ClipboardCopy,
+  FileDown,
+  FileText,
+  MoreHorizontal,
+  RefreshCw,
+  Settings,
+} from "lucide-svelte";
+import { t } from "../stores/locale.svelte";
+import RawModal from "./RawModal.svelte";
+import SettingsModal from "./SettingsModal.svelte";
+import Button from "./ui/Button.svelte";
+import DropdownMenu from "./ui/DropdownMenu.svelte";
+import DropdownMenuItem from "./ui/DropdownMenuItem.svelte";
+import DropdownMenuSeparator from "./ui/DropdownMenuSeparator.svelte";
+
+interface Props {
+  commentCount: number;
+  oncopyall: () => void;
+  onexportjson: () => void;
+  onreload: () => void;
+}
+
+let { commentCount, oncopyall, onexportjson, onreload }: Props = $props();
+
+let menuOpen = $state(false);
+let rawModalOpen = $state(false);
+let settingsOpen = $state(false);
+</script>
+
+<DropdownMenu bind:open={menuOpen} align="end" contentClass="min-w-[160px]">
+  {#snippet trigger()}
+    <Button
+      variant="ghost"
+      size="icon"
+      class="size-7"
+      title={t("actions.ariaLabel")}
+    >
+      <MoreHorizontal class="w-4 h-4" />
+    </Button>
+  {/snippet}
+
+  <DropdownMenuItem
+    onselect={() => {
+      settingsOpen = true;
+      menuOpen = false;
+    }}
+  >
+    <Settings />
+    {t("actions.settings")}
+  </DropdownMenuItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem
+    onselect={() => {
+      onreload();
+      menuOpen = false;
+    }}
+  >
+    <RefreshCw />
+    {t("actions.reload")}
+  </DropdownMenuItem>
+  {#if commentCount > 0}
+    <DropdownMenuItem
+      onselect={() => {
+        oncopyall();
+        menuOpen = false;
+      }}
+    >
+      <ClipboardCopy />
+      {t("actions.copyAll")}
+    </DropdownMenuItem>
+    <DropdownMenuItem
+      onselect={() => {
+        onexportjson();
+        menuOpen = false;
+      }}
+    >
+      <FileDown />
+      {t("actions.exportJson")}
+    </DropdownMenuItem>
+    <DropdownMenuItem
+      onselect={() => {
+        rawModalOpen = true;
+        menuOpen = false;
+      }}
+    >
+      <FileText />
+      {t("actions.viewRaw")}
+    </DropdownMenuItem>
+  {/if}
+</DropdownMenu>
+
+<RawModal bind:open={rawModalOpen} onclose={() => (rawModalOpen = false)} />
+<SettingsModal bind:open={settingsOpen} onclose={() => (settingsOpen = false)} />

package/src/components/CommentBadge.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { cn } from "../lib/utils";
+import type { Comment } from "../schema";
+import { t } from "../stores/locale.svelte";
+import CommentManager from "./CommentManager.svelte";
+import DropdownMenu from "./ui/DropdownMenu.svelte";
+
+interface Props {
+  comments: Comment[];
+  fileName: string;
+  onedit: (id: string, newText: string) => void;
+  ondelete: (id: string) => void;
+  ondeleteall: () => void;
+  onnavigate: (id: string) => void;
+  onstartreanchor: (id: string) => void;
+}
+
+let {
+  comments,
+  fileName,
+  onedit,
+  ondelete,
+  ondeleteall,
+  onnavigate,
+  onstartreanchor,
+}: Props = $props();
+
+let commentsOpen = $state(false);
+let commentCount = $derived(comments.length);
+</script>
+
+{#if commentCount > 0}
+  <DropdownMenu
+    bind:open={commentsOpen}
+    align="end"
+    contentClass="w-80 max-h-96 overflow-hidden p-0"
+  >
+    {#snippet trigger()}
+      <button
+        type="button"
+        class={cn(
+          "inline-flex items-center gap-1 text-xs tabular-nums select-none transition-colors",
+          commentsOpen
+            ? "text-zinc-600"
+            : "text-zinc-400 hover:text-zinc-600",
+        )}
+        title={commentCount === 1
+          ? t("commentBadge.title", { count: commentCount })
+          : t("commentBadge.titlePlural", { count: commentCount })}
+      >
+        <span class="text-zinc-300">·</span>
+        {commentCount}
+      </button>
+    {/snippet}
+
+    <CommentManager
+      {comments}
+      {fileName}
+      onclose={() => (commentsOpen = false)}
+      {onedit}
+      {ondelete}
+      {ondeleteall}
+      {onnavigate}
+      {onstartreanchor}
+    />
+  </DropdownMenu>
+{/if}

package/src/components/CommentErrorBanner.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { AlertCircle, X } from "lucide-svelte";
+
+interface Props {
+  error: string | null;
+  ondismiss: () => void;
+}
+
+let { error, ondismiss }: Props = $props();
+</script>
+
+{#if error}
+  <div
+    role="alert"
+    aria-live="polite"
+    class="fixed top-24 left-1/2 -translate-x-1/2 z-40 w-full max-w-3xl px-4 pointer-events-none"
+  >
+    <div
+      class="flex items-start gap-3 px-4 py-2 text-sm bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-900 text-red-900 dark:text-red-200 rounded-lg shadow-lg pointer-events-auto"
+    >
+      <AlertCircle class="size-4 shrink-0 mt-0.5" />
+      <p class="flex-1 select-text break-words">{error}</p>
+      <button
+        type="button"
+        onclick={ondismiss}
+        aria-label="Dismiss"
+        class="shrink-0 rounded p-1 -mr-1 hover:bg-red-100 dark:hover:bg-red-900/40 transition-colors"
+      >
+        <X class="size-4" />
+      </button>
+    </div>
+  </div>
+{/if}

package/src/components/CommentInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { cn } from "../lib/utils";
+import { FontFamilies } from "../schema";
+import { t } from "../stores/locale.svelte";
+import { settings } from "../stores/settings.svelte";
+import Button from "./ui/Button.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  selectedText: string | null;
+  onsubmit: (commentText: string) => void;
+  oncancel: () => void;
+}
+
+let { selectedText, onsubmit, oncancel }: Props = $props();
+
+let commentText = $state("");
+let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+
+onMount(() => {
+  if (textareaEl && window.matchMedia("(pointer: fine)").matches) {
+    textareaEl.focus();
+  }
+});
+
+function handleSubmit() {
+  onsubmit(commentText.trim());
+  commentText = "";
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === "Enter" && e.metaKey) {
+    e.preventDefault();
+    handleSubmit();
+  }
+  if (e.key === "Escape") {
+    oncancel();
+  }
+}
+</script>
+
+{#if selectedText}
+  <div
+    data-comment-input
+    class="border-t border-zinc-200 dark:border-zinc-700 pt-3 pb-2"
+  >
+    <Text variant="caption" as="div" class="italic mb-2 line-clamp-2">
+      "{selectedText}"
+    </Text>
+    <textarea
+      bind:this={textareaEl}
+      bind:value={commentText}
+      placeholder={t("comment.placeholder")}
+      class={cn(
+        fontClass,
+        "w-full px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 resize-none focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-500",
+      )}
+      rows={2}
+      onkeydown={handleKeyDown}
+    ></textarea>
+    <div class="flex justify-end items-center gap-3 mt-2 text-sm">
+      <Button variant="ghost" size="sm" onclick={oncancel}>
+        {t("comment.cancel")}
+      </Button>
+      <Button variant="link" size="sm" onclick={handleSubmit} title="Cmd+Enter">
+        {commentText.trim() ? t("comment.addNote") : t("comment.highlight")}
+      </Button>
+    </div>
+  </div>
+{/if}

package/src/components/CommentListItem.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+import { cn } from "../lib/utils";
+import type { Comment } from "../schema";
+import { t } from "../stores/locale.svelte";
+import InlineEditor from "./InlineEditor.svelte";
+import ActionLink from "./ui/ActionLink.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  comment: Comment;
+  onaction?: () => void;
+  onedit: (id: string, newText: string) => void;
+  ondelete: (id: string) => void;
+  onnavigate: (id: string) => void;
+  onstartreanchor: (id: string) => void;
+}
+
+let {
+  comment,
+  onaction,
+  onedit,
+  ondelete,
+  onnavigate,
+  onstartreanchor,
+}: Props = $props();
+
+let isEditing = $state(false);
+
+let isUnresolved = $derived(comment.anchorConfidence === "unresolved");
+let canGoTo = $derived(!isUnresolved);
+
+function handleGoTo() {
+  onnavigate(comment.id);
+  onaction?.();
+}
+
+function handleReanchor() {
+  onstartreanchor(comment.id);
+  onaction?.();
+}
+</script>
+
+<div
+  class={cn(
+    "group px-3 py-2 border-b border-zinc-100 dark:border-zinc-800 last:border-b-0",
+    isUnresolved && "opacity-50",
+  )}
+>
+  <div class="flex items-center gap-1.5 mb-1">
+    <Text variant="caption" as="span" class="italic line-clamp-1">
+      "{comment.selectedText}"
+    </Text>
+    {#if isUnresolved}
+      <Text variant="caption" as="span" class="shrink-0">
+        · {t("commentList.unresolved")}
+      </Text>
+    {/if}
+  </div>
+
+  {#if isEditing}
+    <InlineEditor
+      initialText={comment.comment}
+      onsave={(text) => {
+        onedit(comment.id, text);
+        isEditing = false;
+      }}
+      oncancel={() => (isEditing = false)}
+    />
+  {:else}
+    <Text variant="body" class="line-clamp-2">
+      {comment.comment}
+    </Text>
+
+    <div
+      class="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity gap-3 mt-1.5"
+    >
+      <ActionLink onclick={() => (isEditing = true)}>
+        {t("commentList.edit")}
+      </ActionLink>
+      <ActionLink onclick={() => ondelete(comment.id)}>
+        {t("commentList.delete")}
+      </ActionLink>
+      {#if canGoTo}
+        <ActionLink onclick={handleGoTo}>
+          {t("commentList.goTo")}
+        </ActionLink>
+      {/if}
+      {#if isUnresolved}
+        <ActionLink onclick={handleReanchor}>
+          {t("commentList.reanchor")}
+        </ActionLink>
+      {/if}
+    </div>
+  {/if}
+</div>