@gmickel/gno 0.33.4 → 0.34.1

package/src/serve/public/components/OutgoingLinksPanel.tsx

@@ -250,41 +250,37 @@ export function OutgoingLinksPanel({
 
   return (
     <Collapsible
-      className={cn(
-        // Container styling - dark manuscript edge
-        "border-border/40 border-l",
-        "bg-gradient-to-b from-[#050505] to-[#0a0a0a]",
-        className
-      )}
+      className={cn("px-1", className)}
       onOpenChange={setIsOpen}
       open={isOpen}
     >
       {/* Header trigger */}
       <CollapsibleTrigger
         className={cn(
-          "group flex w-full items-center gap-2 px-3 py-2.5",
+          "group flex w-full items-center gap-2",
+          "rounded-sm px-2 py-1.5",
           "transition-colors duration-150",
-          "hover:bg-[#4db8a8]/5"
+          "hover:bg-muted/20"
         )}
       >
         {/* Chevron */}
         <ChevronDownIcon
           className={cn(
-            "size-4 shrink-0 text-muted-foreground/60",
+            "size-3.5 shrink-0 text-muted-foreground/50",
             "transition-transform duration-200",
             !isOpen && "-rotate-90"
           )}
         />
 
         {/* Title */}
-        <span className="flex-1 text-left font-mono text-[11px] uppercase tracking-wider text-muted-foreground">
+        <span className="flex-1 text-left font-mono text-[10px] text-muted-foreground/60 uppercase tracking-[0.15em]">
           Outgoing Links
         </span>
 
         {/* Count badges */}
         {!loading && links.length > 0 && (
           <div className="flex items-center gap-1.5">
-            <span className="rounded bg-[#4db8a8]/15 px-1.5 py-0.5 font-mono text-[10px] tabular-nums text-[#4db8a8]">
+            <span className="rounded bg-primary/12 px-1.5 py-0.5 font-mono text-[10px] tabular-nums text-primary">
               {links.length}
             </span>
             {brokenCount > 0 && (
@@ -295,7 +291,7 @@ export function OutgoingLinksPanel({
           </div>
         )}
 
-        {/* Loading indicator in header */}
+        {/* Loading indicator */}
         {loading && (
           <Loader2Icon className="size-3.5 animate-spin text-muted-foreground/50" />
         )}

package/src/serve/public/components/RelatedNotesSidebar.tsx

@@ -190,34 +190,17 @@ function SimilarityBar({ score }: { score: number }) {
   const percentage = Math.round(score * 100);
 
   return (
-    <div className="group/bar relative mt-1.5">
-      {/* Label */}
-      <div className="mb-0.5 flex items-center justify-between">
-        <span className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider">
-          Similarity
-        </span>
-        <span className="font-mono text-[10px] text-primary/80 tabular-nums">
-          {percentage}%
-        </span>
-      </div>
-
-      {/* Bar track - glass effect */}
-      <div className="relative h-1.5 overflow-hidden rounded-full bg-muted/30 shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)]">
-        {/* Fill - teal glow */}
+    <div className="mt-1 flex items-center gap-2">
+      {/* Bar track */}
+      <div className="relative h-1 flex-1 overflow-hidden rounded-full bg-muted/30">
         <div
-          className={cn(
-            "absolute inset-y-0 left-0 rounded-full",
-            "bg-gradient-to-r from-primary/70 via-primary to-primary/80",
-            "transition-all duration-500 ease-out",
-            // Subtle glow on high scores
-            score > 0.7 && "shadow-[0_0_8px_hsl(var(--primary)/0.5)]"
-          )}
+          className="absolute inset-y-0 left-0 rounded-full bg-primary/60"
           style={{ width: `${percentage}%` }}
-        >
-          {/* Shimmer effect */}
-          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover/bar:opacity-100" />
-        </div>
+        />
       </div>
+      <span className="shrink-0 font-mono text-[9px] text-muted-foreground/50 tabular-nums">
+        {percentage}%
+      </span>
     </div>
   );
 }
@@ -238,16 +221,13 @@ function RelatedNoteItem({
   return (
     <button
       className={cn(
-        // Base - specimen card feel
-        "group relative w-full rounded-sm text-left",
-        "border border-border/40 bg-card/50",
-        "p-2.5 transition-all duration-200",
-        // Hover state - lift and glow
-        "hover:border-primary/30 hover:bg-card/80",
-        "hover:shadow-[0_2px_12px_-4px_hsl(var(--primary)/0.2)]",
-        // Focus state
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-        // Stagger animation
+        "group relative flex min-w-0 w-full items-start gap-2",
+        "rounded px-2 py-1.5 text-left",
+        "font-mono text-xs",
+        "transition-all duration-150",
+        "text-primary/90 hover:bg-muted/20",
+        "cursor-pointer hover:translate-x-0.5",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50",
         "animate-fade-in opacity-0"
       )}
       onClick={onNavigate}
@@ -257,43 +237,29 @@ function RelatedNoteItem({
       }}
       type="button"
     >
-      {/* Title with tooltip for long names */}
+      <span
+        className={cn(
+          "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded",
+          "bg-primary/15 transition-colors duration-150",
+          "group-hover:bg-primary/25"
+        )}
+      >
+        <SparklesIcon className="size-3" />
+      </span>
+
       <Tooltip>
         <TooltipTrigger asChild>
-          <h4 className="line-clamp-3 break-words font-mono text-[13px] leading-tight text-foreground/90 group-hover:text-foreground">
-            {doc.title || "Untitled"}
-          </h4>
+          <div className="min-w-0 flex-1">
+            <span className="block break-words font-medium leading-tight whitespace-normal text-foreground/90 group-hover:text-foreground">
+              {doc.title || "Untitled"}
+            </span>
+            <SimilarityBar score={doc.score} />
+          </div>
         </TooltipTrigger>
         <TooltipContent side="left" className="max-w-[300px]">
           <p className="break-words">{doc.title || "Untitled"}</p>
         </TooltipContent>
       </Tooltip>
-
-      {/* Collection badge - brass plate style */}
-      <div className="mt-1 flex items-center gap-1.5">
-        <span
-          className={cn(
-            "inline-flex items-center gap-1 rounded px-1.5 py-0.5",
-            "bg-secondary/10 font-mono text-[10px] text-secondary/80",
-            "transition-colors group-hover:bg-secondary/15 group-hover:text-secondary"
-          )}
-        >
-          {doc.collection}
-        </span>
-      </div>
-
-      {/* Similarity bar */}
-      <SimilarityBar score={doc.score} />
-
-      {/* Hover indicator - brass accent */}
-      <div
-        className={cn(
-          "absolute right-2 top-2 opacity-0 transition-opacity",
-          "group-hover:opacity-100"
-        )}
-      >
-        <SparklesIcon className="size-3.5 text-secondary/60" />
-      </div>
     </button>
   );
 }
@@ -406,19 +372,19 @@ export function RelatedNotesSidebar({
   }
 
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("min-w-0 overflow-hidden px-1", className)}>
       <Collapsible onOpenChange={setIsOpen} open={isOpen}>
         {/* Header */}
-        <div className="flex items-center gap-1 px-2 py-1">
+        <div className="flex items-center gap-1">
           <CollapsibleTrigger
             className={cn(
-              "flex flex-1 items-center gap-1.5 rounded-sm px-1.5 py-1",
+              "flex flex-1 items-center gap-2 rounded-sm px-2 py-1.5",
               "transition-colors duration-150",
-              "hover:bg-muted/30"
+              "hover:bg-muted/20"
             )}
           >
             {/* Chevron */}
-            <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground/60 transition-transform duration-200">
+            <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground/50 transition-transform duration-200">
               {isOpen ? (
                 <ChevronDownIcon className="size-3.5" />
               ) : (
@@ -427,13 +393,13 @@ export function RelatedNotesSidebar({
             </span>
 
             {/* Title */}
-            <span className="flex-1 text-left font-mono text-[11px] text-muted-foreground uppercase tracking-wider">
+            <span className="flex-1 text-left font-mono text-[10px] text-muted-foreground/60 uppercase tracking-[0.15em]">
               Related Notes
             </span>
 
             {/* Count badge */}
             {similar.length > 0 && (
-              <span className="rounded bg-primary/10 px-1.5 py-0.5 font-mono text-[10px] text-primary/80 tabular-nums">
+              <span className="rounded bg-primary/12 px-1.5 py-0.5 font-mono text-[10px] text-primary tabular-nums">
                 {similar.length}
               </span>
             )}
@@ -442,9 +408,9 @@ export function RelatedNotesSidebar({
           {/* Hide button */}
           <button
             className={cn(
-              "flex size-6 items-center justify-center rounded-sm",
-              "text-muted-foreground/50 transition-colors",
-              "hover:bg-muted/30 hover:text-muted-foreground"
+              "flex size-5 items-center justify-center rounded-sm",
+              "text-muted-foreground/40 transition-colors",
+              "hover:bg-muted/20 hover:text-muted-foreground"
             )}
             onClick={handleToggleVisibility}
             title="Hide related notes"
@@ -472,7 +438,7 @@ export function RelatedNotesSidebar({
           ) : similar.length === 0 ? (
             <RelatedNotesEmpty />
           ) : (
-            <div className="space-y-1.5 p-2">
+            <div className="space-y-0.5 p-2">
               {similar.map((doc, index) => (
                 <RelatedNoteItem
                   doc={doc}

package/src/serve/public/components/editor/MarkdownPreview.tsx

@@ -13,10 +13,16 @@ import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
 
+import {
+  normalizeWikiName,
+  parseTargetParts,
+  stripWikiMdExt,
+} from "../../../../core/links";
 import {
   extractMarkdownCodeLanguage,
   resolveCodeLanguage,
 } from "../../lib/code-language";
+import { buildDocDeepLink } from "../../lib/deep-links";
 import { cn } from "../../lib/utils";
 import { CodeBlock, CodeBlockCopyButton } from "../ai-elements/code-block";
 
@@ -25,6 +31,53 @@ export interface MarkdownPreviewProps {
   content: string;
   /** Additional CSS classes */
   className?: string;
+  /** Current collection for wiki-link resolution */
+  collection?: string;
+  /** Resolved outgoing wiki links for the current document */
+  wikiLinks?: Array<{
+    targetRef: string;
+    targetCollection?: string;
+    targetAnchor?: string;
+    resolvedUri?: string;
+  }>;
+}
+
+const WIKI_LINK_REGEX = /\[\[([^\]|]+(?:\|[^\]]+)?)\]\]/g;
+
+function renderMarkdownWithWikiLinks(
+  content: string,
+  collection?: string,
+  wikiLinks?: MarkdownPreviewProps["wikiLinks"]
+): string {
+  if (!content.includes("[[")) {
+    return content;
+  }
+
+  const resolvedWikiLinkMap = new Map<string, string>();
+  for (const link of wikiLinks ?? []) {
+    const targetCollection = link.targetCollection || collection || "";
+    const targetRefKey = normalizeWikiName(stripWikiMdExt(link.targetRef));
+    const targetAnchorKey = (link.targetAnchor ?? "").trim().toLowerCase();
+    const key = `${targetCollection}::${targetRefKey}::${targetAnchorKey}`;
+    if (link.resolvedUri) {
+      resolvedWikiLinkMap.set(key, buildDocDeepLink({ uri: link.resolvedUri }));
+    }
+  }
+
+  return content.replace(WIKI_LINK_REGEX, (match, rawContent: string) => {
+    const [rawTarget, rawAlias] = rawContent.split("|");
+    const displayText = rawAlias?.trim() || rawTarget?.trim() || match;
+    const parsed = parseTargetParts(rawTarget ?? "");
+    const targetCollection = parsed.collection || collection || "";
+    const targetRefKey = normalizeWikiName(stripWikiMdExt(parsed.ref));
+    const targetAnchorKey = (parsed.anchor ?? "").trim().toLowerCase();
+    const key = `${targetCollection}::${targetRefKey}::${targetAnchorKey}`;
+    const href =
+      resolvedWikiLinkMap.get(key) ||
+      `/search?query=${encodeURIComponent(stripWikiMdExt(parsed.ref))}`;
+
+    return `[${displayText}](${href})`;
+  });
 }
 
 // Inline code styling
@@ -319,7 +372,7 @@ const components = {
  * Sanitizes HTML to prevent XSS attacks.
  */
 export const MarkdownPreview = memo(
-  ({ content, className }: MarkdownPreviewProps) => {
+  ({ content, className, collection, wikiLinks }: MarkdownPreviewProps) => {
     if (!content) {
       return (
         <div className={cn("text-muted-foreground italic", className)}>
@@ -328,6 +381,12 @@ export const MarkdownPreview = memo(
       );
     }
 
+    const renderedContent = renderMarkdownWithWikiLinks(
+      content,
+      collection,
+      wikiLinks
+    );
+
     return (
       <div
         className={cn(
@@ -342,7 +401,7 @@ export const MarkdownPreview = memo(
           rehypePlugins={[rehypeSanitize]}
           remarkPlugins={[remarkGfm]}
         >
-          {content}
+          {renderedContent}
         </ReactMarkdown>
       </div>
     );

package/src/serve/public/components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/src/serve/public/components/ui/dialog.tsx

@@ -67,7 +67,7 @@ function DialogContent({
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+            className="absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
             data-slot="dialog-close"
           >
             <XIcon />

package/src/serve/public/hooks/useWorkspace.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext } from "react";
+
+import type {
+  WorkspaceTab,
+  WorkspaceTabBrowseState,
+} from "../lib/workspace-tabs";
+
+interface WorkspaceContextValue {
+  activeTab: WorkspaceTab | null;
+  updateActiveTabBrowseState: (
+    nextBrowseState:
+      | WorkspaceTabBrowseState
+      | ((current: WorkspaceTabBrowseState) => WorkspaceTabBrowseState)
+  ) => void;
+}
+
+const WorkspaceContext = createContext<WorkspaceContextValue>({
+  activeTab: null,
+  updateActiveTabBrowseState: () => undefined,
+});
+
+export function WorkspaceProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: WorkspaceContextValue;
+}) {
+  return (
+    <WorkspaceContext.Provider value={value}>
+      {children}
+    </WorkspaceContext.Provider>
+  );
+}
+
+export function useWorkspace() {
+  return useContext(WorkspaceContext);
+}

package/src/serve/public/lib/browse.ts

@@ -0,0 +1,110 @@
+import type { BrowseTreeNode } from "../../browse-tree";
+
+export interface BrowseDocument {
+  docid: string;
+  uri: string;
+  title: string | null;
+  collection: string;
+  relPath: string;
+  sourceExt: string;
+}
+
+export interface DocsResponse {
+  documents: BrowseDocument[];
+  total: number;
+  limit: number;
+  offset: number;
+  pathPrefix?: string;
+  directChildrenOnly?: boolean;
+  availableDateFields: string[];
+  sortField: string;
+  sortOrder: "asc" | "desc";
+}
+
+export interface BrowseTreeResponse {
+  collections: BrowseTreeNode[];
+  totalCollections: number;
+  totalDocuments: number;
+}
+
+export function parseBrowseLocation(search: string): {
+  collection: string;
+  path: string;
+} {
+  const params = new URLSearchParams(search);
+  return {
+    collection: params.get("collection") ?? "",
+    path: (params.get("path") ?? "")
+      .replaceAll("\\", "/")
+      .replace(/^\/+|\/+$/g, ""),
+  };
+}
+
+export function buildBrowseLocation(
+  collection?: string,
+  path?: string
+): string {
+  const normalizedCollection = collection?.trim() ?? "";
+  const normalizedPath = (path ?? "")
+    .replaceAll("\\", "/")
+    .replace(/^\/+|\/+$/g, "");
+
+  if (!normalizedCollection) {
+    return "/browse";
+  }
+
+  const params = new URLSearchParams({
+    collection: normalizedCollection,
+  });
+  if (normalizedPath) {
+    params.set("path", normalizedPath);
+  }
+  return `/browse?${params.toString()}`;
+}
+
+export function buildBrowseCrumbs(collection: string, path: string) {
+  const crumbs = [
+    {
+      label: collection,
+      location: buildBrowseLocation(collection),
+    },
+  ];
+
+  if (!path) {
+    return crumbs;
+  }
+
+  const parts = path.split("/").filter(Boolean);
+  let currentPath = "";
+  for (const part of parts) {
+    currentPath = currentPath ? `${currentPath}/${part}` : part;
+    crumbs.push({
+      label: part,
+      location: buildBrowseLocation(collection, currentPath),
+    });
+  }
+  return crumbs;
+}
+
+export function formatDateFieldLabel(field: string) {
+  return field
+    .split("_")
+    .filter((token) => token.length > 0)
+    .map((token) => token.charAt(0).toUpperCase() + token.slice(1))
+    .join(" ");
+}
+
+export function getExtBadgeVariant(ext: string) {
+  switch (ext.toLowerCase()) {
+    case ".md":
+    case ".markdown":
+      return "default";
+    case ".pdf":
+      return "destructive";
+    case ".docx":
+    case ".doc":
+      return "secondary";
+    default:
+      return "outline";
+  }
+}

package/src/serve/public/lib/workspace-tabs.ts

@@ -2,6 +2,7 @@ export interface WorkspaceTab {
   id: string;
   label: string;
   location: string;
+  browseState?: WorkspaceTabBrowseState;
 }
 
 export interface WorkspaceState {
@@ -9,6 +10,10 @@ export interface WorkspaceState {
   activeTabId: string;
 }
 
+export interface WorkspaceTabBrowseState {
+  expandedNodeIds: string[];
+}
+
 export interface WorkspaceStorageLike {
   getItem(key: string): string | null;
   setItem(key: string, value: string): void;
@@ -43,6 +48,13 @@ function getLocationLabel(location: string): string {
       return "Search";
     case "/browse": {
       const collection = params.get("collection");
+      const browsePath = (params.get("path") ?? "")
+        .replace(/^\/+|\/+$/g, "")
+        .trim();
+      if (collection && browsePath) {
+        const leaf = browsePath.split("/").at(-1) ?? browsePath;
+        return `Browse: ${collection} / ${leaf}`;
+      }
       return collection ? `Browse: ${collection}` : "Browse";
     }
     case "/ask":
@@ -68,6 +80,19 @@ function getLocationLabel(location: string): string {
   }
 }
 
+function isWorkspaceTabBrowseState(
+  value: unknown
+): value is WorkspaceTabBrowseState {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value as Record<string, unknown>;
+  return (
+    Array.isArray(candidate.expandedNodeIds) &&
+    candidate.expandedNodeIds.every((entry) => typeof entry === "string")
+  );
+}
+
 function isWorkspaceTab(value: unknown): value is WorkspaceTab {
   if (!value || typeof value !== "object") {
     return false;
@@ -76,7 +101,9 @@ function isWorkspaceTab(value: unknown): value is WorkspaceTab {
   return (
     typeof candidate.id === "string" &&
     typeof candidate.label === "string" &&
-    typeof candidate.location === "string"
+    typeof candidate.location === "string" &&
+    (candidate.browseState === undefined ||
+      isWorkspaceTabBrowseState(candidate.browseState))
   );
 }
 
@@ -187,6 +214,37 @@ export function createWorkspaceTab(
   };
 }
 
+export function updateActiveTabBrowseState(
+  state: WorkspaceState,
+  nextBrowseState:
+    | WorkspaceTabBrowseState
+    | ((current: WorkspaceTabBrowseState) => WorkspaceTabBrowseState)
+): WorkspaceState {
+  const nextTabs = state.tabs.map((tab) => {
+    if (tab.id !== state.activeTabId) {
+      return tab;
+    }
+
+    const currentBrowseState: WorkspaceTabBrowseState = tab.browseState ?? {
+      expandedNodeIds: [],
+    };
+    const resolvedBrowseState =
+      typeof nextBrowseState === "function"
+        ? nextBrowseState(currentBrowseState)
+        : nextBrowseState;
+
+    return {
+      ...tab,
+      browseState: resolvedBrowseState,
+    };
+  });
+
+  return {
+    tabs: nextTabs,
+    activeTabId: state.activeTabId,
+  };
+}
+
 export function activateWorkspaceTab(
   state: WorkspaceState,
   tabId: string