@gmickel/gno 0.28.2 → 0.29.0

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

@@ -0,0 +1,128 @@
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  HardDriveIcon,
+  Loader2Icon,
+  SparklesIcon,
+} from "lucide-react";
+
+import type {
+  AppStatusResponse,
+  HealthActionKind,
+  HealthCheck,
+} from "../../status-model";
+
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+
+interface HealthCenterProps {
+  health: AppStatusResponse["health"];
+  onAction: (action: HealthActionKind) => void;
+  busyAction?: HealthActionKind | null;
+}
+
+function getStatusIcon(status: HealthCheck["status"]) {
+  switch (status) {
+    case "ok":
+      return <CheckCircle2Icon className="size-4 text-green-500" />;
+    case "warn":
+      return <AlertCircleIcon className="size-4 text-amber-500" />;
+    case "error":
+      return <AlertCircleIcon className="size-4 text-destructive" />;
+  }
+}
+
+function getStatusLabel(status: HealthCheck["status"]): string {
+  switch (status) {
+    case "ok":
+      return "Ready";
+    case "warn":
+      return "Needs attention";
+    case "error":
+      return "Blocked";
+  }
+}
+
+export function HealthCenter({
+  health,
+  onAction,
+  busyAction,
+}: HealthCenterProps) {
+  return (
+    <section className="space-y-4">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <div className="mb-2 flex items-center gap-2">
+            <HardDriveIcon className="size-4 text-primary" />
+            <h2 className="font-semibold text-2xl">Health Center</h2>
+          </div>
+          <p className="max-w-3xl text-muted-foreground">{health.summary}</p>
+        </div>
+        <Badge
+          className="border-primary/20 bg-primary/10 text-primary"
+          variant="outline"
+        >
+          {health.state === "healthy"
+            ? "Ready"
+            : health.state === "setup-required"
+              ? "First run"
+              : "Needs attention"}
+        </Badge>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {health.checks.map((check) => {
+          const isBusy = busyAction === check.actionKind;
+
+          return (
+            <Card
+              className="border-border/60 bg-card/70 backdrop-blur-sm"
+              key={check.id}
+            >
+              <CardHeader className="space-y-3 pb-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-2">
+                    {getStatusIcon(check.status)}
+                    <CardTitle className="text-base">{check.title}</CardTitle>
+                  </div>
+                  <Badge variant="secondary">
+                    {getStatusLabel(check.status)}
+                  </Badge>
+                </div>
+                <CardDescription className="text-sm text-foreground/85">
+                  {check.summary}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-muted-foreground text-sm">{check.detail}</p>
+                {check.actionKind && check.actionLabel && (
+                  <Button
+                    className="w-full"
+                    disabled={isBusy}
+                    onClick={() => onAction(check.actionKind!)}
+                    size="sm"
+                    variant={check.status === "ok" ? "outline" : "default"}
+                  >
+                    {isBusy ? (
+                      <Loader2Icon className="mr-2 size-4 animate-spin" />
+                    ) : check.status === "ok" ? (
+                      <SparklesIcon className="mr-2 size-4" />
+                    ) : null}
+                    {check.actionLabel}
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -50,6 +50,19 @@ interface CollectionResult {
   durationMs: number;
 }
 
+function isNoopSyncResult(result: SyncResult | undefined): boolean {
+  if (!result) {
+    return false;
+  }
+
+  return (
+    result.totalFilesProcessed === 0 &&
+    result.totalFilesAdded === 0 &&
+    result.totalFilesUpdated === 0 &&
+    result.totalFilesErrored === 0
+  );
+}
+
 export interface IndexingProgressProps {
   /** Job ID to poll */
   jobId: string;
@@ -211,8 +224,9 @@ export function IndexingProgress({
         >
           <CheckCircle2Icon className="size-4 text-green-500" />
           <span className="text-muted-foreground">
-            {result?.totalFilesProcessed ?? 0} files in{" "}
-            {formatDuration(result?.totalDurationMs ?? 0)}
+            {isNoopSyncResult(result)
+              ? "Up to date"
+              : `${result?.totalFilesProcessed ?? 0} files in ${formatDuration(result?.totalDurationMs ?? 0)}`}
           </span>
         </div>
       );
@@ -281,6 +295,11 @@ export function IndexingProgress({
       {/* Success summary */}
       {status?.status === "completed" && status.result && (
         <div className="space-y-2">
+          {isNoopSyncResult(status.result) && (
+            <div className="rounded-lg border border-green-500/30 bg-green-500/10 p-3 text-green-500 text-sm">
+              No file changes found. Workspace is already up to date.
+            </div>
+          )}
           <div className="flex flex-wrap gap-2">
             <Badge className="gap-1" variant="outline">
               <FileTextIcon className="size-3" />

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

@@ -1,13 +1,23 @@
 import {
   FilePlusIcon,
   FileTextIcon,
+  FolderIcon,
   Loader2Icon,
   SearchIcon,
+  StarIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { apiFetch } from "../hooks/use-api";
 import { buildDocDeepLink } from "../lib/deep-links";
+import {
+  loadFavoriteCollections,
+  loadFavoriteDocuments,
+  loadRecentDocuments,
+  type FavoriteCollection,
+  type FavoriteDoc,
+  type RecentDoc,
+} from "../lib/navigation-state";
 import {
   CommandDialog,
   CommandEmpty,
@@ -35,42 +45,6 @@ interface SearchResponse {
   results: SearchResult[];
 }
 
-interface RecentDoc {
-  uri: string;
-  href: string;
-  label: string;
-}
-
-export const RECENT_DOCS_STORAGE_KEY = "gno.recent-docs";
-
-export function saveRecentDocument(doc: RecentDoc): void {
-  const current = loadRecentDocuments().filter(
-    (entry) => entry.href !== doc.href
-  );
-  const next = [doc, ...current].slice(0, 8);
-  localStorage.setItem(RECENT_DOCS_STORAGE_KEY, JSON.stringify(next));
-}
-
-export function loadRecentDocuments(): RecentDoc[] {
-  try {
-    const raw = localStorage.getItem(RECENT_DOCS_STORAGE_KEY);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw) as unknown;
-    if (!Array.isArray(parsed)) return [];
-    return parsed.filter((entry): entry is RecentDoc => {
-      if (!entry || typeof entry !== "object") return false;
-      const candidate = entry as Record<string, unknown>;
-      return (
-        typeof candidate.uri === "string" &&
-        typeof candidate.href === "string" &&
-        typeof candidate.label === "string"
-      );
-    });
-  } catch {
-    return [];
-  }
-}
-
 export interface QuickSwitcherProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -87,6 +61,10 @@ export function QuickSwitcher({
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
   const [recentDocs, setRecentDocs] = useState<RecentDoc[]>([]);
+  const [favoriteDocs, setFavoriteDocs] = useState<FavoriteDoc[]>([]);
+  const [favoriteCollections, setFavoriteCollections] = useState<
+    FavoriteCollection[]
+  >([]);
   const [loading, setLoading] = useState(false);
   const requestIdRef = useRef(0);
 
@@ -98,6 +76,8 @@ export function QuickSwitcher({
       return;
     }
     setRecentDocs(loadRecentDocuments());
+    setFavoriteDocs(loadFavoriteDocuments());
+    setFavoriteCollections(loadFavoriteCollections());
   }, [open]);
 
   useEffect(() => {
@@ -130,6 +110,14 @@ export function QuickSwitcher({
   }, [open, query]);
 
   const recentItems = useMemo(() => recentDocs.slice(0, 6), [recentDocs]);
+  const favoriteDocItems = useMemo(
+    () => favoriteDocs.slice(0, 6),
+    [favoriteDocs]
+  );
+  const favoriteCollectionItems = useMemo(
+    () => favoriteCollections.slice(0, 6),
+    [favoriteCollections]
+  );
 
   const openTarget = useCallback(
     (target: { uri: string; lineStart?: number; lineEnd?: number }) => {
@@ -185,6 +173,44 @@ export function QuickSwitcher({
           </CommandGroup>
         )}
 
+        {!query.trim() &&
+          (favoriteDocItems.length > 0 ||
+            favoriteCollectionItems.length > 0) && (
+            <>
+              <CommandSeparator />
+              <CommandGroup heading="Favorites">
+                {favoriteDocItems.map((item) => (
+                  <CommandItem
+                    key={item.href}
+                    onSelect={() => {
+                      navigate(item.href);
+                      onOpenChange(false);
+                    }}
+                    value={`favorite-doc-${item.label}`}
+                  >
+                    <StarIcon />
+                    <span>{item.label}</span>
+                    <CommandShortcut>Doc</CommandShortcut>
+                  </CommandItem>
+                ))}
+                {favoriteCollectionItems.map((item) => (
+                  <CommandItem
+                    key={item.href}
+                    onSelect={() => {
+                      navigate(item.href);
+                      onOpenChange(false);
+                    }}
+                    value={`favorite-collection-${item.label}`}
+                  >
+                    <FolderIcon />
+                    <span>{item.label}</span>
+                    <CommandShortcut>Collection</CommandShortcut>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </>
+          )}
+
         {showCreateAction && (
           <>
             <CommandGroup heading="Actions">

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

@@ -97,6 +97,7 @@ function flattenSuggestions(suggestions: TagSuggestion[]): FlatOption[] {
     const groupTags = groups.get(prefix)!;
     for (let i = 0; i < groupTags.length; i++) {
       const s = groupTags[i];
+      if (!s) continue;
       flat.push({
         tag: s.tag,
         count: s.count,
@@ -327,7 +328,10 @@ export function TagInput({
         case "Backspace":
           if (inputValue === "" && value.length > 0) {
             e.preventDefault();
-            removeTag(value[value.length - 1]);
+            const lastTag = value.at(-1);
+            if (lastTag) {
+              removeTag(lastTag);
+            }
           }
           break;
       }

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

@@ -69,7 +69,8 @@ function fuzzyScore(text: string, query: string): number {
   const substringIdx = lowerText.indexOf(lowerQuery);
   if (substringIdx !== -1) {
     // Bonus for word boundary
-    if (substringIdx === 0 || /\W/.test(text[substringIdx - 1])) {
+    const previousChar = substringIdx > 0 ? text.charAt(substringIdx - 1) : "";
+    if (substringIdx === 0 || /\W/.test(previousChar)) {
       return 800 + (query.length / text.length) * 50;
     }
     return 700 + (query.length / text.length) * 50;
@@ -92,7 +93,8 @@ function fuzzyScore(text: string, query: string): number {
     }
 
     // Word boundary bonus
-    if (foundIdx === 0 || /\W/.test(text[foundIdx - 1])) {
+    const previousChar = foundIdx > 0 ? text.charAt(foundIdx - 1) : "";
+    if (foundIdx === 0 || /\W/.test(previousChar)) {
       score += 20;
     }
 
@@ -151,6 +153,7 @@ function HighlightedText({
   let isHighlighted = false;
 
   for (let i = 0; i < text.length; i++) {
+    const currentChar = text.charAt(i);
     const charIsHighlighted = indexSet.has(i);
 
     if (charIsHighlighted !== isHighlighted) {
@@ -169,10 +172,10 @@ function HighlightedText({
           )
         );
       }
-      currentRun = text[i];
+      currentRun = currentChar;
       isHighlighted = charIsHighlighted;
     } else {
-      currentRun += text[i];
+      currentRun += currentChar;
     }
   }
 
@@ -273,12 +276,18 @@ export function WikiLinkAutocomplete({
           e.preventDefault();
           e.stopPropagation();
           if (activeIndex >= 0 && activeIndex < filteredDocs.length) {
-            onSelect(filteredDocs[activeIndex].doc.title);
+            const activeDoc = filteredDocs.at(activeIndex);
+            if (activeDoc) {
+              onSelect(activeDoc.doc.title);
+            }
           } else if (activeIndex === createOptionIndex && showCreateOption) {
             onCreateNew?.(searchQuery.trim());
           } else if (filteredDocs.length > 0) {
             // Default to first result if nothing selected
-            onSelect(filteredDocs[0].doc.title);
+            const firstDoc = filteredDocs.at(0);
+            if (firstDoc) {
+              onSelect(firstDoc.doc.title);
+            }
           } else if (showCreateOption) {
             onCreateNew?.(searchQuery.trim());
           }

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

@@ -0,0 +1,60 @@
+import { PlusIcon, XIcon } from "lucide-react";
+
+import type { WorkspaceTab } from "../lib/workspace-tabs";
+
+import { Button } from "./ui/button";
+
+interface WorkspaceTabsProps {
+  tabs: WorkspaceTab[];
+  activeTabId: string;
+  onActivate: (tabId: string) => void;
+  onClose: (tabId: string) => void;
+  onNewTab: () => void;
+}
+
+export function WorkspaceTabs({
+  tabs,
+  activeTabId,
+  onActivate,
+  onClose,
+  onNewTab,
+}: WorkspaceTabsProps) {
+  return (
+    <div className="border-border/50 border-b bg-background/90">
+      <div className="mx-auto flex max-w-7xl items-center gap-2 overflow-x-auto px-4 py-2">
+        {tabs.map((tab) => {
+          const active = tab.id === activeTabId;
+          return (
+            <div
+              className={`flex items-center rounded-lg border px-2 py-1 ${
+                active
+                  ? "border-primary/40 bg-primary/10 text-primary"
+                  : "border-border/60 bg-card/70"
+              }`}
+              key={tab.id}
+            >
+              <button
+                className="max-w-[220px] truncate px-2 py-1 text-left text-sm"
+                onClick={() => onActivate(tab.id)}
+                type="button"
+              >
+                {tab.label}
+              </button>
+              <Button
+                onClick={() => onClose(tab.id)}
+                size="icon-sm"
+                variant="ghost"
+              >
+                <XIcon className="size-3.5" />
+              </Button>
+            </div>
+          );
+        })}
+        <Button onClick={onNewTab} size="sm" variant="outline">
+          <PlusIcon className="mr-2 size-4" />
+          New Tab
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/serve/public/hooks/use-doc-events.ts

@@ -9,24 +9,68 @@ export interface DocumentEvent {
   changedAt: string;
 }
 
+export function getEventStreamRetryDelay(attempt: number): number {
+  return Math.min(1_000 * 2 ** attempt, 10_000);
+}
+
 export function useDocEvents(): DocumentEvent | null {
   const [event, setEvent] = useState<DocumentEvent | null>(null);
 
   useEffect(() => {
-    const source = new EventSource("/api/events");
+    let source: EventSource | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let stopped = false;
+    let reconnectAttempt = 0;
+
+    const cleanupSource = () => {
+      if (!source) {
+        return;
+      }
+      source.removeEventListener("document-changed", handleEvent);
+      source.onerror = null;
+      source.close();
+      source = null;
+    };
+
+    const scheduleReconnect = () => {
+      if (stopped || reconnectTimer) {
+        return;
+      }
+      const delay = getEventStreamRetryDelay(reconnectAttempt);
+      reconnectAttempt += 1;
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null;
+        connect();
+      }, delay);
+    };
+
     const handleEvent = (incoming: Event) => {
       const message = incoming as MessageEvent<string>;
       try {
         setEvent(JSON.parse(message.data) as DocumentEvent);
+        reconnectAttempt = 0;
       } catch {
         // Ignore malformed event payloads.
       }
     };
 
-    source.addEventListener("document-changed", handleEvent);
+    const connect = () => {
+      cleanupSource();
+      source = new EventSource("/api/events");
+      source.addEventListener("document-changed", handleEvent);
+      source.onerror = () => {
+        cleanupSource();
+        scheduleReconnect();
+      };
+    };
+
+    connect();
     return () => {
-      source.removeEventListener("document-changed", handleEvent);
-      source.close();
+      stopped = true;
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+      }
+      cleanupSource();
     };
   }, []);
 

package/src/serve/public/lib/local-history.ts

@@ -3,6 +3,11 @@ export interface LocalHistoryEntry {
   content: string;
 }
 
+export interface LocalHistoryStorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
 const HISTORY_PREFIX = "gno.doc-history.";
 const MAX_ENTRIES = 10;
 
@@ -10,9 +15,26 @@ function getHistoryKey(docId: string): string {
   return `${HISTORY_PREFIX}${docId}`;
 }
 
-export function loadLocalHistory(docId: string): LocalHistoryEntry[] {
+function getStorage(
+  storage?: LocalHistoryStorageLike
+): LocalHistoryStorageLike | null {
+  if (storage) {
+    return storage;
+  }
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
+  return localStorage;
+}
+
+export function loadLocalHistory(
+  docId: string,
+  storage?: LocalHistoryStorageLike
+): LocalHistoryEntry[] {
   try {
-    const raw = localStorage.getItem(getHistoryKey(docId));
+    const resolved = getStorage(storage);
+    if (!resolved) return [];
+    const raw = resolved.getItem(getHistoryKey(docId));
     if (!raw) return [];
     const parsed = JSON.parse(raw) as unknown;
     if (!Array.isArray(parsed)) return [];
@@ -29,16 +51,27 @@ export function loadLocalHistory(docId: string): LocalHistoryEntry[] {
   }
 }
 
-export function appendLocalHistory(docId: string, content: string): void {
+export function appendLocalHistory(
+  docId: string,
+  content: string,
+  storage?: LocalHistoryStorageLike
+): void {
+  const resolved = getStorage(storage);
+  if (!resolved) {
+    return;
+  }
   const next = [
     { savedAt: new Date().toISOString(), content },
-    ...loadLocalHistory(docId).filter((entry) => entry.content !== content),
+    ...loadLocalHistory(docId, storage).filter(
+      (entry) => entry.content !== content
+    ),
   ].slice(0, MAX_ENTRIES);
-  localStorage.setItem(getHistoryKey(docId), JSON.stringify(next));
+  resolved.setItem(getHistoryKey(docId), JSON.stringify(next));
 }
 
 export function loadLatestLocalHistory(
-  docId: string
+  docId: string,
+  storage?: LocalHistoryStorageLike
 ): LocalHistoryEntry | undefined {
-  return loadLocalHistory(docId)[0];
+  return loadLocalHistory(docId, storage)[0];
 }