diff --git a/docs/web-server.md b/docs/web-server.md
index f8f983ad..1d3a6ae5 100644
--- a/docs/web-server.md
+++ b/docs/web-server.md
@@ -120,18 +120,40 @@ and `next_run_at` so re-runs after restarts pick up where they left off.
 
 A NERD-themed React SPA that drives the API:
 
+- **Command palette** — `Ctrl+K` / `Cmd+K` anywhere: fuzzy jump to any
+  page, switch the active project, toggle the theme, open Swagger `/docs`.
+  Arrows + enter, esc closes.
 - **Dashboard** — greeting, big Kai chat input, stat tiles (projects /
-  agents / doctor / recent jobs), scheduled-agent activity, suggested
-  next steps, recent jobs panel.
+  agents / doctor / recent jobs / PAYG credits), scheduled-agent
+  activity, suggested next steps, recent jobs panel. The credits tile
+  reads `GET /billing/credits` for the active project and shows a muted
+  `n/a` on a non-PAYG project (`PAYG_NOT_AVAILABLE`).
 - **Projects, Branches, Doctor, Changelog** — manage local config and
   health.
+- **Tokens** — scoped Storage tokens for the selected project
+  (`/token/{p}/list`): create / rotate / revoke, with the secret revealed
+  ONCE in a copy-to-clipboard block, and an opt-in "derive last-used"
+  toggle (`with_last_used=true`) that sorts dormant tokens first and
+  renders `never` / `unknown` / `error` as distinct pills.
 - **Configs, Components (AI search), Storage (with per-column data
   preview), Jobs (cards layout + SSE log stream), Search** — browse a
   selected project.
+  - Configs: detail Drawer with **Run job** (`POST /jobs/{p}/run`) and
+    **Delete** (soft-delete via `DELETE /configs/…`), plus a **Trash**
+    tab (`GET /configs/trash/{p}`) with per-row Restore.
+  - Storage: the table drawer's Info tab renders the raw `definition`
+    (time / range partitioning, clustering, partition filter, partition
+    count) when the stack reports one, and the Schema tab's Description
+    cell is click-to-edit through `POST /storage/columns/{p}/{id}/describe`.
+  - Jobs: per-row **re-run** and **terminate** (`POST /jobs/{p}/run` /
+    `…/terminate`), the latter behind a confirm modal.
 - **SQL Workspaces** — info Drawer with credentials + actions sidebar;
   Open SQL Editor opens a Monaco editor with a clickable Storage
   Explorer tree on the left.
-- **Flows** — visual Mermaid builder of phase DAG + per-phase task list.
+- **Flows** — visual Mermaid builder of phase DAG + per-phase task list,
+  plus a read-only **Notifications** tab (`GET /notifications`) listing
+  who gets paged for the flow, with filter-less project-wide
+  subscriptions shown in their own warning-pilled group.
 - **Schedules** — cross-project cron list + find-by-window query.
 - **Data Apps** — list, start/stop, secrets, validate-repo.
 - **Lineage** — Sharing graph (live, cross-project) + Deep lineage (UI
diff --git a/web/frontend/src/App.tsx b/web/frontend/src/App.tsx
index 6c364ccf..343288c8 100644
--- a/web/frontend/src/App.tsx
+++ b/web/frontend/src/App.tsx
@@ -21,6 +21,7 @@ import { SearchPage } from "./pages/Search";
 import { SharingPage } from "./pages/Sharing";
 import { StoragePage } from "./pages/Storage";
 import { StreamsPage } from "./pages/Streams";
+import { TokensPage } from "./pages/Tokens";
 import { WorkspacesPage } from "./pages/Workspaces";
 import { UIStateProvider, useUIState } from "./state";
 import { ThemeProvider } from "./theme";
@@ -70,6 +71,8 @@ function Router() {
       return <OrgPage />;
     case "members":
       return <MembersPage />;
+    case "tokens":
+      return <TokensPage />;
     case "doctor":
       return <DoctorPage />;
     case "changelog":
diff --git a/web/frontend/src/components/CommandPalette.tsx b/web/frontend/src/components/CommandPalette.tsx
new file mode 100644
index 00000000..6bad0ea8
--- /dev/null
+++ b/web/frontend/src/components/CommandPalette.tsx
@@ -0,0 +1,326 @@
+/**
+ * Ctrl+K / Cmd+K command palette.
+ *
+ * One keystroke to reach anything the shell can already do: jump to a page,
+ * switch the active project, or fire a small action (theme, Swagger docs).
+ * Deliberately NOT a search over Keboola data -- that is the Search page's
+ * job, and mixing "navigate the app" with "query the project" makes both
+ * slower. Everything here resolves locally, so the list never waits on a
+ * network round-trip.
+ *
+ * The page list comes from the sidebar's exported SECTIONS, so a page can
+ * never be reachable from one surface and invisible in the other.
+ */
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Boxes, CornerDownLeft, Search, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { api } from "../api/client";
+import { SECTIONS } from "../layout/Sidebar";
+import { type PageId, useUIState } from "../state";
+import { useTheme } from "../theme";
+import type { Project } from "../types";
+
+type CommandKind = "page" | "project" | "action";
+
+interface Command {
+  id: string;
+  kind: CommandKind;
+  /** Matched + rendered label. */
+  label: string;
+  /** Muted right-hand context (section name, project name, ...). */
+  hint?: string;
+  /** Extra text folded into the match haystack but not rendered. */
+  keywords?: string;
+  icon: React.ComponentType<{ className?: string }>;
+  run: () => void;
+}
+
+/**
+ * Subsequence ("fuzzy") match, case-insensitive. Returns the matched indices
+ * so the caller can highlight them, or null when the query does not match.
+ *
+ * Scoring favours matches that start earlier and stay contiguous, which is
+ * what makes "sto" rank Storage above "Semantic Layer" even though both
+ * contain the letters.
+ */
+function fuzzyMatch(query: string, text: string): { score: number; indices: number[] } | null {
+  if (!query) return { score: 0, indices: [] };
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+  const indices: number[] = [];
+  let ti = 0;
+  let score = 0;
+  let lastHit = -2;
+  for (let qi = 0; qi < q.length; qi++) {
+    const ch = q[qi];
+    const found = t.indexOf(ch, ti);
+    if (found === -1) return null;
+    // Contiguous runs and hits at the very start of the string are cheaper.
+    score += found - ti;
+    if (found !== lastHit + 1) score += 3;
+    if (found === 0) score -= 2;
+    indices.push(found);
+    lastHit = found;
+    ti = found + 1;
+  }
+  return { score, indices };
+}
+
+/** Render `text` with the fuzzy-matched characters tinted cyan. */
+function Highlight({ text, indices }: { text: string; indices: number[] }) {
+  if (indices.length === 0) return <>{text}</>;
+  const hit = new Set(indices);
+  return (
+    <>
+      {text.split("").map((ch, i) =>
+        hit.has(i) ? (
+          <span key={i} className="text-accent">
+            {ch}
+          </span>
+        ) : (
+          <span key={i}>{ch}</span>
+        ),
+      )}
+    </>
+  );
+}
+
+const KIND_LABEL: Record<CommandKind, string> = {
+  page: "page",
+  project: "project",
+  action: "action",
+};
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const { project, setProject, setBranchId, setPage } = useUIState();
+  const { theme, toggle } = useTheme();
+
+  // Projects are already cached by the top bar under this exact key, so
+  // opening the palette normally costs no request.
+  const projectsQ = useQuery<{ projects: Project[] }>({
+    queryKey: ["projects"],
+    queryFn: () => api.get("/projects"),
+    enabled: open,
+  });
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setCursor(0);
+  }, []);
+
+  // Global hotkey. Registered once on the shell so it works from any page.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setOpen((o) => !o);
+        setQuery("");
+        setCursor(0);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  const commands: Command[] = useMemo(() => {
+    const out: Command[] = [];
+    for (const section of SECTIONS) {
+      for (const item of section.items) {
+        out.push({
+          id: `page:${item.id}`,
+          kind: "page",
+          label: item.label,
+          hint: section.title,
+          keywords: item.id,
+          icon: item.icon,
+          run: () => setPage(item.id as PageId),
+        });
+      }
+    }
+    for (const p of projectsQ.data?.projects ?? []) {
+      out.push({
+        id: `project:${p.alias}`,
+        kind: "project",
+        label: p.alias,
+        hint: p.project_name || p.org_name || "switch project",
+        keywords: `${p.project_name ?? ""} ${p.org_name ?? ""} switch`,
+        icon: Boxes,
+        run: () => {
+          setProject(p.alias);
+          // A branch id is only meaningful inside its own project.
+          setBranchId(null);
+        },
+      });
+    }
+    out.push({
+      id: "action:theme",
+      kind: "action",
+      label: `Toggle theme (now ${theme})`,
+      keywords: "dark light colour color scheme",
+      icon: Sparkles,
+      run: toggle,
+    });
+    out.push({
+      id: "action:docs",
+      kind: "action",
+      label: "Open Swagger /docs",
+      hint: "new tab",
+      keywords: "openapi api schema swagger",
+      icon: ArrowRight,
+      run: () => window.open("/docs", "_blank", "noopener,noreferrer"),
+    });
+    return out;
+  }, [projectsQ.data, setPage, setProject, setBranchId, theme, toggle]);
+
+  const results = useMemo(() => {
+    const q = query.trim();
+    const scored: Array<{ cmd: Command; indices: number[]; score: number }> = [];
+    for (const cmd of commands) {
+      const onLabel = fuzzyMatch(q, cmd.label);
+      if (onLabel) {
+        scored.push({ cmd, indices: onLabel.indices, score: onLabel.score });
+        continue;
+      }
+      // Fall back to the invisible haystack (project name, page id, synonyms)
+      // so "colour" finds the theme toggle -- but rank those below label hits.
+      const haystack = `${cmd.label} ${cmd.hint ?? ""} ${cmd.keywords ?? ""}`;
+      const onHaystack = fuzzyMatch(q, haystack);
+      if (onHaystack) scored.push({ cmd, indices: [], score: onHaystack.score + 50 });
+    }
+    if (!q) return scored.slice(0, 50);
+    return scored.sort((a, b) => a.score - b.score).slice(0, 50);
+  }, [commands, query]);
+
+  // Keep the cursor inside the (shrinking) result list as the user types.
+  useEffect(() => {
+    setCursor((c) => (c >= results.length ? 0 : c));
+  }, [results.length]);
+
+  useEffect(() => {
+    if (!open) return;
+    listRef.current
+      ?.querySelector<HTMLElement>(`[data-idx="${cursor}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [cursor, open]);
+
+  if (!open) return null;
+
+  const runAt = (idx: number) => {
+    const hit = results[idx];
+    if (!hit) return;
+    hit.cmd.run();
+    close();
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setCursor((c) => (results.length === 0 ? 0 : (c + 1) % results.length));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setCursor((c) => (results.length === 0 ? 0 : (c - 1 + results.length) % results.length));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      runAt(cursor);
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[60] bg-zinc-900/50 backdrop-blur-sm flex items-start justify-center p-4 pt-[12vh] dark:bg-black/70"
+      onClick={close}
+      role="presentation"
+    >
+      <div
+        className="nerd-card w-full max-w-xl p-0 overflow-hidden border-keboola/40 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 px-3 py-2.5 border-b border-zinc-200 dark:border-zinc-800">
+          <Search className="w-4 h-4 text-keboola shrink-0" />
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder="jump to a page, switch project, run an action…"
+            className="flex-1 bg-transparent text-sm focus:outline-none placeholder-zinc-400 dark:placeholder-zinc-600"
+            aria-label="Command palette"
+          />
+          <span className="nerd-pill text-[10px] shrink-0">esc</span>
+        </div>
+
+        <div ref={listRef} className="max-h-[50vh] overflow-y-auto">
+          {results.length === 0 ? (
+            <div className="px-4 py-6 text-xs text-zinc-500 text-center">
+              Nothing matches “{query}”.
+            </div>
+          ) : (
+            results.map(({ cmd, indices }, i) => {
+              const Icon = cmd.icon;
+              const active = i === cursor;
+              return (
+                <button
+                  key={cmd.id}
+                  type="button"
+                  data-idx={i}
+                  onMouseEnter={() => setCursor(i)}
+                  onClick={() => runAt(i)}
+                  className={`w-full text-left px-3 py-2 flex items-center gap-2.5 text-sm border-l-2 ${
+                    active
+                      ? "border-keboola bg-keboola/10 text-keboola"
+                      : "border-transparent text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900/60"
+                  }`}
+                >
+                  <Icon className="w-3.5 h-3.5 shrink-0 opacity-80" />
+                  <span className="truncate">
+                    <Highlight text={cmd.label} indices={indices} />
+                  </span>
+                  {cmd.kind === "project" && cmd.label === project ? (
+                    <span className="nerd-pill-green text-[10px] shrink-0">active</span>
+                  ) : null}
+                  <span className="ml-auto flex items-center gap-2 shrink-0">
+                    {cmd.hint ? (
+                      <span className="text-[10px] text-zinc-500 truncate max-w-[12rem]">
+                        {cmd.hint}
+                      </span>
+                    ) : null}
+                    <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-600">
+                      {KIND_LABEL[cmd.kind]}
+                    </span>
+                  </span>
+                </button>
+              );
+            })
+          )}
+        </div>
+
+        <div className="flex items-center gap-3 px-3 py-1.5 border-t border-zinc-200 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-600">
+          <span className="flex items-center gap-1">
+            <CornerDownLeft className="w-3 h-3" /> run
+          </span>
+          <span>↑↓ move</span>
+          <span>esc close</span>
+          <span className="ml-auto">{results.length} result(s)</span>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/web/frontend/src/components/ConfirmModal.tsx b/web/frontend/src/components/ConfirmModal.tsx
index a3574366..002bf9ca 100644
--- a/web/frontend/src/components/ConfirmModal.tsx
+++ b/web/frontend/src/components/ConfirmModal.tsx
@@ -1,6 +1,7 @@
 import { AlertTriangle, X } from "lucide-react";
 import { useEffect, useRef } from "react";
 import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
 
 /**
  * Lightweight confirmation dialog matching the app's modal style (see
@@ -8,6 +9,14 @@ import type { ReactNode } from "react";
  * deserve a clearer, on-brand prompt. Esc or a backdrop click cancels. On open
  * we focus Cancel for ``danger`` modals (so a stray Enter does NOT fire the
  * destructive action) and the confirm button otherwise.
+ *
+ * Rendered through a portal into ``document.body``, for the same reason
+ * ``Drawer`` is: most confirms are raised from INSIDE a drawer, whose
+ * ``backdrop-blur`` establishes a containing block for fixed-position
+ * descendants and whose body scrolls under ``overflow-auto``. Portaling makes
+ * the confirm's placement and stacking independent of wherever it was
+ * declared, and puts it after the drawer's own portal node so it always
+ * paints on top. Callers just render ``<ConfirmModal .../>`` inline.
  */
 export function ConfirmModal({
   title,
@@ -45,7 +54,7 @@ export function ConfirmModal({
     return () => window.removeEventListener("keydown", onKey);
   }, [danger, busy, onCancel]);
 
-  return (
+  return createPortal(
     <div
       className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4"
       onClick={() => {
@@ -109,6 +118,7 @@ export function ConfirmModal({
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
diff --git a/web/frontend/src/layout/Shell.tsx b/web/frontend/src/layout/Shell.tsx
index 1ef7b743..06db03d2 100644
--- a/web/frontend/src/layout/Shell.tsx
+++ b/web/frontend/src/layout/Shell.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { CommandPalette } from "../components/CommandPalette";
 import { Sidebar } from "./Sidebar";
 import { StatusBar } from "./StatusBar";
 import { TopBar } from "./TopBar";
@@ -14,6 +15,9 @@ export function Shell({ children }: { children: ReactNode }) {
         </main>
       </div>
       <StatusBar />
+      {/* Mounted at the shell so Ctrl/Cmd+K works from every page. Renders
+          null until opened, so it costs nothing while closed. */}
+      <CommandPalette />
     </div>
   );
 }
diff --git a/web/frontend/src/layout/Sidebar.tsx b/web/frontend/src/layout/Sidebar.tsx
index b44bbacb..367d4c19 100644
--- a/web/frontend/src/layout/Sidebar.tsx
+++ b/web/frontend/src/layout/Sidebar.tsx
@@ -9,6 +9,7 @@ import {
   Database,
   GitBranch,
   Heart,
+  KeyRound,
   Layers,
   LayoutDashboard,
   Lock,
@@ -24,10 +25,23 @@ import {
 import { clsx } from "clsx";
 import { type PageId, useUIState } from "../state";
 
-const SECTIONS: Array<{
+export interface NavItem {
+  id: PageId;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+export interface NavSection {
   title: string;
-  items: Array<{ id: PageId; label: string; icon: React.ComponentType<{ className?: string }> }>;
-}> = [
+  items: NavItem[];
+}
+
+/**
+ * Single source of truth for the app's navigable pages. The sidebar renders
+ * it grouped; the command palette (Ctrl/Cmd+K) flattens it into jump targets.
+ * Exported so a new page can never appear in one surface and not the other.
+ */
+export const SECTIONS: NavSection[] = [
   {
     title: "Home",
     items: [{ id: "dashboard", label: "Dashboard", icon: LayoutDashboard }],
@@ -37,6 +51,7 @@ const SECTIONS: Array<{
     items: [
       { id: "projects", label: "Projects", icon: Boxes },
       { id: "branches", label: "Branches", icon: GitBranch },
+      { id: "tokens", label: "Tokens", icon: KeyRound },
       { id: "doctor", label: "Doctor", icon: Heart },
       { id: "changelog", label: "Changelog", icon: Activity },
     ],
diff --git a/web/frontend/src/layout/StatusBar.tsx b/web/frontend/src/layout/StatusBar.tsx
index f014919c..b2a70ae6 100644
--- a/web/frontend/src/layout/StatusBar.tsx
+++ b/web/frontend/src/layout/StatusBar.tsx
@@ -20,6 +20,9 @@ export function StatusBar() {
           ⬆ {v.latest_version} available
         </span>
       ) : null}
+      <span className="text-zinc-600 dark:text-zinc-500">
+        <kbd className="font-mono">ctrl+k</kbd> — command palette
+      </span>
       <span className="ml-auto">localhost only ・ bearer auth ・ kernel: python ・ ui: typescript</span>
     </footer>
   );
diff --git a/web/frontend/src/pages/Agents.tsx b/web/frontend/src/pages/Agents.tsx
index eea6a6b9..52b02183 100644
--- a/web/frontend/src/pages/Agents.tsx
+++ b/web/frontend/src/pages/Agents.tsx
@@ -19,6 +19,7 @@ import {
   type AgentEvent,
   type RunSummary,
 } from "../components/AgentRunView";
+import { ConfirmModal } from "../components/ConfirmModal";
 import { Drawer } from "../components/Drawer";
 import { ErrorBox, Loading, PageTitle, TwoPathEmpty } from "../components/Empty";
 import { JsonView } from "../components/JsonView";
@@ -525,6 +526,10 @@ function NewTaskDrawer({
   const [testRunning, setTestRunning] = useState(false);
   const testHandleRef = useRef<SsePostHandle | null>(null);
 
+  // Open state of the "discard unsaved changes?" confirmation (rendered at the
+  // bottom of this component). Replaces the native window.confirm().
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+
   // Dirty-form guard: snapshot the initial state on first render, then compare
   // on every render. If the user touched anything, Esc / backdrop / X clicks
   // ask for confirmation before discarding the form (drawer unmount = state loss).
@@ -563,7 +568,10 @@ function NewTaskDrawer({
   });
   const dirty = currentSnapshot !== initialSnapshot;
   const handleClose = () => {
-    if (dirty && !window.confirm("Discard unsaved changes?")) return;
+    if (dirty) {
+      setConfirmDiscard(true);
+      return;
+    }
     onClose();
   };
 
@@ -690,327 +698,346 @@ function NewTaskDrawer({
   });
 
   return (
-    <Drawer
-      open={true}
-      onClose={handleClose}
-      title={isEditing ? `Edit task: ${existing!.name}` : "New scheduled agent task"}
-      subtitle={
-        isEditing
-          ? "Modify the schedule or action. Save updates the task in-place; existing run history is preserved."
-          : "Pick a cron schedule and one of two actions: AI agent (claude/codex/gemini) or kbagent CLI command."
-      }
-      width={
-        testRunning || testEvents.length > 0 || testRun
-          ? "max-w-6xl"
-          : "max-w-3xl"
-      }
-      actions={
-        <>
-          {testRunning ? (
-            <button
-              type="button"
-              className="nerd-btn hover:text-red-400"
-              onClick={cancelTest}
-              title="Abort the running test"
-            >
-              <X className="w-3 h-3 inline mr-1" />
-              cancel ({testElapsed}s)
-            </button>
-          ) : (
+    <>
+      <Drawer
+        open={true}
+        onClose={handleClose}
+        title={isEditing ? `Edit task: ${existing!.name}` : "New scheduled agent task"}
+        subtitle={
+          isEditing
+            ? "Modify the schedule or action. Save updates the task in-place; existing run history is preserved."
+            : "Pick a cron schedule and one of two actions: AI agent (claude/codex/gemini) or kbagent CLI command."
+        }
+        width={
+          testRunning || testEvents.length > 0 || testRun
+            ? "max-w-6xl"
+            : "max-w-3xl"
+        }
+        actions={
+          <>
+            {testRunning ? (
+              <button
+                type="button"
+                className="nerd-btn hover:text-red-400"
+                onClick={cancelTest}
+                title="Abort the running test"
+              >
+                <X className="w-3 h-3 inline mr-1" />
+                cancel ({testElapsed}s)
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="nerd-btn hover:text-neon-pink"
+                disabled={createMu.isPending}
+                onClick={startTest}
+                title="Run this action right now without saving the schedule"
+              >
+                <Play className="w-3 h-3 inline mr-1" />
+                Test now
+              </button>
+            )}
             <button
               type="button"
-              className="nerd-btn hover:text-neon-pink"
-              disabled={createMu.isPending}
-              onClick={startTest}
-              title="Run this action right now without saving the schedule"
+              className="nerd-btn hover:text-keboola"
+              disabled={!name || createMu.isPending}
+              onClick={() => {
+                setError(null);
+                createMu.mutate();
+              }}
             >
-              <Play className="w-3 h-3 inline mr-1" />
-              Test now
+              <Bot className="w-3 h-3 inline mr-1" />
+              {createMu.isPending
+                ? isEditing
+                  ? "saving..."
+                  : "creating..."
+                : isEditing
+                  ? "Save"
+                  : "Create"}
             </button>
-          )}
-          <button
-            type="button"
-            className="nerd-btn hover:text-keboola"
-            disabled={!name || createMu.isPending}
-            onClick={() => {
-              setError(null);
-              createMu.mutate();
-            }}
-          >
-            <Bot className="w-3 h-3 inline mr-1" />
-            {createMu.isPending
-              ? isEditing
-                ? "saving..."
-                : "creating..."
-              : isEditing
-                ? "Save"
-                : "Create"}
-          </button>
-        </>
-      }
-    >
-      <div className="space-y-4">
-        <label className="text-xs text-zinc-400 block">
-          Name
-          <input
-            className="nerd-input w-full mt-1"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="e.g. Nightly error-job triage"
-            required
-          />
-        </label>
-        <label className="text-xs text-zinc-400 block">
-          Description (optional)
-          <input
-            className="nerd-input w-full mt-1"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-          />
-        </label>
-
-        <div>
-          <label className="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-300 mb-2">
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <label className="text-xs text-zinc-400 block">
+            Name
             <input
-              type="checkbox"
-              checked={manual}
-              onChange={(e) => setManual(e.target.checked)}
+              className="nerd-input w-full mt-1"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Nightly error-job triage"
+              required
             />
-            <span>
-              Manual trigger only{" "}
-              <span className="text-zinc-500">
-                (no schedule — runs only via Test now / Run, or as a chained downstream)
-              </span>
-            </span>
           </label>
-          {/* Hide the cron block entirely when manual — the field stays in
-              state so the user can flip back without retyping, but showing
-              "0 0 * * *" next to a "Manual trigger only" checkbox is
-              confusing (user reported it). */}
-          {!manual ? (
-            <>
-              <div className="text-xs text-zinc-400 mb-1">Cron schedule</div>
+          <label className="text-xs text-zinc-400 block">
+            Description (optional)
+            <input
+              className="nerd-input w-full mt-1"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </label>
+
+          <div>
+            <label className="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-300 mb-2">
               <input
-                className="nerd-input w-full font-mono"
-                value={cron}
-                onChange={(e) => setCron(e.target.value)}
+                type="checkbox"
+                checked={manual}
+                onChange={(e) => setManual(e.target.checked)}
               />
-              <div className="flex flex-wrap gap-1 mt-2">
-                {CRON_PRESETS.map((p) => (
-                  <button
-                    key={p.cron}
-                    type="button"
-                    className="nerd-pill hover:border-keboola hover:text-keboola"
-                    onClick={() => setCron(p.cron)}
-                  >
-                    {p.label}
-                  </button>
-                ))}
-              </div>
-            </>
-          ) : null}
-          {!manual && previewQ.data ? (
-            <div className="text-xs text-zinc-500 mt-2">
-              Next firings:{" "}
-              <span className="font-mono text-accent">
-                {previewQ.data.firings
-                  .slice(0, 3)
-                  .map((f) => new Date(f).toLocaleString())
-                  .join(" → ")}
+              <span>
+                Manual trigger only{" "}
+                <span className="text-zinc-500">
+                  (no schedule — runs only via Test now / Run, or as a chained downstream)
+                </span>
               </span>
-            </div>
-          ) : !manual && previewQ.error ? (
-            <div className="text-xs text-red-400 mt-2">Invalid cron expression</div>
-          ) : null}
-        </div>
-
-        {/* Chain configuration: after this task's run completes, optionally
-            fire another task with this run's id passed as upstream context. */}
-        <div>
-          <div className="text-xs text-zinc-400 mb-1">
-            Chain → run another task when this one completes
-          </div>
-          {chainCandidates.length === 0 ? (
-            <div className="text-xs text-zinc-500 italic">
-              No other tasks yet. Save this task first, then add another to chain to.
-            </div>
-          ) : (
-            <div className="flex flex-wrap items-center gap-2">
-              <select
-                className="nerd-input"
-                value={trigger?.task_id ?? ""}
-                onChange={(e) => {
-                  const id = e.target.value;
-                  if (!id) {
-                    setTrigger(null);
-                  } else {
-                    setTrigger({ on: trigger?.on ?? "success", task_id: id });
-                  }
-                }}
-              >
-                <option value="">— no chain —</option>
-                {chainCandidates.map((t) => (
-                  <option key={t.id} value={t.id}>
-                    {t.name}
-                  </option>
-                ))}
-              </select>
-              {trigger ? (
-                <>
-                  <span className="text-xs text-zinc-500">on</span>
-                  {(["success", "error", "always"] as TriggerOn[]).map((opt) => (
+            </label>
+            {/* Hide the cron block entirely when manual — the field stays in
+                state so the user can flip back without retyping, but showing
+                "0 0 * * *" next to a "Manual trigger only" checkbox is
+                confusing (user reported it). */}
+            {!manual ? (
+              <>
+                <div className="text-xs text-zinc-400 mb-1">Cron schedule</div>
+                <input
+                  className="nerd-input w-full font-mono"
+                  value={cron}
+                  onChange={(e) => setCron(e.target.value)}
+                />
+                <div className="flex flex-wrap gap-1 mt-2">
+                  {CRON_PRESETS.map((p) => (
                     <button
-                      key={opt}
+                      key={p.cron}
                       type="button"
-                      className={`nerd-pill ${
-                        trigger.on === opt ? "border-keboola text-keboola" : ""
-                      }`}
-                      onClick={() => setTrigger({ ...trigger, on: opt })}
+                      className="nerd-pill hover:border-keboola hover:text-keboola"
+                      onClick={() => setCron(p.cron)}
                     >
-                      {opt}
+                      {p.label}
                     </button>
                   ))}
-                </>
-              ) : null}
-            </div>
-          )}
-          {trigger ? (
-            <div className="text-xs text-zinc-500 mt-2">
-              After each run that ends with status{" "}
-              <span className="font-mono">{trigger.on}</span>, the downstream task
-              runs with <span className="font-mono">KBAGENT_UPSTREAM_RUN_ID</span> +{" "}
-              <span className="font-mono">KBAGENT_UPSTREAM_TASK_ID</span> in its env.
-            </div>
-          ) : null}
-        </div>
-
-        <div>
-          <div className="text-xs text-zinc-400 mb-1">Action type</div>
-          <div className="flex gap-2 flex-wrap">
-            <button
-              type="button"
-              className={`nerd-btn flex items-center gap-1 ${
-                actionType === "ai_agent" ? "border-neon-pink text-neon-pink" : ""
-              }`}
-              onClick={() => setActionType("ai_agent")}
-            >
-              <Brain className="w-3 h-3" /> AI agent
-            </button>
-            <button
-              type="button"
-              className={`nerd-btn flex items-center gap-1 ${
-                actionType === "cli_command" ? "border-keboola text-keboola" : ""
-              }`}
-              onClick={() => setActionType("cli_command")}
-            >
-              <Terminal className="w-3 h-3" /> CLI command
-            </button>
+                </div>
+              </>
+            ) : null}
+            {!manual && previewQ.data ? (
+              <div className="text-xs text-zinc-500 mt-2">
+                Next firings:{" "}
+                <span className="font-mono text-accent">
+                  {previewQ.data.firings
+                    .slice(0, 3)
+                    .map((f) => new Date(f).toLocaleString())
+                    .join(" → ")}
+                </span>
+              </div>
+            ) : !manual && previewQ.error ? (
+              <div className="text-xs text-red-400 mt-2">Invalid cron expression</div>
+            ) : null}
           </div>
-        </div>
 
-        {actionType === "ai_agent" ? (
-          <>
-            <div>
-              <div className="text-xs text-zinc-400 mb-1">AI CLI</div>
-              <div className="flex gap-2">
-                {(["claude", "codex", "gemini"] as const).map((c) => (
-                  <button
-                    key={c}
-                    type="button"
-                    className={`nerd-btn ${
-                      aiCli === c ? "border-neon-pink text-neon-pink" : ""
-                    }`}
-                    onClick={() => setAiCli(c)}
-                  >
-                    {c}
-                  </button>
-                ))}
+          {/* Chain configuration: after this task's run completes, optionally
+              fire another task with this run's id passed as upstream context. */}
+          <div>
+            <div className="text-xs text-zinc-400 mb-1">
+              Chain → run another task when this one completes
+            </div>
+            {chainCandidates.length === 0 ? (
+              <div className="text-xs text-zinc-500 italic">
+                No other tasks yet. Save this task first, then add another to chain to.
               </div>
-              <div className="text-xs text-zinc-600 mt-2">
-                The CLI must be installed and authenticated on this machine.
-                The agent runs once with the prompt below and exits; its full
-                response is captured into the run history.
+            ) : (
+              <div className="flex flex-wrap items-center gap-2">
+                <select
+                  className="nerd-input"
+                  value={trigger?.task_id ?? ""}
+                  onChange={(e) => {
+                    const id = e.target.value;
+                    if (!id) {
+                      setTrigger(null);
+                    } else {
+                      setTrigger({ on: trigger?.on ?? "success", task_id: id });
+                    }
+                  }}
+                >
+                  <option value="">— no chain —</option>
+                  {chainCandidates.map((t) => (
+                    <option key={t.id} value={t.id}>
+                      {t.name}
+                    </option>
+                  ))}
+                </select>
+                {trigger ? (
+                  <>
+                    <span className="text-xs text-zinc-500">on</span>
+                    {(["success", "error", "always"] as TriggerOn[]).map((opt) => (
+                      <button
+                        key={opt}
+                        type="button"
+                        className={`nerd-pill ${
+                          trigger.on === opt ? "border-keboola text-keboola" : ""
+                        }`}
+                        onClick={() => setTrigger({ ...trigger, on: opt })}
+                      >
+                        {opt}
+                      </button>
+                    ))}
+                  </>
+                ) : null}
               </div>
+            )}
+            {trigger ? (
+              <div className="text-xs text-zinc-500 mt-2">
+                After each run that ends with status{" "}
+                <span className="font-mono">{trigger.on}</span>, the downstream task
+                runs with <span className="font-mono">KBAGENT_UPSTREAM_RUN_ID</span> +{" "}
+                <span className="font-mono">KBAGENT_UPSTREAM_TASK_ID</span> in its env.
+              </div>
+            ) : null}
+          </div>
+
+          <div>
+            <div className="text-xs text-zinc-400 mb-1">Action type</div>
+            <div className="flex gap-2 flex-wrap">
+              <button
+                type="button"
+                className={`nerd-btn flex items-center gap-1 ${
+                  actionType === "ai_agent" ? "border-neon-pink text-neon-pink" : ""
+                }`}
+                onClick={() => setActionType("ai_agent")}
+              >
+                <Brain className="w-3 h-3" /> AI agent
+              </button>
+              <button
+                type="button"
+                className={`nerd-btn flex items-center gap-1 ${
+                  actionType === "cli_command" ? "border-keboola text-keboola" : ""
+                }`}
+                onClick={() => setActionType("cli_command")}
+              >
+                <Terminal className="w-3 h-3" /> CLI command
+              </button>
             </div>
-            <PromptHelperPanel
-              cli={aiCli}
-              draft={aiPrompt}
-              project={project}
-              onApply={(p) => setAiPrompt(p)}
-            />
-            <label className="text-xs text-zinc-400 block">
-              Prompt
-              <textarea
-                className="nerd-input w-full mt-1 font-mono h-40"
-                value={aiPrompt}
-                onChange={(e) => setAiPrompt(e.target.value)}
-                placeholder="Check overnight error jobs and summarize the top 3 root causes"
+          </div>
+
+          {actionType === "ai_agent" ? (
+            <>
+              <div>
+                <div className="text-xs text-zinc-400 mb-1">AI CLI</div>
+                <div className="flex gap-2">
+                  {(["claude", "codex", "gemini"] as const).map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      className={`nerd-btn ${
+                        aiCli === c ? "border-neon-pink text-neon-pink" : ""
+                      }`}
+                      onClick={() => setAiCli(c)}
+                    >
+                      {c}
+                    </button>
+                  ))}
+                </div>
+                <div className="text-xs text-zinc-600 mt-2">
+                  The CLI must be installed and authenticated on this machine.
+                  The agent runs once with the prompt below and exits; its full
+                  response is captured into the run history.
+                </div>
+              </div>
+              <PromptHelperPanel
+                cli={aiCli}
+                draft={aiPrompt}
+                project={project}
+                onApply={(p) => setAiPrompt(p)}
               />
-            </label>
+              <label className="text-xs text-zinc-400 block">
+                Prompt
+                <textarea
+                  className="nerd-input w-full mt-1 font-mono h-40"
+                  value={aiPrompt}
+                  onChange={(e) => setAiPrompt(e.target.value)}
+                  placeholder="Check overnight error jobs and summarize the top 3 root causes"
+                />
+              </label>
+              <label className="text-xs text-zinc-400 block">
+                Extra CLI args (optional, space-separated)
+                <input
+                  className="nerd-input w-full mt-1 font-mono"
+                  value={aiExtraArgs}
+                  onChange={(e) => setAiExtraArgs(e.target.value)}
+                  placeholder="--allowed-tools Read,Bash"
+                />
+              </label>
+            </>
+          ) : (
             <label className="text-xs text-zinc-400 block">
-              Extra CLI args (optional, space-separated)
+              Argv (will be prefixed with 'kbagent' if missing)
               <input
                 className="nerd-input w-full mt-1 font-mono"
-                value={aiExtraArgs}
-                onChange={(e) => setAiExtraArgs(e.target.value)}
-                placeholder="--allowed-tools Read,Bash"
+                value={argv}
+                onChange={(e) => setArgv(e.target.value)}
               />
+              <span className="text-zinc-600">
+                stdout/stderr is captured into the run history.
+              </span>
             </label>
-          </>
-        ) : (
-          <label className="text-xs text-zinc-400 block">
-            Argv (will be prefixed with 'kbagent' if missing)
+          )}
+
+          <label className="flex items-center gap-2 text-xs text-zinc-400">
             <input
-              className="nerd-input w-full mt-1 font-mono"
-              value={argv}
-              onChange={(e) => setArgv(e.target.value)}
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
             />
-            <span className="text-zinc-600">
-              stdout/stderr is captured into the run history.
-            </span>
+            Enable immediately (will start running per cron)
           </label>
-        )}
-
-        <label className="flex items-center gap-2 text-xs text-zinc-400">
-          <input
-            type="checkbox"
-            checked={enabled}
-            onChange={(e) => setEnabled(e.target.checked)}
-          />
-          Enable immediately (will start running per cron)
-        </label>
-        {error ? <ErrorBox message={error} /> : null}
-      </div>
-      {testRunning || testEvents.length > 0 ? (
-        <div className="mt-4 space-y-3">
-          <AgentRunView
-            events={testEvents}
-            running={testRunning}
-            elapsed={testElapsed}
-            onCancel={cancelTest}
-          />
-          <AgentRunRaw events={testEvents} />
-          {testRun?.output && ("stdout" in testRun.output || "results" in testRun.output) ? (
-            <div className="nerd-card">
-              <h3 className="text-xs uppercase tracking-wider text-zinc-500 mb-2">
-                Raw output (cli action)
-              </h3>
-              {testRun.output && "stdout" in testRun.output ? (
-                <pre
-                  className="nerd-code whitespace-pre-wrap"
-                  style={{ maxHeight: "240px" }}
-                >
-                  {String(testRun.output.stdout ?? "")}
-                </pre>
-              ) : null}
-              {testRun.output && "results" in testRun.output ? (
-                <JsonView data={testRun.output} maxHeight="320px" />
-              ) : null}
-            </div>
-          ) : null}
+          {error ? <ErrorBox message={error} /> : null}
         </div>
+        {testRunning || testEvents.length > 0 ? (
+          <div className="mt-4 space-y-3">
+            <AgentRunView
+              events={testEvents}
+              running={testRunning}
+              elapsed={testElapsed}
+              onCancel={cancelTest}
+            />
+            <AgentRunRaw events={testEvents} />
+            {testRun?.output && ("stdout" in testRun.output || "results" in testRun.output) ? (
+              <div className="nerd-card">
+                <h3 className="text-xs uppercase tracking-wider text-zinc-500 mb-2">
+                  Raw output (cli action)
+                </h3>
+                {testRun.output && "stdout" in testRun.output ? (
+                  <pre
+                    className="nerd-code whitespace-pre-wrap"
+                    style={{ maxHeight: "240px" }}
+                  >
+                    {String(testRun.output.stdout ?? "")}
+                  </pre>
+                ) : null}
+                {testRun.output && "results" in testRun.output ? (
+                  <JsonView data={testRun.output} maxHeight="320px" />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </Drawer>
+      {/* ConfirmModal portals itself to <body>, so declaring it as a sibling
+          of the Drawer here is purely for readability -- placement and
+          stacking do not depend on where it sits in this tree. */}
+      {confirmDiscard ? (
+        <ConfirmModal
+          danger
+          title="Discard unsaved changes?"
+          body="This form has unsaved edits. Closing it now throws them away — nothing is saved to the task."
+          confirmLabel="Discard"
+          cancelLabel="Keep editing"
+          onConfirm={() => {
+            setConfirmDiscard(false);
+            onClose();
+          }}
+          onCancel={() => setConfirmDiscard(false)}
+        />
       ) : null}
-    </Drawer>
+    </>
   );
 }
 
diff --git a/web/frontend/src/pages/Configs.tsx b/web/frontend/src/pages/Configs.tsx
index d7791df1..42d81978 100644
--- a/web/frontend/src/pages/Configs.tsx
+++ b/web/frontend/src/pages/Configs.tsx
@@ -1,6 +1,9 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { PlayCircle, RotateCcw, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { api } from "../api/client";
+import { ConfirmModal } from "../components/ConfirmModal";
+import { Drawer } from "../components/Drawer";
 import { Empty, ErrorBox, Loading, PageTitle } from "../components/Empty";
 import { JsonView } from "../components/JsonView";
 import { DataTable } from "../components/Table";
@@ -12,8 +15,28 @@ interface ConfigsResp {
   errors: ProjectError[];
 }
 
+/** One row of `GET /configs/trash/{project}` (mirrors `shape_trash_entry`). */
+interface TrashEntry {
+  component_id: string;
+  config_id: string;
+  name: string;
+  version: number | null;
+  deleted_change_description: string | null;
+  deleted_at: string | null;
+}
+
+interface TrashResp {
+  project_alias: string;
+  branch_id: number | null;
+  component_id: string | null;
+  trash: TrashEntry[];
+}
+
+type ConfigsTab = "configs" | "trash";
+
 export function ConfigsPage() {
   const { project, branchId } = useUIState();
+  const [tab, setTab] = useState<ConfigsTab>("configs");
   const [filterText, setFilterText] = useState("");
   const [selected, setSelected] = useState<ConfigSummary | null>(null);
 
@@ -23,7 +46,7 @@ export function ConfigsPage() {
       api.get("/configs", {
         query: { project: project ?? undefined, branch_id: branchId ?? undefined },
       }),
-    enabled: !!project,
+    enabled: !!project && tab === "configs",
   });
 
   const filtered =
@@ -41,22 +64,44 @@ export function ConfigsPage() {
         title="Configurations"
         description={`Component configs in ${project ?? "(no project)"}${branchId ? ` (branch #${branchId})` : ""}`}
       />
-      <input
-        className="nerd-input w-full max-w-md"
-        placeholder="filter by name / id / component..."
-        value={filterText}
-        onChange={(e) => setFilterText(e.target.value)}
-      />
+      <div className="flex gap-2">
+        {(["configs", "trash"] as const).map((t) => (
+          <button
+            key={t}
+            type="button"
+            className={`nerd-btn ${tab === t ? "border-keboola text-keboola" : ""}`}
+            onClick={() => setTab(t)}
+          >
+            {t === "trash" ? (
+              <>
+                <Trash2 className="w-3 h-3 inline mr-1" />
+                trash
+              </>
+            ) : (
+              t
+            )}
+          </button>
+        ))}
+      </div>
+
       {!project ? (
         <Empty title="Select a project from the top bar" />
+      ) : tab === "trash" ? (
+        <TrashTab />
       ) : q.isLoading ? (
         <Loading />
       ) : q.error ? (
         <ErrorBox message={(q.error as Error).message} />
       ) : (
         <>
+          <input
+            className="nerd-input w-full max-w-md"
+            placeholder="filter by name / id / component..."
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+          />
           {q.data?.errors.length ? (
-            <div className="text-amber-400 text-xs">
+            <div className="text-amber-700 dark:text-neon-amber text-xs">
               {q.data.errors.length} project error(s) -- some configs may be missing.
             </div>
           ) : null}
@@ -66,7 +111,7 @@ export function ConfigsPage() {
             onRowClick={(c) => setSelected(c)}
             columns={[
               { header: "Component", cell: (c) => <span className="text-accent">{c.component_id}</span> },
-              { header: "Config ID", cell: (c) => <span className="text-zinc-400">{c.config_id}</span> },
+              { header: "Config ID", cell: (c) => <span className="text-zinc-500">{c.config_id}</span> },
               { header: "Name", cell: (c) => <span className="font-medium">{c.config_name}</span> },
               { header: "Folder", cell: (c) => <span className="text-zinc-500 text-xs">{c.folder ?? ""}</span> },
               { header: "Modified", cell: (c) => <span className="text-zinc-500 text-xs">{c.last_modified ?? ""}</span> },
@@ -80,6 +125,7 @@ export function ConfigsPage() {
           alias={selected.project_alias}
           componentId={selected.component_id}
           configId={selected.config_id}
+          name={selected.config_name}
           onClose={() => setSelected(null)}
         />
       ) : null}
@@ -87,18 +133,119 @@ export function ConfigsPage() {
   );
 }
 
+/**
+ * Trash view (#643). A `config delete` is a SOFT delete: the Storage API moves
+ * the configuration here and it stays restorable. (The same DELETE issued at
+ * something already in the trash purges it permanently, which is exactly why
+ * the server refuses to re-delete and why this view only ever restores.)
+ */
+function TrashTab() {
+  const { project, branchId } = useUIState();
+  const qc = useQueryClient();
+  const [error, setError] = useState<string | null>(null);
+  const [restoring, setRestoring] = useState<string | null>(null);
+
+  const q = useQuery<TrashResp>({
+    queryKey: ["config-trash", project, branchId],
+    queryFn: () =>
+      api.get(`/configs/trash/${encodeURIComponent(project!)}`, {
+        query: { branch_id: branchId ?? undefined },
+      }),
+    enabled: !!project,
+  });
+
+  const restore = useMutation({
+    mutationFn: (entry: TrashEntry) =>
+      api.post(
+        `/configs/${encodeURIComponent(project!)}/${encodeURIComponent(entry.component_id)}/${encodeURIComponent(entry.config_id)}/restore`,
+        undefined,
+        { query: { branch_id: branchId ?? undefined } },
+      ),
+    onMutate: (entry) => {
+      setError(null);
+      setRestoring(`${entry.component_id}/${entry.config_id}`);
+    },
+    onError: (e) => setError((e as Error).message),
+    onSettled: () => {
+      setRestoring(null);
+      qc.invalidateQueries({ queryKey: ["config-trash"] });
+      qc.invalidateQueries({ queryKey: ["configs"] });
+    },
+  });
+
+  if (q.isLoading) return <Loading />;
+  if (q.error) return <ErrorBox message={(q.error as Error).message} />;
+
+  const rows = q.data?.trash ?? [];
+  if (rows.length === 0) {
+    return <Empty title="Trash is empty — deletes are reversible here." />;
+  }
+
+  return (
+    <div className="space-y-3">
+      {error ? <ErrorBox message={error} /> : null}
+      <DataTable
+        rows={rows}
+        rowKey={(t) => `${t.component_id}/${t.config_id}`}
+        columns={[
+          { header: "Component", cell: (t) => <span className="text-accent">{t.component_id}</span> },
+          { header: "Config ID", cell: (t) => <span className="text-zinc-500">{t.config_id}</span> },
+          { header: "Name", cell: (t) => <span className="font-medium">{t.name}</span> },
+          {
+            header: "Deleted at",
+            cell: (t) => <span className="text-zinc-500 text-xs">{t.deleted_at ?? "—"}</span>,
+          },
+          {
+            header: "Version",
+            align: "right",
+            cell: (t) => (
+              <span className="text-zinc-500 text-xs">{t.version != null ? `v${t.version}` : "—"}</span>
+            ),
+          },
+          {
+            header: "Actions",
+            align: "right",
+            cell: (t) => {
+              const key = `${t.component_id}/${t.config_id}`;
+              return (
+                <button
+                  type="button"
+                  className="nerd-btn text-[10px] py-0.5 px-1.5 flex items-center gap-1 hover:text-keboola disabled:opacity-50 ml-auto"
+                  disabled={restoring === key}
+                  onClick={() => restore.mutate(t)}
+                  title={t.deleted_change_description ?? "Restore this configuration"}
+                >
+                  <RotateCcw className={`w-3 h-3 ${restoring === key ? "animate-spin" : ""}`} />
+                  {restoring === key ? "restoring…" : "restore"}
+                </button>
+              );
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
 function ConfigDetail({
   alias,
   componentId,
   configId,
+  name,
   onClose,
 }: {
   alias: string;
   componentId: string;
   configId: string;
+  name: string;
   onClose: () => void;
 }) {
-  const { branchId } = useUIState();
+  const { branchId, setPage } = useUIState();
+  const qc = useQueryClient();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [startedJobId, setStartedJobId] = useState<string | null>(null);
+
   const detailQ = useQuery({
     queryKey: ["config-detail", alias, componentId, configId, branchId],
     queryFn: () =>
@@ -107,19 +254,118 @@ function ConfigDetail({
         { query: { branch_id: branchId ?? undefined } },
       ),
   });
+
+  // Fire-and-return: `wait` stays false so the drawer never blocks on a job
+  // that can run for an hour. The user follows it on the Jobs page instead.
+  const runJob = useMutation<{ id?: string | number }>({
+    mutationFn: () =>
+      api.post(`/jobs/${encodeURIComponent(alias)}/run`, {
+        component_id: componentId,
+        config_id: configId,
+        branch_id: branchId ?? undefined,
+      }),
+    onError: (e) => setActionError((e as Error).message),
+    onSuccess: (data) => {
+      setActionError(null);
+      setStartedJobId(data?.id != null ? String(data.id) : "");
+      qc.invalidateQueries({ queryKey: ["jobs"] });
+      qc.invalidateQueries({ queryKey: ["dashboard-jobs"] });
+    },
+  });
+
+  const del = useMutation({
+    mutationFn: () =>
+      api.delete(
+        `/configs/${encodeURIComponent(alias)}/${encodeURIComponent(componentId)}/${encodeURIComponent(configId)}`,
+        { query: { branch_id: branchId ?? undefined, dry_run: false } },
+      ),
+    onError: (e) => {
+      setActionError((e as Error).message);
+      setConfirmDelete(false);
+    },
+    onSuccess: () => {
+      setConfirmDelete(false);
+      qc.invalidateQueries({ queryKey: ["configs"] });
+      qc.invalidateQueries({ queryKey: ["config-trash"] });
+      onClose();
+    },
+  });
+
   return (
-    <div className="nerd-card">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="font-bold text-keboola">
-          {componentId} / {configId}
-        </h3>
-        <button type="button" className="nerd-btn text-xs" onClick={onClose}>
-          Close
-        </button>
+    <Drawer
+      open={true}
+      onClose={onClose}
+      title={name || configId}
+      subtitle={`${componentId} ・ ${configId}${branchId ? ` ・ branch #${branchId}` : ""}`}
+      width="max-w-4xl"
+      actions={
+        <>
+          <button
+            type="button"
+            className="nerd-btn text-xs flex items-center gap-1 hover:text-keboola disabled:opacity-50"
+            disabled={runJob.isPending}
+            onClick={() => runJob.mutate()}
+            title={`Queue a job for ${componentId} / ${configId}`}
+          >
+            <PlayCircle className="w-3 h-3" />
+            {runJob.isPending ? "starting…" : "Run job"}
+          </button>
+          <button
+            type="button"
+            className="nerd-btn text-xs flex items-center gap-1 hover:text-red-600 dark:hover:text-red-400 disabled:opacity-50"
+            disabled={del.isPending}
+            onClick={() => setConfirmDelete(true)}
+          >
+            <Trash2 className="w-3 h-3" /> Delete
+          </button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        {actionError ? <ErrorBox message={actionError} /> : null}
+        {startedJobId !== null ? (
+          <div className="nerd-card border-keboola/40 flex items-center gap-3 text-xs">
+            <PlayCircle className="w-4 h-4 text-keboola shrink-0" />
+            <span className="text-zinc-700 dark:text-zinc-300">
+              Job {startedJobId ? <span className="font-mono text-accent">{startedJobId}</span> : null}{" "}
+              queued. It runs asynchronously — follow it on the Jobs page.
+            </span>
+            <button
+              type="button"
+              className="nerd-btn text-xs hover:text-keboola ml-auto shrink-0"
+              onClick={() => {
+                onClose();
+                setPage("jobs");
+              }}
+            >
+              open Jobs →
+            </button>
+          </div>
+        ) : null}
+        {detailQ.isLoading ? <Loading /> : null}
+        {detailQ.error ? <ErrorBox message={(detailQ.error as Error).message} /> : null}
+        {detailQ.data ? <JsonView data={detailQ.data} maxHeight="60vh" /> : null}
       </div>
-      {detailQ.isLoading ? <Loading /> : null}
-      {detailQ.error ? <ErrorBox message={(detailQ.error as Error).message} /> : null}
-      {detailQ.data ? <JsonView data={detailQ.data} /> : null}
-    </div>
+
+      {confirmDelete ? (
+        <ConfirmModal
+          danger
+          busy={del.isPending}
+          title="Delete configuration?"
+          body={
+            <>
+              <span className="font-mono text-accent">
+                {componentId}/{configId}
+              </span>{" "}
+              moves to the trash. This is reversible — restore it from the Trash tab. Any schedule
+              or flow still pointing at it will start failing until it is restored.
+            </>
+          }
+          confirmLabel="Move to trash"
+          onConfirm={() => del.mutate()}
+          onCancel={() => setConfirmDelete(false)}
+        />
+      ) : null}
+    </Drawer>
   );
 }
diff --git a/web/frontend/src/pages/Dashboard.tsx b/web/frontend/src/pages/Dashboard.tsx
index 06ffbd91..dcdf2bba 100644
--- a/web/frontend/src/pages/Dashboard.tsx
+++ b/web/frontend/src/pages/Dashboard.tsx
@@ -1,7 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { UseQueryResult } from "@tanstack/react-query";
 import {
   Activity,
   Bot,
+  Coins,
   Heart,
   Network,
   Play,
@@ -32,6 +34,26 @@ interface DoctorResp {
   summary: { total: number; passed: number; failed: number; warnings?: number };
 }
 
+/**
+ * PAYG credit balance for one project. A project without the
+ * `pay-as-you-go` owner feature never reaches the billing host at all -- it
+ * comes back as a per-project error with `error_code: "PAYG_NOT_AVAILABLE"`,
+ * which is a normal state on most stacks, not a failure worth shouting about.
+ */
+interface CreditRow {
+  project_alias: string;
+  remaining: number;
+  consumed: number;
+  total: number;
+  remaining_minutes: number;
+  consumed_minutes: number;
+}
+
+interface CreditsResp {
+  credits: CreditRow[];
+  errors: Array<{ project_alias: string; error_code: string; message: string }>;
+}
+
 function greeting(): string {
   const h = new Date().getHours();
   if (h < 12) return "Good Morning";
@@ -65,6 +87,15 @@ export function DashboardPage() {
       api.get("/jobs", { query: { project: project ?? undefined, limit: 5 } }),
     enabled: !!project,
   });
+  // Scoped to the active project so the tile answers "how much is left HERE",
+  // and so a 30-project config does not fan out 30 billing calls on every
+  // dashboard visit.
+  const creditsQ = useQuery<CreditsResp>({
+    queryKey: ["billing-credits", project],
+    queryFn: () => api.get("/billing/credits", { query: { project: project ?? undefined } }),
+    enabled: !!project,
+    staleTime: 5 * 60_000,
+  });
 
   /**
    * Hand the typed message off to the Local AI page (#300). Dashboard
@@ -139,7 +170,7 @@ export function DashboardPage() {
       </form>
 
       {/* Stats row */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
         <StatTile
           label="Projects connected"
           value={`${onlineProjects} / ${projects.length}`}
@@ -167,6 +198,7 @@ export function DashboardPage() {
           icon={<PlayCircle className="w-4 h-4" />}
           onClick={() => setPage("jobs")}
         />
+        <CreditsTile project={project} q={creditsQ} />
       </div>
 
       {/* Two-column: agent activity + suggested actions */}
@@ -300,6 +332,59 @@ export function DashboardPage() {
   );
 }
 
+/**
+ * Fifth stat tile: PAYG credit balance for the active project.
+ *
+ * Degrades quietly by design. Most stacks are not pay-as-you-go, so the
+ * common outcome is a per-project `PAYG_NOT_AVAILABLE` -- that renders as a
+ * muted "n/a" pill, never as a red error, because there is nothing for the
+ * user to fix. Any other per-project error gets the same muted treatment with
+ * the server message in the tooltip: a billing hiccup must not make the whole
+ * dashboard look broken.
+ */
+function CreditsTile({
+  project,
+  q,
+}: {
+  project: string | null;
+  q: UseQueryResult<CreditsResp>;
+}) {
+  const row = q.data?.credits?.[0];
+  const err = q.data?.errors?.[0];
+  const unavailable = !row && !!err;
+
+  let value: React.ReactNode;
+  let subtle: string | undefined;
+  if (!project) {
+    value = <span className="nerd-pill">n/a</span>;
+    subtle = "(no project)";
+  } else if (q.isLoading) {
+    value = <span className="text-zinc-500 text-base">…</span>;
+  } else if (row) {
+    value = row.remaining.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    // The Keboola UI shows the same balance in minutes (1 credit = 60 min);
+    // the API's native unit is credits, so we surface both.
+    subtle = `${Math.round(row.remaining_minutes).toLocaleString()} min remaining`;
+  } else if (unavailable) {
+    value = <span className="nerd-pill">n/a</span>;
+    subtle = err?.error_code === "PAYG_NOT_AVAILABLE" ? "not a PAYG project" : "unavailable";
+  } else {
+    value = <span className="nerd-pill">n/a</span>;
+    subtle = "no balance reported";
+  }
+
+  return (
+    <StatTile
+      label="PAYG credits"
+      value={value}
+      subtle={subtle}
+      icon={<Coins className="w-4 h-4" />}
+      tone={row && row.remaining <= 0 ? "amber" : "default"}
+      title={err?.message ?? (row ? `${row.consumed} of ${row.total} credits consumed` : undefined)}
+    />
+  );
+}
+
 function StatTile({
   label,
   value,
@@ -307,10 +392,12 @@ function StatTile({
   icon,
   tone = "default",
   onClick,
+  title,
 }: {
   label: string;
-  value: string;
+  value: React.ReactNode;
   subtle?: string;
+  title?: string;
   icon?: React.ReactNode;
   tone?: "default" | "red" | "amber" | "green";
   onClick?: () => void;
@@ -327,7 +414,12 @@ function StatTile({
     <button
       type="button"
       onClick={onClick}
-      className={`nerd-card text-left hover:border-keboola/40 transition-colors ${toneClass}`}
+      title={title}
+      // Tiles without an onClick are read-only readouts (e.g. credits): drop
+      // the pointer affordance so they do not look clickable.
+      className={`nerd-card text-left transition-colors ${
+        onClick ? "hover:border-keboola/40" : "cursor-default"
+      } ${toneClass}`}
     >
       <div className="flex items-center justify-between mb-1 text-[10px] uppercase tracking-wider text-zinc-500">
         <span>{label}</span>
diff --git a/web/frontend/src/pages/Flows.tsx b/web/frontend/src/pages/Flows.tsx
index 1f2a375e..44e14c12 100644
--- a/web/frontend/src/pages/Flows.tsx
+++ b/web/frontend/src/pages/Flows.tsx
@@ -32,6 +32,34 @@ interface FlowsResp {
   errors: ProjectError[];
 }
 
+interface NotificationSubscription {
+  project_alias: string;
+  subscription_id: string;
+  /** kebab-case event name, e.g. "job-failed". */
+  event: string;
+  /** "" when the subscription carries no component filter. */
+  component_id: string;
+  /** "" when the subscription is project-wide (no config filter). */
+  config_id: string;
+  branch_id: string;
+  phase_id: string;
+  /** "email" | "webhook" | ... */
+  channel: string;
+  /** Email address OR webhook URL, depending on `channel`. */
+  address: string;
+  expires_at: string;
+  config_name: string;
+  filters: Array<Record<string, unknown>>;
+  /** "config" | "project-wide" */
+  scope: string;
+}
+
+interface NotificationsResp {
+  subscriptions: NotificationSubscription[];
+  errors: ProjectError[];
+  project_wide_excluded: number;
+}
+
 export function FlowsPage() {
   const { project, branchId } = useUIState();
   const [selected, setSelected] = useState<Flow | null>(null);
@@ -87,7 +115,7 @@ export function FlowsPage() {
 
 function FlowDrawer({ flow, onClose }: { flow: Flow; onClose: () => void }) {
   const { branchId } = useUIState();
-  const [tab, setTab] = useState<"builder" | "raw">("builder");
+  const [tab, setTab] = useState<"builder" | "raw" | "notifications">("builder");
   const q = useQuery<FlowDetail>({
     queryKey: ["flow-detail", flow.project_alias, flow.component_id, flow.config_id, branchId],
     queryFn: () =>
@@ -119,11 +147,26 @@ function FlowDrawer({ flow, onClose }: { flow: Flow; onClose: () => void }) {
         >
           Raw JSON
         </button>
+        <button
+          type="button"
+          className={`nerd-btn text-xs ${tab === "notifications" ? "border-keboola text-keboola" : ""}`}
+          onClick={() => setTab("notifications")}
+        >
+          Notifications
+        </button>
       </div>
-      {q.isLoading ? <Loading /> : null}
-      {q.error ? <ErrorBox message={(q.error as Error).message} /> : null}
-      {q.data && tab === "builder" ? <FlowBuilder detail={q.data} /> : null}
-      {q.data && tab === "raw" ? <JsonView data={q.data} /> : null}
+      {/* The Notifications tab owns its own query (a different platform
+          service), so it must not be gated on the flow-detail request. */}
+      {tab === "notifications" ? (
+        <FlowNotifications flow={flow} />
+      ) : (
+        <>
+          {q.isLoading ? <Loading /> : null}
+          {q.error ? <ErrorBox message={(q.error as Error).message} /> : null}
+          {q.data && tab === "builder" ? <FlowBuilder detail={q.data} /> : null}
+          {q.data && tab === "raw" ? <JsonView data={q.data} /> : null}
+        </>
+      )}
     </Drawer>
   );
 }
@@ -201,6 +244,131 @@ function FlowBuilder({ detail }: { detail: FlowDetail }) {
   );
 }
 
+/** Pill styling per event name. Exact matches win before the substring rules
+ *  so "job-succeeded-with-warning" reads amber, not green. */
+function eventPillClass(event: string): string {
+  if (event === "job-failed") return "nerd-pill-red";
+  if (event === "job-succeeded") return "nerd-pill-green";
+  if (event.includes("warning") || event.includes("long")) return "nerd-pill-amber";
+  return "nerd-pill";
+}
+
+const BRANCH_NOTE =
+  "Branch: the UI always writes a branch.id filter, and for production that value is the " +
+  "DEFAULT branch's numeric id — so a value here does NOT by itself mean the subscription is " +
+  "dev-branch-only. Compare it against the project's branch list.";
+
+function NotificationTable({ rows }: { rows: NotificationSubscription[] }) {
+  return (
+    <DataTable
+      rows={rows}
+      rowKey={(s) => s.subscription_id}
+      columns={[
+        {
+          header: "Event",
+          cell: (s) => <span className={eventPillClass(s.event)}>{s.event}</span>,
+        },
+        { header: "Channel", cell: (s) => <span className="text-xs">{s.channel || "—"}</span> },
+        {
+          header: "Address",
+          cell: (s) => (
+            <span className="font-mono text-xs text-accent break-all">{s.address || "—"}</span>
+          ),
+        },
+        {
+          header: "Branch",
+          cell: (s) => (
+            <span className="font-mono text-xs text-zinc-600 dark:text-zinc-400">
+              {s.branch_id || "—"}
+            </span>
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+/**
+ * Read-only "Notifications" tab — who actually gets paged about this flow.
+ *
+ * These recipients are the ones behind the Flow Builder's Notifications tab
+ * (bell icon). They live in a SEPARATE platform service
+ * (notification.{stack}) and are NOT part of the flow's configuration JSON,
+ * which is why `flow detail` — and therefore the Builder and Raw JSON tabs —
+ * never showed them. (The in-flow `type: "notification"` TASK is a different
+ * mechanism and stays visible in the Builder.)
+ *
+ * We deliberately fetch the project's subscriptions UNFILTERED (only
+ * `project`) and split them client-side. Passing `config_id` to the API drops
+ * the filter-less, project-wide catch-alls SERVER-SIDE — and those fire for
+ * every job in the project, this flow included — so a filtered fetch would
+ * silently under-report the recipient list.
+ */
+function FlowNotifications({ flow }: { flow: Flow }) {
+  // Keyed by project only: the response is the project's full, unfiltered
+  // subscription list, so every flow in the project shares one cache entry.
+  const q = useQuery<NotificationsResp>({
+    queryKey: ["flow-notifications", flow.project_alias],
+    queryFn: () => api.get("/notifications", { query: { project: [flow.project_alias] } }),
+  });
+
+  if (q.isLoading) return <Loading />;
+  if (q.error) return <ErrorBox message={(q.error as Error).message} />;
+
+  const subs = q.data?.subscriptions ?? [];
+  const errors = q.data?.errors ?? [];
+  // Mutually exclusive by construction: a subscription either carries a
+  // config filter (scoped) or carries none at all (project-wide catch-all).
+  const forThisFlow = subs.filter((s) => s.config_id && s.config_id === flow.config_id);
+  const projectWide = subs.filter((s) => !s.config_id);
+
+  return (
+    <div className="space-y-6">
+      {errors.map((e) => (
+        <ErrorBox
+          key={`${e.project_alias}/${e.error_code}`}
+          message={`${e.project_alias}: ${e.error_code} — ${e.message}`}
+        />
+      ))}
+
+      <section className="space-y-2">
+        <div className="flex items-center gap-2">
+          <h4 className="text-sm font-bold text-keboola">This flow</h4>
+          <span className="ml-auto text-xs text-zinc-500">
+            {forThisFlow.length} recipient(s)
+          </span>
+        </div>
+        {forThisFlow.length === 0 ? (
+          <Empty
+            title="No notification recipients for this flow."
+            hint="Nothing is subscribed to this flow's own jobs. Check the project-wide group below — those fire for it too."
+          />
+        ) : (
+          <NotificationTable rows={forThisFlow} />
+        )}
+      </section>
+
+      <section className="space-y-2">
+        <div className="flex items-center gap-2">
+          <h4 className="text-sm font-bold text-zinc-700 dark:text-zinc-300">Project-wide</h4>
+          <span className="nerd-pill-amber">project-wide</span>
+          <span className="ml-auto text-xs text-zinc-500">{projectWide.length} recipient(s)</span>
+        </div>
+        <p className="text-xs text-amber-700 dark:text-amber-400">
+          No config filter — these fire for every job in the project, this flow included.
+        </p>
+        {projectWide.length === 0 ? (
+          <Empty title="No project-wide notification recipients." />
+        ) : (
+          <NotificationTable rows={projectWide} />
+        )}
+      </section>
+
+      <p className="text-[11px] text-zinc-500 dark:text-zinc-600">{BRANCH_NOTE}</p>
+    </div>
+  );
+}
+
 function FlowMermaid({
   phases,
   tasksByPhase,
diff --git a/web/frontend/src/pages/Jobs.tsx b/web/frontend/src/pages/Jobs.tsx
index 14420c36..beb6036c 100644
--- a/web/frontend/src/pages/Jobs.tsx
+++ b/web/frontend/src/pages/Jobs.tsx
@@ -1,7 +1,20 @@
-import { useQuery } from "@tanstack/react-query";
-import { Activity, Clock, Cpu, FileCode, Play, Server, Square, Timer, User } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Activity,
+  Clock,
+  Cpu,
+  FileCode,
+  Play,
+  RotateCw,
+  Server,
+  Square,
+  Timer,
+  User,
+  XOctagon,
+} from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { api, sseSubscribe } from "../api/client";
+import { ConfirmModal } from "../components/ConfirmModal";
 import { Drawer } from "../components/Drawer";
 import { Empty, ErrorBox, Loading, PageTitle } from "../components/Empty";
 import { JsonView } from "../components/JsonView";
@@ -23,6 +36,36 @@ const STATUS_COLORS: Record<string, string> = {
   terminated: "nerd-pill",
 };
 
+/**
+ * Statuses the Queue API will actually accept a terminate for. A terminal job
+ * (success / error / ...) has nothing left to stop, so we hide the button
+ * rather than let the user discover that by getting a 4xx back.
+ */
+const TERMINABLE_STATUSES = new Set(["created", "waiting", "processing"]);
+
+/**
+ * Human label for a job's target: `component ・ config <id>`, dropping the
+ * config half entirely when the job carries none. A job run from an inline
+ * `configData` payload has no stored configuration, and rendering the raw
+ * value there produced a literal "config undefined" in the drawer header.
+ */
+function jobLabel(job: Job): string {
+  return job.config ? `${job.component} ・ config ${job.config}` : job.component;
+}
+
+/**
+ * The job's branch as the `JobRun` body wants it: an integer, or `undefined`
+ * for the default branch. The Queue API is inconsistent about whether
+ * `branchId` arrives numeric or as a string, and the router declares
+ * `branch_id: int | None`, so anything non-numeric is dropped rather than
+ * sent as a value FastAPI would reject.
+ */
+function jobBranchId(job: Job): number | undefined {
+  if (job.branchId === null || job.branchId === undefined) return undefined;
+  const n = Number(job.branchId);
+  return Number.isFinite(n) ? n : undefined;
+}
+
 export function JobsPage() {
   const { project } = useUIState();
   const [statusFilter, setStatusFilter] = useState<string | null>(null);
@@ -82,7 +125,10 @@ export function JobsPage() {
               ),
             },
             { header: "Component", cell: (j) => <span className="text-accent">{j.component}</span> },
-            { header: "Config", cell: (j) => <span className="text-zinc-500">{j.configId}</span> },
+            {
+              header: "Config",
+              cell: (j) => <span className="text-zinc-500">{j.config ?? "—"}</span>,
+            },
             {
               header: "Created",
               cell: (j) => <span className="text-zinc-500 text-xs">{j.createdTime}</span>,
@@ -96,6 +142,11 @@ export function JobsPage() {
                 </span>
               ),
             },
+            {
+              header: "Actions",
+              align: "right",
+              cell: (j) => <JobActions job={j} />,
+            },
           ]}
         />
       )}
@@ -105,6 +156,130 @@ export function JobsPage() {
   );
 }
 
+/**
+ * Per-job Re-run / Terminate actions, shared by the table row and the detail
+ * drawer header.
+ *
+ * Re-run posts the job's OWN component + config + branch to
+ * `POST /jobs/{p}/run`, i.e. it starts a fresh job from the configuration as
+ * it stands NOW -- it does not replay the historical `configData` the old job
+ * ran with. That is the same semantics as `kbagent job run`, and the only
+ * thing the Queue API offers. The branch IS preserved, though: see
+ * `jobBranchId` and the comment on the mutation body.
+ *
+ * Terminate goes through `POST /jobs/{p}/terminate` with an explicit
+ * `job_ids` list; the filter form of that endpoint (status / component) is
+ * deliberately not exposed here -- one row, one job.
+ */
+function JobActions({ job, compact = true }: { job: Job; compact?: boolean }) {
+  const qc = useQueryClient();
+  const [confirm, setConfirm] = useState<"terminate" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const invalidate = () => {
+    qc.invalidateQueries({ queryKey: ["jobs"] });
+    qc.invalidateQueries({ queryKey: ["dashboard-jobs"] });
+  };
+
+  const rerun = useMutation({
+    mutationFn: () =>
+      api.post(`/jobs/${encodeURIComponent(job.project_alias)}/run`, {
+        component_id: job.component,
+        config_id: job.config,
+        // Branch fidelity: omitting this resolves to the DEFAULT branch
+        // server-side, so a job that originally ran against a dev-branch
+        // config would silently re-run against the production one -- a
+        // different configuration, writing to different tables. The row
+        // already carries the branch, so pass it straight back.
+        branch_id: jobBranchId(job),
+      }),
+    onError: (e) => setError((e as Error).message),
+    onSuccess: () => {
+      setError(null);
+      invalidate();
+    },
+  });
+
+  const terminate = useMutation({
+    mutationFn: () =>
+      api.post(`/jobs/${encodeURIComponent(job.project_alias)}/terminate`, {
+        job_ids: [String(job.id)],
+        dry_run: false,
+      }),
+    onError: (e) => setError((e as Error).message),
+    onSuccess: () => {
+      setError(null);
+      setConfirm(null);
+      invalidate();
+    },
+  });
+
+  // A job started from an inline `configData` payload has no stored
+  // configuration to re-run, so `config` is null and the button is hidden.
+  const canRerun = !!job.component && !!job.config;
+  const canTerminate = TERMINABLE_STATUSES.has(job.status);
+  const btn = `nerd-btn ${compact ? "text-[10px] py-0.5 px-1.5" : "text-xs"} flex items-center gap-1 disabled:opacity-50`;
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5"
+      // Row clicks open the detail drawer; an action click must not.
+      onClick={(e) => e.stopPropagation()}
+      role="presentation"
+    >
+      {error ? (
+        <span className="text-[10px] text-red-600 dark:text-red-400 max-w-[16rem] truncate" title={error}>
+          {error}
+        </span>
+      ) : null}
+      {canRerun ? (
+        <button
+          type="button"
+          className={`${btn} hover:text-keboola`}
+          disabled={rerun.isPending}
+          onClick={() => rerun.mutate()}
+          // Name the branch in the tooltip: the whole point of threading
+          // branch_id through is that the user can trust where this lands.
+          title={`Start a new job for ${job.component} / ${job.config} on ${
+            jobBranchId(job) === undefined ? "the default branch" : `branch #${jobBranchId(job)}`
+          }`}
+        >
+          <RotateCw className={`w-3 h-3 ${rerun.isPending ? "animate-spin" : ""}`} />
+          {rerun.isPending ? "starting…" : "re-run"}
+        </button>
+      ) : null}
+      {canTerminate ? (
+        <button
+          type="button"
+          className={`${btn} hover:text-red-600 dark:hover:text-red-400`}
+          disabled={terminate.isPending}
+          onClick={() => setConfirm("terminate")}
+          title="Terminate this job"
+        >
+          <XOctagon className="w-3 h-3" /> terminate
+        </button>
+      ) : null}
+      {confirm === "terminate" ? (
+        <ConfirmModal
+          danger
+          busy={terminate.isPending}
+          title="Terminate job?"
+          body={
+            <>
+              Job <span className="font-mono text-accent">{String(job.id)}</span> (
+              {jobLabel(job)}) is <span className="font-mono">{job.status}</span>.
+              Terminating stops it where it is — partially written output stays written.
+            </>
+          }
+          confirmLabel="Terminate"
+          onConfirm={() => terminate.mutate()}
+          onCancel={() => setConfirm(null)}
+        />
+      ) : null}
+    </span>
+  );
+}
+
 function formatDuration(sec: number): string {
   if (sec < 60) return `${sec}s`;
   const m = Math.floor(sec / 60);
@@ -168,24 +343,33 @@ function JobDetailDrawer({ job, onClose }: { job: Job; onClose: () => void }) {
       open={true}
       onClose={onClose}
       title={`Job ${job.id}`}
-      subtitle={`${job.component} ・ config ${job.configId}`}
+      subtitle={jobLabel(job)}
       width="max-w-5xl"
       actions={
-        <button
-          type="button"
-          className="nerd-btn flex items-center gap-1 hover:text-keboola"
-          onClick={() => (streaming ? esRef.current?.close() : startStream())}
-        >
-          {streaming ? (
-            <>
-              <Square className="w-3 h-3" /> stop stream
-            </>
-          ) : (
-            <>
-              <Play className="w-3 h-3" /> stream logs
-            </>
-          )}
-        </button>
+        <>
+          {/* Status comes from the freshly fetched detail when available, so a
+              job that finished while the drawer was open loses its Terminate
+              button on the next poll instead of offering a doomed call. */}
+          <JobActions
+            job={{ ...job, status: String(detailQ.data?.status ?? job.status) }}
+            compact={false}
+          />
+          <button
+            type="button"
+            className="nerd-btn flex items-center gap-1 hover:text-keboola"
+            onClick={() => (streaming ? esRef.current?.close() : startStream())}
+          >
+            {streaming ? (
+              <>
+                <Square className="w-3 h-3" /> stop stream
+              </>
+            ) : (
+              <>
+                <Play className="w-3 h-3" /> stream logs
+              </>
+            )}
+          </button>
+        </>
       }
     >
       {detailQ.isLoading ? <Loading /> : null}
@@ -229,7 +413,9 @@ function JobCards({
     (detail.token as { description?: string } | undefined)?.description ??
     "";
   const url = (detail.url as string | undefined) ?? "";
-  const config = (detail.config as string | undefined) ?? job.configId;
+  // Empty string, not null: KV drops a falsy value, so a configData-only job
+  // renders no "Config ID" row at all instead of a literal "null".
+  const config = (detail.config as string | undefined) ?? job.config ?? "";
   const branchId = (detail.branchId as number | undefined) ?? null;
   const params = (detail.params as Record<string, unknown> | undefined) ?? {};
   const backendSize = String(
diff --git a/web/frontend/src/pages/Storage.tsx b/web/frontend/src/pages/Storage.tsx
index 81007411..c81a432b 100644
--- a/web/frontend/src/pages/Storage.tsx
+++ b/web/frontend/src/pages/Storage.tsx
@@ -1,5 +1,16 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangle, Check, Download, Eye, Info, Layers, Loader2, Trash2 } from "lucide-react";
+import {
+  AlertTriangle,
+  Check,
+  Download,
+  Eye,
+  Info,
+  Layers,
+  Loader2,
+  Pencil,
+  Trash2,
+  X,
+} from "lucide-react";
 import { useState } from "react";
 import { api, ApiError } from "../api/client";
 import { Drawer } from "../components/Drawer";
@@ -40,6 +51,24 @@ interface TableDetail {
   last_change_date: string;
   created: string;
   metadata: Array<Record<string, unknown>>;
+  /**
+   * Raw Storage API `definition`, passed through verbatim (issue #621). On
+   * BigQuery it is the ONLY readable record of the registered partition /
+   * clustering layout. Present on EVERY response -- an untyped table gets one
+   * too -- so `null` means the stack omitted the key, never "untyped".
+   */
+  definition?: {
+    timePartitioning?: { type?: string; field?: string; expirationMs?: string | number } | null;
+    rangePartitioning?: {
+      field?: string;
+      range?: { start?: string | number; end?: string | number; interval?: string | number };
+    } | null;
+    clustering?: { fields?: string[] } | null;
+    requirePartitionFilter?: boolean | null;
+    partitions?: Array<Record<string, unknown>> | null;
+    [key: string]: unknown;
+  } | null;
+  legacy_column_descriptions?: string[];
 }
 
 interface BucketsResp {
@@ -774,6 +803,73 @@ function InfoTab({ d }: { d: TableDetail }) {
         <Field label="Created" value={d.created} mono />
         <Field label="Last import" value={d.last_import_date || "-"} mono />
       </div>
+      <TableLayout definition={d.definition} />
+    </div>
+  );
+}
+
+// Render the raw Storage API `definition` (issue #621). On BigQuery this object
+// is the only readable record of the registered partition/clustering layout, so
+// it is how a create-table + swap-tables repartition is VERIFIED -- the table id
+// is unchanged either way. Every sub-key is optional, and a table with no layout
+// at all must render NOTHING (not an empty heading), so each row is guarded and
+// the section is dropped when none of them produced anything.
+function TableLayout({ definition }: { definition: TableDetail["definition"] }) {
+  if (!definition) return null;
+
+  const rows: Array<{ label: string; value: string; mono?: boolean }> = [];
+
+  const tp = definition.timePartitioning;
+  if (tp) {
+    const type = tp.type ?? "?";
+    let value = tp.field ? `${type} on ${tp.field}` : `${type} (ingestion time)`;
+    if (tp.expirationMs !== undefined && tp.expirationMs !== null && tp.expirationMs !== "") {
+      value += ` ・ expires ${tp.expirationMs} ms`;
+    }
+    rows.push({ label: "Time partitioning", value, mono: true });
+  }
+
+  const rp = definition.rangePartitioning;
+  if (rp) {
+    const range = rp.range ?? {};
+    const bounds = `[${range.start ?? "?"}, ${range.end ?? "?"})`;
+    rows.push({
+      label: "Range partitioning",
+      value: `${rp.field ?? "?"} ${bounds} step ${range.interval ?? "?"}`,
+      mono: true,
+    });
+  }
+
+  const clusteringFields = definition.clustering?.fields;
+  if (clusteringFields && clusteringFields.length > 0) {
+    rows.push({ label: "Clustering", value: clusteringFields.join(", "), mono: true });
+  }
+
+  if (typeof definition.requirePartitionFilter === "boolean") {
+    rows.push({
+      label: "Partition filter required",
+      value: definition.requirePartitionFilter ? "yes" : "no",
+    });
+  }
+
+  // The COUNT only: `partitions` is unbounded (one entry per physical partition
+  // from INFORMATION_SCHEMA.PARTITIONS) and must never be dumped into the grid.
+  // Non-empty only, matching the CLI's `render_table_layout`: an empty list is
+  // "no physical partitions reported", not a meaningful count of zero.
+  if (definition.partitions && definition.partitions.length > 0) {
+    rows.push({ label: "Partitions", value: definition.partitions.length.toLocaleString() });
+  }
+
+  if (rows.length === 0) return null;
+
+  return (
+    <div>
+      <div className="text-[10px] uppercase tracking-wider text-zinc-500 mb-1">Table layout</div>
+      <div className="grid grid-cols-2 gap-3">
+        {rows.map((r) => (
+          <Field key={r.label} label={r.label} value={r.value} mono={r.mono} />
+        ))}
+      </div>
     </div>
   );
 }
@@ -787,41 +883,181 @@ function Field({ label, value, mono = false }: { label: string; value: string; m
   );
 }
 
+interface DescribeVars {
+  column: string;
+  description: string;
+  /** Override in effect before the optimistic write, for rollback on error. */
+  previous?: string;
+}
+
 function SchemaTab({ d }: { d: TableDetail }) {
+  const { project, branchId } = useUIState();
+  const qc = useQueryClient();
+
+  // Only one column is editable at a time; `overrides` is the optimistic layer
+  // merged over the server's `c.description` until the refetch lands.
+  const [editing, setEditing] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const [overrides, setOverrides] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  // Before 0.88.0 kbagent wrote a flat `KBC.column.{name}.description` key on the
+  // TABLE's metadata -- read by nothing but kbagent, so a documented column still
+  // looked blank in the UI, the MCP server and the warehouse. This route is the
+  // NATIVE write (PUT .../tables/{id}/definition, isDescriptionSystemManaged:
+  // false), which the backend mirrors into columnMetadata KBC.description -- so
+  // everything downstream sees it, and the next Output Mapping run does not
+  // overwrite it.
+  const describe = useMutation({
+    mutationFn: (vars: DescribeVars) =>
+      api.post(
+        `/storage/columns/${encodeURIComponent(project!)}/${encodeURIComponent(d.table_id)}/describe`,
+        { columns: { [vars.column]: vars.description }, branch_id: branchId ?? undefined },
+      ),
+    onError: (e, vars) => {
+      setError(e instanceof ApiError ? e.message : String(e));
+      setOverrides((cur) => {
+        const next = { ...cur };
+        if (vars.previous === undefined) delete next[vars.column];
+        else next[vars.column] = vars.previous;
+        return next;
+      });
+    },
+    onSuccess: async (_data, vars) => {
+      // Drop the optimistic entry only AFTER the refetch lands, otherwise the
+      // cell flashes the stale server description for a render. Leaving it in
+      // place is worse still: it would mask every later server value for that
+      // column for as long as the drawer stays mounted.
+      await qc.invalidateQueries({ queryKey: ["table-detail"] });
+      setOverrides((cur) => {
+        const next = { ...cur };
+        delete next[vars.column];
+        return next;
+      });
+    },
+  });
+
+  const save = (column: string) => {
+    const previous = overrides[column];
+    setOverrides((cur) => ({ ...cur, [column]: draft }));
+    setEditing(null);
+    setError(null);
+    describe.mutate({ column, description: draft, previous });
+  };
+
+  const legacyCount = d.legacy_column_descriptions?.length ?? 0;
+
   return (
-    <div className="overflow-auto">
-      <table className="w-full text-xs">
-        <thead>
-          <tr className="border-b border-zinc-200 dark:border-zinc-800 text-zinc-500 uppercase tracking-wider">
-            <th className="px-3 py-2 text-left font-normal">Column</th>
-            <th className="px-3 py-2 text-left font-normal">Type</th>
-            <th className="px-3 py-2 text-left font-normal">Native</th>
-            <th className="px-3 py-2 text-left font-normal">Length</th>
-            <th className="px-3 py-2 text-center font-normal">Null</th>
-            <th className="px-3 py-2 text-center font-normal">PK</th>
-            <th className="px-3 py-2 text-left font-normal">Default</th>
-            <th className="px-3 py-2 text-left font-normal">Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {d.column_details.map((c) => (
-            <tr key={c.name} className="border-b border-zinc-200 dark:border-zinc-900/50">
-              <td className="px-3 py-2 font-bold text-accent">{c.name}</td>
-              <td className="px-3 py-2 text-zinc-600 dark:text-zinc-400">{c.type ?? "-"}</td>
-              <td className="px-3 py-2 text-zinc-500">{c.native_type ?? "-"}</td>
-              <td className="px-3 py-2 text-zinc-500">{c.length ?? "-"}</td>
-              <td className="px-3 py-2 text-center">
-                {c.nullable === undefined ? "-" : c.nullable ? "✓" : ""}
-              </td>
-              <td className="px-3 py-2 text-center">
-                {d.primary_key.includes(c.name) ? "🔑" : ""}
-              </td>
-              <td className="px-3 py-2 text-zinc-500">{c.default ?? "-"}</td>
-              <td className="px-3 py-2 text-zinc-600 dark:text-zinc-400 text-xs">{c.description ?? ""}</td>
+    <div className="space-y-2">
+      {legacyCount > 0 ? (
+        <div className="flex items-center gap-1.5 text-xs text-amber-700 dark:text-neon-amber">
+          <AlertTriangle className="w-3 h-3 shrink-0" />
+          <span>
+            {legacyCount} column(s) still carry a legacy description key — run{" "}
+            <code className="px-1 py-0.5 rounded bg-zinc-100 border border-zinc-200 dark:bg-zinc-950 dark:border-zinc-800">
+              kbagent storage describe-migrate
+            </code>
+            .
+          </span>
+        </div>
+      ) : null}
+      {error ? <ErrorBox message={error} /> : null}
+      <div className="overflow-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="border-b border-zinc-200 dark:border-zinc-800 text-zinc-500 uppercase tracking-wider">
+              <th className="px-3 py-2 text-left font-normal">Column</th>
+              <th className="px-3 py-2 text-left font-normal">Type</th>
+              <th className="px-3 py-2 text-left font-normal">Native</th>
+              <th className="px-3 py-2 text-left font-normal">Length</th>
+              <th className="px-3 py-2 text-center font-normal">Null</th>
+              <th className="px-3 py-2 text-center font-normal">PK</th>
+              <th className="px-3 py-2 text-left font-normal">Default</th>
+              <th className="px-3 py-2 text-left font-normal">Description</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {d.column_details.map((c) => {
+              const current = overrides[c.name] ?? c.description ?? "";
+              return (
+                <tr
+                  key={c.name}
+                  className="group border-b border-zinc-200 dark:border-zinc-900/50"
+                >
+                  <td className="px-3 py-2 font-bold text-accent">{c.name}</td>
+                  <td className="px-3 py-2 text-zinc-600 dark:text-zinc-400">{c.type ?? "-"}</td>
+                  <td className="px-3 py-2 text-zinc-500">{c.native_type ?? "-"}</td>
+                  <td className="px-3 py-2 text-zinc-500">{c.length ?? "-"}</td>
+                  <td className="px-3 py-2 text-center">
+                    {c.nullable === undefined ? "-" : c.nullable ? "✓" : ""}
+                  </td>
+                  <td className="px-3 py-2 text-center">
+                    {d.primary_key.includes(c.name) ? "🔑" : ""}
+                  </td>
+                  <td className="px-3 py-2 text-zinc-500">{c.default ?? "-"}</td>
+                  <td className="px-3 py-2 text-zinc-600 dark:text-zinc-400 text-xs">
+                    {editing === c.name ? (
+                      <div className="flex items-center gap-1">
+                        <input
+                          className={repartInputCls}
+                          value={draft}
+                          // Click-to-edit: put the caret straight in the cell the user just clicked.
+                          autoFocus
+                          placeholder="column description"
+                          onChange={(e) => setDraft(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              save(c.name);
+                            } else if (e.key === "Escape") {
+                              e.preventDefault();
+                              setEditing(null);
+                            }
+                          }}
+                        />
+                        <button
+                          type="button"
+                          className="nerd-btn text-xs hover:text-keboola"
+                          title="Save"
+                          onClick={() => save(c.name)}
+                        >
+                          <Check className="w-3 h-3" />
+                        </button>
+                        <button
+                          type="button"
+                          className="nerd-btn text-xs"
+                          title="Cancel"
+                          onClick={() => setEditing(null)}
+                        >
+                          <X className="w-3 h-3" />
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        type="button"
+                        className="w-full text-left flex items-center gap-1.5 disabled:cursor-not-allowed"
+                        disabled={!project}
+                        title={project ? "Edit description" : "Select a project to edit"}
+                        onClick={() => {
+                          setEditing(c.name);
+                          setDraft(current);
+                        }}
+                      >
+                        <span className={current ? "" : "text-zinc-400 dark:text-zinc-600"}>
+                          {current || "—"}
+                        </span>
+                        {project ? (
+                          <Pencil className="w-3 h-3 shrink-0 text-zinc-400 dark:text-zinc-600 opacity-0 group-hover:opacity-100" />
+                        ) : null}
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/web/frontend/src/pages/Tokens.tsx b/web/frontend/src/pages/Tokens.tsx
new file mode 100644
index 00000000..2449e560
--- /dev/null
+++ b/web/frontend/src/pages/Tokens.tsx
@@ -0,0 +1,599 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, Copy, KeyRound, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { api, ApiError } from "../api/client";
+import { ConfirmModal } from "../components/ConfirmModal";
+import { Drawer } from "../components/Drawer";
+import { Empty, ErrorBox, Loading, PageTitle } from "../components/Empty";
+import { DataTable } from "../components/Table";
+import type { Column } from "../components/Table";
+import { useUIState } from "../state";
+
+/**
+ * Scoped Storage tokens -- the UI half of `kbagent token list|create|delete|refresh`.
+ *
+ * Two things about this page are not obvious from the API shape:
+ *
+ * 1. **`lastUsed` is DERIVED, not read.** The Storage API's token listing
+ *    carries no `lastUsed` field at all (only the Manage API's PAT response
+ *    does). The backend synthesizes it per token from that token's OWN event
+ *    feed -- `GET /v2/storage/tokens/{id}/events?q=token.id:{id}`, narrowed
+ *    SERVER-SIDE to events the token PERFORMED, not events performed ON it
+ *    (the raw feed also carries `storage.tokenCreated`, which would make a
+ *    freshly minted, never-used token read as "used today"). That is one extra
+ *    API call PER TOKEN, which is why it is opt-in behind the toggle rather
+ *    than part of the default listing.
+ *
+ * 2. **The secret is shown exactly once.** `create` and `refresh` are the only
+ *    responses that ever carry a `token` value; the listing strips it. Nothing
+ *    persists it, so the reveal panel is the user's single chance to copy it.
+ */
+
+interface TokenEntry {
+  id: string | number;
+  description?: string;
+  created?: string;
+  refreshed?: string;
+  expires?: string | null;
+  isMasterToken?: boolean;
+  canManageTokens?: boolean;
+  canReadAllFileUploads?: boolean;
+  bucketPermissions?: Record<string, string>;
+  componentAccess?: string[];
+  // present only with with_last_used=true
+  lastUsed?: string | null;
+  lastUsedEvent?: string | null;
+  lastUsedStatus?: "used" | "never" | "unknown" | "error";
+  [key: string]: unknown;
+}
+
+interface TokenListResp {
+  alias: string;
+  count: number;
+  tokens: TokenEntry[];
+  errors?: Array<{ token_id?: string; message: string }>;
+}
+
+/** `create` / `refresh` return the raw token dict INCLUDING the one-time secret. */
+interface TokenSecretResp {
+  alias?: string;
+  id?: string | number;
+  description?: string;
+  token?: string;
+  [key: string]: unknown;
+}
+
+/** What the reveal panel renders. `value` is held in React state only. */
+interface RevealedSecret {
+  value: string;
+  title: string;
+  subtitle: string;
+}
+
+const LAST_USED_CAVEAT =
+  "one extra API call per token ・ dev-branch activity is invisible (the events endpoint always resolves to the default branch)";
+
+const STATUS_TITLES: Record<string, string> = {
+  used: "This token performed at least one event -- the date is its most recent one.",
+  never:
+    "Minted INSIDE the ~6-month event retention window with no activity since -- proven unused.",
+  unknown:
+    "Older than the ~6-month event retention window -- the API cannot say whether it was used.",
+  error: "The per-token lookup failed; this row degraded so the rest of the audit could complete.",
+};
+
+function errMessage(err: unknown): string {
+  if (err instanceof ApiError) return err.message;
+  if (err instanceof Error) return err.message;
+  return String(err);
+}
+
+/** "a, b , ,c" -> ["a","b","c"]; empty input -> undefined (key omitted from the body). */
+function splitList(raw: string): string[] | undefined {
+  const items = raw
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+  return items.length > 0 ? items : undefined;
+}
+
+function ScopeCell({ t }: { t: TokenEntry }) {
+  const buckets = Object.keys(t.bucketPermissions ?? {}).length;
+  const components = (t.componentAccess ?? []).length;
+  if (t.isMasterToken) return <span className="nerd-pill-amber">master</span>;
+  if (t.canManageTokens) return <span className="nerd-pill-amber">manage tokens</span>;
+  if (buckets === 0 && components === 0) {
+    return <span className="text-zinc-500 dark:text-zinc-600">—</span>;
+  }
+  return (
+    <span className="text-xs text-zinc-600 dark:text-zinc-400">
+      {buckets > 0 ? `${buckets} bucket(s)` : "—"}
+      {components > 0 ? ` ・ ${components} component(s)` : ""}
+    </span>
+  );
+}
+
+function StatusCell({ t }: { t: TokenEntry }) {
+  // A real date (or an explicit "used") is the only green case. `never` and
+  // `unknown` are deliberately NOT collapsed -- "proven unused, safe to revoke"
+  // and "the API cannot say" lead to opposite decisions.
+  const status = t.lastUsedStatus ?? (t.lastUsed ? "used" : "unknown");
+  const cls =
+    status === "used"
+      ? "nerd-pill-green"
+      : status === "never"
+        ? "nerd-pill-amber"
+        : status === "error"
+          ? "nerd-pill-red"
+          : "nerd-pill";
+  return (
+    <span className={cls} title={STATUS_TITLES[status] ?? status}>
+      {status}
+    </span>
+  );
+}
+
+export function TokensPage() {
+  const { project } = useUIState();
+  const qc = useQueryClient();
+  const [withLastUsed, setWithLastUsed] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [secret, setSecret] = useState<RevealedSecret | null>(null);
+  const [refreshTarget, setRefreshTarget] = useState<TokenEntry | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<TokenEntry | null>(null);
+
+  const q = useQuery<TokenListResp>({
+    queryKey: ["tokens", project, withLastUsed],
+    queryFn: () =>
+      api.get<TokenListResp>(`/token/${encodeURIComponent(project ?? "")}/list`, {
+        query: { with_last_used: withLastUsed },
+      }),
+    enabled: !!project,
+  });
+
+  const refreshMu = useMutation<TokenSecretResp, Error, TokenEntry>({
+    mutationFn: (t) =>
+      api.post<TokenSecretResp>(`/token/${encodeURIComponent(project ?? "")}/refresh`, {
+        token_id: String(t.id),
+      }),
+    onSuccess: (data, t) => {
+      qc.invalidateQueries({ queryKey: ["tokens"] });
+      setRefreshTarget(null);
+      if (typeof data.token === "string" && data.token) {
+        setSecret({
+          value: data.token,
+          title: "Token rotated",
+          subtitle: `#${String(t.id)} ・ ${t.description ?? "(no description)"}`,
+        });
+      }
+    },
+  });
+
+  const deleteMu = useMutation<unknown, Error, TokenEntry>({
+    mutationFn: (t) =>
+      api.post(`/token/${encodeURIComponent(project ?? "")}/delete`, {
+        token_id: String(t.id),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["tokens"] });
+      setDeleteTarget(null);
+    },
+  });
+
+  const closeDrawer = () => {
+    // Clearing `secret` drops the one-time value out of React state.
+    setSecret(null);
+    setShowCreate(false);
+  };
+
+  const columns: Column<TokenEntry>[] = [
+    {
+      header: "ID",
+      cell: (t) => <span className="text-zinc-500">{String(t.id)}</span>,
+    },
+    {
+      header: "Description",
+      cell: (t) => (
+        <span className="font-medium text-zinc-900 dark:text-zinc-100">
+          {t.description || "(no description)"}
+        </span>
+      ),
+    },
+    { header: "Scope", cell: (t) => <ScopeCell t={t} /> },
+    {
+      header: "Created",
+      cell: (t) => <span className="text-zinc-500 text-xs">{t.created || "—"}</span>,
+    },
+    {
+      header: "Refreshed",
+      cell: (t) => <span className="text-zinc-500 text-xs">{t.refreshed || "—"}</span>,
+    },
+    {
+      header: "Expires",
+      cell: (t) => <span className="text-zinc-500 text-xs">{t.expires || "—"}</span>,
+    },
+  ];
+
+  if (withLastUsed) {
+    columns.push(
+      {
+        header: "Last used",
+        cell: (t) => <span className="text-zinc-500 text-xs">{t.lastUsed || "—"}</span>,
+      },
+      {
+        header: "Last event",
+        cell: (t) => (
+          <span className="text-accent text-xs break-all">{t.lastUsedEvent || "—"}</span>
+        ),
+      },
+      { header: "Status", cell: (t) => <StatusCell t={t} /> },
+    );
+  }
+
+  columns.push({
+    header: "",
+    align: "right",
+    cell: (t) => (
+      <div className="flex gap-1 justify-end">
+        <button
+          type="button"
+          className="nerd-btn text-xs hover:text-amber-700 hover:border-amber-400 dark:hover:text-neon-amber"
+          title="Rotate this token (invalidates the current value)"
+          onClick={(e) => {
+            e.stopPropagation();
+            setRefreshTarget(t);
+          }}
+        >
+          <RefreshCw className="w-3 h-3" />
+        </button>
+        <button
+          type="button"
+          className="nerd-btn text-xs hover:text-red-600 hover:border-red-300 dark:hover:text-red-400 dark:hover:border-red-700"
+          title="Revoke this token"
+          onClick={(e) => {
+            e.stopPropagation();
+            setDeleteTarget(t);
+          }}
+        >
+          <Trash2 className="w-3 h-3" />
+        </button>
+      </div>
+    ),
+  });
+
+  const perTokenErrors = q.data?.errors ?? [];
+
+  return (
+    <div className="space-y-4">
+      <PageTitle
+        title="Tokens"
+        description={`Scoped Storage API tokens in ${project ?? "(no project)"}. Secrets are revealed once, at mint -- kbagent never stores them.`}
+        actions={
+          <button
+            type="button"
+            className="nerd-btn flex items-center gap-1 hover:text-keboola"
+            disabled={!project}
+            onClick={() => {
+              setSecret(null);
+              setShowCreate(true);
+            }}
+          >
+            <Plus className="w-3 h-3" /> Create token
+          </button>
+        }
+      />
+
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          type="button"
+          className={`nerd-btn flex items-center gap-1 ${
+            withLastUsed ? "border-keboola text-keboola" : ""
+          }`}
+          onClick={() => setWithLastUsed((v) => !v)}
+        >
+          <RefreshCw className="w-3 h-3" /> derive last-used
+        </button>
+        {withLastUsed ? (
+          <span className="text-xs text-zinc-500 dark:text-zinc-500">{LAST_USED_CAVEAT}</span>
+        ) : null}
+      </div>
+
+      {refreshMu.error ? (
+        <ErrorBox message={`Rotate failed: ${errMessage(refreshMu.error)}`} />
+      ) : null}
+      {deleteMu.error ? (
+        <ErrorBox message={`Revoke failed: ${errMessage(deleteMu.error)}`} />
+      ) : null}
+
+      {!project ? (
+        <Empty title="Select a project from the top bar" />
+      ) : q.isLoading ? (
+        <Loading label={withLastUsed ? "deriving last-used per token..." : "loading"} />
+      ) : q.error ? (
+        <ErrorBox message={errMessage(q.error)} />
+      ) : (
+        <>
+          {perTokenErrors.length > 0 ? (
+            <div className="text-xs text-amber-700 dark:text-neon-amber">
+              {perTokenErrors.length} per-token lookup(s) failed:{" "}
+              {perTokenErrors
+                .map((e) => `${e.token_id ? `#${e.token_id}: ` : ""}${e.message}`)
+                .join(" ・ ")}
+            </div>
+          ) : null}
+          <DataTable
+            rows={q.data?.tokens ?? []}
+            rowKey={(t) => String(t.id)}
+            emptyMessage="No tokens. The acting token needs canManageTokens to list or mint them."
+            // No client-side sort: with `with_last_used` the server already
+            // returns dormant-first, so reading order IS cleanup order.
+            columns={columns}
+          />
+        </>
+      )}
+
+      {(showCreate || secret) && project ? (
+        <Drawer
+          open={true}
+          onClose={closeDrawer}
+          title={secret ? secret.title : "Create token"}
+          subtitle={secret ? secret.subtitle : `Project: ${project}`}
+          width="max-w-xl"
+        >
+          {secret ? (
+            <SecretPanel secret={secret.value} onClose={closeDrawer} />
+          ) : (
+            <CreateTokenForm
+              project={project}
+              onCreated={(resp) => {
+                qc.invalidateQueries({ queryKey: ["tokens"] });
+                if (typeof resp.token === "string" && resp.token) {
+                  setShowCreate(false);
+                  setSecret({
+                    value: resp.token,
+                    title: "Token created",
+                    subtitle: `#${String(resp.id ?? "?")} ・ ${resp.description ?? ""}`,
+                  });
+                } else {
+                  closeDrawer();
+                }
+              }}
+            />
+          )}
+        </Drawer>
+      ) : null}
+
+      {refreshTarget ? (
+        <ConfirmModal
+          title="Rotate token?"
+          danger
+          busy={refreshMu.isPending}
+          confirmLabel="Rotate"
+          cancelLabel="Cancel"
+          body={
+            <>
+              Rotating <span className="text-accent">#{String(refreshTarget.id)}</span> (
+              {refreshTarget.description || "no description"}) mints a NEW secret and{" "}
+              <strong>invalidates the old value immediately</strong>. Every consumer still using it
+              — CI jobs, components, scripts — breaks until you update it. The new secret is shown
+              once, right after this.
+            </>
+          }
+          onConfirm={() => refreshMu.mutate(refreshTarget)}
+          onCancel={() => setRefreshTarget(null)}
+        />
+      ) : null}
+
+      {deleteTarget ? (
+        <ConfirmModal
+          title="Revoke token?"
+          danger
+          busy={deleteMu.isPending}
+          confirmLabel="Revoke"
+          cancelLabel="Cancel"
+          body={
+            <>
+              Revoke <span className="text-accent">#{String(deleteTarget.id)}</span> (
+              {deleteTarget.description || "no description"})? Revocation is{" "}
+              <strong>immediate and irreversible</strong> — the token cannot be restored, only
+              replaced by a new one.
+            </>
+          }
+          onConfirm={() => deleteMu.mutate(deleteTarget)}
+          onCancel={() => setDeleteTarget(null)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function CreateTokenForm({
+  project,
+  onCreated,
+}: {
+  project: string;
+  onCreated: (resp: TokenSecretResp) => void;
+}) {
+  const [description, setDescription] = useState("");
+  const [expiresIn, setExpiresIn] = useState("");
+  const [bucketWrite, setBucketWrite] = useState("");
+  const [bucketRead, setBucketRead] = useState("");
+  const [componentAccess, setComponentAccess] = useState("");
+  const [canReadAllFileUploads, setCanReadAllFileUploads] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const createMu = useMutation<TokenSecretResp>({
+    mutationFn: () => {
+      const parsedExpires = Number.parseInt(expiresIn.trim(), 10);
+      return api.post<TokenSecretResp>(`/token/${encodeURIComponent(project)}/create`, {
+        description: description.trim(),
+        bucket_write: splitList(bucketWrite),
+        bucket_read: splitList(bucketRead),
+        component_access: splitList(componentAccess),
+        can_read_all_file_uploads: canReadAllFileUploads,
+        expires_in: Number.isFinite(parsedExpires) ? parsedExpires : undefined,
+      });
+    },
+    onSuccess: (resp) => onCreated(resp),
+    onError: (err) => setError(errMessage(err)),
+  });
+
+  const submitDisabled = !description.trim() || createMu.isPending;
+
+  return (
+    <div className="space-y-3">
+      <label className="text-xs text-zinc-600 dark:text-zinc-400 block">
+        Description <span className="text-red-600 dark:text-red-400">*</span>
+        <input
+          className="nerd-input w-full mt-1 font-mono"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="ci-writer for in.c-sales"
+        />
+        <span className="text-zinc-500 dark:text-zinc-600">
+          The only way to tell tokens apart later — name the consumer, not the person.
+        </span>
+      </label>
+
+      <label className="text-xs text-zinc-600 dark:text-zinc-400 block">
+        Expires in (seconds)
+        <input
+          className="nerd-input w-full mt-1 font-mono"
+          type="number"
+          min={1}
+          value={expiresIn}
+          onChange={(e) => setExpiresIn(e.target.value)}
+          placeholder="leave blank for no expiry"
+        />
+      </label>
+
+      <label className="text-xs text-zinc-600 dark:text-zinc-400 block">
+        Bucket write
+        <input
+          className="nerd-input w-full mt-1 font-mono"
+          value={bucketWrite}
+          onChange={(e) => setBucketWrite(e.target.value)}
+          placeholder="in.c-sales, out.c-reports"
+        />
+        <span className="text-zinc-500 dark:text-zinc-600">Comma-separated bucket IDs.</span>
+      </label>
+
+      <label className="text-xs text-zinc-600 dark:text-zinc-400 block">
+        Bucket read
+        <input
+          className="nerd-input w-full mt-1 font-mono"
+          value={bucketRead}
+          onChange={(e) => setBucketRead(e.target.value)}
+          placeholder="in.c-reference"
+        />
+        <span className="text-zinc-500 dark:text-zinc-600">Comma-separated bucket IDs.</span>
+      </label>
+
+      <label className="text-xs text-zinc-600 dark:text-zinc-400 block">
+        Component access
+        <input
+          className="nerd-input w-full mt-1 font-mono"
+          value={componentAccess}
+          onChange={(e) => setComponentAccess(e.target.value)}
+          placeholder="keboola.ex-db-snowflake"
+        />
+        <span className="text-zinc-500 dark:text-zinc-600">Comma-separated component IDs.</span>
+      </label>
+
+      <label className="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
+        <input
+          type="checkbox"
+          checked={canReadAllFileUploads}
+          onChange={(e) => setCanReadAllFileUploads(e.target.checked)}
+        />
+        Can read all file uploads
+      </label>
+
+      {error ? <ErrorBox message={error} /> : null}
+
+      <div className="flex justify-end">
+        <button
+          type="button"
+          className="nerd-btn flex items-center gap-1 hover:text-keboola disabled:opacity-50"
+          disabled={submitDisabled}
+          onClick={() => {
+            setError(null);
+            createMu.mutate();
+          }}
+        >
+          <KeyRound className="w-3 h-3" />
+          {createMu.isPending ? "creating..." : "Create token"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * One-time secret reveal. The value lives in React state only -- it is never
+ * logged, never written to a query string, and is dropped the moment the panel
+ * closes. `navigator.clipboard` is undefined on a non-secure origin, so the
+ * copy button degrades to a "select it manually" hint instead of throwing.
+ */
+function SecretPanel({ secret, onClose }: { secret: string; onClose: () => void }) {
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "manual">("idle");
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const onCopy = () => {
+    const clip = navigator.clipboard;
+    if (!clip || typeof clip.writeText !== "function") {
+      setCopyState("manual");
+      return;
+    }
+    clip.writeText(secret).then(
+      () => {
+        setCopyState("copied");
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopyState("idle"), 2000);
+      },
+      () => setCopyState("manual"),
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="nerd-pill-amber">
+        This value is shown once. kbagent never stores it — copy it now.
+      </div>
+
+      <pre className="nerd-code break-all whitespace-pre-wrap select-all">{secret}</pre>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="nerd-btn flex items-center gap-1 hover:text-keboola"
+          onClick={onCopy}
+        >
+          {copyState === "copied" ? (
+            <>
+              <Check className="w-3 h-3" /> copied
+            </>
+          ) : (
+            <>
+              <Copy className="w-3 h-3" /> copy
+            </>
+          )}
+        </button>
+        <button type="button" className="nerd-btn text-xs" onClick={onClose}>
+          Done
+        </button>
+        {copyState === "manual" ? (
+          <span className="text-xs text-amber-700 dark:text-neon-amber">
+            Clipboard unavailable (non-secure origin) — select the value above and copy manually.
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/web/frontend/src/state.tsx b/web/frontend/src/state.tsx
index a3e5cc90..13d85467 100644
--- a/web/frontend/src/state.tsx
+++ b/web/frontend/src/state.tsx
@@ -2,7 +2,7 @@
  * Lightweight global state via React Context. Holds the currently-selected
  * project alias and active branch ID; pages read these to fan out queries.
  */
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import type { ReactNode } from "react";
 
 export type PageId =
@@ -27,6 +27,7 @@ export type PageId =
   | "encrypt"
   | "org"
   | "members"
+  | "tokens"
   | "doctor"
   | "changelog";
 
@@ -81,16 +82,3 @@ export function useUIState(): UIState {
   if (!ctx) throw new Error("useUIState must be used inside UIStateProvider");
   return ctx;
 }
-
-/**
- * Helper: prompt for the manage token (via modal in the future). For now,
- * stash it in component state and pass it down to the API call.
- */
-export function useManageTokenPrompt(): (reason: string) => Promise<string | null> {
-  return useCallback(async (reason: string) => {
-    const value = window.prompt(
-      `${reason}\n\nThis manage token is used for THIS request only and never stored.`,
-    );
-    return value && value.trim() ? value.trim() : null;
-  }, []);
-}
diff --git a/web/frontend/src/types.ts b/web/frontend/src/types.ts
index dd3f0e5b..05715437 100644
--- a/web/frontend/src/types.ts
+++ b/web/frontend/src/types.ts
@@ -71,7 +71,22 @@ export interface Job {
   id: string | number;
   status: string;
   component: string;
-  configId: string;
+  /**
+   * Configuration id. The Queue API resource names this `config` (NOT
+   * `configId`), and `JobService.list_jobs` adds only `project_alias` to the
+   * row -- everything else is the API resource verbatim. It is null/absent on
+   * a job started from an inline `configData` payload rather than a stored
+   * configuration, so every consumer must handle the empty case.
+   */
+  config: string | null;
+  /**
+   * Branch the job ran against. Null / absent means the default (production)
+   * branch. Typed loosely because the Queue API is inconsistent about the
+   * numeric-vs-string form -- `JobService._fetch_project_jobs` compares it as
+   * `str(j.get("branchId"))` for exactly that reason -- so coerce before
+   * sending it back to a router that declares `branch_id: int | None`.
+   */
+  branchId?: number | string | null;
   createdTime: string;
   startTime?: string;
   endTime?: string;