@peaske7/readit 0.1.5 → 0.1.7

package/src/App.tsx

@@ -13,6 +13,7 @@ import { TableOfContents } from "./components/TableOfContents";
 import { textVariants } from "./components/ui/Text";
 import { CommentContext, CommentProvider } from "./contexts/CommentContext";
 import { LayoutContext, LayoutProvider } from "./contexts/LayoutContext";
+import { useLocale } from "./contexts/LocaleContext";
 import { useClipboard } from "./hooks/useClipboard";
 import { useDocument } from "./hooks/useDocument";
 import { useHeadings } from "./hooks/useHeadings";
@@ -38,6 +39,7 @@ const TOASTER_OPTIONS = {
 };
 
 function AppContent() {
+  const { t } = useLocale();
   const {
     comments,
     sortedComments,
@@ -74,6 +76,7 @@ function AppContent() {
     document: document ?? undefined,
     selection: selection ?? undefined,
     clearSelection,
+    t,
   });
 
   const { shortcuts, isFullscreen } = use(LayoutContext)!;
@@ -275,6 +278,7 @@ function AppContent() {
                 />
               ) : (
                 <CommentInput
+                  key={selection.text}
                   selectedText={selection.text}
                   onSubmit={handleAddComment}
                   onCancel={clearSelection}
@@ -302,7 +306,7 @@ function AppContent() {
       <CommentNav />
 
       <footer className="py-4 text-center text-sm text-zinc-400 dark:text-zinc-500">
-        Made with ❤️ by Jay and Claude
+        {t("app.footer")}
       </footer>
     </div>
   );
@@ -333,6 +337,7 @@ function useTabKeyboardShortcuts() {
 }
 
 function App() {
+  const { t } = useLocale();
   const { document, error, isInitialized } = useDocument();
   const documentOrder = useAppStore((s) => s.documentOrder);
 
@@ -349,7 +354,9 @@ function App() {
   if (!isInitialized) {
     return (
       <div className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex items-center justify-center">
-        <div className="text-zinc-500 dark:text-zinc-400">Loading...</div>
+        <div className="text-zinc-500 dark:text-zinc-400">
+          {t("app.loading")}
+        </div>
       </div>
     );
   }
@@ -358,9 +365,17 @@ function App() {
     return (
       <div className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex flex-col">
         <TabBar />
-        <div className="flex-1 flex items-center justify-center">
+        <div className="flex-1 flex flex-col items-center justify-center gap-3">
           <p className="text-zinc-400 dark:text-zinc-500 text-sm">
-            No documents open.
+            {t("app.noDocuments")}
+          </p>
+          <p className="text-zinc-400 dark:text-zinc-500 text-xs">
+            {t("app.noDocumentsHintPrefix")}
+            {t("app.noDocumentsHintPrefix") && " "}
+            <code className="bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded text-xs">
+              readit open &lt;file.md&gt;
+            </code>{" "}
+            {t("app.noDocumentsHintSuffix")}
           </p>
         </div>
       </div>
@@ -370,7 +385,9 @@ function App() {
   if (!document) {
     return (
       <div className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex items-center justify-center">
-        <div className="text-zinc-500 dark:text-zinc-400">Loading...</div>
+        <div className="text-zinc-500 dark:text-zinc-400">
+          {t("app.loading")}
+        </div>
       </div>
     );
   }
@@ -378,7 +395,7 @@ function App() {
   return (
     <>
       <TabBar />
-      <LayoutProvider filePath={document.filePath}>
+      <LayoutProvider>
         <CommentProvider
           filePath={document.filePath}
           clean={document.clean}

package/src/cli/index.ts

@@ -5,6 +5,7 @@ import {
   lstatSync,
   readdirSync,
   readFileSync,
+  realpathSync,
   statSync,
 } from "node:fs";
 import * as fs from "node:fs/promises";
@@ -13,22 +14,13 @@ import { join, resolve } from "node:path";
 import { Command } from "commander";
 import open from "open";
 import { getCommentPath, parseCommentFile } from "../lib/comment-storage.js";
+import { getFileType } from "../lib/utils.js";
 import type { FileEntry } from "../server/index.js";
-import { startServer } from "../server/index.js";
+import { removeServerInfo, startServer } from "../server/index.js";
 import type { DocumentType } from "../types/index.js";
 
 const program = new Command();
 
-function getFileType(filePath: string): DocumentType | null {
-  if (filePath.endsWith(".md") || filePath.endsWith(".markdown")) {
-    return "markdown";
-  }
-  if (filePath.endsWith(".html") || filePath.endsWith(".htm")) {
-    return "html";
-  }
-  return null;
-}
-
 function isPermissionError(err: unknown): boolean {
   return (
     err instanceof Error &&
@@ -37,6 +29,39 @@ function isPermissionError(err: unknown): boolean {
   );
 }
 
+interface ServerInfo {
+  port: number;
+  pid: number;
+}
+
+async function discoverServer(): Promise<ServerInfo | null> {
+  const serverInfoPath = join(os.homedir(), ".readit", "server.json");
+
+  try {
+    const content = readFileSync(serverInfoPath, "utf-8");
+    const info: ServerInfo = JSON.parse(content);
+
+    // Verify the process is alive
+    try {
+      process.kill(info.pid, 0);
+    } catch {
+      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;
+    } catch {
+      return null;
+    }
+
+    return info;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Recursively find all .comments.md files in a directory.
  */
@@ -92,7 +117,6 @@ function findReviewableFiles(dir: string): FileEntry[] {
           const type = getFileType(entry);
           if (type) {
             results.push({
-              content: readFileSync(fullPath, "utf-8"),
               type,
               filePath: fullPath,
             });
@@ -121,13 +145,15 @@ function resolveFiles(args: string[]): FileEntry[] {
   const files: FileEntry[] = [];
 
   for (const arg of args) {
-    const filePath = resolve(process.cwd(), arg);
+    const inputPath = resolve(process.cwd(), arg);
 
-    if (!existsSync(filePath)) {
-      console.error(`error: not found: ${filePath}`);
+    if (!existsSync(inputPath)) {
+      console.error(`error: not found: ${inputPath}`);
       process.exit(1);
     }
 
+    const filePath = realpathSync(inputPath);
+
     const stat = statSync(filePath);
 
     if (stat.isDirectory()) {
@@ -151,7 +177,6 @@ function resolveFiles(args: string[]): FileEntry[] {
 
       seen.add(filePath);
       files.push({
-        content: readFileSync(filePath, "utf-8"),
         type,
         filePath,
       });
@@ -161,6 +186,114 @@ function resolveFiles(args: string[]): FileEntry[] {
   return files;
 }
 
+// ─── Onboarding ──────────────────────────────────────────────────────
+
+const SETTINGS_PATH = join(os.homedir(), ".readit", "settings.json");
+
+function isOnboarded(): boolean {
+  try {
+    const content = readFileSync(SETTINGS_PATH, "utf-8");
+    const settings = JSON.parse(content);
+    return settings.onboarded === true;
+  } catch {
+    return false;
+  }
+}
+
+async function markOnboarded(): Promise<void> {
+  let settings: Record<string, unknown> = {};
+  try {
+    const content = readFileSync(SETTINGS_PATH, "utf-8");
+    settings = JSON.parse(content);
+  } catch {
+    // No existing settings
+  }
+  settings.onboarded = true;
+  const dir = join(os.homedir(), ".readit");
+  await fs.mkdir(dir, { recursive: true });
+  await fs.writeFile(SETTINGS_PATH, JSON.stringify(settings, null, 2), "utf-8");
+}
+
+const WELCOME_CONTENT = `# Welcome to readit
+
+A simple tool for reviewing markdown with inline comments.
+
+---
+
+## How It Works
+
+readit follows a simple loop: **read → comment → extract**.
+
+### 1. Read
+
+You're already doing this. Open any markdown file with \`readit <file.md>\` and it renders in your browser with a clean reading experience.
+
+### 2. Comment
+
+Select any text to add a comment. Try it now — **select this sentence** and type your first comment.
+
+Your comments appear as margin notes next to the highlighted text, just like reviewing a document in Google Docs. Add as many as you need.
+
+### 3. Extract
+
+When you're done reviewing, click the menu in the top-right and choose **Copy as Prompt**. This exports all your comments in a format ready for Claude, ChatGPT, or any AI assistant.
+
+You can also export as JSON if you prefer structured data.
+
+---
+
+## Everything is Plain Markdown
+
+Your comments are saved as \`.comments.md\` files in \`~/.readit/comments/\`. No database, no lock-in — just readable markdown files you can version control, search, or edit by hand.
+
+Each comment file looks something like this:
+
+\`\`\`markdown
+## Comment 1
+**Selected:** "select this sentence"
+**Comment:** This is my first comment!
+**Created:** 2024-01-15T10:30:00Z
+\`\`\`
+
+---
+
+## Navigating Comments
+
+Once you have multiple comments, use the navigation bar at the bottom of the screen to jump between them. You can also use keyboard shortcuts:
+
+| Shortcut | Action |
+|----------|--------|
+| \`Alt + ↑\` | Previous comment |
+| \`Alt + ↓\` | Next comment |
+| \`⌘ + C\` | Copy selected text (raw) |
+| \`⌘ + Shift + C\` | Copy selected text with context (for AI) |
+
+---
+
+## Quick Start
+
+\`\`\`bash
+# Review a markdown file
+readit document.md
+
+# Use a custom port
+readit document.md --port 3000
+
+# Start fresh (clear existing comments)
+readit document.md --clean
+\`\`\`
+
+---
+
+## Try It Now
+
+Go ahead and add a few comments to this document. When you're done, export them and see the output. That's the entire workflow — simple, transparent, and designed for reviewing AI-generated content.
+`;
+
+const WELCOME_PATH = join(os.homedir(), ".readit", "welcome.md");
+
+// ─── Program ─────────────────────────────────────────────────────────
+
 program
   .name("readit")
   .description("Review Markdown and HTML documents with inline comments")
@@ -249,9 +382,9 @@ program
     }
   });
 
-// Main review command (default) — accepts one or more files/directories
+// Main review command (default) — accepts zero or more files/directories
 program
-  .argument("<files...>", "Markdown or HTML files/directories to review")
+  .argument("[files...]", "Markdown or HTML files/directories to review")
   .option("-p, --port <number>", "Port to run server on", "4567")
   .option("--host <address>", "Host address to bind to", "127.0.0.1")
   .option("--no-open", "Don't automatically open browser")
@@ -266,11 +399,27 @@ program
         clean: boolean;
       },
     ) => {
-      const files = resolveFiles(fileArgs);
+      let files: FileEntry[];
 
-      if (files.length === 0) {
-        console.error("error: no reviewable files found");
-        process.exit(1);
+      if (fileArgs.length === 0) {
+        if (isOnboarded()) {
+          files = [];
+        } else {
+          files = [
+            {
+              content: WELCOME_CONTENT,
+              type: "markdown" as DocumentType,
+              filePath: WELCOME_PATH,
+            },
+          ];
+        }
+      } else {
+        files = resolveFiles(fileArgs);
+
+        if (files.length === 0) {
+          console.error("error: no reviewable files found");
+          process.exit(1);
+        }
       }
 
       const preferredPort = Number.parseInt(options.port, 10);
@@ -292,9 +441,21 @@ program
           clean: options.clean,
         });
 
-        const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+        if (files.length === 0) {
+          console.log(`
+readit - Document Review Tool
 
-        console.log(`
+  URL:  ${url}
+
+  No files specified. Add files with:
+    readit open <file.md>
+
+  Server running. Press Ctrl+C to stop.
+`);
+        } else {
+          const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+
+          console.log(`
 readit - Document Review Tool
 
   ${files.length === 1 ? "File:" : "Files:"}
@@ -304,15 +465,141 @@ ${fileList.join("\n")}
   Server running. Close browser tab to stop.
   Press Ctrl+C to force stop.
 `);
+        }
 
         if (options.open) {
           open(url);
         }
 
+        // Mark onboarding complete on first server start
+        if (fileArgs.length === 0) {
+          await markOnboarded();
+        }
+
         // Graceful shutdown on Ctrl+C
-        process.on("SIGINT", () => {
+        process.on("SIGINT", async () => {
           console.log("\n\nShutting down...");
           server.stop();
+          await removeServerInfo();
+          process.exit(0);
+        });
+      } catch (error) {
+        console.error(
+          "error: failed to start server:",
+          error instanceof Error ? error.message : error,
+        );
+        process.exit(1);
+      }
+    },
+  );
+
+// Open command: add files to running server or start new one
+program
+  .command("open")
+  .argument("<files...>", "Markdown or HTML files to add to running server")
+  .description("Add files to a running readit server, or start a new one")
+  .option("-p, --port <number>", "Port for new server (if starting)", "4567")
+  .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; type: DocumentType }[] = [];
+      for (const arg of fileArgs) {
+        const inputPath = resolve(process.cwd(), arg);
+
+        if (!existsSync(inputPath)) {
+          console.error(`error: not found: ${inputPath}`);
+          process.exit(1);
+        }
+
+        const filePath = realpathSync(inputPath);
+
+        const type = getFileType(filePath);
+        if (!type) {
+          console.error(
+            `error: unsupported file type: ${arg} (expected .md, .markdown, .html, or .htm)`,
+          );
+          process.exit(1);
+        }
+
+        resolvedFiles.push({ path: filePath, type });
+      }
+
+      // Try to find running server
+      const server = await discoverServer();
+
+      if (server) {
+        // Send files to running server
+        for (const file of resolvedFiles) {
+          try {
+            const res = await fetch(
+              `http://127.0.0.1:${server.port}/api/documents`,
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ path: file.path }),
+              },
+            );
+
+            if (!res.ok) {
+              const data = await res.json();
+              console.error(`error: failed to add ${file.path}: ${data.error}`);
+              process.exit(1);
+            }
+
+            const data = await res.json();
+            if (data.status === "added") {
+              console.log(`Added: ${data.fileName} (${data.type})`);
+            } else {
+              console.log(`Present: ${data.fileName} (${data.type})`);
+            }
+          } catch (err) {
+            console.error(
+              "error: failed to connect to server:",
+              err instanceof Error ? err.message : err,
+            );
+            process.exit(1);
+          }
+        }
+
+        console.log(`\nServer: http://127.0.0.1:${server.port}`);
+        return;
+      }
+
+      // No running server — start one
+      console.log("No running server found, starting new one...\n");
+
+      const files = resolvedFiles.map((f) => ({
+        type: f.type,
+        filePath: f.path,
+      }));
+
+      const preferredPort = Number.parseInt(options.port, 10);
+      try {
+        const { url, server: newServer } = await startServer({
+          files,
+          port: preferredPort,
+          host: options.host,
+        });
+
+        const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+        console.log(`
+readit - Document Review Tool
+
+  ${files.length === 1 ? "File:" : "Files:"}
+${fileList.join("\n")}
+  URL:  ${url}
+
+  Server running. Close browser tab to stop.
+  Press Ctrl+C to force stop.
+`);
+
+        open(url);
+
+        process.on("SIGINT", async () => {
+          console.log("\n\nShutting down...");
+          newServer.stop();
+          await removeServerInfo();
           process.exit(0);
         });
       } catch (error) {

package/src/components/ActionsMenu.tsx

@@ -12,6 +12,7 @@ import {
 import { useState } from "react";
 import { useCommentContext } from "../contexts/CommentContext";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { RawModal } from "./RawModal";
 import { SettingsModal } from "./SettingsModal";
 import { Button } from "./ui/Button";
@@ -38,6 +39,7 @@ export function ActionsMenu({
 }: ActionsMenuProps) {
   const { commentCount } = useCommentContext();
   const { isFullscreen, toggleLayoutMode } = useLayoutContext();
+  const { t } = useLocale();
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [rawModalOpen, setRawModalOpen] = useState(false);
@@ -51,7 +53,7 @@ export function ActionsMenu({
             variant="ghost"
             size="icon"
             className="size-7"
-            aria-label="Actions menu"
+            aria-label={t("actions.ariaLabel")}
           >
             <MoreHorizontal className="w-4 h-4" />
           </Button>
@@ -59,40 +61,40 @@ export function ActionsMenu({
         <DropdownMenuContent align="end" className="min-w-[160px]">
           <DropdownMenuItem onSelect={() => toggleLayoutMode()}>
             {isFullscreen ? <Minimize2 /> : <Maximize2 />}
-            {isFullscreen ? "Centered" : "Fullscreen"}
+            {isFullscreen ? t("actions.centered") : t("actions.fullscreen")}
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
             <Settings />
-            Settings
+            {t("actions.settings")}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => onReload()}>
             <RefreshCw />
-            Reload
+            {t("actions.reload")}
           </DropdownMenuItem>
           {commentCount > 0 && (
             <>
               <DropdownMenuItem
                 onSelect={() => onCopyAll()}
-                title="Copy in prompt format for AI assistants"
+                title={t("actions.copyAllAITitle")}
               >
                 <BotMessageSquare />
-                Copy All (AI)
+                {t("actions.copyAllAI")}
               </DropdownMenuItem>
               <DropdownMenuItem
                 onSelect={() => onCopyAllRaw()}
-                title="Copy as plain text"
+                title={t("actions.copyAllRawTitle")}
               >
                 <TextQuote />
-                Copy All (Raw)
+                {t("actions.copyAllRaw")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => onExportJson()}>
                 <FileDown />
-                Export JSON
+                {t("actions.exportJson")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => setRawModalOpen(true)}>
                 <FileText />
-                View Raw
+                {t("actions.viewRaw")}
               </DropdownMenuItem>
             </>
           )}