@gmickel/gno 0.33.3 → 0.34.0

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

@@ -29,6 +29,103 @@ interface ParsedFrontmatter {
   body: string;
 }
 
+const INLINE_ARRAY_REGEX = /^\[([^\]]*)\]$/;
+
+function normalizeScalar(value: string): unknown {
+  const trimmed = value.trim();
+  if (
+    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+    (trimmed.startsWith("'") && trimmed.endsWith("'"))
+  ) {
+    return trimmed.slice(1, -1);
+  }
+  if (/^-?\d+\.?\d*$/.test(trimmed)) {
+    return Number.parseFloat(trimmed);
+  }
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  return trimmed;
+}
+
+function parseYamlFrontmatterBlock(yamlBlock: string): Record<string, unknown> {
+  const data: Record<string, unknown> = {};
+  const lines = yamlBlock.split("\n");
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]?.trimEnd();
+    if (!line || line.trimStart().startsWith("#")) {
+      continue;
+    }
+
+    const match = line.match(/^([^:]+):\s*(.*)$/);
+    if (!match) {
+      continue;
+    }
+
+    const [, rawKey = "", rawValue = ""] = match;
+    const key = rawKey.trim();
+    const value = rawValue.trim();
+
+    const inlineArrayMatch = INLINE_ARRAY_REGEX.exec(value);
+    if (inlineArrayMatch?.[1]) {
+      data[key] = inlineArrayMatch[1]
+        .split(",")
+        .map((item) => normalizeScalar(item))
+        .filter((item) => item !== "");
+      continue;
+    }
+
+    if (value.length === 0) {
+      const arrayItems: unknown[] = [];
+      let multilineValue: string[] = [];
+      let multilineMode = false;
+
+      for (let j = i + 1; j < lines.length; j++) {
+        const nextLine = lines[j];
+        if (nextLine === undefined) {
+          break;
+        }
+
+        const trimmedNext = nextLine.trimEnd();
+        if (!trimmedNext) {
+          if (multilineMode) {
+            multilineValue.push("");
+          }
+          continue;
+        }
+
+        if (!/^\s/.test(nextLine)) {
+          break;
+        }
+
+        const arrayMatch = nextLine.match(/^\s*-\s*(.*)$/);
+        if (arrayMatch) {
+          arrayItems.push(normalizeScalar(arrayMatch[1] ?? ""));
+          i = j;
+          continue;
+        }
+
+        multilineMode = true;
+        multilineValue.push(nextLine.trim());
+        i = j;
+      }
+
+      if (arrayItems.length > 0) {
+        data[key] = arrayItems;
+      } else if (multilineValue.length > 0) {
+        data[key] = multilineValue.join("\n");
+      } else {
+        data[key] = "";
+      }
+      continue;
+    }
+
+    data[key] = normalizeScalar(value);
+  }
+
+  return data;
+}
+
 /**
  * Parse YAML frontmatter from markdown content.
  * Returns empty data if no frontmatter found.
@@ -49,68 +146,25 @@ export function parseFrontmatter(content: string): ParsedFrontmatter {
 
   const yamlBlock = trimmed.slice(4, endIndex).trim();
   const body = trimmed.slice(endIndex + 4).trimStart();
-
-  // Parse YAML manually (simple key: value pairs)
-  const data: Record<string, unknown> = {};
-  let currentKey: string | null = null;
-  let multilineValue: string[] = [];
-
-  for (const line of yamlBlock.split("\n")) {
-    // Check for multiline continuation (starts with spaces and not a new key)
-    if (currentKey && line.match(/^\s+/) && !line.includes(":")) {
-      multilineValue.push(line.trim());
-      continue;
-    }
-
-    // Save previous multiline value
-    if (currentKey && multilineValue.length > 0) {
-      const existing = data[currentKey];
-      if (typeof existing === "string" && existing.endsWith("|")) {
-        data[currentKey] = multilineValue.join("\n");
-      } else if (typeof existing === "string") {
-        data[currentKey] = `${existing}\n${multilineValue.join("\n")}`;
-      } else {
-        data[currentKey] = multilineValue.join("\n");
-      }
-      multilineValue = [];
-    }
-
-    // Parse new key: value
-    const match = line.match(/^([^:]+):\s*(.*)$/);
-    if (match) {
-      currentKey = match[1].trim();
-      let value: unknown = match[2].trim();
-
-      // Remove surrounding quotes
-      if (
-        (value as string).startsWith('"') &&
-        (value as string).endsWith('"')
-      ) {
-        value = (value as string).slice(1, -1);
-      }
-
-      // Parse numbers
-      if (/^-?\d+\.?\d*$/.test(value as string)) {
-        value = Number.parseFloat(value as string);
-      }
-
-      data[currentKey] = value;
+  if (typeof Bun !== "undefined" && Bun.YAML) {
+    try {
+      const parsed = Bun.YAML.parse(yamlBlock);
+      return {
+        data:
+          parsed && typeof parsed === "object"
+            ? (parsed as Record<string, unknown>)
+            : {},
+        body,
+      };
+    } catch {
+      // Fall through to the browser-safe parser below.
     }
   }
 
-  // Handle trailing multiline
-  if (currentKey && multilineValue.length > 0) {
-    const existing = data[currentKey];
-    if (typeof existing === "string" && existing.endsWith("|")) {
-      data[currentKey] = multilineValue.join("\n");
-    } else if (typeof existing === "string") {
-      data[currentKey] = `${existing}\n${multilineValue.join("\n")}`;
-    } else {
-      data[currentKey] = multilineValue.join("\n");
-    }
-  }
-
-  return { data, body };
+  return {
+    data: parseYamlFrontmatterBlock(yamlBlock),
+    body,
+  };
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -235,9 +289,55 @@ interface ValueDisplayProps {
 const ValueDisplay: FC<ValueDisplayProps> = ({ keyName, value }) => {
   // Handle arrays (tags, etc.)
   if (Array.isArray(value)) {
+    const normalizedValues = value.filter(
+      (item): item is string | number =>
+        typeof item === "string" || typeof item === "number"
+    );
+
+    if (normalizedValues.length === 0) {
+      return null;
+    }
+
+    if (isTagsKey(keyName)) {
+      return (
+        <div className="flex flex-wrap gap-1.5">
+          {normalizedValues.map((item, i) => (
+            <Badge
+              className="rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-[11px] text-primary"
+              key={`${item}-${i}`}
+              variant="outline"
+            >
+              {String(item)}
+            </Badge>
+          ))}
+        </div>
+      );
+    }
+
+    if (
+      normalizedValues.every((item) => typeof item === "string" && isUrl(item))
+    ) {
+      return (
+        <div className="space-y-2">
+          {normalizedValues.map((item, i) => (
+            <a
+              className="flex max-w-full items-start gap-1 text-primary hover:underline"
+              href={String(item)}
+              key={`${item}-${i}`}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span className="break-all">{String(item)}</span>
+              <ExternalLinkIcon className="mt-0.5 size-3 shrink-0 opacity-60" />
+            </a>
+          ))}
+        </div>
+      );
+    }
+
     return (
-      <div className="flex flex-wrap gap-1">
-        {value.map((item, i) => (
+      <div className="flex flex-wrap gap-1.5">
+        {normalizedValues.map((item, i) => (
           <Badge
             className="font-mono text-xs"
             key={`${item}-${i}`}
@@ -318,15 +418,15 @@ const FrontmatterItem: FC<FrontmatterItemProps> = ({
   return (
     <div
       className={cn(
-        "group min-w-0 rounded-lg bg-muted/20 p-3 transition-colors hover:bg-muted/30",
+        "group min-w-0 rounded-lg bg-muted/20 p-2.5 transition-colors hover:bg-muted/30",
         isLarge && "col-span-full"
       )}
     >
-      <div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground text-xs">
+      <div className="mb-1 flex items-center gap-1.5 text-muted-foreground text-[11px]">
         {icon}
         <span className="uppercase tracking-wider">{formatKey(keyName)}</span>
       </div>
-      <div className="text-sm">
+      <div className="text-sm leading-relaxed">
         <ValueDisplay keyName={keyName} value={value} />
       </div>
     </div>

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);
+}