feat: add mobile omnibar for persistent AI chat (#109)

- Add MobileOmnibar component that stays sticky at bottom on mobile
- Creates AI cells at end of notebook when submitted with auto-execution
- Clean design with subtle bot icon, 'vibe it' placeholder, and purple send button
- Neutral gray styling with only send button as focus element
- Adds bottom padding to notebook content to prevent overlap
- Mobile-only feature, hidden on desktop
- Includes keyboard shortcut support (Ctrl+Enter to send)

Addresses conversation flow issues on mobile where users lack
keyboard shortcuts for smooth notebook interaction.

Author: rgbkrk

src/components/notebook/MobileOmnibar.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import { useStore } from "@livestore/react";
+import { events, CellData, tables } from "@runt/schema";
+import { queryDb } from "@livestore/livestore";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Bot, Send } from "lucide-react";
+
+interface MobileOmnibarProps {
+  onCellAdded?: () => void;
+}
+
+export const MobileOmnibar: React.FC<MobileOmnibarProps> = ({
+  onCellAdded,
+}) => {
+  const { store } = useStore();
+  const [input, setInput] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Get current cells to calculate position
+  const cells = store.useQuery(queryDb(tables.cells.select())) as CellData[];
+
+  const handleSubmit = async () => {
+    if (!input.trim() || isSubmitting) return;
+
+    setIsSubmitting(true);
+
+    try {
+      // Create AI cell at the bottom of the notebook
+      const cellId = crypto.randomUUID();
+      const queueId = crypto.randomUUID();
+
+      // Calculate position at end
+      const newPosition =
+        Math.max(...cells.map((c: CellData) => c.position), -1) + 1;
+
+      // Create the cell
+      store.commit(
+        events.cellCreated({
+          id: cellId,
+          position: newPosition,
+          cellType: "ai",
+          createdBy: "current-user",
+        })
+      );
+
+      // Set the source
+      store.commit(
+        events.cellSourceChanged({
+          id: cellId,
+          source: input.trim(),
+          modifiedBy: "current-user",
+        })
+      );
+
+      // Clear input and notify parent
+      setInput("");
+      onCellAdded?.();
+
+      // Auto-execute the AI cell
+      store.commit(
+        events.executionRequested({
+          queueId,
+          cellId,
+          executionCount: 1,
+          requestedBy: "current-user",
+          priority: 1,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to create AI cell:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Submit on Ctrl+Enter or Cmd+Enter
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="fixed right-0 bottom-0 left-0 z-40 border-t border-gray-200 bg-white p-3 shadow-lg sm:hidden">
+      <div className="flex items-end gap-2">
+        <div className="relative flex-1">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="vibe it"
+            className="max-h-[8rem] min-h-[2.5rem] resize-none border-gray-200 bg-gray-50 pl-7 placeholder:text-gray-400 focus:border-gray-300 focus:ring-gray-300/20"
+            disabled={isSubmitting}
+          />
+          <div className="absolute top-1/2 left-2 flex -translate-y-1/2 items-center">
+            <Bot className="h-3 w-3 text-gray-400" />
+          </div>
+        </div>
+        <Button
+          onClick={handleSubmit}
+          disabled={!input.trim() || isSubmitting}
+          className="h-10 w-10 flex-shrink-0 bg-purple-600 p-0 text-white hover:bg-purple-700"
+          size="sm"
+        >
+          {isSubmitting ? (
+            <div className="h-4 w-4 animate-spin rounded-full border border-white border-t-transparent" />
+          ) : (
+            <Send className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/notebook/NotebookViewer.tsx

@@ -34,6 +34,7 @@ const LazyDebugPanel = React.lazy(() =>
 
 // Import prefetch utilities
 import { prefetchOutputsAdaptive } from "../../util/prefetch.js";
+import { MobileOmnibar } from "./MobileOmnibar.js";
 
 interface NotebookViewerProps {
   notebookId: string;
@@ -679,7 +680,7 @@ export const NotebookViewer: React.FC<NotebookViewerProps> = ({
           </div>
 
           <div
-            className={`w-full px-0 py-3 ${debugMode ? "px-4" : "sm:mx-auto sm:max-w-4xl sm:p-4"}`}
+            className={`w-full px-0 py-3 pb-24 ${debugMode ? "px-4" : "sm:mx-auto sm:max-w-4xl sm:p-4 sm:pb-4"}`}
           >
             {/* Keyboard Shortcuts Help - Desktop only */}
             {sortedCells.length > 0 && (
@@ -852,6 +853,9 @@ export const NotebookViewer: React.FC<NotebookViewerProps> = ({
             />
           </Suspense>
         )}
+
+        {/* Mobile Omnibar - sticky at bottom on mobile */}
+        <MobileOmnibar />
       </div>
     </div>
   );