sync: bring registry components from desktop

biome.json

@@ -38,7 +38,8 @@
         "noSvgWithoutTitle": "off",
         "useButtonType": "off",
         "useFocusableInteractive": "off",
-        "useKeyWithClickEvents": "off"
+        "useKeyWithClickEvents": "off",
+        "noAutofocus": "off"
       },
       "suspicious": {
         "noArrayIndexKey": "off",

registry.json

@@ -345,7 +345,8 @@
         "@nteract/isolated-frame",
         "@nteract/widget-store",
         "@nteract/markdown-output",
-        "@nteract/error-boundary"
+        "@nteract/error-boundary",
+        "@nteract/highlight-text"
       ],
       "files": [
         {
@@ -948,6 +949,19 @@
         }
       ]
     },
+    {
+      "name": "highlight-text",
+      "type": "registry:lib",
+      "title": "Highlight Text",
+      "description": "DOM utility for highlighting search matches in text content with customizable styling.",
+      "files": [
+        {
+          "path": "registry/lib/highlight-text.ts",
+          "type": "registry:lib",
+          "target": "lib/highlight-text.ts"
+        }
+      ]
+    },
     {
       "name": "isolated-renderer",
       "type": "registry:component",

registry/cell/CellContainer.tsx

@@ -94,7 +94,7 @@ export const CellContainer = forwardRef<HTMLDivElement, CellContainerProps>(
                   ribbonColor,
                 )}
               />
-              <div className="min-w-0 flex-1 py-3 pl-5 pr-3">{codeContent}</div>
+              <div className="min-w-0 flex-1 py-3 pl-6 pr-3">{codeContent}</div>
             </div>
             {/* Output row - ribbon + content together */}
             {hasOutput && (
@@ -107,7 +107,7 @@ export const CellContainer = forwardRef<HTMLDivElement, CellContainerProps>(
                 />
                 <div
                   className={cn(
-                    "min-w-0 flex-1 py-2 pl-5 pr-3 transition-opacity duration-150",
+                    "min-w-0 flex-1 py-2 pl-6 pr-3 transition-opacity duration-150",
                     !isFocused && "opacity-70",
                   )}
                 >
@@ -125,7 +125,7 @@ export const CellContainer = forwardRef<HTMLDivElement, CellContainerProps>(
                 ribbonColor,
               )}
             />
-            <div className="min-w-0 flex-1 py-3 pl-5 pr-3">{children}</div>
+            <div className="min-w-0 flex-1 py-3 pl-6 pr-3">{children}</div>
           </div>
         )}
         {/* Right margin - pt-3 aligns with left gutter, appears on hover/focus */}

registry/cell/CellTypeSelector.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Bot, ChevronDown, Code, Database, FileText } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {

registry/cell/CollaboratorAvatars.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import {
   Avatar,

registry/cell/CompactExecutionButton.tsx

@@ -38,7 +38,6 @@ export function CompactExecutionButton({
   return (
     <button
       type="button"
-      data-testid="execute-button"
       onClick={handleClick}
       className={cn(
         "group/exec inline-flex items-center font-mono text-sm tabular-nums",
@@ -47,6 +46,7 @@ export function CompactExecutionButton({
         className,
       )}
       title={isExecuting ? "Stop execution" : "Run cell"}
+      data-testid="execute-button"
     >
       <span className="opacity-60">[</span>
       <span className="relative inline-flex min-w-4 items-center justify-center">

registry/cell/OutputArea.tsx

@@ -12,6 +12,7 @@ import {
 import { isDarkMode as detectDarkMode } from "@/lib/dark-mode";
 import { cn } from "@/lib/utils";
 import { ErrorBoundary } from "@/registry/lib/error-boundary";
+import { highlightTextInDom } from "@/registry/lib/highlight-text";
 import { OutputErrorFallback } from "@/registry/lib/output-error-fallback";
 import {
   AnsiErrorOutput,
@@ -107,6 +108,16 @@ interface OutputAreaProps {
    * @deprecated Use the comm bridge instead for full widget support
    */
   onWidgetUpdate?: (commId: string, state: Record<string, unknown>) => void;
+  /**
+   * Search query to highlight in iframe outputs.
+   * Empty string or undefined clears highlights.
+   */
+  searchQuery?: string;
+  /**
+   * Callback reporting how many search matches were found in this cell's outputs.
+   * Called when iframe reports search_results or in-DOM highlighting completes.
+   */
+  onSearchMatchCount?: (count: number) => void;
 }
 
 /**
@@ -279,10 +290,15 @@ export function OutputArea({
   preloadIframe = false,
   onLinkClick,
   onWidgetUpdate,
+  searchQuery,
+  onSearchMatchCount,
 }: OutputAreaProps) {
   const id = useId();
   const frameRef = useRef<IsolatedFrameHandle>(null);
   const bridgeRef = useRef<CommBridgeManager | null>(null);
+  const inDomOutputRef = useRef<HTMLDivElement>(null);
+  const searchQueryRef = useRef(searchQuery);
+  searchQueryRef.current = searchQuery;
 
   // Track dark mode state and observe changes
   const [darkMode, setDarkMode] = useState(() => detectDarkMode());
@@ -319,7 +335,6 @@ export function OutputArea({
   const shouldUseBridge = shouldIsolate && hasWidgets && widgetContext !== null;
 
   const hasCollapseControl = onToggleCollapse !== undefined;
-  const outputCount = outputs.length;
 
   // Handle messages from iframe, routing widget messages to comm bridge
   const handleIframeMessage = useCallback(
@@ -333,8 +348,13 @@ export function OutputArea({
       if (message.type === "widget_update" && onWidgetUpdate) {
         onWidgetUpdate(message.payload.commId, message.payload.state);
       }
+
+      // Capture search result count from iframe
+      if (message.type === "search_results") {
+        onSearchMatchCount?.(message.payload.count);
+      }
     },
-    [onWidgetUpdate],
+    [onWidgetUpdate, onSearchMatchCount],
   );
 
   // Callback when frame is ready - set up bridge and render outputs
@@ -399,6 +419,11 @@ export function OutputArea({
         });
       }
     });
+
+    // Re-apply search highlights after rendering new content
+    if (searchQueryRef.current) {
+      frameRef.current?.search(searchQueryRef.current);
+    }
   }, [outputs, priority, shouldUseBridge, widgetContext]);
 
   // Clean up bridge on unmount
@@ -418,6 +443,29 @@ export function OutputArea({
     }
   }, [handleFrameReady]);
 
+  // Forward search query to the iframe (for isolated outputs)
+  useEffect(() => {
+    if (frameRef.current?.isIframeReady) {
+      frameRef.current.search(searchQuery || "");
+    }
+  }, [searchQuery]);
+
+  // Highlight search matches in in-DOM outputs
+  // Re-run when outputs array ref changes so new content gets highlighted
+  useEffect(() => {
+    if (shouldIsolate) return; // iframe reports its own count via search_results
+    if (!searchQuery || !inDomOutputRef.current || outputs.length === 0) {
+      // Only report 0 if we were previously tracking matches for this cell
+      if (searchQuery) onSearchMatchCount?.(0);
+      return;
+    }
+    const cleanup = highlightTextInDom(inDomOutputRef.current, searchQuery);
+    const count =
+      inDomOutputRef.current.querySelectorAll(".global-find-match").length;
+    onSearchMatchCount?.(count);
+    return cleanup;
+  }, [searchQuery, shouldIsolate, outputs, onSearchMatchCount]);
+
   // Empty state: render nothing (unless preloading iframe)
   if (outputs.length === 0 && !showPreloadedIframe) {
     return null;
@@ -447,7 +495,7 @@ export function OutputArea({
           )}
           <span>
             {collapsed
-              ? `Show ${outputCount} output${outputCount > 1 ? "s" : ""}`
+              ? `Show ${outputs.length} output${outputs.length > 1 ? "s" : ""}`
               : "Hide outputs"}
           </span>
         </button>
@@ -480,34 +528,37 @@ export function OutputArea({
           )}
 
           {/* In-DOM outputs (when not using isolation) */}
-          {!shouldIsolate &&
-            outputs.map((output, index) => (
-              <div
-                key={`output-${index}`}
-                data-slot="output-item"
-                data-output-index={index}
-              >
-                <ErrorBoundary
-                  resetKeys={[JSON.stringify(output)]}
-                  fallback={(error, reset) => (
-                    <OutputErrorFallback
-                      error={error}
-                      outputIndex={index}
-                      onRetry={reset}
-                    />
-                  )}
-                  onError={(error, errorInfo) => {
-                    console.error(
-                      `[OutputArea] Error rendering output ${index}:`,
-                      error,
-                      errorInfo.componentStack,
-                    );
-                  }}
+          {!shouldIsolate && (
+            <div ref={inDomOutputRef}>
+              {outputs.map((output, index) => (
+                <div
+                  key={`output-${index}`}
+                  data-slot="output-item"
+                  data-output-index={index}
                 >
-                  {renderOutput(output, index, renderers, priority)}
-                </ErrorBoundary>
-              </div>
-            ))}
+                  <ErrorBoundary
+                    resetKeys={[JSON.stringify(output)]}
+                    fallback={(error, reset) => (
+                      <OutputErrorFallback
+                        error={error}
+                        outputIndex={index}
+                        onRetry={reset}
+                      />
+                    )}
+                    onError={(error, errorInfo) => {
+                      console.error(
+                        `[OutputArea] Error rendering output ${index}:`,
+                        error,
+                        errorInfo.componentStack,
+                      );
+                    }}
+                  >
+                    {renderOutput(output, index, renderers, priority)}
+                  </ErrorBoundary>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       )}
     </div>

registry/cell/PresenceBookmarks.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type * as React from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {

registry/editor/extensions.ts

@@ -34,6 +34,11 @@ export const notebookEditorTheme = EditorView.theme({
   "&.cm-focused": {
     outline: "none",
   },
+  // Reset line padding so code aligns with output areas
+  // (CodeMirror's base theme adds "padding: 0 2px 0 6px" to .cm-line)
+  ".cm-line": {
+    paddingLeft: "0",
+  },
   // Mobile-friendly padding
   "@media (max-width: 640px)": {
     ".cm-content": {

registry/lib/highlight-text.ts

@@ -0,0 +1,66 @@
+/**
+ * Highlight all occurrences of a search query within a DOM container.
+ *
+ * Walks text nodes using TreeWalker, wraps matches in <mark> elements.
+ * Returns a cleanup function that removes all marks and restores text nodes.
+ */
+export function highlightTextInDom(
+  container: HTMLElement,
+  query: string,
+): () => void {
+  if (!query) return () => {};
+
+  const marks: HTMLElement[] = [];
+  const walker = document.createTreeWalker(
+    container,
+    NodeFilter.SHOW_TEXT,
+    null,
+  );
+  const lowerQuery = query.toLowerCase();
+
+  // Collect matches first (to avoid mutating DOM while walking)
+  const matches: { node: Text; offset: number; length: number }[] = [];
+  let node = walker.nextNode();
+  while (node) {
+    const text = node.nodeValue || "";
+    const lowerText = text.toLowerCase();
+    let pos = lowerText.indexOf(lowerQuery, 0);
+    while (pos !== -1) {
+      matches.push({ node: node as Text, offset: pos, length: query.length });
+      pos = lowerText.indexOf(lowerQuery, pos + query.length);
+    }
+    node = walker.nextNode();
+  }
+
+  // Apply highlights in reverse order to preserve offsets
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const m = matches[i];
+    try {
+      const range = document.createRange();
+      range.setStart(m.node, m.offset);
+      range.setEnd(m.node, m.offset + m.length);
+      const mark = document.createElement("mark");
+      mark.className = "global-find-match";
+      mark.style.cssText =
+        "background: #fbbf24; color: #000; border-radius: 2px; padding: 0;";
+      range.surroundContents(mark);
+      marks.unshift(mark);
+    } catch {
+      // surroundContents can fail if range crosses element boundaries
+    }
+  }
+
+  // Return cleanup function
+  return () => {
+    for (const mark of marks) {
+      const parent = mark.parentNode;
+      if (parent) {
+        while (mark.firstChild) {
+          parent.insertBefore(mark.firstChild, mark);
+        }
+        parent.removeChild(mark);
+        parent.normalize();
+      }
+    }
+  };
+}

registry/lib/widget-error-fallback.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { cn } from "@/lib/utils";
 
 export interface WidgetErrorFallbackProps {

registry/outputs/isolated/__tests__/comm-bridge-manager.test.ts

@@ -90,6 +90,8 @@ function createMockFrame(): {
     eval: vi.fn(),
     setTheme: vi.fn(),
     clear: vi.fn(),
+    search: vi.fn(),
+    searchNavigate: vi.fn(),
     isReady: true,
     isIframeReady: true,
   };

registry/outputs/isolated/comm-bridge-manager.ts

@@ -370,9 +370,11 @@ export class CommBridgeManager {
 
     const unsubscribe = this.store.subscribeToCustomMessage(
       commId,
-      (content, buffers) => {
+      (content: Record<string, unknown>, buffers?: DataView[]) => {
         // Convert DataView[] to ArrayBuffer[] for postMessage
-        const arrayBuffers = buffers?.map((dv) => dv.buffer as ArrayBuffer);
+        const arrayBuffers = buffers?.map(
+          (dv: DataView) => dv.buffer as ArrayBuffer,
+        );
         // Forward custom message to iframe
         this.sendCommMsg(commId, "custom", content, arrayBuffers);
       },