@gmickel/gno 0.28.2 → 0.29.1

package/src/serve/public/lib/navigation-state.ts

@@ -0,0 +1,156 @@
+export interface RecentDoc {
+  uri: string;
+  href: string;
+  label: string;
+}
+
+export interface FavoriteDoc {
+  uri: string;
+  href: string;
+  label: string;
+}
+
+export interface FavoriteCollection {
+  name: string;
+  href: string;
+  label: string;
+}
+
+export interface NavigationStorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export const RECENT_DOCS_STORAGE_KEY = "gno.recent-docs";
+export const FAVORITE_DOCS_STORAGE_KEY = "gno.favorite-docs";
+export const FAVORITE_COLLECTIONS_STORAGE_KEY = "gno.favorite-collections";
+
+function getStorage(
+  storage?: NavigationStorageLike
+): NavigationStorageLike | null {
+  if (storage) {
+    return storage;
+  }
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
+  return localStorage;
+}
+
+function loadList<T>(
+  key: string,
+  isValid: (value: unknown) => value is T,
+  storage?: NavigationStorageLike
+): T[] {
+  try {
+    const resolved = getStorage(storage);
+    if (!resolved) {
+      return [];
+    }
+    const raw = resolved.getItem(key);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed.filter(isValid);
+  } catch {
+    return [];
+  }
+}
+
+function saveList<T>(
+  key: string,
+  value: T[],
+  storage?: NavigationStorageLike
+): void {
+  const resolved = getStorage(storage);
+  if (!resolved) {
+    return;
+  }
+  resolved.setItem(key, JSON.stringify(value));
+}
+
+function isRecentDoc(value: unknown): value is RecentDoc {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value as Record<string, unknown>;
+  return (
+    typeof candidate.uri === "string" &&
+    typeof candidate.href === "string" &&
+    typeof candidate.label === "string"
+  );
+}
+
+function isFavoriteCollection(value: unknown): value is FavoriteCollection {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value as Record<string, unknown>;
+  return (
+    typeof candidate.name === "string" &&
+    typeof candidate.href === "string" &&
+    typeof candidate.label === "string"
+  );
+}
+
+export function loadRecentDocuments(
+  storage?: NavigationStorageLike
+): RecentDoc[] {
+  return loadList(RECENT_DOCS_STORAGE_KEY, isRecentDoc, storage);
+}
+
+export function saveRecentDocument(
+  doc: RecentDoc,
+  storage?: NavigationStorageLike
+): void {
+  const current = loadRecentDocuments(storage).filter(
+    (entry) => entry.href !== doc.href
+  );
+  saveList(RECENT_DOCS_STORAGE_KEY, [doc, ...current].slice(0, 8), storage);
+}
+
+export function loadFavoriteDocuments(
+  storage?: NavigationStorageLike
+): FavoriteDoc[] {
+  return loadList(FAVORITE_DOCS_STORAGE_KEY, isRecentDoc, storage);
+}
+
+export function toggleFavoriteDocument(
+  doc: FavoriteDoc,
+  storage?: NavigationStorageLike
+): FavoriteDoc[] {
+  const current = loadFavoriteDocuments(storage);
+  const exists = current.some((entry) => entry.href === doc.href);
+  const next = exists
+    ? current.filter((entry) => entry.href !== doc.href)
+    : [doc, ...current].slice(0, 12);
+  saveList(FAVORITE_DOCS_STORAGE_KEY, next, storage);
+  return next;
+}
+
+export function loadFavoriteCollections(
+  storage?: NavigationStorageLike
+): FavoriteCollection[] {
+  return loadList(
+    FAVORITE_COLLECTIONS_STORAGE_KEY,
+    isFavoriteCollection,
+    storage
+  );
+}
+
+export function toggleFavoriteCollection(
+  collection: FavoriteCollection,
+  storage?: NavigationStorageLike
+): FavoriteCollection[] {
+  const current = loadFavoriteCollections(storage);
+  const exists = current.some((entry) => entry.name === collection.name);
+  const next = exists
+    ? current.filter((entry) => entry.name !== collection.name)
+    : [collection, ...current].slice(0, 12);
+  saveList(FAVORITE_COLLECTIONS_STORAGE_KEY, next, storage);
+  return next;
+}

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

@@ -0,0 +1,235 @@
+export interface WorkspaceTab {
+  id: string;
+  label: string;
+  location: string;
+}
+
+export interface WorkspaceState {
+  tabs: WorkspaceTab[];
+  activeTabId: string;
+}
+
+export interface WorkspaceStorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export const WORKSPACE_TABS_STORAGE_KEY = "gno.workspace-tabs";
+
+function getStorage(
+  storage?: WorkspaceStorageLike
+): WorkspaceStorageLike | null {
+  if (storage) {
+    return storage;
+  }
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
+  return localStorage;
+}
+
+function createTabId(): string {
+  return `tab-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function getLocationLabel(location: string): string {
+  const [path, search = ""] = location.split("?");
+  const params = new URLSearchParams(search);
+
+  switch (path) {
+    case "/":
+      return "Home";
+    case "/search":
+      return "Search";
+    case "/browse": {
+      const collection = params.get("collection");
+      return collection ? `Browse: ${collection}` : "Browse";
+    }
+    case "/ask":
+      return "Ask";
+    case "/collections":
+      return "Collections";
+    case "/connectors":
+      return "Connectors";
+    case "/graph":
+      return "Graph";
+    case "/doc":
+    case "/edit": {
+      const uri = params.get("uri") ?? "";
+      const fallback = path === "/edit" ? "Editor" : "Document";
+      if (!uri) {
+        return fallback;
+      }
+      const label = decodeURIComponent(uri.split("/").pop() ?? fallback);
+      return path === "/edit" ? `Edit: ${label}` : label;
+    }
+    default:
+      return "Workspace";
+  }
+}
+
+function isWorkspaceTab(value: unknown): value is WorkspaceTab {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value as Record<string, unknown>;
+  return (
+    typeof candidate.id === "string" &&
+    typeof candidate.label === "string" &&
+    typeof candidate.location === "string"
+  );
+}
+
+export function loadWorkspaceState(
+  currentLocation: string,
+  storage?: WorkspaceStorageLike
+): WorkspaceState {
+  const resolved = getStorage(storage);
+  const fallbackTab: WorkspaceTab = {
+    id: createTabId(),
+    label: getLocationLabel(currentLocation),
+    location: currentLocation,
+  };
+
+  if (!resolved) {
+    return { tabs: [fallbackTab], activeTabId: fallbackTab.id };
+  }
+
+  try {
+    const raw = resolved.getItem(WORKSPACE_TABS_STORAGE_KEY);
+    if (!raw) {
+      return { tabs: [fallbackTab], activeTabId: fallbackTab.id };
+    }
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object") {
+      return { tabs: [fallbackTab], activeTabId: fallbackTab.id };
+    }
+    const candidate = parsed as Record<string, unknown>;
+    const tabs = Array.isArray(candidate.tabs)
+      ? candidate.tabs.filter(isWorkspaceTab)
+      : [];
+    const activeTabId =
+      typeof candidate.activeTabId === "string" ? candidate.activeTabId : "";
+    if (tabs.length === 0) {
+      return { tabs: [fallbackTab], activeTabId: fallbackTab.id };
+    }
+
+    const explicitLocation = currentLocation !== "/";
+    if (!explicitLocation) {
+      return {
+        tabs,
+        activeTabId: tabs.some((tab) => tab.id === activeTabId)
+          ? activeTabId
+          : tabs[0]!.id,
+      };
+    }
+
+    const existing = tabs.find((tab) => tab.location === currentLocation);
+    if (existing) {
+      return { tabs, activeTabId: existing.id };
+    }
+
+    const nextTabs = [
+      ...tabs,
+      {
+        id: createTabId(),
+        label: getLocationLabel(currentLocation),
+        location: currentLocation,
+      },
+    ];
+    return {
+      tabs: nextTabs,
+      activeTabId: nextTabs.at(-1)?.id ?? fallbackTab.id,
+    };
+  } catch {
+    return { tabs: [fallbackTab], activeTabId: fallbackTab.id };
+  }
+}
+
+export function saveWorkspaceState(
+  state: WorkspaceState,
+  storage?: WorkspaceStorageLike
+): void {
+  const resolved = getStorage(storage);
+  if (!resolved) {
+    return;
+  }
+  resolved.setItem(WORKSPACE_TABS_STORAGE_KEY, JSON.stringify(state));
+}
+
+export function updateActiveTabLocation(
+  state: WorkspaceState,
+  location: string
+): WorkspaceState {
+  const nextTabs = state.tabs.map((tab) =>
+    tab.id === state.activeTabId
+      ? { ...tab, location, label: getLocationLabel(location) }
+      : tab
+  );
+  return {
+    tabs: nextTabs,
+    activeTabId: state.activeTabId,
+  };
+}
+
+export function createWorkspaceTab(
+  state: WorkspaceState,
+  location: string
+): WorkspaceState {
+  const tab: WorkspaceTab = {
+    id: createTabId(),
+    label: getLocationLabel(location),
+    location,
+  };
+  return {
+    tabs: [...state.tabs, tab],
+    activeTabId: tab.id,
+  };
+}
+
+export function activateWorkspaceTab(
+  state: WorkspaceState,
+  tabId: string
+): WorkspaceState {
+  return {
+    tabs: state.tabs,
+    activeTabId: tabId,
+  };
+}
+
+export function closeWorkspaceTab(
+  state: WorkspaceState,
+  tabId: string
+): WorkspaceState {
+  const index = state.tabs.findIndex((tab) => tab.id === tabId);
+  if (index === -1) {
+    return state;
+  }
+
+  const nextTabs = state.tabs.filter((tab) => tab.id !== tabId);
+  if (nextTabs.length === 0) {
+    const fallback = {
+      id: createTabId(),
+      label: "Home",
+      location: "/",
+    };
+    return {
+      tabs: [fallback],
+      activeTabId: fallback.id,
+    };
+  }
+
+  if (state.activeTabId !== tabId) {
+    return {
+      tabs: nextTabs,
+      activeTabId: state.activeTabId,
+    };
+  }
+
+  const nextActive =
+    nextTabs[index - 1] ?? nextTabs[index] ?? nextTabs[nextTabs.length - 1]!;
+  return {
+    tabs: nextTabs,
+    activeTabId: nextActive.id,
+  };
+}

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

@@ -4,6 +4,7 @@ import {
   ChevronDown,
   CornerDownLeft,
   FileText,
+  HomeIcon,
   SlidersHorizontal,
   Sparkles,
   XIcon,
@@ -184,7 +185,7 @@ export default function Ask({ navigate }: PageProps) {
   const [capabilities, setCapabilities] = useState<Capabilities | null>(null);
   const [collections, setCollections] = useState<Collection[]>([]);
   const [thoroughness, setThoroughness] = useState<Thoroughness>("balanced");
-  const [activePreset, setActivePreset] = useState("slim");
+  const [activePreset, setActivePreset] = useState("slim-tuned");
 
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedCollection, setSelectedCollection] = useState("");
@@ -448,6 +449,15 @@ export default function Ask({ navigate }: PageProps) {
     <div className="flex h-dvh min-h-0 flex-col overflow-hidden">
       <header className="glass sticky top-0 z-10 border-border/50 border-b">
         <div className="flex items-center gap-4 px-8 py-4">
+          <Button
+            className="gap-2 text-primary"
+            onClick={() => navigate("/")}
+            size="sm"
+            variant="ghost"
+          >
+            <HomeIcon className="size-4" />
+            GNO
+          </Button>
           <Button
             className="gap-2"
             onClick={() => navigate(-1)}

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

@@ -3,7 +3,9 @@ import {
   ChevronRight,
   FileText,
   FolderOpen,
+  HomeIcon,
   RefreshCw,
+  StarIcon,
 } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
 
@@ -28,6 +30,12 @@ import {
 } from "../components/ui/table";
 import { apiFetch } from "../hooks/use-api";
 import { useDocEvents } from "../hooks/use-doc-events";
+import {
+  loadFavoriteCollections,
+  loadFavoriteDocuments,
+  toggleFavoriteCollection,
+  toggleFavoriteDocument,
+} from "../lib/navigation-state";
 
 interface PageProps {
   navigate: (to: string | number) => void;
@@ -78,6 +86,8 @@ export default function Browse({ navigate }: PageProps) {
   const [syncTarget, setSyncTarget] = useState<SyncTarget>(null);
   const [syncError, setSyncError] = useState<string | null>(null);
   const [refreshToken, setRefreshToken] = useState(0);
+  const [favoriteDocHrefs, setFavoriteDocHrefs] = useState<string[]>([]);
+  const [favoriteCollections, setFavoriteCollections] = useState<string[]>([]);
   const latestDocEvent = useDocEvents();
   const limit = 25;
 
@@ -96,6 +106,10 @@ export default function Browse({ navigate }: PageProps) {
         setCollections(data);
       }
     });
+    setFavoriteDocHrefs(loadFavoriteDocuments().map((entry) => entry.href));
+    setFavoriteCollections(
+      loadFavoriteCollections().map((entry) => entry.name)
+    );
   }, []);
 
   useEffect(() => {
@@ -237,6 +251,15 @@ export default function Browse({ navigate }: PageProps) {
       <header className="glass sticky top-0 z-10 border-border/50 border-b">
         <div className="flex flex-wrap items-center justify-between gap-4 px-8 py-4">
           <div className="flex items-center gap-4">
+            <Button
+              className="gap-2 text-primary"
+              onClick={() => navigate("/")}
+              size="sm"
+              variant="ghost"
+            >
+              <HomeIcon className="size-4" />
+              GNO
+            </Button>
             <Button
               className="gap-2"
               onClick={() => navigate(-1)}
@@ -300,6 +323,31 @@ export default function Browse({ navigate }: PageProps) {
               <FolderOpen className="size-4" />
               Collections
             </Button>
+            {selected && (
+              <Button
+                className="gap-2"
+                onClick={() =>
+                  setFavoriteCollections(
+                    toggleFavoriteCollection({
+                      name: selected,
+                      href: `/browse?collection=${encodeURIComponent(selected)}`,
+                      label: selected,
+                    }).map((entry) => entry.name)
+                  )
+                }
+                size="sm"
+                variant="outline"
+              >
+                <StarIcon
+                  className={`size-4 ${
+                    favoriteCollections.includes(selected)
+                      ? "fill-current text-secondary"
+                      : ""
+                  }`}
+                />
+                {favoriteCollections.includes(selected) ? "Pinned" : "Pin"}
+              </Button>
+            )}
             <Button
               className="gap-2"
               disabled={Boolean(syncJobId)}
@@ -423,6 +471,31 @@ export default function Browse({ navigate }: PageProps) {
                             {doc.relPath}
                           </div>
                         </div>
+                        <Button
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            const next = toggleFavoriteDocument({
+                              uri: doc.uri,
+                              href: `/doc?uri=${encodeURIComponent(doc.uri)}`,
+                              label: doc.title || doc.relPath,
+                            });
+                            setFavoriteDocHrefs(
+                              next.map((entry) => entry.href)
+                            );
+                          }}
+                          size="icon-sm"
+                          variant="ghost"
+                        >
+                          <StarIcon
+                            className={`size-4 ${
+                              favoriteDocHrefs.includes(
+                                `/doc?uri=${encodeURIComponent(doc.uri)}`
+                              )
+                                ? "fill-current text-secondary"
+                                : "text-muted-foreground"
+                            }`}
+                          />
+                        </Button>
                         <ChevronRight className="ml-auto size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
                       </div>
                     </TableCell>

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

@@ -17,6 +17,7 @@ import {
   FolderIcon,
   FolderMinusIcon,
   FolderPlusIcon,
+  HomeIcon,
   LayersIcon,
   Loader2Icon,
   MoreVerticalIcon,
@@ -24,8 +25,11 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
+import type { AppStatusResponse } from "../../status-model";
+
 import { AddCollectionDialog } from "../components/AddCollectionDialog";
 import { Loader } from "../components/ai-elements/loader";
+import { CollectionsEmptyState } from "../components/CollectionsEmptyState";
 import { IndexingProgress } from "../components/IndexingProgress";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
@@ -75,6 +79,7 @@ interface StatusResponse {
   totalDocuments: number;
   lastUpdated: string | null;
   healthy: boolean;
+  onboarding: AppStatusResponse["onboarding"];
 }
 
 interface SyncResponse {
@@ -249,6 +254,9 @@ function CollectionCard({
 
 export default function Collections({ navigate }: PageProps) {
   const [collections, setCollections] = useState<CollectionStats[]>([]);
+  const [onboarding, setOnboarding] = useState<
+    AppStatusResponse["onboarding"] | null
+  >(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
@@ -260,6 +268,9 @@ export default function Collections({ navigate }: PageProps) {
   );
   const [removing, setRemoving] = useState(false);
   const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [initialCollectionPath, setInitialCollectionPath] = useState<
+    string | undefined
+  >(undefined);
 
   const loadCollections = useCallback(async () => {
     const { data, error: err } = await apiFetch<StatusResponse>("/api/status");
@@ -267,6 +278,7 @@ export default function Collections({ navigate }: PageProps) {
       setError(err);
     } else if (data) {
       setCollections(data.collections);
+      setOnboarding(data.onboarding);
       setError(null);
     }
   }, []);
@@ -340,6 +352,15 @@ export default function Collections({ navigate }: PageProps) {
         <div className="flex flex-wrap items-start justify-between gap-4 px-8 py-4">
           <div className="space-y-2">
             <div className="flex flex-wrap items-center gap-3">
+              <Button
+                className="gap-2 text-primary"
+                onClick={() => navigate("/")}
+                size="sm"
+                variant="ghost"
+              >
+                <HomeIcon className="size-4" />
+                GNO
+              </Button>
               <Button
                 className="gap-2"
                 onClick={() => navigate(-1)}
@@ -452,19 +473,13 @@ export default function Collections({ navigate }: PageProps) {
 
         {/* Empty state */}
         {!error && collections.length === 0 && (
-          <div className="mx-auto max-w-md py-16 text-center">
-            <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-muted">
-              <FolderIcon className="size-8 text-muted-foreground" />
-            </div>
-            <h2 className="mb-2 font-semibold text-xl">No collections yet</h2>
-            <p className="mb-6 text-muted-foreground">
-              Add your first collection to start indexing documents.
-            </p>
-            <Button onClick={() => setAddDialogOpen(true)}>
-              <FolderPlusIcon className="mr-2 size-4" />
-              Add Collection
-            </Button>
-          </div>
+          <CollectionsEmptyState
+            onAddCollection={(path) => {
+              setInitialCollectionPath(path);
+              setAddDialogOpen(true);
+            }}
+            suggestedCollections={onboarding?.suggestedCollections ?? []}
+          />
         )}
 
         {/* Collections grid */}
@@ -495,6 +510,7 @@ export default function Collections({ navigate }: PageProps) {
 
       {/* Add collection dialog */}
       <AddCollectionDialog
+        initialPath={initialCollectionPath}
         onOpenChange={setAddDialogOpen}
         onSuccess={() => void loadCollections()}
         open={addDialogOpen}