@gmickel/gno 0.29.1 → 0.30.0

package/src/serve/public/app.tsx

@@ -144,45 +144,48 @@ function AppContent({
         <div className="flex-1">
           <Page key={location} navigate={navigate} />
         </div>
-        <footer className="border-t border-border/50 bg-background/80 py-4 text-center text-muted-foreground text-sm">
-          <div className="flex items-center justify-center gap-4">
+        <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">
+            <span className="text-[10px]">◆</span>
+          </div>
+          <div className="flex items-center justify-center gap-5 text-muted-foreground/60">
             <button
-              className="transition-colors hover:text-foreground"
+              className="transition-colors duration-300 hover:text-primary"
               onClick={() => navigate("/collections")}
               type="button"
             >
               Collections
             </button>
-            <span className="text-border">·</span>
+            <span className="text-border/30">—</span>
             <a
-              className="transition-colors hover:text-foreground"
+              className="transition-colors duration-300 hover:text-primary"
               href="https://github.com/gmickel/gno"
               rel="noopener noreferrer"
               target="_blank"
             >
               GitHub
             </a>
-            <span className="text-border">·</span>
+            <span className="text-border/30">—</span>
             <a
-              className="transition-colors hover:text-foreground"
+              className="transition-colors duration-300 hover:text-primary"
               href="https://discord.gg/nHEmyJB5tg"
               rel="noopener noreferrer"
               target="_blank"
             >
               Discord
             </a>
-            <span className="text-border">·</span>
+            <span className="text-border/30">—</span>
             <a
-              className="transition-colors hover:text-foreground"
+              className="transition-colors duration-300 hover:text-primary"
               href="https://gno.sh"
               rel="noopener noreferrer"
               target="_blank"
             >
               gno.sh
             </a>
-            <span className="text-border">·</span>
+            <span className="text-border/30">—</span>
             <a
-              className="transition-colors hover:text-foreground"
+              className="transition-colors duration-300 hover:text-primary"
               href="https://twitter.com/gmickel"
               rel="noopener noreferrer"
               target="_blank"

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

@@ -20,16 +20,16 @@ export function WorkspaceTabs({
   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">
+    <div className="border-border/40 border-b bg-background/95 backdrop-blur-sm">
+      <div className="mx-auto flex max-w-7xl items-center gap-1.5 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 ${
+              className={`group flex items-center rounded-lg border px-2 py-1 transition-all duration-200 ${
                 active
-                  ? "border-primary/40 bg-primary/10 text-primary"
-                  : "border-border/60 bg-card/70"
+                  ? "border-primary/40 bg-primary/10 text-primary shadow-[0_0_12px_-4px_hsl(var(--primary)/0.25)]"
+                  : "border-border/30 bg-card/40 hover:border-border/60 hover:bg-card/70"
               }`}
               key={tab.id}
             >
@@ -41,6 +41,7 @@ export function WorkspaceTabs({
                 {tab.label}
               </button>
               <Button
+                className="opacity-50 transition-opacity group-hover:opacity-100"
                 onClick={() => onClose(tab.id)}
                 size="icon-sm"
                 variant="ghost"
@@ -50,8 +51,13 @@ export function WorkspaceTabs({
             </div>
           );
         })}
-        <Button onClick={onNewTab} size="sm" variant="outline">
-          <PlusIcon className="mr-2 size-4" />
+        <Button
+          className="border-dashed"
+          onClick={onNewTab}
+          size="sm"
+          variant="outline"
+        >
+          <PlusIcon className="mr-1.5 size-3.5" />
           New Tab
         </Button>
       </div>

package/src/serve/public/globals.css

@@ -98,16 +98,25 @@ body {
   margin: 0;
   min-height: 100vh;
 
-  /* Subtle grid pattern */
+  /* Layered background: teal radial glow + refined grid */
   background-image:
-    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-  background-size: 40px 40px;
+    radial-gradient(
+      ellipse at 50% 0%,
+      hsl(var(--primary) / 0.05) 0%,
+      transparent 50%
+    ),
+    linear-gradient(hsl(var(--foreground) / 0.018) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(var(--foreground) / 0.018) 1px, transparent 1px);
+  background-size:
+    100% 100%,
+    32px 32px,
+    32px 32px;
+  background-attachment: fixed, scroll, scroll;
 }
 
 ::selection {
-  background-color: hsl(var(--primary) / 0.15);
-  color: hsl(var(--primary));
+  background-color: hsl(var(--primary) / 0.25);
+  color: hsl(var(--foreground));
 }
 
 /* Typography */
@@ -117,11 +126,14 @@ h3,
 h4,
 h5,
 h6 {
-  /* System serif for local-first/offline operation */
-  font-family: Georgia, "Times New Roman", serif;
-  line-height: 1.25;
+  /* Distinctive serif stack - offline-safe system fonts */
+  font-family:
+    "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
+    serif;
+  line-height: 1.2;
   font-weight: 600;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
 }
 
 code,
@@ -208,6 +220,44 @@ mark {
 .stagger-4 {
   animation-delay: 0.4s;
 }
+.stagger-5 {
+  animation-delay: 0.5s;
+}
+.stagger-6 {
+  animation-delay: 0.6s;
+}
+
+/* Slide-up reveal with spring-like ease */
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-up {
+  animation: slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+/* Scale entrance */
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scale-in {
+  animation: scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
 
 /* Collapsible animations */
 @keyframes collapse-down {
@@ -283,6 +333,59 @@ mark {
   box-shadow: 0 8px 30px -10px hsl(var(--primary) / 0.2);
 }
 
+/* Text glow for hero / display elements */
+.glow-text {
+  text-shadow:
+    0 0 40px hsl(var(--primary) / 0.3),
+    0 0 80px hsl(var(--primary) / 0.15);
+}
+
+[data-theme="light"] .glow-text {
+  text-shadow: none;
+}
+
+/* Decorative ornamental divider */
+.ornament {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ornament::before,
+.ornament::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    hsl(var(--border)),
+    transparent
+  );
+}
+
+/* Warm glass variant with secondary/gold accent. Reserved for future cards. */
+.glass-warm {
+  background: hsl(var(--card) / 0.8);
+  backdrop-filter: blur(16px) saturate(150%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%);
+  border: 1px solid hsl(var(--secondary) / 0.12);
+  box-shadow: 0 0 30px -10px hsl(var(--secondary) / 0.08);
+}
+
+/* Vignette overlay for atmospheric depth. Requires position: relative on host. */
+.vignette::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 50%,
+    hsl(var(--background) / 0.4) 100%
+  );
+}
+
 /* Focus ring with glow */
 .focus-glow:focus-visible {
   outline: 2px solid hsl(var(--primary));

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

@@ -783,21 +783,30 @@ export default function Ask({ navigate }: PageProps) {
           )}
 
           {conversation.length === 0 && (
-            <div className="py-10 text-center md:py-14">
-              <Sparkles className="mx-auto mb-4 size-12 text-primary/60" />
-              <h2 className="mb-2 font-medium text-lg">Ask anything</h2>
-              <p className="text-muted-foreground">
+            <div className="animate-scale-in py-14 text-center opacity-0 md:py-20">
+              <div className="relative mx-auto mb-6 size-16">
+                <div className="absolute inset-0 animate-pulse-glow rounded-full bg-primary/10" />
+                <Sparkles className="absolute inset-0 m-auto size-8 text-primary/70" />
+              </div>
+              <h2 className="mb-2 text-xl">Ask anything</h2>
+              <p className="mx-auto max-w-sm text-muted-foreground">
                 {answerAvailable
                   ? "Get AI-powered answers with citations from your documents"
                   : "AI answers not available. Install a generation model to enable."}
               </p>
+              <div
+                aria-hidden="true"
+                className="ornament mx-auto mt-6 max-w-[8rem] text-muted-foreground/20"
+              >
+                <span className="text-[10px]">◆</span>
+              </div>
             </div>
           )}
 
           {conversation.map((entry) => (
             <div className="space-y-4" key={entry.id}>
               <div className="flex justify-end">
-                <div className="max-w-[80%] rounded-lg bg-secondary px-4 py-3">
+                <div className="max-w-[80%] rounded-xl bg-secondary px-5 py-3 shadow-[0_0_20px_-8px_hsl(var(--secondary)/0.3)]">
                   <p className="text-foreground">{entry.query}</p>
                 </div>
               </div>
@@ -823,7 +832,7 @@ export default function Ask({ navigate }: PageProps) {
                 {entry.response && (
                   <>
                     {entry.response.answer && (
-                      <div className="prose prose-sm prose-invert max-w-none rounded-lg bg-card/50 p-4">
+                      <div className="prose prose-sm prose-invert max-w-none rounded-lg border border-border/30 bg-card/60 p-5 shadow-[0_0_30px_-10px_hsl(var(--primary)/0.08)]">
                         <p className="whitespace-pre-wrap leading-relaxed">
                           {renderAnswer(
                             entry.response.answer,

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

@@ -129,7 +129,7 @@ function CollectionCard({
 
   return (
     <Card
-      className="group relative cursor-pointer overflow-hidden transition-all hover:border-primary/30 hover:bg-card/90"
+      className="group relative cursor-pointer overflow-hidden transition-all duration-300 hover:border-primary/30 hover:bg-card/90 hover:shadow-[0_0_30px_-12px_hsl(var(--primary)/0.15)]"
       onClick={onBrowse}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {

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

@@ -373,20 +373,26 @@ export default function Dashboard({ navigate }: PageProps) {
         </div>
       )}
 
-      <header className="relative border-border/50 border-b bg-card/50 backdrop-blur-sm">
-        <div className="aurora-glow absolute inset-0 opacity-30" />
-        <div className="relative px-8 py-12">
-          <div className="grid gap-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
+      <header className="relative overflow-hidden border-border/50 border-b bg-card/50 backdrop-blur-sm">
+        <div className="aurora-glow absolute inset-0 opacity-40" />
+        <div className="relative px-8 py-14 md:py-16">
+          <div className="grid gap-8 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
             <div className="min-w-0">
-              <div className="flex items-center gap-3">
-                <GnoLogo className="size-8 shrink-0 text-primary" />
-                <h1 className="font-bold text-4xl text-primary tracking-tight">
+              <div className="flex items-center gap-4">
+                <GnoLogo className="size-10 shrink-0 text-primary" />
+                <h1 className="glow-text font-bold text-5xl text-primary tracking-tighter">
                   GNO
                 </h1>
               </div>
-              <p className="mt-4 text-lg text-muted-foreground">
+              <p className="mt-3 text-lg tracking-wide text-muted-foreground">
                 Your Local Knowledge Index
               </p>
+              <div
+                aria-hidden="true"
+                className="ornament mt-5 max-w-[12rem] text-muted-foreground/30"
+              >
+                <span className="text-xs">✦</span>
+              </div>
             </div>
 
             <div className="flex flex-wrap items-center gap-3 md:justify-end">
@@ -441,7 +447,7 @@ export default function Dashboard({ navigate }: PageProps) {
 
         <nav className="mb-10 flex flex-wrap gap-4">
           <Button
-            className="gap-2"
+            className="gap-2 shadow-[0_0_24px_-6px_hsl(var(--primary)/0.4)]"
             onClick={() => navigate("/search")}
             size="lg"
           >
@@ -449,7 +455,7 @@ export default function Dashboard({ navigate }: PageProps) {
             Search
           </Button>
           <Button
-            className="gap-2"
+            className="gap-2 shadow-[0_0_24px_-6px_hsl(var(--secondary)/0.4)]"
             onClick={() => navigate("/ask")}
             size="lg"
             variant="secondary"
@@ -606,9 +612,9 @@ export default function Dashboard({ navigate }: PageProps) {
         )}
 
         {status && (
-          <div className="mb-10 grid animate-fade-in gap-6 opacity-0 md:grid-cols-4">
-            <Card className="group relative overflow-hidden border-primary/30 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent transition-all duration-300 hover:border-primary/50 hover:shadow-[0_0_30px_-10px_hsl(var(--primary)/0.3)]">
-              <div className="pointer-events-none absolute -top-12 -right-12 size-32 rounded-full bg-primary/10 blur-2xl" />
+          <div className="mb-10 grid animate-slide-up gap-6 opacity-0 md:grid-cols-4">
+            <Card className="group relative overflow-hidden border-primary/30 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent transition-all duration-300 hover:border-primary/50 hover:shadow-[0_0_40px_-10px_hsl(var(--primary)/0.35)]">
+              <div className="pointer-events-none absolute -top-12 -right-12 size-36 rounded-full bg-primary/10 blur-3xl transition-all duration-500 group-hover:bg-primary/15" />
               <CardHeader className="relative pb-2">
                 <CardDescription className="flex items-center gap-2 text-primary/80">
                   <Database className="size-4" />
@@ -616,7 +622,7 @@ export default function Dashboard({ navigate }: PageProps) {
                 </CardDescription>
               </CardHeader>
               <CardContent className="relative">
-                <div className="font-bold text-5xl tracking-tight text-primary">
+                <div className="glow-text font-bold text-5xl tracking-tight text-primary">
                   {status.totalDocuments.toLocaleString()}
                 </div>
                 <p className="mt-1 text-muted-foreground text-sm">
@@ -625,7 +631,7 @@ export default function Dashboard({ navigate }: PageProps) {
               </CardContent>
             </Card>
 
-            <Card className="group stagger-1 animate-fade-in opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg">
+            <Card className="group stagger-1 animate-slide-up opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg">
               <CardHeader className="pb-2">
                 <CardDescription className="flex items-center gap-2">
                   <Layers className="size-4" />
@@ -640,7 +646,7 @@ export default function Dashboard({ navigate }: PageProps) {
             </Card>
 
             <Card
-              className="group stagger-2 animate-fade-in cursor-pointer opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg"
+              className="group stagger-2 animate-slide-up cursor-pointer opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg"
               onClick={openCollections}
               onKeyDown={(event) => {
                 if (event.key === "Enter" || event.key === " ") {
@@ -673,7 +679,7 @@ export default function Dashboard({ navigate }: PageProps) {
             </Card>
 
             <Card
-              className="group stagger-3 animate-fade-in cursor-pointer opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-secondary/50 hover:bg-secondary/5 hover:shadow-lg"
+              className="group stagger-3 animate-slide-up cursor-pointer opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-secondary/50 hover:bg-secondary/5 hover:shadow-[0_0_30px_-10px_hsl(var(--secondary)/0.25)]"
               onClick={() => openCapture()}
             >
               <CardHeader className="pb-2">
@@ -697,9 +703,11 @@ export default function Dashboard({ navigate }: PageProps) {
         )}
 
         {status && status.collections.length > 0 && (
-          <section className="stagger-3 animate-fade-in opacity-0">
+          <section className="stagger-4 animate-slide-up opacity-0">
             <div className="mb-6 flex items-center justify-between gap-4 border-border/50 border-b pb-3">
-              <h2 className="font-semibold text-2xl">Collections</h2>
+              <h2 className="font-semibold text-2xl tracking-tight">
+                Collections
+              </h2>
               <Button onClick={openCollections} size="sm" variant="outline">
                 Manage Collections
               </Button>

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

@@ -1057,7 +1057,7 @@ export default function Search({ navigate }: PageProps) {
                 </div>
                 {results.map((result, i) => (
                   <Card
-                    className="group animate-fade-in cursor-pointer opacity-0 transition-all hover:border-primary/50 hover:bg-card/80"
+                    className="group animate-fade-in cursor-pointer opacity-0 transition-all duration-200 hover:border-primary/50 hover:bg-card/80 hover:shadow-[0_0_24px_-10px_hsl(var(--primary)/0.12)]"
                     key={`${result.docid}-${i}`}
                     onClick={() =>
                       navigate(

package/src/serve/server.ts

@@ -8,13 +8,8 @@
 
 import type { ContextHolder } from "./routes/api";
 
-import { getIndexDbPath } from "../app/constants";
-import { getConfigPaths, isInitialized, loadConfig } from "../config";
-import { getActivePreset } from "../llm/registry";
-import { SqliteAdapter } from "../store/sqlite/adapter";
-import { createServerContext, disposeServerContext } from "./context";
+import { startBackgroundRuntime } from "./background-runtime";
 import { DocumentEventBus } from "./doc-events";
-import { createEmbedScheduler } from "./embed-scheduler";
 // HTML import - Bun handles bundling TSX/CSS automatically via routes
 import homepage from "./public/index.html";
 import {
@@ -57,7 +52,6 @@ import {
   handleDocSimilar,
 } from "./routes/links";
 import { forbiddenResponse, isRequestAllowed } from "./security";
-import { CollectionWatchService } from "./watch-service";
 
 export interface ServeOptions {
   /** Port to listen on (default: 3000) */
@@ -131,78 +125,18 @@ export async function startServer(
 ): Promise<ServeResult> {
   const port = options.port ?? 3000;
   const isDev = process.env.NODE_ENV !== "production";
-
-  // Check initialization
-  const initialized = await isInitialized(options.configPath);
-  if (!initialized) {
-    return { success: false, error: "GNO not initialized. Run: gno init" };
-  }
-
-  // Load config
-  const configResult = await loadConfig(options.configPath);
-  if (!configResult.ok) {
-    return { success: false, error: configResult.error.message };
-  }
-  const config = configResult.value;
-
-  // Open database once for server lifetime
-  const store = new SqliteAdapter();
-  const dbPath = getIndexDbPath(options.index);
-  // Use actual config path (from options or default) for consistency
-  const paths = getConfigPaths();
-  const actualConfigPath = options.configPath ?? paths.configFile;
-  store.setConfigPath(actualConfigPath);
-
-  const openResult = await store.open(dbPath, config.ftsTokenizer);
-  if (!openResult.ok) {
-    return { success: false, error: openResult.error.message };
-  }
-
-  // Sync collections and contexts from config to DB (same as CLI initStore)
-  const syncCollResult = await store.syncCollections(config.collections);
-  if (!syncCollResult.ok) {
-    await store.close();
-    return { success: false, error: syncCollResult.error.message };
-  }
-  const syncCtxResult = await store.syncContexts(config.contexts ?? []);
-  if (!syncCtxResult.ok) {
-    await store.close();
-    return { success: false, error: syncCtxResult.error.message };
-  }
-
-  // Create server context with LLM ports for hybrid search and AI answers
-  // Use holder pattern to allow hot-reloading presets
-  const ctx = await createServerContext(store, config);
-
-  const ctxHolder: ContextHolder = {
-    current: ctx,
-    config, // Keep original config for reloading
-    scheduler: null, // Will be set below
-    eventBus: null,
-    watchService: null,
-  };
-
-  // Create embed scheduler with getters (survives context/preset reloads)
-  const scheduler = createEmbedScheduler({
-    db: store.getRawDb(),
-    getEmbedPort: () => ctxHolder.current.embedPort,
-    getVectorIndex: () => ctxHolder.current.vectorIndex,
-    getModelUri: () => getActivePreset(ctxHolder.config).embed,
+  const runtimeResult = await startBackgroundRuntime({
+    configPath: options.configPath,
+    index: options.index,
+    requireCollections: false,
+    eventBus: new DocumentEventBus(),
   });
-  ctxHolder.scheduler = scheduler;
-  ctxHolder.current.scheduler = scheduler;
-  const eventBus = new DocumentEventBus();
-  ctxHolder.eventBus = eventBus;
-  ctxHolder.current.eventBus = eventBus;
-  const watchService = new CollectionWatchService({
-    collections: config.collections,
-    store,
-    scheduler,
-    eventBus,
-  });
-  watchService.start();
-  ctxHolder.watchService = watchService;
-  ctxHolder.current.watchService = watchService;
+  if (!runtimeResult.success) {
+    return { success: false, error: runtimeResult.error };
+  }
+  const runtime = runtimeResult.runtime;
+  const store = runtime.store;
+  const ctxHolder: ContextHolder = runtime.ctxHolder;
 
   // Shutdown controller for clean lifecycle
   const shutdownController = new AbortController();
@@ -210,11 +144,7 @@ export async function startServer(
   // Graceful shutdown handler
   const shutdown = async () => {
     console.log("\nShutting down...");
-    watchService.dispose();
-    eventBus.close();
-    scheduler.dispose();
-    await disposeServerContext(ctxHolder.current);
-    await store.close();
+    await runtime.dispose();
     shutdownController.abort();
   };
 
@@ -420,7 +350,12 @@ export async function startServer(
           },
         },
         "/api/events": {
-          GET: () => withSecurityHeaders(eventBus.createResponse(), isDev),
+          GET: () =>
+            withSecurityHeaders(
+              runtime.eventBus?.createResponse() ??
+                new Response("event stream unavailable", { status: 503 }),
+              isDev
+            ),
         },
         "/api/tags": {
           GET: async (req: Request) => {
@@ -568,7 +503,7 @@ export async function startServer(
       },
     });
   } catch (e) {
-    await store.close();
+    await runtime.dispose();
     return {
       success: false,
       error: e instanceof Error ? e.message : String(e),