@gmickel/gno 0.9.0 → 0.9.2

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

@@ -5,7 +5,7 @@ import {
   FileText,
   Sparkles,
 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Loader } from "../components/ai-elements/loader";
 import {
@@ -15,11 +15,16 @@ import {
   SourcesTrigger,
 } from "../components/ai-elements/sources";
 import { AIModelSelector } from "../components/AIModelSelector";
+import {
+  ThoroughnessSelector,
+  type Thoroughness,
+} from "../components/ThoroughnessSelector";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { Textarea } from "../components/ui/textarea";
 import { apiFetch } from "../hooks/use-api";
+import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts";
 
 interface PageProps {
   navigate: (to: string | number) => void;
@@ -75,6 +80,8 @@ interface ConversationEntry {
   error?: string;
 }
 
+const THOROUGHNESS_ORDER: Thoroughness[] = ["fast", "balanced", "thorough"];
+
 /**
  * Render answer text with clickable citation badges.
  * Citations like [1] become clickable to navigate to source.
@@ -133,6 +140,7 @@ export default function Ask({ navigate }: PageProps) {
   const [query, setQuery] = useState("");
   const [conversation, setConversation] = useState<ConversationEntry[]>([]);
   const [capabilities, setCapabilities] = useState<Capabilities | null>(null);
+  const [thoroughness, setThoroughness] = useState<Thoroughness>("balanced");
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -142,11 +150,33 @@ export default function Ask({ navigate }: PageProps) {
       const { data } = await apiFetch<Capabilities>("/api/capabilities");
       if (data) {
         setCapabilities(data);
+        // Auto-select balanced if hybrid available, otherwise fast
+        if (data.hybrid) {
+          setThoroughness("balanced");
+        } else {
+          setThoroughness("fast");
+        }
       }
     }
     void fetchCapabilities();
   }, []);
 
+  // Cycle thoroughness with 't' key
+  const cycleThoroughness = useCallback(() => {
+    setThoroughness((current) => {
+      const currentIdx = THOROUGHNESS_ORDER.indexOf(current);
+      const nextIdx = (currentIdx + 1) % THOROUGHNESS_ORDER.length;
+      return THOROUGHNESS_ORDER[nextIdx];
+    });
+  }, []);
+
+  const shortcuts = useMemo(
+    () => [{ key: "t", action: cycleThoroughness }],
+    [cycleThoroughness]
+  );
+
+  useKeyboardShortcuts(shortcuts);
+
   // Scroll to bottom when conversation updates
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -168,10 +198,31 @@ export default function Ask({ navigate }: PageProps) {
     ]);
     setQuery("");
 
+    // Build request body with thoroughness-mapped params
+    // fast: BM25-only via noExpand + noRerank
+    // balanced: with reranking, no expansion
+    // thorough: full pipeline
+    const requestBody: Record<string, unknown> = {
+      query: currentQuery,
+      limit: 5,
+    };
+
+    if (thoroughness === "fast") {
+      requestBody.noExpand = true;
+      requestBody.noRerank = true;
+    } else if (thoroughness === "balanced") {
+      requestBody.noExpand = true;
+      requestBody.noRerank = false;
+    } else {
+      // thorough - full pipeline
+      requestBody.noExpand = false;
+      requestBody.noRerank = false;
+    }
+
     // Make API call
     const { data, error } = await apiFetch<AskResponse>("/api/ask", {
       method: "POST",
-      body: JSON.stringify({ query: currentQuery, limit: 5 }),
+      body: JSON.stringify(requestBody),
     });
 
     // Update conversation with response
@@ -213,8 +264,21 @@ export default function Ask({ navigate }: PageProps) {
             Back
           </Button>
           <h1 className="font-semibold text-xl">Ask</h1>
-          <div className="ml-auto flex items-center gap-3">
+          <div className="ml-auto flex items-center gap-4">
+            {/* Search depth selector */}
+            <ThoroughnessSelector
+              disabled={!capabilities?.hybrid}
+              onChange={setThoroughness}
+              value={thoroughness}
+            />
+
+            {/* Divider */}
+            <div className="h-6 w-px bg-border/40" />
+
+            {/* AI model selector */}
             <AIModelSelector />
+
+            {/* Capability badges */}
             {capabilities && (
               <div className="flex items-center gap-2">
                 {capabilities.vector && (

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

@@ -3,11 +3,13 @@ import {
   ArrowLeft,
   Calendar,
   ChevronRightIcon,
+  CodeIcon,
   FileText,
   FolderOpen,
   HardDrive,
   Loader2Icon,
   PencilIcon,
+  TextIcon,
   TrashIcon,
 } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -17,6 +19,7 @@ import {
   CodeBlockCopyButton,
 } from "../components/ai-elements/code-block";
 import { Loader } from "../components/ai-elements/loader";
+import { MarkdownPreview } from "../components/editor";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import {
@@ -165,6 +168,7 @@ export default function DocView({ navigate }: PageProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [showRawView, setShowRawView] = useState(false);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -188,6 +192,10 @@ export default function DocView({ navigate }: PageProps) {
     );
   }, []);
 
+  const isMarkdown =
+    doc?.source.ext &&
+    [".md", ".markdown"].includes(doc.source.ext.toLowerCase());
+
   const isCodeFile =
     doc?.source.ext &&
     [
@@ -393,9 +401,31 @@ export default function DocView({ navigate }: PageProps) {
             {/* Content */}
             <Card>
               <CardHeader className="pb-0">
-                <CardTitle className="flex items-center gap-2 text-lg">
-                  <FileText className="size-4" />
-                  Content
+                <CardTitle className="flex items-center justify-between text-lg">
+                  <span className="flex items-center gap-2">
+                    <FileText className="size-4" />
+                    Content
+                  </span>
+                  {isMarkdown && doc.contentAvailable && (
+                    <Button
+                      className="gap-1.5"
+                      onClick={() => setShowRawView(!showRawView)}
+                      size="sm"
+                      variant="ghost"
+                    >
+                      {showRawView ? (
+                        <>
+                          <TextIcon className="size-4" />
+                          <span className="hidden sm:inline">Rendered</span>
+                        </>
+                      ) : (
+                        <>
+                          <CodeIcon className="size-4" />
+                          <span className="hidden sm:inline">Source</span>
+                        </>
+                      )}
+                    </Button>
+                  )}
                 </CardTitle>
               </CardHeader>
               <CardContent className="pt-4">
@@ -406,7 +436,21 @@ export default function DocView({ navigate }: PageProps) {
                     </p>
                   </div>
                 )}
-                {doc.contentAvailable && isCodeFile && (
+                {doc.contentAvailable && isMarkdown && !showRawView && (
+                  <div className="rounded-lg border border-border/40 bg-gradient-to-br from-background to-muted/10 p-6 shadow-inner">
+                    <MarkdownPreview content={doc.content ?? ""} />
+                  </div>
+                )}
+                {doc.contentAvailable && isMarkdown && showRawView && (
+                  <CodeBlock
+                    code={doc.content ?? ""}
+                    language={"markdown" as BundledLanguage}
+                    showLineNumbers
+                  >
+                    <CodeBlockCopyButton />
+                  </CodeBlock>
+                )}
+                {doc.contentAvailable && isCodeFile && !isMarkdown && (
                   <CodeBlock
                     code={doc.content ?? ""}
                     language={

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

@@ -16,8 +16,10 @@ import {
   CloudIcon,
   EyeIcon,
   EyeOffIcon,
+  LinkIcon,
   Loader2Icon,
   PenIcon,
+  UnlinkIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -131,11 +133,81 @@ export default function DocumentEditor({ navigate }: PageProps) {
   const [saveError, setSaveError] = useState<string | null>(null);
 
   const [showPreview, setShowPreview] = useState(true);
+  const [syncScroll, setSyncScroll] = useState(true);
   const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
   const editorRef = useRef<CodeMirrorEditorRef>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  // Event-based suppression: ignore the echo event caused by programmatic scroll
+  const ignoreNextEditorScroll = useRef(false);
+  const ignoreNextPreviewScroll = useRef(false);
 
   const hasUnsavedChanges = content !== originalContent;
 
+  // Reset ignore flags when sync is toggled to prevent stale state
+  useEffect(() => {
+    ignoreNextEditorScroll.current = false;
+    ignoreNextPreviewScroll.current = false;
+  }, [syncScroll, showPreview]);
+
+  // Scroll sync handlers with event-based loop prevention
+  // Note: Uses percentage-based mapping which provides approximate correspondence.
+  // For very different layouts (headings, code blocks, images), perfect alignment
+  // would require anchor-based mapping between editor lines and rendered elements.
+  const handleEditorScroll = useCallback(
+    (scrollPercent: number) => {
+      // Clear ignore flag first, even if we early-return (prevents lingering)
+      if (ignoreNextEditorScroll.current) {
+        ignoreNextEditorScroll.current = false;
+        return;
+      }
+      if (!syncScroll || !showPreview) return;
+      if (!Number.isFinite(scrollPercent)) return;
+
+      const clamped = Math.max(0, Math.min(1, scrollPercent));
+      const preview = previewRef.current;
+      if (!preview) return;
+
+      const maxScroll = preview.scrollHeight - preview.clientHeight;
+      if (maxScroll <= 0) return;
+
+      const targetScroll = clamped * maxScroll;
+      // Only set ignore flag if scroll position actually changes (avoids lingering flag)
+      if (Math.abs(preview.scrollTop - targetScroll) > 0.5) {
+        ignoreNextPreviewScroll.current = true;
+        preview.scrollTop = targetScroll;
+      }
+    },
+    [syncScroll, showPreview]
+  );
+
+  const handlePreviewScroll = useCallback(() => {
+    // Clear ignore flag first, even if we early-return (prevents lingering)
+    if (ignoreNextPreviewScroll.current) {
+      ignoreNextPreviewScroll.current = false;
+      return;
+    }
+    if (!syncScroll) return;
+
+    const preview = previewRef.current;
+    if (!preview) return;
+
+    const maxScroll = preview.scrollHeight - preview.clientHeight;
+    if (maxScroll <= 0) return;
+
+    const scrollPercentRaw = preview.scrollTop / maxScroll;
+    if (!Number.isFinite(scrollPercentRaw)) return;
+    const scrollPercent = Math.max(0, Math.min(1, scrollPercentRaw));
+
+    // Set ignore flag BEFORE programmatic scroll to prevent race condition
+    ignoreNextEditorScroll.current = true;
+    const didScroll =
+      editorRef.current?.scrollToPercent(scrollPercent) ?? false;
+    // Clear flag if no scroll actually occurred (avoids lingering)
+    if (!didScroll) {
+      ignoreNextEditorScroll.current = false;
+    }
+  }, [syncScroll]);
+
   // Save function
   const saveDocument = useCallback(
     async (contentToSave: string) => {
@@ -442,6 +514,36 @@ export default function DocumentEditor({ navigate }: PageProps) {
             </Tooltip>
           </TooltipProvider>
 
+          {/* Sync scroll toggle (only show when preview is visible) */}
+          {showPreview && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    aria-label={
+                      syncScroll ? "Disable scroll sync" : "Enable scroll sync"
+                    }
+                    className="transition-all duration-200"
+                    onClick={() => setSyncScroll(!syncScroll)}
+                    size="sm"
+                    variant={syncScroll ? "secondary" : "ghost"}
+                  >
+                    {syncScroll ? (
+                      <LinkIcon className="size-4" />
+                    ) : (
+                      <UnlinkIcon className="size-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    {syncScroll ? "Disable scroll sync" : "Enable scroll sync"}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+
           {/* Save button */}
           <Button
             disabled={!hasUnsavedChanges || saveStatus === "saving"}
@@ -462,19 +564,26 @@ export default function DocumentEditor({ navigate }: PageProps) {
       <div className="flex min-h-0 flex-1">
         {/* Editor pane */}
         <div
-          className={`min-h-0 overflow-hidden ${showPreview ? "w-1/2 border-border/30 border-r" : "w-full"}`}
+          className={`min-h-0 overflow-hidden ${showPreview ? "w-1/2 border-r border-border/40 shadow-[1px_0_3px_-1px_rgba(0,0,0,0.3)]" : "w-full"}`}
         >
           <CodeMirrorEditor
             className="h-full"
             initialContent={content}
             onChange={handleContentChange}
+            onScroll={
+              syncScroll && showPreview ? handleEditorScroll : undefined
+            }
             ref={editorRef}
           />
         </div>
 
         {/* Preview pane */}
         {showPreview && (
-          <div className="w-1/2 min-h-0 overflow-auto bg-background p-6">
+          <div
+            className="w-1/2 min-h-0 overflow-auto bg-background px-8 py-6"
+            onScroll={handlePreviewScroll}
+            ref={previewRef}
+          >
             <div className="mx-auto max-w-3xl">
               <MarkdownPreview content={content} />
             </div>

package/src/serve/routes/api.ts

@@ -71,6 +71,8 @@ export interface AskRequestBody {
   collection?: string;
   lang?: string;
   maxAnswerTokens?: number;
+  noExpand?: boolean;
+  noRerank?: boolean;
 }
 
 export interface CreateCollectionRequestBody {
@@ -928,6 +930,8 @@ export async function handleAsk(
       limit,
       collection: body.collection,
       lang: body.lang,
+      noExpand: body.noExpand,
+      noRerank: body.noRerank,
     }
   );