@reddb-io/ui 0.1.1

package/src/lib/PendingChangesPanel.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import { pendingChanges, buildUpdateSql } from './pending-changes.svelte'
+  import { connection } from './connections.svelte'
+  import { X, AlertTriangle, Lock } from 'lucide-svelte'
+
+  // Mutations are committed against the server; block them while it reports
+  // read-only (#23). The reason explains *why* the control is disabled.
+  const readOnly = $derived(connection.readOnly)
+  const readOnlyReason = $derived(connection.readOnlyReason)
+
+  interface Props {
+    open: boolean
+    onClose: () => void
+  }
+
+  let { open, onClose }: Props = $props()
+
+  let committing = $state(false)
+  let lastError = $state<string | null>(null)
+
+  async function apply() {
+    if (committing) return
+    committing = true
+    lastError = null
+    try {
+      const r = await pendingChanges.commitAll()
+      if (r.failed.length === 0) {
+        onClose()
+      }
+      // On partial failure the panel stays open so the user can see the
+      // failures inline. We don't auto-close.
+    } catch (e) {
+      lastError = (e as Error).message
+    } finally {
+      committing = false
+    }
+  }
+
+  function discard() {
+    pendingChanges.discardAll()
+    onClose()
+  }
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 grid place-items-center bg-bg-0/70 backdrop-blur-sm motion-reduce:backdrop-blur-none"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Pending changes"
+  >
+    <div class="w-full max-w-2xl mx-4 bg-bg-1 border border-line-1 rounded-md shadow-lg overflow-hidden">
+      <div class="flex items-center justify-between px-4 py-3 border-b border-line-1">
+        <div>
+          <h2 class="type-h3 m-0">Pending changes</h2>
+          <p class="text-fg-3 text-[11px] font-mono m-0 mt-0.5">
+            {pendingChanges.count} staged · review before applying
+          </p>
+        </div>
+        <button
+          type="button"
+          class="p-1 text-fg-3 hover:text-fg-1"
+          aria-label="Close"
+          onclick={onClose}
+        >
+          <X class="size-4" />
+        </button>
+      </div>
+
+      <div class="max-h-[50vh] overflow-auto px-4 py-3">
+        {#if pendingChanges.count === 0}
+          <div class="text-fg-3 text-[12px] font-mono py-6 text-center">
+            No staged changes.
+          </div>
+        {:else}
+          <ul class="space-y-2 text-[12px] font-mono">
+            {#each pendingChanges.changes as change (change.id)}
+              <li class="border border-line-1 rounded px-2 py-1.5 bg-bg-2/30">
+                <div class="flex items-center justify-between gap-2 mb-1">
+                  <span class="text-fg-2">
+                    <span class="text-fg-1">{change.table}</span>
+                    <span class="text-fg-3"> · rid </span>
+                    <span class="text-fg-1 tabular-nums">{change.row}</span>
+                    <span class="text-fg-3"> · </span>
+                    <span class="text-fg-1">{change.col}</span>
+                  </span>
+                  <button
+                    type="button"
+                    class="text-fg-3 hover:text-fg-1 text-[11px]"
+                    onclick={() => pendingChanges.unstage(change.id)}
+                  >
+                    Unstage
+                  </button>
+                </div>
+                <div class="text-[11px] grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5">
+                  <span class="text-fg-3">old</span>
+                  <span class="text-fg-2 truncate">{String(change.oldValue ?? 'NULL')}</span>
+                  <span class="text-fg-3">new</span>
+                  <span class="text-accent truncate">{change.newValue}</span>
+                </div>
+                <div class="text-fg-3 text-[10.5px] mt-1 truncate">
+                  {buildUpdateSql(change)}
+                </div>
+                {#if change.error}
+                  <div class="text-warn text-[11px] mt-1 inline-flex items-center gap-1">
+                    <AlertTriangle class="size-3" /> {change.error}
+                  </div>
+                {/if}
+              </li>
+            {/each}
+          </ul>
+        {/if}
+        {#if lastError}
+          <div class="text-warn text-[11px] font-mono mt-2">{lastError}</div>
+        {/if}
+      </div>
+
+      {#if readOnly}
+        <div class="flex items-center gap-1.5 px-4 py-2 text-warn text-[11px] font-mono border-t border-line-1 bg-warn/5">
+          <Lock class="size-3 shrink-0" />
+          <span>{readOnlyReason ?? 'Server is read-only (file in use) — changes can’t be applied.'}</span>
+        </div>
+      {/if}
+
+      <div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-line-1 bg-bg-1/60">
+        <button
+          type="button"
+          class="text-[12px] font-mono px-3 py-1 text-fg-3 hover:text-fg-1"
+          onclick={onClose}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="text-[12px] font-mono px-3 py-1 text-fg-1 border border-line-1 rounded hover:bg-bg-2"
+          onclick={discard}
+          disabled={pendingChanges.count === 0}
+        >
+          Discard all
+        </button>
+        <button
+          type="button"
+          class="text-[12px] font-mono px-3 py-1 bg-accent text-white rounded disabled:opacity-50"
+          onclick={apply}
+          disabled={pendingChanges.count === 0 || committing || readOnly}
+          title={readOnly ? (readOnlyReason ?? 'Server is read-only — mutations are disabled.') : undefined}
+        >
+          {committing ? 'Applying…' : 'Apply all'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/lib/QueryEditor.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { Play, Loader2 } from 'lucide-svelte'
+  import { connection } from '$lib/connections.svelte'
+  import { queryTabs, deriveQueryLabel } from '$lib/query-tabs.svelte'
+  import { tabs } from '$lib/tabs.svelte'
+  import { registry } from '$lib/renderers'
+  import type { Capability } from '$lib/renderers'
+  import { Kbd } from '@reddb-io/ui-kit'
+
+  interface Props {
+    tabId: string
+    fallbackLabel: string
+  }
+
+  let { tabId, fallbackLabel }: Props = $props()
+
+  // Ensure qs exists for this tab id.
+  $effect(() => {
+    queryTabs.ensure(tabId)
+  })
+
+  const qs = $derived(queryTabs.states[tabId])
+  const tab = $derived(tabs.tabs.find((t) => t.id === tabId))
+
+  let textareaEl: HTMLTextAreaElement | undefined = $state()
+
+  function setSql(value: string) {
+    queryTabs.setSql(tabId, value)
+    // Re-derive label live as the user types.
+    const label = deriveQueryLabel(value, fallbackLabel)
+    const tab = tabs.tabs.find((t) => t.id === tabId)
+    if (tab && tab.label !== label) tabs.rename(tabId, label)
+  }
+
+  async function run() {
+    await queryTabs.run(tabId)
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      void run()
+    }
+  }
+
+  function pickRenderer() {
+    if (!qs?.result) return null
+    return registry.pick(qs.result.capability as Capability | undefined, qs.result, tab?.overrideCapability)
+  }
+</script>
+
+<div class="flex h-full flex-col">
+  <div class="flex flex-col border-b border-line-1 bg-bg-0" style="height: 40%;">
+    <div class="flex items-center justify-between px-3 py-1.5 border-b border-line-1">
+      <div class="flex items-center gap-2 text-fg-3 type-label">
+        <span>SQL</span>
+        {#if connection.connected}
+          <span class="text-fg-3">·</span>
+          <span class="text-fg-2 font-mono text-[11px] truncate max-w-[280px]">{connection.active.url}</span>
+        {:else}
+          <span class="text-warn font-mono text-[11px]">disconnected</span>
+        {/if}
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-fg-3 font-mono text-[11px] hidden sm:inline">Run with <Kbd>⌘</Kbd><Kbd>↵</Kbd></span>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 rounded border border-accent/60 bg-accent/10 px-2 py-1 text-[12px] font-mono text-accent hover:bg-accent/20 disabled:opacity-50 disabled:cursor-not-allowed"
+          onclick={run}
+          disabled={qs?.running || !connection.connected}
+          aria-label="Run query"
+        >
+          {#if qs?.running}
+            <Loader2 class="size-3.5 animate-spin" />
+            <span>Running…</span>
+          {:else}
+            <Play class="size-3.5" />
+            <span>Run</span>
+          {/if}
+        </button>
+      </div>
+    </div>
+    <textarea
+      bind:this={textareaEl}
+      class="flex-1 resize-none bg-bg-0 px-3 py-2 font-mono text-[13px] text-fg-1 outline-none placeholder:text-fg-3"
+      spellcheck="false"
+      autocapitalize="off"
+      placeholder={'SELECT * FROM users LIMIT 100'}
+      value={qs?.sql ?? ''}
+      oninput={(e) => setSql((e.currentTarget as HTMLTextAreaElement).value)}
+      onkeydown={onKey}
+    ></textarea>
+  </div>
+
+  <div class="flex-1 overflow-hidden bg-bg-0">
+    {#if qs?.error}
+      <div class="p-4 text-[12px] font-mono text-warn">
+        <div class="font-semibold mb-1">Query failed</div>
+        <pre class="whitespace-pre-wrap">{qs.error}</pre>
+      </div>
+    {:else if qs?.running && !qs.result}
+      <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
+        Running…
+      </div>
+    {:else if !qs?.result}
+      <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
+        Run a query to see results here.
+      </div>
+    {:else}
+      {#if qs.result.truncated}
+        <div class="px-3 py-1.5 border-b border-line-1 bg-bg-1 text-[11px] font-mono text-fg-3">
+          Streamed first {qs.result.record_count.toLocaleString()} rows — more remain on the server. Add a <span class="text-fg-2">LIMIT</span> to narrow.
+        </div>
+      {/if}
+      {@const renderer = pickRenderer()}
+      {#if renderer}
+        {@const Renderer = renderer.component}
+        <Renderer result={qs.result} showSystem={tab?.showSystemColumns ?? false} />
+      {/if}
+    {/if}
+  </div>
+</div>