@gmickel/gno 1.36.0 → 1.37.0

package/src/serve/public/app.tsx

@@ -1,9 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { createRoot } from "react-dom/client";
 
 import { HelpButton } from "./components/HelpButton";
-import { QuickSwitcher } from "./components/QuickSwitcher";
-import { ShortcutHelpModal } from "./components/ShortcutHelpModal";
 import { WorkspaceTabs } from "./components/WorkspaceTabs";
 import { CaptureModalProvider, useCaptureModal } from "./hooks/useCaptureModal";
 import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
@@ -21,17 +26,28 @@ import {
   updateActiveTabBrowseState,
   type WorkspaceState,
 } from "./lib/workspace-tabs";
-import Ask from "./pages/Ask";
-import Browse from "./pages/Browse";
 import ClipperPairing from "./pages/ClipperPairing";
-import Collections from "./pages/Collections";
-import Connectors from "./pages/Connectors";
 import Dashboard from "./pages/Dashboard";
-import DocumentEditor from "./pages/DocumentEditor";
-import DocView from "./pages/DocView";
-import GraphView from "./pages/GraphView";
-import Search from "./pages/Search";
-import TraceHistory from "./pages/TraceHistory";
+
+const QuickSwitcher = lazy(() =>
+  import("./components/QuickSwitcher").then((module) => ({
+    default: module.QuickSwitcher,
+  }))
+);
+const ShortcutHelpModal = lazy(() =>
+  import("./components/ShortcutHelpModal").then((module) => ({
+    default: module.ShortcutHelpModal,
+  }))
+);
+const Search = lazy(() => import("./pages/Search"));
+const Browse = lazy(() => import("./pages/Browse"));
+const DocView = lazy(() => import("./pages/DocView"));
+const DocumentEditor = lazy(() => import("./pages/DocumentEditor"));
+const Collections = lazy(() => import("./pages/Collections"));
+const Connectors = lazy(() => import("./pages/Connectors"));
+const Ask = lazy(() => import("./pages/Ask"));
+const GraphView = lazy(() => import("./pages/GraphView"));
+const TraceHistory = lazy(() => import("./pages/TraceHistory"));
 
 type Route =
   | "/"
@@ -155,7 +171,9 @@ function AppContent({
           tabs={workspace.tabs}
         />
         <div className="flex-1">
-          <Page key={pageKey} location={location} navigate={navigate} />
+          <Suspense fallback={null}>
+            <Page key={pageKey} location={location} navigate={navigate} />
+          </Suspense>
         </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">
@@ -217,17 +235,19 @@ function AppContent({
         </footer>
       </div>
       <HelpButton onClick={() => setShortcutHelpOpen(true)} />
-      <QuickSwitcher
-        location={location}
-        navigate={(to) => navigate(to)}
-        onCreateNote={openCapture}
-        onOpenChange={setQuickSwitcherOpen}
-        open={quickSwitcherOpen}
-      />
-      <ShortcutHelpModal
-        onOpenChange={setShortcutHelpOpen}
-        open={shortcutHelpOpen}
-      />
+      <Suspense fallback={null}>
+        <QuickSwitcher
+          location={location}
+          navigate={(to) => navigate(to)}
+          onCreateNote={openCapture}
+          onOpenChange={setQuickSwitcherOpen}
+          open={quickSwitcherOpen}
+        />
+        <ShortcutHelpModal
+          onOpenChange={setShortcutHelpOpen}
+          open={shortcutHelpOpen}
+        />
+      </Suspense>
     </>
   );
 }

package/src/serve/public/components/ai-elements/code-block.tsx

@@ -33,14 +33,19 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
   code: "",
 });
 
-const highlighterPromise = createHighlighter({
-  engine: createJavaScriptRegexEngine(),
-  langs: ["text"],
-  themes: ["one-light", "one-dark-pro"],
-});
+let highlighterPromise: ReturnType<typeof createHighlighter> | null = null;
+
+function getHighlighterRuntime(): ReturnType<typeof createHighlighter> {
+  highlighterPromise ??= createHighlighter({
+    engine: createJavaScriptRegexEngine(),
+    langs: ["text"],
+    themes: ["one-light", "one-dark-pro"],
+  });
+  return highlighterPromise;
+}
 
 async function getHighlighter(language: BundledLanguage | "text") {
-  const highlighter = await highlighterPromise;
+  const highlighter = await getHighlighterRuntime();
   if (!highlighter.getLoadedLanguages().includes(language)) {
     await highlighter.loadLanguage(language);
   }

package/src/serve/public/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="referrer" content="no-referrer" />
     <title>GNO - Local Knowledge Index</title>

package/src/serve/public/lib/code-language.ts

@@ -1,4 +1,6 @@
-import { bundledLanguages, type BundledLanguage } from "shiki";
+import type { BundledLanguage } from "shiki";
+
+import { BUNDLED_LANGUAGE_IDS } from "./shiki-language-ids";
 
 export type CodeLanguage = BundledLanguage | "text";
 
@@ -41,7 +43,7 @@ export function resolveCodeLanguage(
     return "text";
   }
 
-  if (aliased in bundledLanguages) {
+  if (BUNDLED_LANGUAGE_IDS.has(aliased)) {
     return aliased as BundledLanguage;
   }
 

package/src/serve/public/lib/shiki-language-ids.ts

@@ -0,0 +1,335 @@
+/** Shiki bundled language ids only. Do not import grammar modules. */
+export const BUNDLED_LANGUAGE_IDS: ReadonlySet<string> = new Set([
+  "1c",
+  "1c-query",
+  "abap",
+  "actionscript-3",
+  "ada",
+  "adoc",
+  "angular-html",
+  "angular-ts",
+  "apache",
+  "apex",
+  "apl",
+  "applescript",
+  "ara",
+  "asciidoc",
+  "asm",
+  "astro",
+  "awk",
+  "ballerina",
+  "bash",
+  "bat",
+  "batch",
+  "be",
+  "beancount",
+  "berry",
+  "bibtex",
+  "bicep",
+  "bird",
+  "bird2",
+  "blade",
+  "bsl",
+  "c",
+  "c#",
+  "c++",
+  "c3",
+  "cadence",
+  "cairo",
+  "cdc",
+  "cjs",
+  "clarity",
+  "clj",
+  "clojure",
+  "closure-templates",
+  "cmake",
+  "cmd",
+  "cobol",
+  "codeowners",
+  "codeql",
+  "coffee",
+  "coffeescript",
+  "common-lisp",
+  "console",
+  "coq",
+  "cpp",
+  "cql",
+  "crystal",
+  "cs",
+  "csharp",
+  "css",
+  "csv",
+  "cts",
+  "cue",
+  "cypher",
+  "d",
+  "dart",
+  "dax",
+  "desktop",
+  "diff",
+  "docker",
+  "dockerfile",
+  "dotenv",
+  "dream-maker",
+  "edge",
+  "elisp",
+  "elixir",
+  "elm",
+  "emacs-lisp",
+  "erb",
+  "erl",
+  "erlang",
+  "f",
+  "f#",
+  "f03",
+  "f08",
+  "f18",
+  "f77",
+  "f90",
+  "f95",
+  "fennel",
+  "fish",
+  "fluent",
+  "for",
+  "fortran-fixed-form",
+  "fortran-free-form",
+  "fs",
+  "fsharp",
+  "fsl",
+  "ftl",
+  "gd",
+  "gdresource",
+  "gdscript",
+  "gdshader",
+  "genie",
+  "gherkin",
+  "git-commit",
+  "git-rebase",
+  "gjs",
+  "gleam",
+  "glimmer-js",
+  "glimmer-ts",
+  "glsl",
+  "gn",
+  "gnuplot",
+  "go",
+  "gql",
+  "graphql",
+  "groovy",
+  "gts",
+  "hack",
+  "haml",
+  "handlebars",
+  "haskell",
+  "haxe",
+  "hbs",
+  "hcl",
+  "hjson",
+  "hlsl",
+  "hs",
+  "html",
+  "html-derivative",
+  "http",
+  "hurl",
+  "hxml",
+  "hy",
+  "imba",
+  "ini",
+  "jade",
+  "java",
+  "javascript",
+  "jinja",
+  "jison",
+  "jl",
+  "js",
+  "json",
+  "json5",
+  "jsonc",
+  "jsonl",
+  "jsonnet",
+  "jssm",
+  "jsx",
+  "julia",
+  "just",
+  "kdl",
+  "kotlin",
+  "kql",
+  "kt",
+  "kts",
+  "kusto",
+  "latex",
+  "lean",
+  "lean4",
+  "less",
+  "liquid",
+  "lisp",
+  "lit",
+  "llvm",
+  "log",
+  "logo",
+  "lua",
+  "luau",
+  "make",
+  "makefile",
+  "markdown",
+  "marko",
+  "matlab",
+  "mbt",
+  "mbti",
+  "md",
+  "mdc",
+  "mdx",
+  "mediawiki",
+  "mermaid",
+  "mips",
+  "mipsasm",
+  "mjs",
+  "mmd",
+  "mojo",
+  "moonbit",
+  "move",
+  "mts",
+  "nar",
+  "narrat",
+  "nextflow",
+  "nextflow-groovy",
+  "nf",
+  "nginx",
+  "nim",
+  "nix",
+  "nu",
+  "nushell",
+  "objc",
+  "objective-c",
+  "objective-cpp",
+  "ocaml",
+  "odin",
+  "openscad",
+  "pascal",
+  "perl",
+  "perl6",
+  "php",
+  "pkl",
+  "plsql",
+  "po",
+  "polar",
+  "postcss",
+  "pot",
+  "potx",
+  "powerquery",
+  "powershell",
+  "prisma",
+  "prolog",
+  "properties",
+  "proto",
+  "protobuf",
+  "ps",
+  "ps1",
+  "pug",
+  "puppet",
+  "purescript",
+  "py",
+  "python",
+  "ql",
+  "qml",
+  "qmldir",
+  "qss",
+  "r",
+  "racket",
+  "raku",
+  "razor",
+  "rb",
+  "reg",
+  "regex",
+  "regexp",
+  "rel",
+  "riscv",
+  "ron",
+  "rosmsg",
+  "rs",
+  "rst",
+  "ruby",
+  "rust",
+  "sas",
+  "sass",
+  "scad",
+  "scala",
+  "scheme",
+  "scss",
+  "sdbl",
+  "sh",
+  "shader",
+  "shaderlab",
+  "shell",
+  "shellscript",
+  "shellsession",
+  "smalltalk",
+  "solidity",
+  "soy",
+  "sparql",
+  "spl",
+  "splunk",
+  "sql",
+  "ssh-config",
+  "stata",
+  "styl",
+  "stylus",
+  "surql",
+  "surrealql",
+  "svelte",
+  "swift",
+  "system-verilog",
+  "systemd",
+  "talon",
+  "talonscript",
+  "tasl",
+  "tcl",
+  "templ",
+  "terraform",
+  "tex",
+  "tf",
+  "tfvars",
+  "toml",
+  "tres",
+  "ts",
+  "ts-tags",
+  "tscn",
+  "tsp",
+  "tsv",
+  "tsx",
+  "turtle",
+  "twig",
+  "typ",
+  "typescript",
+  "typespec",
+  "typst",
+  "v",
+  "vala",
+  "vb",
+  "verilog",
+  "vhdl",
+  "vim",
+  "viml",
+  "vimscript",
+  "vue",
+  "vue-html",
+  "vue-vine",
+  "vy",
+  "vyper",
+  "wasm",
+  "wenyan",
+  "wgsl",
+  "wiki",
+  "wikitext",
+  "wit",
+  "wl",
+  "wolfram",
+  "xml",
+  "xsl",
+  "yaml",
+  "yml",
+  "zenscript",
+  "zig",
+  "zsh",
+  "文言",
+]);

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

@@ -16,18 +16,12 @@ import {
   Search,
   StarIcon,
 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useState } from "react";
 
 import type { AppStatusResponse, HealthActionKind } from "../../status-model";
 
-import { AddCollectionDialog } from "../components/AddCollectionDialog";
-import { AIModelSelector } from "../components/AIModelSelector";
-import { BootstrapStatus } from "../components/BootstrapStatus";
 import { CaptureButton } from "../components/CaptureButton";
-import { FirstRunWizard } from "../components/FirstRunWizard";
 import { GnoLogo } from "../components/GnoLogo";
-import { HealthCenter } from "../components/HealthCenter";
-import { IndexingProgress } from "../components/IndexingProgress";
 import { Button } from "../components/ui/button";
 import {
   Card,
@@ -93,6 +87,37 @@ interface ModelDownloadStatus {
   startedAt: number | null;
 }
 
+const AddCollectionDialog = lazy(() =>
+  import("../components/AddCollectionDialog").then((module) => ({
+    default: module.AddCollectionDialog,
+  }))
+);
+const AIModelSelector = lazy(() =>
+  import("../components/AIModelSelector").then((module) => ({
+    default: module.AIModelSelector,
+  }))
+);
+const BootstrapStatus = lazy(() =>
+  import("../components/BootstrapStatus").then((module) => ({
+    default: module.BootstrapStatus,
+  }))
+);
+const FirstRunWizard = lazy(() =>
+  import("../components/FirstRunWizard").then((module) => ({
+    default: module.FirstRunWizard,
+  }))
+);
+const HealthCenter = lazy(() =>
+  import("../components/HealthCenter").then((module) => ({
+    default: module.HealthCenter,
+  }))
+);
+const IndexingProgress = lazy(() =>
+  import("../components/IndexingProgress").then((module) => ({
+    default: module.IndexingProgress,
+  }))
+);
+
 interface PageProps {
   navigate: (to: string | number) => void;
 }
@@ -397,7 +422,9 @@ export default function Dashboard({ navigate }: PageProps) {
             </div>
 
             <div className="flex flex-wrap items-center gap-3 md:justify-end">
-              <AIModelSelector appStatus={status} showLabel={false} />
+              <Suspense fallback={null}>
+                <AIModelSelector appStatus={status} showLabel={false} />
+              </Suspense>
               <Button
                 disabled={syncing}
                 onClick={() => void handleSync()}
@@ -416,14 +443,16 @@ export default function Dashboard({ navigate }: PageProps) {
 
           {syncJobId && (!status || status.onboarding.ready) && (
             <div className="mt-4 rounded-lg border border-border/50 bg-background/50 p-4">
-              <IndexingProgress
-                jobId={syncJobId}
-                onComplete={handleSyncComplete}
-                onError={() => {
-                  setSyncing(false);
-                  setSyncJobId(null);
-                }}
-              />
+              <Suspense fallback={null}>
+                <IndexingProgress
+                  jobId={syncJobId}
+                  onComplete={handleSyncComplete}
+                  onError={() => {
+                    setSyncing(false);
+                    setSyncJobId(null);
+                  }}
+                />
+              </Suspense>
             </div>
           )}
         </div>
@@ -432,17 +461,19 @@ export default function Dashboard({ navigate }: PageProps) {
       <main className="mx-auto max-w-6xl p-8">
         {status && !status.onboarding.ready && (
           <section className="mb-10">
-            <FirstRunWizard
-              onboarding={status.onboarding}
-              onAddCollection={handleOpenAddCollection}
-              onDownloadModels={() => void handleDownloadModels()}
-              onEmbed={() => void handleEmbedNow()}
-              onSync={() => void handleSync()}
-              onSyncComplete={handleSyncComplete}
-              embedding={busyAction === "embed"}
-              syncJobId={syncJobId}
-              syncing={syncing}
-            />
+            <Suspense fallback={null}>
+              <FirstRunWizard
+                embedding={busyAction === "embed"}
+                onAddCollection={handleOpenAddCollection}
+                onDownloadModels={() => void handleDownloadModels()}
+                onEmbed={() => void handleEmbedNow()}
+                onboarding={status.onboarding}
+                onSync={() => void handleSync()}
+                onSyncComplete={handleSyncComplete}
+                syncJobId={syncJobId}
+                syncing={syncing}
+              />
+            </Suspense>
           </section>
         )}
 
@@ -519,22 +550,26 @@ export default function Dashboard({ navigate }: PageProps) {
 
         {status && (
           <div className="mb-10">
-            <HealthCenter
-              busyAction={busyAction}
-              health={status.health}
-              onAction={handleHealthAction}
-              resident={status.resident}
-            />
+            <Suspense fallback={null}>
+              <HealthCenter
+                busyAction={busyAction}
+                health={status.health}
+                onAction={handleHealthAction}
+                resident={status.resident}
+              />
+            </Suspense>
           </div>
         )}
 
         {status && (
           <div className="mb-10">
-            <BootstrapStatus
-              activation={status.activation}
-              bootstrap={status.bootstrap}
-              onDownloadModels={() => void handleDownloadModels()}
-            />
+            <Suspense fallback={null}>
+              <BootstrapStatus
+                activation={status.activation}
+                bootstrap={status.bootstrap}
+                onDownloadModels={() => void handleDownloadModels()}
+              />
+            </Suspense>
           </div>
         )}
 
@@ -791,12 +826,14 @@ export default function Dashboard({ navigate }: PageProps) {
       </main>
 
       <CaptureButton onClick={() => openCapture()} />
-      <AddCollectionDialog
-        initialPath={initialCollectionPath}
-        onOpenChange={setAddDialogOpen}
-        onSuccess={() => void loadStatus()}
-        open={addDialogOpen}
-      />
+      <Suspense fallback={null}>
+        <AddCollectionDialog
+          initialPath={initialCollectionPath}
+          onOpenChange={setAddDialogOpen}
+          onSuccess={() => void loadStatus()}
+          open={addDialogOpen}
+        />
+      </Suspense>
     </div>
   );
 }

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

@@ -43,10 +43,6 @@ import {
 import { Loader } from "../components/ai-elements/loader";
 import { BacklinksPanel } from "../components/BacklinksPanel";
 import { MarkdownPreview } from "../components/editor";
-import {
-  FrontmatterDisplay,
-  parseFrontmatter,
-} from "../components/FrontmatterDisplay";
 import {
   OutgoingLinksPanel,
   type OutgoingLink,
@@ -99,6 +95,10 @@ import {
   type SectionLinkNoticeKind,
 } from "../lib/section-links";
 import { subscribeWorkspaceActionRequest } from "../lib/workspace-events";
+import {
+  FrontmatterDisplay,
+  parseFrontmatter,
+} from "./doc-frontmatter-display";
 
 /** Lazy so pdfjs is never pulled for non-PDF documents. */
 const PdfViewer = lazy(() => import("./doc-pdf-viewer"));