docs: Add Markdown Annotator tool to Docusaurus site

web/package.json

@@ -26,7 +26,6 @@
     "@supabase/supabase-js": "^2.108.2",
     "@types/three": "^0.185.1",
     "@xyflow/react": "^12.11.2",
-    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -47,9 +46,14 @@
     "@docusaurus/tsconfig": "3.10.1",
     "@docusaurus/types": "3.10.1",
     "@playwright/test": "^1.61.1",
+    "autoprefixer": "^10.5.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "remark": "^15.0.1",
     "strip-markdown": "^6.0.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.6.2"
   },
   "browserslist": {

web/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

web/src/components/CommentInput.tsx

@@ -0,0 +1,73 @@
+import React, { memo, type KeyboardEvent as ReactKeyboardEvent, useCallback, useState } from 'react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+
+export interface CommentInputProps {
+  onSubmit: (text: string) => void;
+  onCancel: () => void;
+  filePath?: string;
+  startLine?: number;
+  endLine?: number;
+}
+
+export const CommentInput: React.FC<CommentInputProps> = memo(
+  ({ onSubmit, onCancel, filePath, startLine, endLine }) => {
+    const [text, setText] = useState('');
+
+    const handleSubmit = useCallback(() => {
+      if (text.trim()) onSubmit(text.trim());
+    }, [text, onSubmit]);
+
+    const handleKeyDown = useCallback(
+      (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.metaKey || e.ctrlKey) {
+          const key = e.key.toLowerCase();
+          if (['a', 'c', 'x', 'v', 'z', 'y'].includes(key)) {
+            e.stopPropagation();
+            return;
+          }
+        }
+        if (e.key === 'Escape') onCancel();
+        else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') handleSubmit();
+      },
+      [onCancel, handleSubmit],
+    );
+
+    const lineLabel =
+      startLine && endLine
+        ? startLine === endLine
+          ? `L${startLine}`
+          : `L${startLine}–${endLine}`
+        : null;
+
+    return (
+      <div className="bg-muted border border-border rounded-md mx-2 my-1 px-4 py-3 font-sans text-base">
+        {filePath && lineLabel && (
+          <div className="mb-2 text-sm text-muted-foreground font-mono">
+            {filePath}:{lineLabel}
+          </div>
+        )}
+        {!filePath && lineLabel && (
+          <div className="mb-2 text-sm text-muted-foreground font-mono">{lineLabel}</div>
+        )}
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Add a comment…"
+          className="mb-2 font-sans min-h-[70px]"
+          autoFocus
+          onKeyDown={handleKeyDown}
+        />
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button size="sm" onClick={handleSubmit} disabled={!text.trim()}>
+            Add Comment
+          </Button>
+        </div>
+      </div>
+    );
+  },
+);
+CommentInput.displayName = 'CommentInput';

web/src/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40',
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2 text-base',
+        icon: 'h-10 w-10',
+        lg: 'h-11 px-6 text-lg',
+        sm: 'h-8 px-3 text-sm',
+        xs: 'h-6 px-2 text-sm',
+      },
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/85 active:bg-primary/75 shadow-sm',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/85 shadow-sm',
+        ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent/80',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/70 active:bg-secondary/60',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      className={cn(buttonVariants({ className, size, variant }))}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

web/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-sm border border-input bg-background px-3 py-2 transition-colors ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 resize-none',
+        className,
+      )}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck={false}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

web/src/css/custom.css

@@ -4,6 +4,58 @@
  * work well for content-centric websites.
  */
 
+/* Tailwind utilities (no preflight — Infima handles base styles) */
+@tailwind components;
+@tailwind utilities;
+
+/* ── Shared design-system tokens ──────────────────────────────────────────────
+   These mirror the desktop app's src/index.css so that shared React components
+   (CommentInput, Button, etc.) render identically in both contexts.          */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --primary: 211 100% 62%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 220 13% 95%;
+  --secondary-foreground: 0 0% 13%;
+  --muted: 220 13% 96%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 220 13% 95%;
+  --accent-foreground: 0 0% 13%;
+  --destructive: 0 85% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 13% 88%;
+  --input: 220 13% 91%;
+  --ring: 211 100% 62%;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}
+
+[data-theme='dark'] {
+  --background: 0 0% 9%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 12%;
+  --card-foreground: 0 0% 95%;
+  --primary: 211 100% 55%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 95%;
+  --muted: 0 0% 18%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 95%;
+  --destructive: 0 85% 58%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 25%;
+  --input: 0 0% 22%;
+  --ring: 211 100% 55%;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   /* Font tokens. Real webfonts are self-hosted (see fonts.css); each is

web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}