@hienlh/ppm 0.5.20 → 0.6.0

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search } from "lucide-react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -55,6 +55,9 @@ export function ChatHistoryBar({
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState("");
+  const editInputRef = useRef<HTMLInputElement>(null);
   const openTab = useTabStore((s) => s.openTab);
 
   const togglePanel = (panel: PanelType) => {
@@ -94,6 +97,27 @@ export function ChatHistoryBar({
     }
   }
 
+  const startEditing = useCallback((session: SessionInfo, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingId(session.id);
+    setEditingTitle(session.title || "");
+    setTimeout(() => editInputRef.current?.select(), 0);
+  }, []);
+
+  const saveTitle = useCallback(async () => {
+    if (!editingId || !editingTitle.trim() || !projectName) {
+      setEditingId(null);
+      return;
+    }
+    try {
+      await api.patch(`${projectUrl(projectName)}/chat/sessions/${editingId}`, { title: editingTitle.trim() });
+      setSessions((prev) => prev.map((s) => s.id === editingId ? { ...s, title: editingTitle.trim() } : s));
+    } catch { /* silent */ }
+    setEditingId(null);
+  }, [editingId, editingTitle, projectName]);
+
+  const cancelEditing = useCallback(() => setEditingId(null), []);
+
   // Filter sessions by search query
   const filteredSessions = searchQuery.trim()
     ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
@@ -202,17 +226,53 @@ export function ChatHistoryBar({
               </div>
             ) : (
               filteredSessions.map((session) => (
-                <button
+                <div
                   key={session.id}
-                  onClick={() => openSession(session)}
-                  className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors"
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors group"
                 >
                   <MessageSquare className="size-3 shrink-0 text-text-subtle" />
-                  <span className="text-[11px] truncate flex-1">{session.title || "Untitled"}</span>
-                  {session.updatedAt && (
+                  {editingId === session.id ? (
+                    <form
+                      className="flex items-center gap-1 flex-1 min-w-0"
+                      onSubmit={(e) => { e.preventDefault(); saveTitle(); }}
+                    >
+                      <input
+                        ref={editInputRef}
+                        value={editingTitle}
+                        onChange={(e) => setEditingTitle(e.target.value)}
+                        onBlur={saveTitle}
+                        onKeyDown={(e) => { if (e.key === "Escape") cancelEditing(); }}
+                        className="flex-1 min-w-0 bg-surface-elevated text-[11px] text-text-primary px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
+                        autoFocus
+                      />
+                      <button type="submit" className="p-0.5 text-green-500 hover:text-green-400" onClick={(e) => e.stopPropagation()}>
+                        <Check className="size-3" />
+                      </button>
+                      <button type="button" className="p-0.5 text-text-subtle hover:text-text-secondary" onClick={(e) => { e.stopPropagation(); cancelEditing(); }}>
+                        <X className="size-3" />
+                      </button>
+                    </form>
+                  ) : (
+                    <>
+                      <button
+                        onClick={() => openSession(session)}
+                        className="text-[11px] truncate flex-1 text-left"
+                      >
+                        {session.title || "Untitled"}
+                      </button>
+                      <button
+                        onClick={(e) => startEditing(session, e)}
+                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary opacity-0 group-hover:opacity-100 transition-opacity"
+                        title="Rename session"
+                      >
+                        <Pencil className="size-3" />
+                      </button>
+                    </>
+                  )}
+                  {editingId !== session.id && session.updatedAt && (
                     <span className="text-[10px] text-text-subtle shrink-0">{formatDate(session.updatedAt)}</span>
                   )}
-                </button>
+                </div>
               ))
             )}
           </div>

package/src/web/components/chat/chat-tab.tsx

@@ -70,6 +70,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     thinkingWarningThreshold,
     pendingApproval,
     contextWindowPct,
+    sessionTitle,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -78,6 +79,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     isConnected,
   } = useChat(sessionId, providerId, projectName);
 
+  // Update tab title when SDK summary arrives
+  useEffect(() => {
+    if (tabId && sessionTitle) {
+      updateTab(tabId, { title: sessionTitle });
+    }
+  }, [sessionTitle]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Auto-send pending message for forked sessions (set by handleFork)
   const pendingForkMsgRef = useRef(metadata?.pendingMessage as string | undefined);
   useEffect(() => {
@@ -102,7 +110,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const handleSelectSession = useCallback((session: SessionInfo) => {
     setSessionId(session.id);
     setProviderId(session.providerId);
-  }, []);
+    if (tabId) updateTab(tabId, { title: session.title || "Chat" });
+  }, [tabId, updateTab]);
 
   /** Fork current session and open new tab with the forked session, resending userMessage */
   const handleFork = useCallback(async (userMessage: string) => {

package/src/web/components/chat/file-picker.tsx

@@ -88,7 +88,7 @@ export function FilePicker({
   useEffect(() => {
     if (!visible) return;
     const handler = (e: globalThis.KeyboardEvent) => {
-      handleKeyDown(e);
+      if (handleKeyDown(e)) e.stopPropagation();
     };
     document.addEventListener("keydown", handler, true);
     return () => document.removeEventListener("keydown", handler, true);

package/src/web/components/chat/slash-command-picker.tsx

@@ -82,7 +82,7 @@ export function SlashCommandPicker({
   useEffect(() => {
     if (!visible) return;
     const handler = (e: globalThis.KeyboardEvent) => {
-      handleKeyDown(e);
+      if (handleKeyDown(e)) e.stopPropagation();
     };
     document.addEventListener("keydown", handler, true);
     return () => document.removeEventListener("keydown", handler, true);

package/src/web/components/explorer/file-tree.tsx

@@ -73,8 +73,10 @@ function TreeNode({ node, depth, projectName, onAction, onFileOpen }: TreeNodePr
       toggleFileSelect(node.path);
       return;
     }
+    const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
+    const isSqlite = ext === "db" || ext === "sqlite" || ext === "sqlite3";
     openTab({
-      type: "editor",
+      type: isSqlite ? "sqlite" : "editor",
       title: node.name,
       metadata: { filePath: node.path, projectName },
       projectId: projectName,

package/src/web/components/layout/draggable-tab.tsx

@@ -1,3 +1,4 @@
+import { useState, useRef, useEffect } from "react";
 import { X } from "lucide-react";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
@@ -13,12 +14,33 @@ interface DraggableTabProps {
   onDragOver: (e: React.DragEvent) => void;
   onDragEnd: () => void;
   tabRef: (el: HTMLButtonElement | null) => void;
+  /** If provided, double-clicking the title enters inline rename mode */
+  onRename?: (newTitle: string) => void;
 }
 
 export function DraggableTab({
   tab, isActive, icon: Icon, showDropBefore, onSelect, onClose,
-  onDragStart, onDragOver, onDragEnd, tabRef,
+  onDragStart, onDragOver, onDragEnd, tabRef, onRename,
 }: DraggableTabProps) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(tab.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editing) {
+      setEditValue(tab.title);
+      setTimeout(() => inputRef.current?.select(), 0);
+    }
+  }, [editing]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const commitRename = () => {
+    setEditing(false);
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== tab.title && onRename) {
+      onRename(trimmed);
+    }
+  };
+
   return (
     <div className="relative flex items-center">
       {showDropBefore && (
@@ -27,7 +49,7 @@ export function DraggableTab({
       <button
         ref={tabRef}
         data-tab-item
-        draggable
+        draggable={!editing}
         onClick={onSelect}
         onAuxClick={(e) => { if (e.button === 1 && tab.closable) { e.preventDefault(); onClose(); } }}
         onDragStart={onDragStart}
@@ -42,8 +64,32 @@ export function DraggableTab({
         )}
       >
         <Icon className="size-4" />
-        <span className="max-w-[120px] truncate">{tab.title}</span>
-        {tab.closable && (
+        {editing ? (
+          <input
+            ref={inputRef}
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onBlur={commitRename}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitRename();
+              if (e.key === "Escape") setEditing(false);
+              e.stopPropagation();
+            }}
+            onClick={(e) => e.stopPropagation()}
+            className="max-w-[120px] bg-surface-elevated text-xs px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
+            autoFocus
+          />
+        ) : (
+          <span
+            className="max-w-[120px] truncate"
+            onDoubleClick={(e) => {
+              if (onRename) { e.stopPropagation(); setEditing(true); }
+            }}
+          >
+            {tab.title}
+          </span>
+        )}
+        {tab.closable && !editing && (
           <span
             role="button"
             tabIndex={0}

package/src/web/components/layout/editor-panel.tsx

@@ -17,6 +17,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
   chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
   editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
+  sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
   "git-graph": lazy(() => import("@/components/git/git-graph").then((m) => ({ default: m.GitGraph }))),
   "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),

package/src/web/components/layout/mobile-nav.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import {
-  Terminal, MessageSquare, GitBranch,
+  Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
@@ -21,7 +21,7 @@ const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
 const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_TAB_OPTIONS.map((o) => [o.type, o.label]));
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
-  terminal: Terminal, chat: MessageSquare, editor: FileCode,
+  terminal: Terminal, chat: MessageSquare, editor: FileCode, sqlite: Database,
   "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings,
 };
 

package/src/web/components/layout/project-bar.tsx

@@ -150,10 +150,11 @@ export function ProjectBar() {
   // Share tunnel
   const [shareOpen, setShareOpen] = useState(false);
   const [shareUrl, setShareUrl] = useState<string | null>(null);
+  const [localUrl, setLocalUrl] = useState<string | null>(null);
   const [shareLoading, setShareLoading] = useState(false);
   const [shareChecking, setShareChecking] = useState(false);
   const [shareError, setShareError] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
+  const [copied, setCopied] = useState<string | null>(null);
   const shareBtnRef = useRef<HTMLButtonElement>(null);
   const [popoverPos, setPopoverPos] = useState<{ left: number; bottom: number } | null>(null);
 
@@ -169,14 +170,14 @@ export function ProjectBar() {
     setShareOpen(true);
     setShareError(null);
     setShareUrl(null);
+    setLocalUrl(null);
     setShareChecking(true);
 
-    // Only check existing tunnel, don't auto-start
+    // Check existing tunnel + get local IP
     try {
-      const status = await api.get<{ active: boolean; url: string | null }>("/api/tunnel");
-      if (status.active && status.url) {
-        setShareUrl(status.url);
-      }
+      const status = await api.get<{ active: boolean; url: string | null; localUrl: string | null }>("/api/tunnel");
+      if (status.active && status.url) setShareUrl(status.url);
+      if (status.localUrl) setLocalUrl(status.localUrl);
     } catch { /* no existing tunnel */ }
     setShareChecking(false);
   }, [shareOpen]);
@@ -194,12 +195,11 @@ export function ProjectBar() {
     }
   }, []);
 
-  const handleCopyUrl = useCallback(() => {
-    if (!shareUrl) return;
-    navigator.clipboard.writeText(shareUrl);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [shareUrl]);
+  const handleCopyUrl = useCallback((url: string) => {
+    navigator.clipboard.writeText(url);
+    setCopied(url);
+    setTimeout(() => setCopied(null), 2000);
+  }, []);
 
   function handleSettings() {
     const { sidebarCollapsed, toggleSidebar, setSidebarActiveTab } = useSettingsStore.getState();
@@ -334,6 +334,28 @@ export function ProjectBar() {
                 </div>
               )}
 
+              {/* Local network URL — always show when available */}
+              {!shareChecking && localUrl && (
+                <div className="space-y-1">
+                  <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Local Network</span>
+                  <div className="flex items-center gap-1">
+                    <input
+                      readOnly
+                      value={localUrl}
+                      className="flex-1 text-xs font-mono text-foreground bg-muted px-2 py-1.5 rounded border border-border truncate"
+                      onClick={(e) => (e.target as HTMLInputElement).select()}
+                    />
+                    <button
+                      onClick={() => handleCopyUrl(localUrl)}
+                      className="flex items-center justify-center size-7 rounded border border-border text-muted-foreground bg-muted hover:bg-accent hover:text-foreground transition-colors shrink-0"
+                      title="Copy URL"
+                    >
+                      {copied === localUrl ? <Check className="size-3.5 text-primary" /> : <Copy className="size-3.5" />}
+                    </button>
+                  </div>
+                </div>
+              )}
+
               {/* No tunnel yet — show start button */}
               {!shareChecking && !shareUrl && !shareLoading && !shareError && (
                 <div className="space-y-2">
@@ -380,9 +402,10 @@ export function ProjectBar() {
                 </div>
               )}
 
-              {/* Tunnel active — show QR + URL */}
+              {/* Tunnel active — show QR + public URL */}
               {shareUrl && (
-                <>
+                <div className="space-y-1">
+                  <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Public (Cloudflare)</span>
                   <div className="flex justify-center">
                     <QRCodeSVG value={shareUrl} size={160} />
                   </div>
@@ -394,14 +417,14 @@ export function ProjectBar() {
                       onClick={(e) => (e.target as HTMLInputElement).select()}
                     />
                     <button
-                      onClick={handleCopyUrl}
+                      onClick={() => handleCopyUrl(shareUrl)}
                       className="flex items-center justify-center size-7 rounded border border-border text-muted-foreground bg-muted hover:bg-accent hover:text-foreground transition-colors shrink-0"
                       title="Copy URL"
                     >
-                      {copied ? <Check className="size-3.5 text-primary" /> : <Copy className="size-3.5" />}
+                      {copied === shareUrl ? <Check className="size-3.5 text-primary" /> : <Copy className="size-3.5" />}
                     </button>
                   </div>
-                </>
+                </div>
               )}
             </div>
           </>,

package/src/web/components/layout/tab-bar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import {
   Plus,
   Terminal,
@@ -7,18 +7,22 @@ import {
   FileDiff,
   Settings,
   FileCode,
+  Database,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabDrag } from "@/hooks/use-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
+import { api, projectUrl } from "@/lib/api-client";
 import { DraggableTab } from "./draggable-tab";
+import type { Tab } from "@/stores/tab-store";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal,
   chat: MessageSquare,
   editor: FileCode,
+  sqlite: Database,
   "git-graph": GitBranch,
   "git-diff": FileDiff,
   settings: Settings,
@@ -52,6 +56,16 @@ export function TabBar({ panelId }: TabBarProps) {
     prevTabCount.current = tabs.length;
   }, [tabs.length, activeTabId]);
 
+  /** Rename a chat session tab — calls PATCH API + updates tab store */
+  const handleRenameTab = useCallback((tab: Tab, newTitle: string) => {
+    useTabStore.getState().updateTab(tab.id, { title: newTitle });
+    const pName = tab.metadata?.projectName as string | undefined;
+    const sId = tab.metadata?.sessionId as string | undefined;
+    if (pName && sId) {
+      api.patch(`${projectUrl(pName)}/chat/sessions/${sId}`, { title: newTitle }).catch(() => {});
+    }
+  }, []);
+
   /** Double-click on empty bar area → open command palette */
   function handleBarDoubleClick(e: React.MouseEvent) {
     // Only trigger if clicking directly on the bar or scroll container (not on a tab)
@@ -98,6 +112,7 @@ export function TabBar({ panelId }: TabBarProps) {
                 if (el) tabRefs.current.set(tab.id, el);
                 else tabRefs.current.delete(tab.id);
               }}
+              onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
             />
           ))}
           {/* Show drop indicator at the end */}

package/src/web/components/layout/tab-content.tsx

@@ -18,6 +18,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.CodeEditor,
     })),
   ),
+  sqlite: lazy(() =>
+    import("@/components/sqlite/sqlite-viewer").then((m) => ({
+      default: m.SqliteViewer,
+    })),
+  ),
   "git-graph": lazy(() =>
     import("@/components/git/git-graph").then((m) => ({
       default: m.GitGraph,

package/src/web/components/sqlite/sqlite-data-grid.tsx

@@ -0,0 +1,165 @@
+import { useState, useCallback, useMemo } from "react";
+import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import type { ColumnInfo } from "./use-sqlite";
+
+interface Props {
+  tableData: { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number } | null;
+  schema: ColumnInfo[];
+  loading: boolean;
+  page: number;
+  onPageChange: (page: number) => void;
+  onCellUpdate: (rowid: number, column: string, value: unknown) => void;
+}
+
+export function SqliteDataGrid({ tableData, schema, loading, page, onPageChange, onCellUpdate }: Props) {
+  if (!tableData) {
+    return (
+      <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+        {loading ? <Loader2 className="size-4 animate-spin" /> : "Select a table"}
+      </div>
+    );
+  }
+
+  const totalPages = Math.ceil(tableData.total / tableData.limit) || 1;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex-1 overflow-auto">
+        <DataTable
+          columns={tableData.columns}
+          rows={tableData.rows}
+          schema={schema}
+          onCellUpdate={onCellUpdate}
+        />
+      </div>
+      {/* Pagination */}
+      <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-background shrink-0 text-xs text-muted-foreground">
+        <span>{tableData.total.toLocaleString()} rows</span>
+        <div className="flex items-center gap-2">
+          <button type="button" disabled={page <= 1} onClick={() => onPageChange(page - 1)}
+            className="p-0.5 rounded hover:bg-muted disabled:opacity-30">
+            <ChevronLeft className="size-3.5" />
+          </button>
+          <span>{page} / {totalPages}</span>
+          <button type="button" disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}
+            className="p-0.5 rounded hover:bg-muted disabled:opacity-30">
+            <ChevronRight className="size-3.5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Inner table component with TanStack */
+function DataTable({ columns, rows, schema, onCellUpdate }: {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  schema: ColumnInfo[];
+  onCellUpdate: (rowid: number, column: string, value: unknown) => void;
+}) {
+  const [editingCell, setEditingCell] = useState<{ rowIdx: number; col: string } | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const pkColumns = useMemo(() => new Set(schema.filter((c) => c.pk).map((c) => c.name)), [schema]);
+
+  const startEdit = useCallback((rowIdx: number, col: string, currentValue: unknown) => {
+    if (col === "rowid") return; // Don't edit rowid
+    setEditingCell({ rowIdx, col });
+    setEditValue(currentValue == null ? "" : String(currentValue));
+  }, []);
+
+  const commitEdit = useCallback(() => {
+    if (!editingCell) return;
+    const row = rows[editingCell.rowIdx];
+    const rowid = row.rowid as number;
+    const oldVal = row[editingCell.col];
+    if (String(oldVal ?? "") !== editValue) {
+      onCellUpdate(rowid, editingCell.col, editValue === "" ? null : editValue);
+    }
+    setEditingCell(null);
+  }, [editingCell, editValue, rows, onCellUpdate]);
+
+  const cancelEdit = useCallback(() => setEditingCell(null), []);
+
+  const columnDefs = useMemo<ColumnDef<Record<string, unknown>>[]>(() =>
+    columns.map((col) => ({
+      id: col,
+      accessorFn: (row) => row[col],
+      header: () => (
+        <span className={`${pkColumns.has(col) ? "font-bold" : ""} ${col === "rowid" ? "text-muted-foreground/50" : ""}`}>
+          {col}
+        </span>
+      ),
+      cell: ({ row, getValue }) => {
+        const rowIdx = row.index;
+        const isEditing = editingCell?.rowIdx === rowIdx && editingCell?.col === col;
+        const val = getValue();
+
+        if (isEditing) {
+          return (
+            <input
+              autoFocus
+              className="w-full bg-transparent border border-primary/50 rounded px-1 py-0 text-xs outline-none"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onBlur={commitEdit}
+              onKeyDown={(e) => { if (e.key === "Enter") commitEdit(); if (e.key === "Escape") cancelEdit(); }}
+            />
+          );
+        }
+
+        return (
+          <span
+            className={`cursor-pointer truncate block ${val == null ? "text-muted-foreground/40 italic" : ""} ${col === "rowid" ? "text-muted-foreground/50" : ""}`}
+            onDoubleClick={() => startEdit(rowIdx, col, val)}
+            title={val == null ? "NULL" : String(val)}
+          >
+            {val == null ? "NULL" : String(val)}
+          </span>
+        );
+      },
+    })),
+  [columns, pkColumns, editingCell, editValue, commitEdit, cancelEdit, startEdit]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const table = useReactTable({
+    data: rows,
+    columns: columnDefs,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <table className="w-full text-xs border-collapse">
+      <thead className="sticky top-0 z-10 bg-muted">
+        {table.getHeaderGroups().map((hg) => (
+          <tr key={hg.id}>
+            {hg.headers.map((h) => (
+              <th key={h.id} className="px-2 py-1.5 text-left font-medium text-muted-foreground border-b border-border whitespace-nowrap">
+                {flexRender(h.column.columnDef.header, h.getContext())}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id} className="hover:bg-muted/30 border-b border-border/50">
+            {row.getVisibleCells().map((cell) => (
+              <td key={cell.id} className="px-2 py-1 max-w-[300px]">
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        ))}
+        {rows.length === 0 && (
+          <tr>
+            <td colSpan={columns.length} className="px-2 py-8 text-center text-muted-foreground">
+              No data
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}