@gmickel/gno 0.33.4 → 0.34.1

package/src/serve/public/pages/DocView.tsx

@@ -13,7 +13,6 @@ import {
   Loader2Icon,
   PencilIcon,
   SquareArrowOutUpRightIcon,
-  TagIcon,
   TextIcon,
   TrashIcon,
 } from "lucide-react";
@@ -30,17 +29,15 @@ import {
   FrontmatterDisplay,
   parseFrontmatter,
 } from "../components/FrontmatterDisplay";
-import { OutgoingLinksPanel } from "../components/OutgoingLinksPanel";
+import {
+  OutgoingLinksPanel,
+  type OutgoingLink,
+} from "../components/OutgoingLinksPanel";
 import { RelatedNotesSidebar } from "../components/RelatedNotesSidebar";
 import { TagInput } from "../components/TagInput";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../components/ui/card";
+import { Card, CardContent } from "../components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -246,6 +243,9 @@ export default function DocView({ navigate }: PageProps) {
   const [savingTags, setSavingTags] = useState(false);
   const [tagSaveError, setTagSaveError] = useState<string | null>(null);
   const [tagSaveSuccess, setTagSaveSuccess] = useState(false);
+  const [resolvedWikiLinks, setResolvedWikiLinks] = useState<OutgoingLink[]>(
+    []
+  );
 
   // Request sequencing - ignore stale responses on rapid navigation
   const requestIdRef = useRef(0);
@@ -302,6 +302,19 @@ export default function DocView({ navigate }: PageProps) {
     loadDocument();
   }, [loadDocument]);
 
+  useEffect(() => {
+    if (!doc?.docid) {
+      setResolvedWikiLinks([]);
+      return;
+    }
+
+    void apiFetch<{ links: OutgoingLink[] }>(
+      `/api/doc/${encodeURIComponent(doc.docid)}/links?type=wiki`
+    ).then(({ data }) => {
+      setResolvedWikiLinks(data?.links ?? []);
+    });
+  }, [doc?.docid]);
+
   useEffect(() => {
     if (latestDocEvent?.uri !== currentUri) {
       return;
@@ -350,6 +363,7 @@ export default function DocView({ navigate }: PageProps) {
   }, [doc?.content, isMarkdown]);
 
   const hasFrontmatter = Object.keys(parsedContent.data).length > 0;
+  const showStandaloneTags = !hasFrontmatter || editingTags;
 
   useEffect(() => {
     if (currentTarget.view === "source" || currentTarget.lineStart) {
@@ -535,6 +549,360 @@ export default function DocView({ navigate }: PageProps) {
     setTimeout(() => setTagSaveSuccess(false), 2000);
   }, [doc, editedTags]);
 
+  /** Slim left rail — archival catalogue style, no Card chrome */
+  const renderDocumentFactsRail = () => (
+    <nav aria-label="Document facts" className="space-y-0">
+      {/* Section: Properties */}
+      <div className="px-3 pb-3">
+        <div className="mb-2.5 font-mono text-[10px] text-muted-foreground/50 uppercase tracking-[0.15em]">
+          Properties
+        </div>
+        <dl className="space-y-2.5 text-[13px]">
+          <div className="flex items-center gap-2">
+            <FolderOpen className="size-3.5 shrink-0 text-muted-foreground/60" />
+            <dt className="sr-only">Collection</dt>
+            <dd className="truncate font-medium">
+              {doc?.collection || "Unknown"}
+            </dd>
+          </div>
+          {doc?.source.sizeBytes !== undefined && (
+            <div className="flex items-center gap-2">
+              <HardDrive className="size-3.5 shrink-0 text-muted-foreground/60" />
+              <dt className="sr-only">Size</dt>
+              <dd className="font-mono text-muted-foreground">
+                {formatBytes(doc.source.sizeBytes)}
+              </dd>
+            </div>
+          )}
+          {doc?.source.modifiedAt && (
+            <div className="flex items-center gap-2">
+              <Calendar className="size-3.5 shrink-0 text-muted-foreground/60" />
+              <dt className="sr-only">Modified</dt>
+              <dd className="text-muted-foreground">
+                {formatDate(doc.source.modifiedAt)}
+              </dd>
+            </div>
+          )}
+        </dl>
+      </div>
+
+      {/* Divider */}
+      <div className="mx-3 border-border/20 border-t" />
+
+      {/* Section: Path */}
+      <div className="px-3 py-3">
+        <div className="mb-1.5 font-mono text-[10px] text-muted-foreground/50 uppercase tracking-[0.15em]">
+          Path
+        </div>
+        <code className="block break-all font-mono text-[11px] leading-relaxed text-muted-foreground/70">
+          {doc?.uri}
+        </code>
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          {currentTarget.lineStart && (
+            <span className="rounded bg-muted/30 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+              L{currentTarget.lineStart}
+              {currentTarget.lineEnd &&
+              currentTarget.lineEnd !== currentTarget.lineStart
+                ? `-${currentTarget.lineEnd}`
+                : ""}
+            </span>
+          )}
+          <button
+            className="inline-flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground/60 transition-colors hover:bg-muted/20 hover:text-muted-foreground"
+            onClick={() => {
+              if (!doc) return;
+              void navigator.clipboard.writeText(
+                `${window.location.origin}${buildDocDeepLink({
+                  uri: doc.uri,
+                  view:
+                    currentTarget.view === "source" || currentTarget.lineStart
+                      ? "source"
+                      : "rendered",
+                  lineStart: currentTarget.lineStart,
+                  lineEnd: currentTarget.lineEnd,
+                })}`
+              );
+            }}
+            type="button"
+          >
+            <LinkIcon className="size-3" />
+            Copy link
+          </button>
+        </div>
+      </div>
+
+      {/* Divider + Frontmatter/Tags */}
+      {(hasFrontmatter || showStandaloneTags) && (
+        <>
+          <div className="mx-3 border-border/20 border-t" />
+          <div className="px-3 py-3">
+            <div className="mb-2 flex items-center justify-between">
+              <span className="font-mono text-[10px] text-muted-foreground/50 uppercase tracking-[0.15em]">
+                {hasFrontmatter ? "Metadata" : "Tags"}
+              </span>
+              {!editingTags && (
+                <button
+                  className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground/40 transition-colors hover:bg-muted/20 hover:text-muted-foreground"
+                  onClick={handleStartEditTags}
+                  type="button"
+                >
+                  <PencilIcon className="size-2.5" />
+                  Edit
+                </button>
+              )}
+              {tagSaveSuccess && (
+                <span className="flex items-center gap-1 text-[10px] text-green-500">
+                  <CheckIcon className="size-2.5" />
+                </span>
+              )}
+            </div>
+            {hasFrontmatter && (
+              <FrontmatterDisplay
+                className="grid-cols-1 gap-2 sm:grid-cols-1 lg:grid-cols-1 [&>div]:rounded-none [&>div]:bg-transparent [&>div]:p-0 [&>div]:border-b [&>div]:border-border/10 [&>div]:pb-2 [&>div:last-child]:border-0 [&>div:last-child]:pb-0 [&_a]:text-[11px] [&_a]:leading-snug [&_.text-sm]:text-[12px]"
+                content={doc?.content ?? ""}
+              />
+            )}
+            {editingTags ? (
+              <div
+                className={
+                  hasFrontmatter
+                    ? "mt-3 space-y-2 border-border/20 border-t pt-3"
+                    : "space-y-2"
+                }
+              >
+                <TagInput
+                  aria-label="Edit document tags"
+                  disabled={savingTags}
+                  onChange={setEditedTags}
+                  placeholder="Add tags..."
+                  value={editedTags}
+                />
+                {tagSaveError && (
+                  <p className="text-destructive text-xs">{tagSaveError}</p>
+                )}
+                <div className="flex items-center gap-1.5">
+                  <Button
+                    disabled={savingTags}
+                    onClick={handleSaveTags}
+                    size="sm"
+                  >
+                    {savingTags && (
+                      <Loader2Icon className="mr-1 size-3 animate-spin" />
+                    )}
+                    Save
+                  </Button>
+                  <Button
+                    disabled={savingTags}
+                    onClick={handleCancelEditTags}
+                    size="sm"
+                    variant="outline"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              !hasFrontmatter && (
+                <div className="flex flex-wrap gap-1">
+                  {doc?.tags.length === 0 ? (
+                    <span className="text-[11px] text-muted-foreground/40 italic">
+                      No tags
+                    </span>
+                  ) : (
+                    doc?.tags.map((tag) => (
+                      <span
+                        className="rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[10px] text-primary/80"
+                        key={tag}
+                      >
+                        {tag}
+                      </span>
+                    ))
+                  )}
+                </div>
+              )
+            )}
+          </div>
+        </>
+      )}
+    </nav>
+  );
+
+  const renderDocumentOverviewCard = () => (
+    <Card>
+      <CardContent className="space-y-3 py-3">
+        <div className="flex items-center justify-between">
+          <div className="font-semibold text-sm">Overview</div>
+          <div className="flex items-center gap-2">
+            {tagSaveSuccess && (
+              <span className="flex items-center gap-1 text-green-500 text-xs">
+                <CheckIcon className="size-3" />
+                Saved
+              </span>
+            )}
+            {(hasFrontmatter || doc?.tags.length) && !editingTags && (
+              <Button
+                className="gap-1 text-xs"
+                onClick={handleStartEditTags}
+                size="sm"
+                variant="ghost"
+              >
+                <PencilIcon className="size-3" />
+                Edit tags
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <div className="grid gap-2 md:grid-cols-3">
+          <div className="rounded-lg bg-muted/15 px-3 py-2.5">
+            <div className="mb-1 flex items-center gap-2 text-[10px] text-muted-foreground uppercase tracking-wider">
+              <FolderOpen className="size-3.5" />
+              Collection
+            </div>
+            <div className="font-medium text-sm">
+              {doc?.collection || "Unknown"}
+            </div>
+          </div>
+
+          {doc?.source.sizeBytes !== undefined && (
+            <div className="rounded-lg bg-muted/15 px-3 py-2.5">
+              <div className="mb-1 flex items-center gap-2 text-[10px] text-muted-foreground uppercase tracking-wider">
+                <HardDrive className="size-3.5" />
+                Size
+              </div>
+              <div className="font-medium text-sm">
+                {formatBytes(doc.source.sizeBytes)}
+              </div>
+            </div>
+          )}
+
+          {doc?.source.modifiedAt && (
+            <div className="rounded-lg bg-muted/15 px-3 py-2.5">
+              <div className="mb-1 flex items-center gap-2 text-[10px] text-muted-foreground uppercase tracking-wider">
+                <Calendar className="size-3.5" />
+                Modified
+              </div>
+              <div className="font-medium text-sm">
+                {formatDate(doc.source.modifiedAt)}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="text-[10px] text-muted-foreground uppercase tracking-wider">
+            Path
+          </div>
+          <code className="block break-all font-mono text-[11px] text-muted-foreground">
+            {doc?.uri}
+          </code>
+          <div className="flex flex-wrap gap-2 pt-1">
+            {currentTarget.lineStart && (
+              <Badge className="font-mono" variant="outline">
+                L{currentTarget.lineStart}
+                {currentTarget.lineEnd &&
+                currentTarget.lineEnd !== currentTarget.lineStart
+                  ? `-${currentTarget.lineEnd}`
+                  : ""}
+              </Badge>
+            )}
+            <Button
+              onClick={() => {
+                if (!doc) {
+                  return;
+                }
+                void navigator.clipboard.writeText(
+                  `${window.location.origin}${buildDocDeepLink({
+                    uri: doc.uri,
+                    view:
+                      currentTarget.view === "source" || currentTarget.lineStart
+                        ? "source"
+                        : "rendered",
+                    lineStart: currentTarget.lineStart,
+                    lineEnd: currentTarget.lineEnd,
+                  })}`
+                );
+              }}
+              size="sm"
+              variant="outline"
+            >
+              <LinkIcon className="mr-1.5 size-4" />
+              Copy link
+            </Button>
+          </div>
+        </div>
+
+        {(hasFrontmatter || showStandaloneTags) && (
+          <div className="rounded-lg border border-border/40 bg-muted/10 p-2.5">
+            {hasFrontmatter && (
+              <FrontmatterDisplay content={doc?.content ?? ""} />
+            )}
+            {editingTags ? (
+              <div
+                className={
+                  hasFrontmatter
+                    ? "mt-3 space-y-3 border-border/30 border-t pt-3"
+                    : "space-y-3"
+                }
+              >
+                <TagInput
+                  aria-label="Edit document tags"
+                  disabled={savingTags}
+                  onChange={setEditedTags}
+                  placeholder="Add tags..."
+                  value={editedTags}
+                />
+                {tagSaveError && (
+                  <p className="text-destructive text-xs">{tagSaveError}</p>
+                )}
+                <div className="flex items-center gap-2">
+                  <Button
+                    disabled={savingTags}
+                    onClick={handleSaveTags}
+                    size="sm"
+                  >
+                    {savingTags && (
+                      <Loader2Icon className="mr-1.5 size-3 animate-spin" />
+                    )}
+                    Save
+                  </Button>
+                  <Button
+                    disabled={savingTags}
+                    onClick={handleCancelEditTags}
+                    size="sm"
+                    variant="outline"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              !hasFrontmatter && (
+                <div className="flex flex-wrap gap-1.5">
+                  {doc?.tags.length === 0 ? (
+                    <span className="text-muted-foreground/60 text-sm italic">
+                      No tags
+                    </span>
+                  ) : (
+                    doc?.tags.map((tag) => (
+                      <Badge
+                        className="font-mono text-xs"
+                        key={tag}
+                        variant="outline"
+                      >
+                        {tag}
+                      </Badge>
+                    ))
+                  )}
+                </div>
+              )
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+
   return (
     <div className="min-h-screen">
       {/* Header */}
@@ -667,9 +1035,16 @@ export default function DocView({ navigate }: PageProps) {
         </div>
       </header>
 
-      <div className="mx-auto flex max-w-7xl gap-8 px-8">
+      <div className="mx-auto flex max-w-[1800px] gap-5 px-6 xl:px-8">
+        {/* Left rail — document facts, only on ultra-wide */}
+        {doc && (
+          <aside className="hidden w-[200px] shrink-0 border-border/15 border-r pr-2 py-6 lg:block">
+            <div className="sticky top-24">{renderDocumentFactsRail()}</div>
+          </aside>
+        )}
+
         {/* Main content */}
-        <main className="min-w-0 flex-1 py-8">
+        <main className="min-w-0 flex-1 px-4 py-6">
           {/* Loading */}
           {loading && (
             <div className="flex flex-col items-center justify-center gap-4 py-20">
@@ -693,7 +1068,7 @@ export default function DocView({ navigate }: PageProps) {
 
           {/* Document */}
           {doc && (
-            <div className="animate-fade-in space-y-6 opacity-0">
+            <div className="animate-fade-in space-y-4 opacity-0">
               {externalChangeNotice && (
                 <Card className="border-amber-500/40 bg-amber-500/10">
                   <CardContent className="flex flex-wrap items-center justify-between gap-3 py-3">
@@ -728,7 +1103,7 @@ export default function DocView({ navigate }: PageProps) {
                       )}
                       {crumb.path ? (
                         <button
-                          className="text-muted-foreground transition-colors hover:text-foreground hover:underline"
+                          className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground hover:underline"
                           onClick={() => navigate(crumb.path)}
                           type="button"
                         >
@@ -744,299 +1119,112 @@ export default function DocView({ navigate }: PageProps) {
                 </nav>
               )}
 
-              {/* Metadata */}
-              <Card>
-                <CardContent className="py-4">
-                  <div className="grid gap-4 sm:grid-cols-3">
-                    <div className="flex items-center gap-3">
-                      <FolderOpen className="size-4 text-muted-foreground" />
-                      <div>
-                        <div className="text-muted-foreground text-xs">
-                          Collection
-                        </div>
-                        <div className="font-medium">
-                          {doc.collection || "Unknown"}
-                        </div>
-                      </div>
-                    </div>
-                    {doc.source.sizeBytes !== undefined && (
-                      <div className="flex items-center gap-3">
-                        <HardDrive className="size-4 text-muted-foreground" />
-                        <div>
-                          <div className="text-muted-foreground text-xs">
-                            Size
-                          </div>
-                          <div className="font-medium">
-                            {formatBytes(doc.source.sizeBytes)}
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                    {doc.source.modifiedAt && (
-                      <div className="flex items-center gap-3">
-                        <Calendar className="size-4 text-muted-foreground" />
-                        <div>
-                          <div className="text-muted-foreground text-xs">
-                            Modified
-                          </div>
-                          <div className="font-medium">
-                            {formatDate(doc.source.modifiedAt)}
-                          </div>
-                        </div>
-                      </div>
+              <div className="lg:hidden">{renderDocumentOverviewCard()}</div>
+
+              {/* Content */}
+              <div className="relative">
+                {/* Source/Rendered toggle pill */}
+                {isMarkdown && doc.contentAvailable && (
+                  <button
+                    className="z-10 flex cursor-pointer items-center gap-1.5 rounded-full border border-border/30 bg-background/80 px-3 py-1 font-mono text-[11px] text-muted-foreground backdrop-blur-sm transition-colors hover:border-primary/30 hover:text-primary"
+                    onClick={() => setShowRawView(!showRawView)}
+                    style={{
+                      position: "absolute",
+                      top: "0.75rem",
+                      right: "0.75rem",
+                      left: "auto",
+                    }}
+                    type="button"
+                  >
+                    {showRawView ? (
+                      <>
+                        <TextIcon className="size-3" />
+                        Rendered
+                      </>
+                    ) : (
+                      <>
+                        <CodeIcon className="size-3" />
+                        Source
+                      </>
                     )}
+                  </button>
+                )}
+
+                {!doc.contentAvailable && (
+                  <div className="rounded-lg border border-border/50 bg-muted/30 p-6 text-center">
+                    <p className="text-muted-foreground">
+                      Content not available (document may need re-indexing)
+                    </p>
                   </div>
-                  <div className="mt-4 border-border/50 border-t pt-4">
-                    <div className="mb-1 text-muted-foreground text-xs">
-                      Path
-                    </div>
-                    <code className="break-all font-mono text-muted-foreground text-sm">
-                      {doc.uri}
-                    </code>
-                    {doc.capabilities.reason && (
-                      <p className="mt-2 text-amber-500 text-xs">
-                        {doc.capabilities.reason}
-                      </p>
-                    )}
-                    <div className="mt-2 flex flex-wrap gap-2">
-                      {currentTarget.lineStart && (
-                        <Badge className="font-mono" variant="outline">
-                          L{currentTarget.lineStart}
-                          {currentTarget.lineEnd &&
-                          currentTarget.lineEnd !== currentTarget.lineStart
-                            ? `-${currentTarget.lineEnd}`
-                            : ""}
-                        </Badge>
-                      )}
-                      <Button
-                        onClick={() => {
-                          void navigator.clipboard.writeText(
-                            `${window.location.origin}${buildDocDeepLink({
-                              uri: doc.uri,
-                              view:
-                                currentTarget.view === "source" ||
-                                currentTarget.lineStart
-                                  ? "source"
-                                  : "rendered",
-                              lineStart: currentTarget.lineStart,
-                              lineEnd: currentTarget.lineEnd,
-                            })}`
-                          );
-                        }}
-                        size="sm"
-                        variant="outline"
-                      >
-                        <LinkIcon className="mr-1.5 size-4" />
-                        Copy link
-                      </Button>
-                    </div>
+                )}
+                {doc.contentAvailable && isMarkdown && !showRawView && (
+                  <div className="rounded-lg border border-border/40 bg-gradient-to-br from-background to-muted/10 p-4 shadow-inner">
+                    <MarkdownPreview
+                      collection={doc.collection}
+                      content={parsedContent.body}
+                      wikiLinks={resolvedWikiLinks}
+                    />
                   </div>
-                </CardContent>
-              </Card>
-
-              {/* Tags */}
-              <Card>
-                <CardContent className="py-4">
-                  <div className="flex items-start gap-3">
-                    <TagIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-                    <div className="min-w-0 flex-1">
-                      <div className="mb-2 flex items-center justify-between">
-                        <div className="text-muted-foreground text-xs">
-                          Tags
-                        </div>
-                        {!editingTags && (
-                          <Button
-                            className="gap-1 text-xs"
-                            onClick={handleStartEditTags}
-                            size="sm"
-                            variant="ghost"
-                          >
-                            <PencilIcon className="size-3" />
-                            Edit
-                          </Button>
-                        )}
-                        {tagSaveSuccess && (
-                          <span className="flex items-center gap-1 text-green-500 text-xs">
-                            <CheckIcon className="size-3" />
-                            Saved
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Display mode */}
-                      {!editingTags && (
-                        <div className="flex flex-wrap gap-1.5">
-                          {doc.tags.length === 0 ? (
-                            <span className="text-muted-foreground/60 text-sm italic">
-                              No tags
-                            </span>
-                          ) : (
-                            doc.tags.map((tag) => (
-                              <Badge
-                                className="font-mono text-xs"
-                                key={tag}
-                                variant="outline"
-                              >
-                                {tag}
-                              </Badge>
-                            ))
-                          )}
-                        </div>
-                      )}
-
-                      {/* Edit mode */}
-                      {editingTags && (
-                        <div className="space-y-3">
-                          <TagInput
-                            aria-label="Edit document tags"
-                            disabled={savingTags}
-                            onChange={setEditedTags}
-                            placeholder="Add tags..."
-                            value={editedTags}
-                          />
-
-                          {tagSaveError && (
-                            <p className="text-destructive text-xs">
-                              {tagSaveError}
-                            </p>
-                          )}
-
-                          <div className="flex items-center gap-2">
-                            <Button
-                              disabled={savingTags}
-                              onClick={handleSaveTags}
-                              size="sm"
-                            >
-                              {savingTags && (
-                                <Loader2Icon className="mr-1.5 size-3 animate-spin" />
-                              )}
-                              Save
-                            </Button>
-                            <Button
-                              disabled={savingTags}
-                              onClick={handleCancelEditTags}
-                              size="sm"
-                              variant="outline"
-                            >
-                              Cancel
-                            </Button>
-                          </div>
-                        </div>
-                      )}
-                    </div>
+                )}
+                {doc.contentAvailable && isMarkdown && showRawView && (
+                  <CodeBlock
+                    code={doc.content ?? ""}
+                    highlightedLines={highlightedLines}
+                    language={"markdown" as BundledLanguage}
+                    scrollToLine={currentTarget.lineStart}
+                    showLineNumbers
+                  >
+                    <CodeBlockCopyButton />
+                  </CodeBlock>
+                )}
+                {doc.contentAvailable && isCodeFile && !isMarkdown && (
+                  <CodeBlock
+                    code={doc.content ?? ""}
+                    highlightedLines={highlightedLines}
+                    language={
+                      getLanguageFromExt(doc.source.ext) as BundledLanguage
+                    }
+                    scrollToLine={currentTarget.lineStart}
+                    showLineNumbers
+                  >
+                    <CodeBlockCopyButton />
+                  </CodeBlock>
+                )}
+                {doc.contentAvailable && !isCodeFile && (
+                  <div className="rounded-lg border border-border/50 bg-muted/30 p-6">
+                    <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
+                      {doc.content}
+                    </pre>
                   </div>
-                </CardContent>
-              </Card>
-
-              {/* Content */}
-              <Card>
-                <CardHeader className="pb-0">
-                  <CardTitle className="flex items-center justify-between text-lg">
-                    <span className="flex items-center gap-2">
-                      <FileText className="size-4" />
-                      Content
-                    </span>
-                    {isMarkdown && doc.contentAvailable && (
-                      <Button
-                        className="gap-1.5"
-                        onClick={() => setShowRawView(!showRawView)}
-                        size="sm"
-                        variant="ghost"
-                      >
-                        {showRawView ? (
-                          <>
-                            <TextIcon className="size-4" />
-                            <span className="hidden sm:inline">Rendered</span>
-                          </>
-                        ) : (
-                          <>
-                            <CodeIcon className="size-4" />
-                            <span className="hidden sm:inline">Source</span>
-                          </>
-                        )}
-                      </Button>
-                    )}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-4">
-                  {!doc.contentAvailable && (
-                    <div className="rounded-lg border border-border/50 bg-muted/30 p-6 text-center">
-                      <p className="text-muted-foreground">
-                        Content not available (document may need re-indexing)
-                      </p>
-                    </div>
-                  )}
-                  {doc.contentAvailable && isMarkdown && !showRawView && (
-                    <div className="space-y-4">
-                      {hasFrontmatter && (
-                        <FrontmatterDisplay
-                          className="rounded-lg border border-border/40 bg-muted/10 p-4"
-                          content={doc.content ?? ""}
-                        />
-                      )}
-                      <div className="rounded-lg border border-border/40 bg-gradient-to-br from-background to-muted/10 p-6 shadow-inner">
-                        <MarkdownPreview content={parsedContent.body} />
-                      </div>
-                    </div>
-                  )}
-                  {doc.contentAvailable && isMarkdown && showRawView && (
-                    <CodeBlock
-                      code={doc.content ?? ""}
-                      highlightedLines={highlightedLines}
-                      language={"markdown" as BundledLanguage}
-                      scrollToLine={currentTarget.lineStart}
-                      showLineNumbers
-                    >
-                      <CodeBlockCopyButton />
-                    </CodeBlock>
-                  )}
-                  {doc.contentAvailable && isCodeFile && !isMarkdown && (
-                    <CodeBlock
-                      code={doc.content ?? ""}
-                      highlightedLines={highlightedLines}
-                      language={
-                        getLanguageFromExt(doc.source.ext) as BundledLanguage
-                      }
-                      scrollToLine={currentTarget.lineStart}
-                      showLineNumbers
-                    >
-                      <CodeBlockCopyButton />
-                    </CodeBlock>
-                  )}
-                  {doc.contentAvailable && !isCodeFile && (
-                    <div className="rounded-lg border border-border/50 bg-muted/30 p-6">
-                      <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
-                        {doc.content}
-                      </pre>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
+                )}
+              </div>
             </div>
           )}
         </main>
 
-        {/* Right sidebar - Link panels */}
+        {/* Right rail — relationships */}
         {doc && (
-          <aside className="hidden w-72 shrink-0 space-y-4 py-8 lg:block">
-            <BacklinksPanel
-              docId={doc.docid}
-              onNavigate={(uri) =>
-                navigate(`/doc?uri=${encodeURIComponent(uri)}`)
-              }
-            />
-            <OutgoingLinksPanel
-              docId={doc.docid}
-              onNavigate={(uri) =>
-                navigate(`/doc?uri=${encodeURIComponent(uri)}`)
-              }
-            />
-            <RelatedNotesSidebar
-              docId={doc.docid}
-              onNavigate={(uri) =>
-                navigate(`/doc?uri=${encodeURIComponent(uri)}`)
-              }
-            />
+          <aside className="hidden w-[240px] min-w-0 shrink-0 overflow-hidden border-border/15 border-l pl-2 py-6 lg:block">
+            <div className="sticky top-24 min-w-0 space-y-1 overflow-hidden">
+              <BacklinksPanel
+                docId={doc.docid}
+                onNavigate={(uri) =>
+                  navigate(`/doc?uri=${encodeURIComponent(uri)}`)
+                }
+              />
+              <OutgoingLinksPanel
+                docId={doc.docid}
+                onNavigate={(uri) =>
+                  navigate(`/doc?uri=${encodeURIComponent(uri)}`)
+                }
+              />
+              <RelatedNotesSidebar
+                docId={doc.docid}
+                onNavigate={(uri) =>
+                  navigate(`/doc?uri=${encodeURIComponent(uri)}`)
+                }
+              />
+            </div>
           </aside>
         )}
       </div>