@gmickel/gno 0.33.4 → 0.34.0

package/README.md

@@ -425,7 +425,7 @@ gno serve --port 8080        # Custom port
 Open `http://localhost:3000` to:
 
 - **Search**: BM25, vector, or hybrid modes with visual results
-- **Browse**: Paginated document list, filter by collection
+- **Browse**: Cross-collection tree workspace with folder detail panes and per-tab browse context
 - **Edit**: Create, edit, and delete documents with live preview
 - **Ask**: AI-powered Q&A with citations
 - **Manage Collections**: Add, remove, and re-index collections
@@ -459,6 +459,17 @@ Full-featured markdown editor with:
 
 View documents with full context: outgoing links, backlinks, and AI-powered related notes sidebar.
 
+### Browse Workspace
+
+![GNO Collections](./assets/screenshots/webui-collections.jpg)
+
+Navigate your notes like a real workspace, not just a flat list:
+
+- Cross-collection tree sidebar
+- Folder detail panes
+- Pinned collections and per-tab browse state
+- Direct jump from folder structure into notes
+
 ### Knowledge Graph
 
 ![GNO Knowledge Graph](./assets/screenshots/webui-graph.jpg)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmickel/gno",
-  "version": "0.33.4",
+  "version": "0.34.0",
   "description": "Local semantic search for your documents. Index Markdown, PDF, and Office files with hybrid BM25 + vector search.",
   "keywords": [
     "embeddings",

package/src/serve/browse-tree.ts

@@ -0,0 +1,201 @@
+import type { CollectionRow, DocumentRow } from "../store/types";
+
+export interface BrowseTreeNode {
+  id: string;
+  kind: "collection" | "folder";
+  collection: string;
+  path: string;
+  name: string;
+  depth: number;
+  documentCount: number;
+  directDocumentCount: number;
+  children: BrowseTreeNode[];
+}
+
+type BrowseCollectionLike = Pick<CollectionRow, "name">;
+type BrowseDocumentLike = Pick<
+  DocumentRow,
+  "collection" | "relPath" | "active"
+>;
+
+export function normalizeBrowsePath(path?: string | null): string {
+  return (path ?? "").replaceAll("\\", "/").replace(/^\/+|\/+$/g, "");
+}
+
+export function createBrowseNodeId(collection: string, path = ""): string {
+  const normalizedPath = normalizeBrowsePath(path);
+  return normalizedPath
+    ? `folder:${collection}:${normalizedPath}`
+    : `collection:${collection}`;
+}
+
+function createNode(options: {
+  kind: BrowseTreeNode["kind"];
+  collection: string;
+  path: string;
+  name: string;
+  depth: number;
+}): BrowseTreeNode {
+  return {
+    id: createBrowseNodeId(options.collection, options.path),
+    kind: options.kind,
+    collection: options.collection,
+    path: options.path,
+    name: options.name,
+    depth: options.depth,
+    documentCount: 0,
+    directDocumentCount: 0,
+    children: [],
+  };
+}
+
+function sortNodes(nodes: BrowseTreeNode[]): void {
+  nodes.sort((a, b) => a.name.localeCompare(b.name));
+  for (const node of nodes) {
+    sortNodes(node.children);
+  }
+}
+
+export function buildBrowseTree(
+  collections: BrowseCollectionLike[],
+  documents: BrowseDocumentLike[]
+): BrowseTreeNode[] {
+  const roots = new Map<string, BrowseTreeNode>();
+
+  for (const collection of collections) {
+    roots.set(
+      collection.name,
+      createNode({
+        kind: "collection",
+        collection: collection.name,
+        path: "",
+        name: collection.name,
+        depth: 0,
+      })
+    );
+  }
+
+  for (const doc of documents) {
+    if (!doc.active) {
+      continue;
+    }
+
+    let root = roots.get(doc.collection);
+    if (!root) {
+      root = createNode({
+        kind: "collection",
+        collection: doc.collection,
+        path: "",
+        name: doc.collection,
+        depth: 0,
+      });
+      roots.set(doc.collection, root);
+    }
+
+    root.documentCount += 1;
+
+    const normalizedRelPath = normalizeBrowsePath(doc.relPath);
+    const parts = normalizedRelPath.split("/").filter(Boolean);
+    const folderParts = parts.slice(0, -1);
+
+    if (folderParts.length === 0) {
+      root.directDocumentCount += 1;
+      continue;
+    }
+
+    let current = root;
+    let currentPath = "";
+    for (const part of folderParts) {
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+      let next = current.children.find((child) => child.path === currentPath);
+      if (!next) {
+        next = createNode({
+          kind: "folder",
+          collection: doc.collection,
+          path: currentPath,
+          name: part,
+          depth: current.depth + 1,
+        });
+        current.children.push(next);
+      }
+      next.documentCount += 1;
+      current = next;
+    }
+
+    current.directDocumentCount += 1;
+  }
+
+  const sortedRoots = [...roots.values()].sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+  for (const root of sortedRoots) {
+    sortNodes(root.children);
+  }
+  return sortedRoots;
+}
+
+export function findBrowseNode(
+  roots: BrowseTreeNode[],
+  collection?: string | null,
+  path?: string | null
+): BrowseTreeNode | null {
+  if (!collection) {
+    return null;
+  }
+
+  const root = roots.find((node) => node.collection === collection);
+  if (!root) {
+    return null;
+  }
+
+  const normalizedPath = normalizeBrowsePath(path);
+  if (!normalizedPath) {
+    return root;
+  }
+
+  const queue = [...root.children];
+  while (queue.length > 0) {
+    const node = queue.shift();
+    if (!node) {
+      continue;
+    }
+    if (node.path === normalizedPath) {
+      return node;
+    }
+    queue.push(...node.children);
+  }
+
+  return null;
+}
+
+export function getBrowseAncestorIds(
+  collection?: string | null,
+  path?: string | null
+): string[] {
+  if (!collection) {
+    return [];
+  }
+
+  const normalizedPath = normalizeBrowsePath(path);
+  const ids = [createBrowseNodeId(collection)];
+  if (!normalizedPath) {
+    return ids;
+  }
+
+  const parts = normalizedPath.split("/").filter(Boolean);
+  let currentPath = "";
+  for (const part of parts) {
+    currentPath = currentPath ? `${currentPath}/${part}` : part;
+    ids.push(createBrowseNodeId(collection, currentPath));
+  }
+  return ids;
+}
+
+export function getImmediateChildFolders(
+  roots: BrowseTreeNode[],
+  collection?: string | null,
+  path?: string | null
+): BrowseTreeNode[] {
+  const node = findBrowseNode(roots, collection, path);
+  return node?.children ?? [];
+}

package/src/serve/public/app.tsx

@@ -7,6 +7,7 @@ import { ShortcutHelpModal } from "./components/ShortcutHelpModal";
 import { WorkspaceTabs } from "./components/WorkspaceTabs";
 import { CaptureModalProvider, useCaptureModal } from "./hooks/useCaptureModal";
 import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
+import { WorkspaceProvider } from "./hooks/useWorkspace";
 import { parseDocumentDeepLink } from "./lib/deep-links";
 import { saveRecentDocument } from "./lib/navigation-state";
 import {
@@ -16,6 +17,7 @@ import {
   loadWorkspaceState,
   saveWorkspaceState,
   updateActiveTabLocation,
+  updateActiveTabBrowseState,
   type WorkspaceState,
 } from "./lib/workspace-tabs";
 import Ask from "./pages/Ask";
@@ -40,7 +42,12 @@ type Route =
   | "/connectors";
 type Navigate = (to: string | number) => void;
 
-const routes: Record<Route, React.ComponentType<{ navigate: Navigate }>> = {
+interface RoutePageProps {
+  navigate: Navigate;
+  location?: string;
+}
+
+const routes: Record<Route, React.ComponentType<RoutePageProps>> = {
   "/": Dashboard,
   "/search": Search,
   "/browse": Browse,
@@ -130,6 +137,7 @@ function AppContent({
 
   const basePath = location.split("?")[0] as Route;
   const Page = routes[basePath] || Dashboard;
+  const pageKey = basePath === "/browse" ? basePath : location;
 
   return (
     <>
@@ -142,7 +150,7 @@ function AppContent({
           tabs={workspace.tabs}
         />
         <div className="flex-1">
-          <Page key={location} navigate={navigate} />
+          <Page key={pageKey} location={location} navigate={navigate} />
         </div>
         <footer className="border-t border-border/30 bg-background/60 py-6 text-center text-sm backdrop-blur-sm">
           <div className="ornament mx-auto mb-4 max-w-[8rem] text-muted-foreground/20">
@@ -293,19 +301,35 @@ function App() {
     });
   }, []);
 
+  const updateActiveBrowseState = useCallback(
+    (nextBrowseState: Parameters<typeof updateActiveTabBrowseState>[1]) => {
+      setWorkspace((current) =>
+        updateActiveTabBrowseState(current, nextBrowseState)
+      );
+    },
+    []
+  );
+
   return (
-    <CaptureModalProvider>
-      <AppContent
-        location={location}
-        navigate={navigate}
-        onActivateTab={activateTab}
-        onCloseTab={closeTab}
-        onNewTab={openNewTab}
-        setShortcutHelpOpen={setShortcutHelpOpen}
-        shortcutHelpOpen={shortcutHelpOpen}
-        workspace={workspace}
-      />
-    </CaptureModalProvider>
+    <WorkspaceProvider
+      value={{
+        activeTab: activeTab ?? null,
+        updateActiveTabBrowseState: updateActiveBrowseState,
+      }}
+    >
+      <CaptureModalProvider>
+        <AppContent
+          location={location}
+          navigate={navigate}
+          onActivateTab={activateTab}
+          onCloseTab={closeTab}
+          onNewTab={openNewTab}
+          setShortcutHelpOpen={setShortcutHelpOpen}
+          shortcutHelpOpen={shortcutHelpOpen}
+          workspace={workspace}
+        />
+      </CaptureModalProvider>
+    </WorkspaceProvider>
   );
 }
 

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

@@ -247,22 +247,22 @@ export function BacklinksPanel({
 
   return (
     <Collapsible
-      className={cn("", className)}
+      className={cn("px-1", className)}
       onOpenChange={setIsOpen}
       open={isOpen}
     >
-      {/* Panel header - drawer handle aesthetic */}
+      {/* Panel header */}
       <CollapsibleTrigger
         aria-label={`${isOpen ? "Collapse" : "Expand"} backlinks panel`}
         className={cn(
           "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 */}
-        <span className="flex size-4 shrink-0 items-center justify-center text-[#d4a053]/50">
+        <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground/50">
           {isOpen ? (
             <ChevronDownIcon className="size-3.5 transition-transform duration-200" />
           ) : (
@@ -270,12 +270,12 @@ export function BacklinksPanel({
           )}
         </span>
 
-        {/* Title - brass label */}
-        <span className="flex-1 text-left font-mono text-[11px] text-[#d4a053]/70 uppercase tracking-wider">
+        {/* Title */}
+        <span className="flex-1 text-left font-mono text-[10px] text-muted-foreground/60 uppercase tracking-[0.15em]">
           Backlinks
         </span>
 
-        {/* Count badge - teal for active, muted otherwise */}
+        {/* Count badge */}
         {!loading && (
           <span
             className={cn(
@@ -283,7 +283,7 @@ export function BacklinksPanel({
               "font-mono text-[10px] tabular-nums",
               "transition-colors duration-150",
               totalCount > 0
-                ? "bg-[#4db8a8]/15 text-[#4db8a8]"
+                ? "bg-primary/12 text-primary"
                 : "bg-muted/20 text-muted-foreground/60"
             )}
           >
@@ -291,9 +291,9 @@ export function BacklinksPanel({
           </span>
         )}
 
-        {/* Loading indicator - teal spinner */}
+        {/* Loading indicator */}
         {loading && (
-          <span className="size-3 animate-spin rounded-full border border-[#d4a053]/20 border-t-[#4db8a8]/60" />
+          <span className="size-3 animate-spin rounded-full border border-muted/30 border-t-primary/60" />
         )}
       </CollapsibleTrigger>
 

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

@@ -0,0 +1,194 @@
+import { ChevronRight, FileText, FolderOpen, StarIcon } from "lucide-react";
+
+import type { BrowseTreeNode } from "../../browse-tree";
+import type { BrowseDocument } from "../lib/browse";
+
+import { getExtBadgeVariant } from "../lib/browse";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Card, CardContent } from "./ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+
+export function BrowseDetailPane({
+  childFolders,
+  docs,
+  docsLoading,
+  favoriteDocHrefs,
+  onLoadMore,
+  onOpenDoc,
+  onSelectCollection,
+  onSelectFolder,
+  onToggleFavoriteDocument,
+  selectedNode,
+  selectedPath,
+  total,
+}: {
+  childFolders: BrowseTreeNode[];
+  docs: BrowseDocument[];
+  docsLoading: boolean;
+  favoriteDocHrefs: string[];
+  onLoadMore: () => void;
+  onOpenDoc: (uri: string) => void;
+  onSelectCollection: (collection: string) => void;
+  onSelectFolder: (collection: string, path?: string) => void;
+  onToggleFavoriteDocument: (doc: BrowseDocument) => void;
+  selectedNode: BrowseTreeNode | null;
+  selectedPath: string;
+  total: number;
+}) {
+  if (docsLoading && docs.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-20">
+        <div className="text-muted-foreground">Loading folder contents...</div>
+      </div>
+    );
+  }
+
+  if (docs.length === 0 && childFolders.length === 0) {
+    return (
+      <div className="py-20 text-center">
+        <FileText className="mx-auto mb-4 size-12 text-muted-foreground" />
+        <h3 className="mb-2 font-medium text-lg">No documents found</h3>
+        <p className="text-muted-foreground">
+          {selectedPath
+            ? "This folder is empty"
+            : "This collection root has no documents yet"}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {childFolders.map((folder) => (
+          <Card key={folder.id}>
+            <CardContent className="space-y-3 py-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate font-medium">{folder.name}</div>
+                  <div className="text-muted-foreground text-sm">
+                    {folder.documentCount} docs
+                  </div>
+                </div>
+                <FolderOpen className="size-4 text-muted-foreground" />
+              </div>
+              <Button
+                className="w-full justify-between"
+                onClick={() => onSelectFolder(folder.collection, folder.path)}
+                variant="outline"
+              >
+                Open folder
+                <ChevronRight className="size-4" />
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground text-sm">
+            {selectedNode?.directDocumentCount ?? docs.length} direct docs
+          </div>
+          <div className="text-muted-foreground text-sm">
+            {selectedNode?.documentCount ?? total} total docs in scope
+          </div>
+        </div>
+
+        {docs.length > 0 && (
+          <Table className="table-fixed">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[68%]">Document</TableHead>
+                <TableHead className="w-[220px]">Collection</TableHead>
+                <TableHead className="w-[72px] text-right">Type</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {docs.map((doc) => (
+                <TableRow
+                  className="group cursor-pointer"
+                  key={doc.docid}
+                  onClick={() => onOpenDoc(doc.uri)}
+                >
+                  <TableCell className="align-top whitespace-normal">
+                    <div className="flex items-center gap-2">
+                      <FileText className="size-4 shrink-0 text-muted-foreground" />
+                      <div className="min-w-0">
+                        <div className="break-words font-medium leading-tight transition-colors group-hover:text-primary">
+                          {doc.title || doc.relPath}
+                        </div>
+                        <div className="break-all font-mono text-muted-foreground text-xs leading-relaxed">
+                          {doc.relPath}
+                        </div>
+                      </div>
+                      <Button
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onToggleFavoriteDocument(doc);
+                        }}
+                        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>
+                  <TableCell className="align-top whitespace-normal">
+                    <Badge
+                      className="inline-flex min-h-[2.5rem] max-w-[180px] cursor-pointer items-center px-3 py-1 text-center whitespace-normal break-words font-mono text-xs leading-tight transition-colors hover:border-primary hover:text-primary"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onSelectCollection(doc.collection);
+                      }}
+                      variant="outline"
+                    >
+                      {doc.collection}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="align-top text-right">
+                    <Badge
+                      className="font-mono text-xs"
+                      variant={getExtBadgeVariant(doc.sourceExt)}
+                    >
+                      {doc.sourceExt}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+
+        {docs.length < total && (
+          <div className="flex justify-center pt-4">
+            <Button
+              disabled={docsLoading}
+              onClick={onLoadMore}
+              variant="outline"
+            >
+              {docsLoading ? "Loading..." : "Load More"}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { ChevronRight, FolderOpen, StarIcon } from "lucide-react";
+
+import type { BrowseTreeNode } from "../../browse-tree";
+
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Card, CardContent } from "./ui/card";
+
+export function BrowseOverview({
+  collections,
+  favoriteCollections,
+  onSelectCollection,
+  onToggleFavoriteCollection,
+}: {
+  collections: BrowseTreeNode[];
+  favoriteCollections: string[];
+  onSelectCollection: (collection: string) => void;
+  onToggleFavoriteCollection: (collection: string) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {collections.map((collection) => (
+          <Card key={collection.id}>
+            <CardContent className="space-y-4 py-5">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <h2 className="font-semibold text-lg">{collection.name}</h2>
+                  <p className="text-muted-foreground text-sm">
+                    {collection.documentCount} indexed docs
+                  </p>
+                </div>
+                <Button
+                  onClick={() =>
+                    onToggleFavoriteCollection(collection.collection)
+                  }
+                  size="icon-sm"
+                  variant="ghost"
+                >
+                  <StarIcon
+                    className={`size-4 ${
+                      favoriteCollections.includes(collection.collection)
+                        ? "fill-current text-secondary"
+                        : "text-muted-foreground"
+                    }`}
+                  />
+                </Button>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="outline">
+                  {collection.children.length} folders
+                </Badge>
+                <Badge variant="outline">
+                  {collection.directDocumentCount} root docs
+                </Badge>
+              </div>
+              <Button
+                className="w-full justify-between"
+                onClick={() => onSelectCollection(collection.collection)}
+                variant="outline"
+              >
+                Open collection
+                <ChevronRight className="size-4" />
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {collections.length === 0 && (
+        <div className="py-20 text-center">
+          <FolderOpen className="mx-auto mb-4 size-12 text-muted-foreground" />
+          <h3 className="mb-2 font-medium text-lg">No collections yet</h3>
+          <p className="text-muted-foreground">
+            Add a collection to populate the workspace tree.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}