@gmickel/gno 0.25.2 → 0.27.0

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

@@ -0,0 +1,248 @@
+import {
+  FilePlusIcon,
+  FileTextIcon,
+  Loader2Icon,
+  SearchIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { apiFetch } from "../hooks/use-api";
+import { buildDocDeepLink } from "../lib/deep-links";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./ui/command";
+
+interface SearchResult {
+  docid: string;
+  uri: string;
+  title?: string;
+  snippet: string;
+  score: number;
+  snippetRange?: {
+    startLine: number;
+    endLine: number;
+  };
+}
+
+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;
+  navigate: (to: string) => void;
+  onCreateNote: (draftTitle?: string) => void;
+}
+
+export function QuickSwitcher({
+  open,
+  onOpenChange,
+  navigate,
+  onCreateNote,
+}: QuickSwitcherProps) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [recentDocs, setRecentDocs] = useState<RecentDoc[]>([]);
+  const [loading, setLoading] = useState(false);
+  const requestIdRef = useRef(0);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    setRecentDocs(loadRecentDocuments());
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (!query.trim()) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+
+    const currentRequestId = ++requestIdRef.current;
+    setLoading(true);
+    const timer = setTimeout(() => {
+      void apiFetch<SearchResponse>("/api/search", {
+        method: "POST",
+        body: JSON.stringify({
+          query,
+          limit: 8,
+        }),
+      }).then(({ data }) => {
+        if (currentRequestId !== requestIdRef.current) {
+          return;
+        }
+        setResults(data?.results ?? []);
+        setLoading(false);
+      });
+    }, 120);
+
+    return () => clearTimeout(timer);
+  }, [open, query]);
+
+  const recentItems = useMemo(() => recentDocs.slice(0, 6), [recentDocs]);
+
+  const openTarget = useCallback(
+    (target: { uri: string; lineStart?: number; lineEnd?: number }) => {
+      navigate(
+        buildDocDeepLink({
+          uri: target.uri,
+          view: target.lineStart ? "source" : "rendered",
+          lineStart: target.lineStart,
+          lineEnd: target.lineEnd,
+        })
+      );
+      onOpenChange(false);
+    },
+    [navigate, onOpenChange]
+  );
+
+  const showCreateAction = query.trim().length > 0;
+
+  return (
+    <CommandDialog
+      description="Jump to notes, open recent documents, or create a new note."
+      onOpenChange={onOpenChange}
+      open={open}
+      title="Quick Switcher"
+    >
+      <CommandInput
+        autoFocus
+        onValueChange={setQuery}
+        placeholder="Search notes or create a new one..."
+        value={query}
+      />
+      <CommandList>
+        <CommandEmpty>
+          {loading ? "Searching..." : "No matching documents."}
+        </CommandEmpty>
+
+        {recentItems.length > 0 && !query.trim() && (
+          <CommandGroup heading="Recent">
+            {recentItems.map((item) => (
+              <CommandItem
+                key={item.href}
+                onSelect={() => {
+                  navigate(item.href);
+                  onOpenChange(false);
+                }}
+                value={item.label}
+              >
+                <FileTextIcon />
+                <span>{item.label}</span>
+                <CommandShortcut>Recent</CommandShortcut>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {showCreateAction && (
+          <>
+            <CommandGroup heading="Actions">
+              <CommandItem
+                onSelect={() => {
+                  onOpenChange(false);
+                  onCreateNote(query.trim());
+                }}
+                value={`create-${query}`}
+              >
+                <FilePlusIcon />
+                <span>Create new note</span>
+                <CommandShortcut>{query.trim()}</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+          </>
+        )}
+
+        {query.trim() && (
+          <CommandGroup heading="Documents">
+            {results.map((result) => (
+              <CommandItem
+                key={result.docid}
+                onSelect={() =>
+                  openTarget({
+                    uri: result.uri,
+                    lineStart: result.snippetRange?.startLine,
+                    lineEnd: result.snippetRange?.endLine,
+                  })
+                }
+                value={`${result.title ?? result.uri} ${result.uri}`}
+              >
+                {loading ? (
+                  <Loader2Icon className="animate-spin" />
+                ) : (
+                  <SearchIcon />
+                )}
+                <div className="min-w-0 flex-1">
+                  <div className="truncate">{result.title || result.uri}</div>
+                  <div className="truncate text-muted-foreground text-xs">
+                    {result.uri}
+                  </div>
+                </div>
+                {result.snippetRange && (
+                  <CommandShortcut>
+                    L{result.snippetRange.startLine}
+                    {result.snippetRange.endLine !==
+                    result.snippetRange.startLine
+                      ? `-${result.snippetRange.endLine}`
+                      : ""}
+                  </CommandShortcut>
+                )}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+      </CommandList>
+    </CommandDialog>
+  );
+}

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

@@ -34,6 +34,7 @@ const shortcutGroups: ShortcutGroup[] = [
     title: "Global",
     shortcuts: [
       { keys: "N", description: "New note" },
+      { keys: "Cmd+K", description: "Quick switcher" },
       { keys: "/", description: "Focus search" },
       { keys: "T", description: "Cycle search depth" },
       { keys: "?", description: "Show shortcuts" },

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

@@ -17,6 +17,8 @@ type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
   code: string;
   language: BundledLanguage;
   showLineNumbers?: boolean;
+  highlightedLines?: number[];
+  scrollToLine?: number;
 };
 
 interface CodeBlockContextType {
@@ -27,35 +29,63 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
   code: "",
 });
 
-const lineNumberTransformer: ShikiTransformer = {
-  name: "line-numbers",
-  line(node, line) {
-    node.children.unshift({
-      type: "element",
-      tagName: "span",
-      properties: {
-        className: [
-          "inline-block",
-          "min-w-10",
-          "mr-4",
-          "text-right",
-          "select-none",
-          "text-muted-foreground",
-        ],
-      },
-      children: [{ type: "text", value: String(line) }],
-    });
-  },
-};
+function createLineTransformer(
+  showLineNumbers: boolean,
+  highlightedLines: number[]
+): ShikiTransformer {
+  const highlighted = new Set(highlightedLines);
+
+  return {
+    name: "line-metadata",
+    line(node, line) {
+      const className = Array.isArray(node.properties.className)
+        ? [...node.properties.className]
+        : [];
+      className.push("gno-code-line");
+      if (highlighted.has(line)) {
+        className.push(
+          "bg-amber-500/12",
+          "ring-1",
+          "ring-inset",
+          "ring-amber-500/25"
+        );
+      }
+      node.properties.className = className;
+      node.properties["data-line-number"] = String(line);
+
+      if (!showLineNumbers) {
+        return;
+      }
+
+      node.children.unshift({
+        type: "element",
+        tagName: "span",
+        properties: {
+          className: [
+            "inline-block",
+            "min-w-10",
+            "mr-4",
+            "text-right",
+            "select-none",
+            "text-muted-foreground",
+          ],
+        },
+        children: [{ type: "text", value: String(line) }],
+      });
+    },
+  };
+}
 
 export async function highlightCode(
   code: string,
   language: BundledLanguage,
-  showLineNumbers = false
+  showLineNumbers = false,
+  highlightedLines: number[] = []
 ) {
-  const transformers: ShikiTransformer[] = showLineNumbers
-    ? [lineNumberTransformer]
-    : [];
+  const transformers: ShikiTransformer[] =
+    showLineNumbers || highlightedLines.length > 0
+      ? [createLineTransformer(showLineNumbers, highlightedLines)]
+      : [];
 
   return await Promise.all([
     codeToHtml(code, {
@@ -75,6 +105,8 @@ export const CodeBlock = ({
   code,
   language,
   showLineNumbers = false,
+  highlightedLines = [],
+  scrollToLine,
   className,
   children,
   ...props
@@ -82,6 +114,7 @@ export const CodeBlock = ({
   const [html, setHtml] = useState<string>("");
   const [darkHtml, setDarkHtml] = useState<string>("");
   const requestIdRef = useRef(0);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -91,7 +124,8 @@ export const CodeBlock = ({
       const [light, dark] = await highlightCode(
         code,
         language,
-        showLineNumbers
+        showLineNumbers,
+        highlightedLines
       );
       // Only apply if this is still the latest request AND not cancelled
       if (!cancelled && requestId === requestIdRef.current) {
@@ -104,7 +138,20 @@ export const CodeBlock = ({
     return () => {
       cancelled = true;
     };
-  }, [code, language, showLineNumbers]);
+  }, [code, highlightedLines, language, showLineNumbers]);
+
+  useEffect(() => {
+    if (!scrollToLine) return;
+
+    const frame = requestAnimationFrame(() => {
+      const target = containerRef.current?.querySelector<HTMLElement>(
+        `[data-line-number="${scrollToLine}"]`
+      );
+      target?.scrollIntoView({ block: "center" });
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [darkHtml, html, scrollToLine]);
 
   return (
     <CodeBlockContext.Provider value={{ code }}>
@@ -113,6 +160,7 @@ export const CodeBlock = ({
           "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
           className
         )}
+        ref={containerRef}
         {...props}
       >
         <div className="relative">

package/src/serve/public/components/editor/CodeMirrorEditor.tsx

@@ -36,6 +36,16 @@ export interface CodeMirrorEditorRef {
   insertAtCursor: (text: string) => void;
   /** Scroll to percentage position (0-1). Returns true if scroll actually changed. */
   scrollToPercent: (percent: number) => boolean;
+  /** Reveal a 1-based line number and select it. */
+  revealLine: (lineNumber: number) => boolean;
+  /** Current cursor position and screen coordinates. */
+  getCursorInfo: () => {
+    pos: number;
+    x: number;
+    y: number;
+  } | null;
+  /** Replace a text range and place the cursor at the end. */
+  replaceRange: (from: number, to: number, text: string) => boolean;
 }
 
 export function CodeMirrorEditor({
@@ -179,6 +189,47 @@ export function CodeMirrorEditor({
       }
       return false;
     },
+    revealLine: (lineNumber: number): boolean => {
+      const view = viewRef.current;
+      if (!view || !Number.isFinite(lineNumber)) return false;
+
+      const clampedLine = Math.max(
+        1,
+        Math.min(Math.trunc(lineNumber), view.state.doc.lines)
+      );
+      const line = view.state.doc.line(clampedLine);
+      view.dispatch({
+        selection: { anchor: line.from, head: line.to },
+        scrollIntoView: true,
+      });
+      view.focus();
+      return true;
+    },
+    getCursorInfo: () => {
+      const view = viewRef.current;
+      if (!view) return null;
+
+      const pos = view.state.selection.main.head;
+      const coords = view.coordsAtPos(pos);
+      if (!coords) return null;
+
+      return {
+        pos,
+        x: coords.left,
+        y: coords.bottom,
+      };
+    },
+    replaceRange: (from: number, to: number, text: string): boolean => {
+      const view = viewRef.current;
+      if (!view) return false;
+
+      view.dispatch({
+        changes: { from, to, insert: text },
+        selection: { anchor: from + text.length },
+      });
+      view.focus();
+      return true;
+    },
   }));
 
   return <div ref={containerRef} className={className} />;

package/src/serve/public/components/ui/command.tsx

@@ -65,13 +65,13 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div
-      className="flex h-9 items-center gap-2 border-b px-3"
+      className="flex h-11 items-center gap-2 rounded-t-md border-border/60 border-b bg-muted/10 px-3 focus-within:bg-background/80"
       data-slot="command-input-wrapper"
     >
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none ring-0 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         data-slot="command-input"

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

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+export interface DocumentEvent {
+  type: "document-changed";
+  uri: string;
+  collection: string;
+  relPath: string;
+  origin: "watcher" | "save" | "create";
+  changedAt: string;
+}
+
+export function useDocEvents(): DocumentEvent | null {
+  const [event, setEvent] = useState<DocumentEvent | null>(null);
+
+  useEffect(() => {
+    const source = new EventSource("/api/events");
+    const handleEvent = (incoming: Event) => {
+      const message = incoming as MessageEvent<string>;
+      try {
+        setEvent(JSON.parse(message.data) as DocumentEvent);
+      } catch {
+        // Ignore malformed event payloads.
+      }
+    };
+
+    source.addEventListener("document-changed", handleEvent);
+    return () => {
+      source.removeEventListener("document-changed", handleEvent);
+      source.close();
+    };
+  }, []);
+
+  return event;
+}

package/src/serve/public/hooks/useCaptureModal.tsx

@@ -21,7 +21,7 @@ import { useKeyboardShortcuts } from "./useKeyboardShortcuts";
 
 interface CaptureModalContextValue {
   /** Open the capture modal */
-  openCapture: () => void;
+  openCapture: (draftTitle?: string) => void;
   /** Whether the modal is open */
   isOpen: boolean;
 }
@@ -41,8 +41,12 @@ export function CaptureModalProvider({
   onSuccess,
 }: CaptureModalProviderProps) {
   const [open, setOpen] = useState(false);
+  const [draftTitle, setDraftTitle] = useState("");
 
-  const openCapture = useCallback(() => setOpen(true), []);
+  const openCapture = useCallback((nextDraftTitle?: string) => {
+    setDraftTitle(nextDraftTitle ?? "");
+    setOpen(true);
+  }, []);
 
   // 'n' global shortcut (single-key, skips when in text input)
   const shortcuts = useMemo(
@@ -68,7 +72,12 @@ export function CaptureModalProvider({
   return (
     <CaptureModalContext.Provider value={value}>
       {children}
-      <CaptureModal onOpenChange={setOpen} onSuccess={onSuccess} open={open} />
+      <CaptureModal
+        draftTitle={draftTitle}
+        onOpenChange={setOpen}
+        onSuccess={onSuccess}
+        open={open}
+      />
     </CaptureModalContext.Provider>
   );
 }

package/src/serve/public/hooks/useKeyboardShortcuts.ts

@@ -72,8 +72,8 @@ export function useKeyboardShortcuts(shortcuts: Shortcut[]): void {
 
         // Modifier handling
         if (shortcut.meta) {
-          // Require Ctrl for meta shortcuts
-          if (!e.ctrlKey) continue;
+          // Allow Ctrl or Cmd for cross-platform meta shortcuts
+          if (!e.ctrlKey && !e.metaKey) continue;
         } else {
           // Single-key shortcuts: don't fire when any modifier held
           // Prevents hijacking Cmd+N on macOS, Ctrl+K on Windows, etc.

package/src/serve/public/lib/deep-links.ts

@@ -0,0 +1,68 @@
+export interface DocumentDeepLinkTarget {
+  uri: string;
+  view?: "rendered" | "source";
+  lineStart?: number;
+  lineEnd?: number;
+}
+
+function parsePositiveInteger(value: string | null): number | undefined {
+  if (!value) return;
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return;
+  }
+  return parsed;
+}
+
+export function buildDocDeepLink(target: DocumentDeepLinkTarget): string {
+  const params = new URLSearchParams({ uri: target.uri });
+
+  if (target.view) {
+    params.set("view", target.view);
+  }
+  if (target.lineStart) {
+    params.set("lineStart", String(target.lineStart));
+  }
+  if (
+    target.lineStart !== undefined &&
+    target.lineEnd !== undefined &&
+    target.lineEnd >= target.lineStart
+  ) {
+    params.set("lineEnd", String(target.lineEnd));
+  }
+
+  return `/doc?${params.toString()}`;
+}
+
+export function buildEditDeepLink(target: DocumentDeepLinkTarget): string {
+  const params = new URLSearchParams({ uri: target.uri });
+
+  if (target.lineStart) {
+    params.set("lineStart", String(target.lineStart));
+  }
+  if (
+    target.lineStart !== undefined &&
+    target.lineEnd !== undefined &&
+    target.lineEnd >= target.lineStart
+  ) {
+    params.set("lineEnd", String(target.lineEnd));
+  }
+
+  return `/edit?${params.toString()}`;
+}
+
+export function parseDocumentDeepLink(search: string): DocumentDeepLinkTarget {
+  const params = new URLSearchParams(search);
+  const uri = params.get("uri") ?? "";
+  const viewParam = params.get("view");
+  const view = viewParam === "source" ? "source" : "rendered";
+  const lineStart = parsePositiveInteger(params.get("lineStart"));
+  const lineEnd = parsePositiveInteger(params.get("lineEnd"));
+
+  return {
+    uri,
+    view,
+    lineStart,
+    lineEnd,
+  };
+}

package/src/serve/public/lib/document-availability.ts

@@ -0,0 +1,22 @@
+import { apiFetch } from "../hooks/use-api";
+
+interface DocAvailabilityResponse {
+  uri: string;
+}
+
+export async function waitForDocumentAvailability(
+  uri: string,
+  attempts = 20,
+  delayMs = 250
+): Promise<boolean> {
+  for (let i = 0; i < attempts; i += 1) {
+    const { data } = await apiFetch<DocAvailabilityResponse>(
+      `/api/doc?uri=${encodeURIComponent(uri)}`
+    );
+    if (data?.uri === uri) {
+      return true;
+    }
+    await new Promise((resolve) => setTimeout(resolve, delayMs));
+  }
+  return false;
+}