@agentprojectcontext/apx 1.57.0 → 1.59.0

package/src/interfaces/web/src/components/common/ConfirmDialog.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Dialog, Button } from "../ui";
+import { t } from "../../i18n";
+
+// Reusable confirm dialog for destructive/executing actions (project rule:
+// never native confirm()). Shows a loading state while the action runs.
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel,
+  destructive = true,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void> | void;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  destructive?: boolean;
+}) {
+  const [busy, setBusy] = useState(false);
+  const run = async () => {
+    setBusy(true);
+    try {
+      await onConfirm();
+      onClose();
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={title}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant={destructive ? "destructive" : "primary"} onClick={() => void run()} loading={busy}>
+            {confirmLabel ?? t("common.confirm")}
+          </Button>
+        </>
+      }
+    >
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/files/FileBrowser.tsx

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { RefreshCw, FilePlus2, FolderOpen } from "lucide-react";
+import { ProjectFiles, type FileScope } from "../../lib/api/projectFiles";
+import type { FileNode, FileContent } from "../../types/daemon";
+import { Spinner, Button, Empty } from "../ui";
+import { useToast } from "../Toast";
+import { t } from "../../i18n";
+import { FileTree } from "./FileTree";
+import { FileViewer } from "./FileViewer";
+import { NewFileDialog } from "./NewFileDialog";
+
+// Shared file browser used by both /files (scope=project) and /docs
+// (scope=docs). One component, two roots — the docs surface is just the same
+// browser with `editable` on and a "new document" affordance.
+export function FileBrowser({
+  pid,
+  scope,
+  editable = false,
+  emptyHint,
+}: {
+  pid: string;
+  scope: FileScope;
+  /** Allow editing text/markdown + creating/deleting files (docs surface). */
+  editable?: boolean;
+  emptyHint?: string;
+}) {
+  const toast = useToast();
+  const [selected, setSelected] = useState<string | null>(null);
+  const [newOpen, setNewOpen] = useState(false);
+
+  const treeKey = `/projects/${pid}/fs/tree?scope=${scope}`;
+  const tree = useSWR(treeKey, () => ProjectFiles.tree(pid, scope));
+
+  const fileKey = selected ? `/projects/${pid}/fs/file?scope=${scope}&path=${selected}` : null;
+  const file = useSWR<FileContent | null>(fileKey, () => (selected ? ProjectFiles.read(pid, selected, scope) : null));
+
+  const onSelect = (node: FileNode) => setSelected(node.path);
+
+  const onSave = editable
+    ? async (content: string) => {
+        if (!selected) return;
+        await ProjectFiles.write(pid, selected, content, scope);
+        toast.success(t("files.saved"));
+        void file.mutate();
+      }
+    : undefined;
+
+  const onDelete = editable
+    ? async (node: FileNode) => {
+        await ProjectFiles.remove(pid, node.path, scope);
+        if (selected === node.path) setSelected(null);
+        toast.success(t("files.deleted"));
+        void tree.mutate();
+      }
+    : undefined;
+
+  const onCreated = (path: string) => {
+    setNewOpen(false);
+    setSelected(path);
+    void tree.mutate();
+  };
+
+  const nodes = tree.data?.tree ?? [];
+  const isEmpty = !tree.isLoading && nodes.length === 0;
+
+  return (
+    <div className="flex h-full min-h-0 overflow-hidden rounded-xl border border-border bg-card">
+      {/* Sidebar: tree */}
+      <div className="flex w-64 shrink-0 flex-col border-r border-border">
+        <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
+          <FolderOpen className="size-4 text-muted-foreground" />
+          <span className="flex-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {scope === "docs" ? t("files.docs_label") : t("files.files_label")}
+          </span>
+          {editable && (
+            <button
+              type="button"
+              data-testid="docs-new"
+              onClick={() => setNewOpen(true)}
+              className="text-muted-foreground hover:text-foreground"
+              aria-label={t("files.new_doc")}
+              title={t("files.new_doc")}
+            >
+              <FilePlus2 className="size-4" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => void tree.mutate()}
+            className="text-muted-foreground hover:text-foreground"
+            aria-label={t("common.refresh")}
+          >
+            <RefreshCw className={tree.isValidating ? "size-3.5 animate-spin" : "size-3.5"} />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
+          {tree.isLoading ? (
+            <div className="flex justify-center py-6"><Spinner size={14} /></div>
+          ) : isEmpty ? (
+            <div className="p-3">
+              <Empty>
+                <div className="space-y-2">
+                  <p>{emptyHint ?? t("files.empty")}</p>
+                  {editable && (
+                    <Button size="sm" variant="secondary" onClick={() => setNewOpen(true)}>
+                      <FilePlus2 className="size-3.5" />{t("files.new_doc")}
+                    </Button>
+                  )}
+                </div>
+              </Empty>
+            </div>
+          ) : (
+            <FileTree nodes={nodes} selectedPath={selected} onSelect={onSelect} onDelete={onDelete} />
+          )}
+          {tree.data?.truncated && (
+            <p className="px-2 py-1 text-[10px] text-muted-foreground/60">{t("files.truncated")}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Main: viewer */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <FileViewer file={file.data ?? null} loading={!!fileKey && file.isLoading} onSave={onSave} />
+      </div>
+
+      {editable && (
+        <NewFileDialog
+          open={newOpen}
+          onClose={() => setNewOpen(false)}
+          pid={pid}
+          scope={scope}
+          onCreated={onCreated}
+        />
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/FileTree.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect } from "react";
+import {
+  ChevronRight, ChevronDown, Folder, FolderOpen,
+  FileText, FileCode, Image as ImageIcon, File, Trash2,
+} from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { FileNode, FileKind } from "../../types/daemon";
+
+function kindIcon(kind?: FileKind) {
+  switch (kind) {
+    case "markdown": return { Icon: FileText, color: "text-sky-500" };
+    case "text": return { Icon: FileCode, color: "text-amber-500" };
+    case "image": return { Icon: ImageIcon, color: "text-pink-500" };
+    default: return { Icon: File, color: "text-muted-foreground" };
+  }
+}
+
+// Ancestor dir paths of a file path, so the tree can auto-expand to a selection.
+function ancestors(path: string): string[] {
+  const parts = path.split("/");
+  const out: string[] = [];
+  for (let i = 1; i < parts.length; i++) out.push(parts.slice(0, i).join("/"));
+  return out;
+}
+
+function Row({
+  node, depth, selectedPath, expanded, toggle, onSelect, onDelete,
+}: {
+  node: FileNode;
+  depth: number;
+  selectedPath: string | null;
+  expanded: Set<string>;
+  toggle: (p: string) => void;
+  onSelect: (node: FileNode) => void;
+  onDelete?: (node: FileNode) => void;
+}) {
+  const isDir = node.type === "dir";
+  const open = expanded.has(node.path);
+  const selected = selectedPath === node.path;
+  const { Icon, color } = isDir
+    ? { Icon: open ? FolderOpen : Folder, color: "text-muted-foreground" }
+    : kindIcon(node.kind);
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "group flex items-center gap-1 rounded px-1.5 py-1 text-[13px] cursor-pointer",
+          selected ? "bg-primary/15 text-foreground" : "hover:bg-accent/40 text-foreground/80",
+        )}
+        style={{ paddingLeft: depth * 12 + 6 }}
+        onClick={() => (isDir ? toggle(node.path) : onSelect(node))}
+      >
+        {isDir ? (
+          open ? <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+               : <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-3.5 shrink-0" />
+        )}
+        <Icon className={cn("size-3.5 shrink-0", color)} />
+        <span className="min-w-0 flex-1 truncate">{node.name}</span>
+        {onDelete && !isDir && (
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); onDelete(node); }}
+            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-red-500"
+            aria-label={`delete ${node.name}`}
+          >
+            <Trash2 className="size-3.5" />
+          </button>
+        )}
+      </div>
+      {isDir && open && node.children?.map((child) => (
+        <Row
+          key={child.path}
+          node={child}
+          depth={depth + 1}
+          selectedPath={selectedPath}
+          expanded={expanded}
+          toggle={toggle}
+          onSelect={onSelect}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function FileTree({
+  nodes, selectedPath, onSelect, onDelete, className,
+}: {
+  nodes: FileNode[];
+  selectedPath: string | null;
+  onSelect: (node: FileNode) => void;
+  onDelete?: (node: FileNode) => void;
+  className?: string;
+}) {
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+
+  // Auto-expand ancestors of the current selection so it's always visible.
+  useEffect(() => {
+    if (!selectedPath) return;
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      for (const a of ancestors(selectedPath)) next.add(a);
+      return next;
+    });
+  }, [selectedPath]);
+
+  const toggle = (p: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(p) ? next.delete(p) : next.add(p);
+      return next;
+    });
+
+  return (
+    <div className={cn("select-none", className)}>
+      {nodes.map((node) => (
+        <Row
+          key={node.path}
+          node={node}
+          depth={0}
+          selectedPath={selectedPath}
+          expanded={expanded}
+          toggle={toggle}
+          onSelect={onSelect}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/FileViewer.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { Save, RotateCcw, Pencil, Eye, Columns2, FileQuestion, Download } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Spinner } from "../ui";
+import { t } from "../../i18n";
+import type { FileContent } from "../../types/daemon";
+import { MarkdownPreview } from "./MarkdownPreview";
+import { MarkdownEditor } from "./MarkdownEditor";
+
+function ToolbarButton({
+  onClick, active, disabled, children,
+}: { onClick: () => void; active?: boolean; disabled?: boolean; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[11px] font-medium transition-colors disabled:opacity-40",
+        active ? "bg-primary/15 text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function CodeView({ content }: { content: string }) {
+  return (
+    <div className="min-h-0 flex-1 overflow-auto">
+      <table className="w-full border-collapse font-mono text-[12px] leading-[1.6]">
+        <tbody>
+          {content.split("\n").map((line, i) => (
+            <tr key={i} className="hover:bg-accent/20">
+              <td className="w-12 select-none border-r border-border/30 px-3 text-right align-top text-[10px] text-muted-foreground/40" aria-hidden="true">
+                {i + 1}
+              </td>
+              <td className="whitespace-pre px-4 align-top text-foreground/90">{line || " "}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// Type-aware file view/editor. Markdown gets a preview + optional split editor;
+// text/code get a line-numbered view + optional textarea; images render inline;
+// binaries show metadata only. `onSave` (docs, editable text) turns on editing.
+export function FileViewer({
+  file, loading, onSave,
+}: {
+  file: FileContent | null;
+  loading?: boolean;
+  onSave?: (content: string) => Promise<void> | void;
+}) {
+  const editable = typeof onSave === "function";
+  const [draft, setDraft] = useState("");
+  const [editing, setEditing] = useState(false);
+  const [showPreview, setShowPreview] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  // Reset local state whenever a different file loads.
+  useEffect(() => {
+    setDraft(file?.content ?? "");
+    setEditing(false);
+    setShowPreview(true);
+  }, [file?.path, file?.content]);
+
+  if (loading) {
+    return <div className="flex flex-1 items-center justify-center"><Spinner size={16} /></div>;
+  }
+  if (!file) {
+    return (
+      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+        {t("files.select_prompt")}
+      </div>
+    );
+  }
+
+  const isMarkdown = file.kind === "markdown";
+  const isText = file.kind === "text" || file.kind === "markdown";
+  const dirty = editing && draft !== (file.content ?? "");
+
+  const save = async () => {
+    if (!onSave || !dirty) return;
+    setSaving(true);
+    try {
+      await onSave(draft);
+      setEditing(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-card/40" data-testid="file-viewer">
+      {/* Header / toolbar */}
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted-foreground">
+          {file.path}
+          {dirty && <span className="ml-1 text-amber-400">•</span>}
+        </span>
+
+        {isMarkdown && editing && (
+          <ToolbarButton onClick={() => setShowPreview((v) => !v)} active={showPreview}>
+            <Columns2 className="size-3" />{t("files.preview")}
+          </ToolbarButton>
+        )}
+
+        {editable && isText && (
+          editing ? (
+            <>
+              <ToolbarButton onClick={() => { setDraft(file.content ?? ""); setEditing(false); }} disabled={saving}>
+                <RotateCcw className="size-3" />{t("files.discard")}
+              </ToolbarButton>
+              <ToolbarButton onClick={() => void save()} disabled={!dirty || saving} active={dirty}>
+                {saving ? <Spinner size={10} /> : <Save className="size-3" />}{t("files.save")}
+              </ToolbarButton>
+            </>
+          ) : (
+            <ToolbarButton onClick={() => setEditing(true)}>
+              <Pencil className="size-3" />{t("files.edit")}
+            </ToolbarButton>
+          )
+        )}
+      </div>
+
+      {/* Body */}
+      {isMarkdown ? (
+        editing ? (
+          <MarkdownEditor value={draft} onChange={setDraft} showPreview={showPreview} onSave={() => void save()} />
+        ) : (
+          <div className="min-h-0 flex-1 overflow-y-auto p-4"><MarkdownPreview content={file.content ?? ""} /></div>
+        )
+      ) : file.kind === "text" ? (
+        editing ? (
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "s") { e.preventDefault(); void save(); } }}
+            spellCheck={false}
+            className="min-h-0 flex-1 resize-none bg-transparent p-4 font-mono text-[12px] leading-[1.6] text-foreground/90 outline-none"
+          />
+        ) : (
+          <CodeView content={file.content ?? ""} />
+        )
+      ) : file.kind === "image" && file.encoding === "base64" ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4">
+          <img
+            src={`data:${file.mime};base64,${file.content}`}
+            alt={file.name}
+            className="max-h-full max-w-full rounded object-contain"
+          />
+        </div>
+      ) : (
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
+          <FileQuestion className="size-8 opacity-50" />
+          <span>{file.too_large ? t("files.too_large") : t("files.no_preview")}</span>
+          <span className="flex items-center gap-1 text-xs opacity-70">
+            <Download className="size-3" />{(file.size / 1024).toFixed(1)} KB
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/MarkdownEditor.tsx

@@ -0,0 +1,48 @@
+import { cn } from "../../lib/cn";
+import { MarkdownPreview } from "./MarkdownPreview";
+
+// A plain-textarea markdown editor with an optional live side-by-side preview.
+// Deliberately not a heavyweight editor (Monaco/CodeMirror) — a styled textarea
+// is fast, dependency-free, and enough for docs/specs. The parent owns the
+// toolbar (save / preview toggle) and passes `showPreview`.
+export function MarkdownEditor({
+  value,
+  onChange,
+  showPreview = false,
+  placeholder,
+  onSave,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  showPreview?: boolean;
+  placeholder?: string;
+  onSave?: () => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex min-h-0 flex-1", className)}>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (onSave && (e.metaKey || e.ctrlKey) && e.key === "s") {
+            e.preventDefault();
+            onSave();
+          }
+        }}
+        placeholder={placeholder}
+        spellCheck={false}
+        className={cn(
+          "min-h-0 resize-none bg-transparent p-4 font-mono text-[13px] leading-[1.7] text-foreground/90 outline-none",
+          showPreview ? "w-1/2 border-r border-border" : "w-full",
+        )}
+      />
+      {showPreview && (
+        <div className="min-h-0 w-1/2 overflow-y-auto p-4">
+          <MarkdownPreview content={value} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/MarkdownPreview.tsx

@@ -0,0 +1,146 @@
+import { Fragment, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+// A small, dependency-free markdown renderer. We deliberately avoid
+// react-markdown/marked (no installers per project rules) and never use
+// dangerouslySetInnerHTML — every node is a real React element, so untrusted
+// document content can't inject markup. Coverage is the common subset:
+// headings, fenced/inline code, bold/italic/links, blockquotes, hr, and
+// ordered/unordered lists. Anything else renders as plain paragraphs.
+
+// ── Inline: bold, italic, code, links ──────────────────────────────────────
+function renderInline(text: string, keyBase: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  // One regex, alternation ordered so `**` beats `*`. Groups capture the inner.
+  const re = /(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  let i = 0;
+  while ((m = re.exec(text))) {
+    if (m.index > last) out.push(<Fragment key={`${keyBase}-t${i}`}>{text.slice(last, m.index)}</Fragment>);
+    if (m[2] !== undefined) out.push(<strong key={`${keyBase}-b${i}`}>{m[2]}</strong>);
+    else if (m[4] !== undefined) out.push(<em key={`${keyBase}-i${i}`}>{m[4]}</em>);
+    else if (m[6] !== undefined)
+      out.push(<code key={`${keyBase}-c${i}`} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">{m[6]}</code>);
+    else if (m[8] !== undefined)
+      out.push(
+        <a key={`${keyBase}-l${i}`} href={m[9]} target="_blank" rel="noreferrer" className="text-sky-500 underline underline-offset-2 hover:text-sky-400">
+          {m[8]}
+        </a>,
+      );
+    last = re.lastIndex;
+    i += 1;
+  }
+  if (last < text.length) out.push(<Fragment key={`${keyBase}-tend`}>{text.slice(last)}</Fragment>);
+  return out;
+}
+
+// ── Block-level ─────────────────────────────────────────────────────────────
+export function MarkdownPreview({ content, className }: { content: string; className?: string }) {
+  const lines = content.replace(/\r\n/g, "\n").split("\n");
+  const blocks: ReactNode[] = [];
+  let i = 0;
+  let key = 0;
+
+  const flushList = (items: string[], ordered: boolean) => {
+    const Tag = ordered ? "ol" : "ul";
+    blocks.push(
+      <Tag key={`k${key++}`} className={cn("my-2 space-y-1 pl-5", ordered ? "list-decimal" : "list-disc")}>
+        {items.map((it, idx) => (
+          <li key={idx}>{renderInline(it, `li${key}-${idx}`)}</li>
+        ))}
+      </Tag>,
+    );
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block.
+    if (/^```/.test(line.trim())) {
+      const buf: string[] = [];
+      i += 1;
+      while (i < lines.length && !/^```/.test(lines[i].trim())) buf.push(lines[i++]);
+      i += 1; // closing fence
+      blocks.push(
+        <pre key={`k${key++}`} className="my-2 overflow-x-auto rounded-lg bg-muted/60 p-3 font-mono text-[12px] leading-[1.6]">
+          <code>{buf.join("\n")}</code>
+        </pre>,
+      );
+      continue;
+    }
+
+    // Blank line.
+    if (line.trim() === "") { i += 1; continue; }
+
+    // Headings.
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) {
+      const level = h[1].length;
+      const sizes = ["text-2xl", "text-xl", "text-lg", "text-base", "text-sm", "text-sm"];
+      blocks.push(
+        <div key={`k${key++}`} className={cn("mt-3 mb-1 font-semibold text-foreground", sizes[level - 1])}>
+          {renderInline(h[2], `h${key}`)}
+        </div>,
+      );
+      i += 1;
+      continue;
+    }
+
+    // Horizontal rule.
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+      blocks.push(<hr key={`k${key++}`} className="my-3 border-border" />);
+      i += 1;
+      continue;
+    }
+
+    // Blockquote.
+    if (/^>\s?/.test(line)) {
+      const buf: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) buf.push(lines[i++].replace(/^>\s?/, ""));
+      blocks.push(
+        <blockquote key={`k${key++}`} className="my-2 border-l-2 border-border pl-3 text-muted-foreground">
+          {renderInline(buf.join(" "), `q${key}`)}
+        </blockquote>,
+      );
+      continue;
+    }
+
+    // Unordered list.
+    if (/^\s*[-*+]\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*[-*+]\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*[-*+]\s+/, ""));
+      flushList(items, false);
+      continue;
+    }
+
+    // Ordered list.
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*\d+\.\s+/, ""));
+      flushList(items, true);
+      continue;
+    }
+
+    // Paragraph (gather consecutive non-blank, non-structural lines).
+    const para: string[] = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== "" &&
+      !/^(#{1,6})\s/.test(lines[i]) &&
+      !/^```/.test(lines[i].trim()) &&
+      !/^>\s?/.test(lines[i]) &&
+      !/^\s*[-*+]\s+/.test(lines[i]) &&
+      !/^\s*\d+\.\s+/.test(lines[i])
+    ) {
+      para.push(lines[i++]);
+    }
+    blocks.push(
+      <p key={`k${key++}`} className="my-2 leading-relaxed">
+        {renderInline(para.join(" "), `p${key}`)}
+      </p>,
+    );
+  }
+
+  return <div className={cn("text-sm text-foreground/90", className)}>{blocks}</div>;
+}