@useatlas/create 0.0.5 → 0.0.7

package/templates/docker/src/lib/tracing.ts

@@ -4,6 +4,9 @@
  * Wraps async functions in OpenTelemetry spans. When the OTel SDK is not
  * initialized (no OTEL_EXPORTER_OTLP_ENDPOINT), @opentelemetry/api returns
  * a no-op tracer — zero overhead, no conditional imports needed.
+ *
+ * SDK initialization lives in telemetry.ts — import that module once at
+ * server startup to activate real span export.
  */
 
 import { trace, SpanStatusCode, type Attributes } from "@opentelemetry/api";
@@ -13,15 +16,28 @@ const tracer = trace.getTracer("atlas");
 /**
  * Execute `fn` inside an OTel span. Sets span status and records exceptions
  * on failure. When OTel is not initialized the span is a no-op.
+ *
+ * The optional `setResultAttributes` callback receives the successful return
+ * value and returns additional attributes to set on the span (e.g. row count
+ * from a query result). It is NOT called on error.
  */
 export async function withSpan<T>(
   name: string,
   attributes: Attributes,
   fn: () => Promise<T>,
+  setResultAttributes?: (result: T) => Attributes,
 ): Promise<T> {
   return tracer.startActiveSpan(name, { attributes }, async (span) => {
     try {
       const result = await fn();
+      if (setResultAttributes) {
+        try {
+          const attrs = setResultAttributes(result);
+          if (attrs) span.setAttributes(attrs);
+        } catch {
+          // Callback bug must not invalidate a successful operation.
+        }
+      }
       span.setStatus({ code: SpanStatusCode.OK });
       return result;
     } catch (err) {

package/templates/docker/src/lib/whatsapp/store.ts

@@ -0,0 +1,198 @@
+/**
+ * WhatsApp installation storage.
+ *
+ * Stores per-workspace WhatsApp Cloud API credentials in the internal database.
+ * Each workspace admin enters their phone number ID and access token from Meta
+ * Business Suite (BYOT).
+ */
+
+import { hasInternalDB, internalQuery } from "@atlas/api/lib/db/internal";
+import { createLogger } from "@atlas/api/lib/logger";
+import type { WhatsAppInstallation, WhatsAppInstallationWithSecret } from "@atlas/api/lib/integrations/types";
+
+export type { WhatsAppInstallation, WhatsAppInstallationWithSecret } from "@atlas/api/lib/integrations/types";
+
+const log = createLogger("whatsapp-store");
+
+// ---------------------------------------------------------------------------
+// Shared row parser
+// ---------------------------------------------------------------------------
+
+function parseInstallationRow(
+  row: Record<string, unknown>,
+  context: Record<string, unknown>,
+): WhatsAppInstallationWithSecret | null {
+  const phoneNumberId = row.phone_number_id;
+  const accessToken = row.access_token;
+  if (typeof phoneNumberId !== "string" || !phoneNumberId || typeof accessToken !== "string" || !accessToken) {
+    log.warn(context, "Invalid WhatsApp installation record in database");
+    return null;
+  }
+  return {
+    phone_number_id: phoneNumberId,
+    access_token: accessToken,
+    display_phone: typeof row.display_phone === "string" ? row.display_phone : null,
+    org_id: typeof row.org_id === "string" ? row.org_id : null,
+    installed_at: typeof row.installed_at === "string" ? row.installed_at : new Date().toISOString(),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Read operations
+// ---------------------------------------------------------------------------
+
+/**
+ * Get the WhatsApp installation for a phone number ID.
+ */
+export async function getWhatsAppInstallation(
+  phoneNumberId: string,
+): Promise<WhatsAppInstallationWithSecret | null> {
+  if (!hasInternalDB()) {
+    return null;
+  }
+
+  try {
+    const rows = await internalQuery<Record<string, unknown>>(
+      "SELECT phone_number_id, access_token, display_phone, org_id, installed_at::text FROM whatsapp_installations WHERE phone_number_id = $1",
+      [phoneNumberId],
+    );
+    if (rows.length > 0) {
+      return parseInstallationRow(rows[0], { phoneNumberId });
+    }
+    return null;
+  } catch (err) {
+    log.error(
+      { err: err instanceof Error ? err.message : String(err), phoneNumberId },
+      "Failed to query whatsapp_installations",
+    );
+    throw err;
+  }
+}
+
+/**
+ * Get the WhatsApp installation for an org. Returns null if not found or
+ * if no internal database is configured.
+ */
+export async function getWhatsAppInstallationByOrg(
+  orgId: string,
+): Promise<WhatsAppInstallation | null> {
+  if (!hasInternalDB()) {
+    return null;
+  }
+
+  try {
+    const rows = await internalQuery<Record<string, unknown>>(
+      "SELECT phone_number_id, access_token, display_phone, org_id, installed_at::text FROM whatsapp_installations WHERE org_id = $1",
+      [orgId],
+    );
+    if (rows.length > 0) {
+      const full = parseInstallationRow(rows[0], { orgId });
+      if (!full) return null;
+      const { access_token: _, ...pub } = full;
+      return pub;
+    }
+    return null;
+  } catch (err) {
+    log.error(
+      { err: err instanceof Error ? err.message : String(err), orgId },
+      "Failed to query whatsapp_installations by org",
+    );
+    throw err;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Write operations
+// ---------------------------------------------------------------------------
+
+/**
+ * Save or update a WhatsApp installation (Cloud API credential submission).
+ * Throws if the phone number is already bound to a different organization (hijack protection).
+ * Throws if the database write fails.
+ */
+export async function saveWhatsAppInstallation(
+  phoneNumberId: string,
+  opts: { orgId?: string; displayPhone?: string; accessToken: string },
+): Promise<void> {
+  if (!hasInternalDB()) {
+    throw new Error("Cannot save WhatsApp installation — no internal database configured");
+  }
+
+  const orgId = opts.orgId ?? null;
+  const displayPhone = opts.displayPhone ?? null;
+
+  try {
+    // Atomic upsert with hijack protection — the WHERE clause rejects rows
+    // bound to a different org in one statement (no TOCTOU race).
+    const rows = await internalQuery<{ phone_number_id: string }>(
+      `INSERT INTO whatsapp_installations (phone_number_id, access_token, display_phone, org_id)
+       VALUES ($1, $2, $3, $4)
+       ON CONFLICT (phone_number_id) DO UPDATE SET
+         access_token = $2,
+         display_phone = COALESCE($3, whatsapp_installations.display_phone),
+         org_id = COALESCE($4, whatsapp_installations.org_id),
+         installed_at = now()
+       WHERE whatsapp_installations.org_id IS NULL OR whatsapp_installations.org_id = $4
+       RETURNING phone_number_id`,
+      [phoneNumberId, opts.accessToken, displayPhone, orgId],
+    );
+
+    if (rows.length === 0) {
+      throw new Error(
+        `WhatsApp phone number ${phoneNumberId} is already bound to a different organization. ` +
+        `Disconnect the existing installation first.`,
+      );
+    }
+  } catch (err) {
+    log.error(
+      { err: err instanceof Error ? err.message : String(err), phoneNumberId },
+      "Failed to save whatsapp_installations",
+    );
+    throw err;
+  }
+}
+
+/**
+ * Remove a WhatsApp installation by phone number ID.
+ * Throws if no internal DB or if the query fails.
+ */
+export async function deleteWhatsAppInstallation(phoneNumberId: string): Promise<void> {
+  if (!hasInternalDB()) {
+    throw new Error("Cannot delete WhatsApp installation — no internal database configured");
+  }
+
+  try {
+    await internalQuery("DELETE FROM whatsapp_installations WHERE phone_number_id = $1", [phoneNumberId]);
+  } catch (err) {
+    log.error(
+      { err: err instanceof Error ? err.message : String(err), phoneNumberId },
+      "Failed to delete whatsapp_installations",
+    );
+    throw err;
+  }
+}
+
+/**
+ * Remove the WhatsApp installation for an org.
+ * Returns true if a row was deleted, false if no matching row found.
+ * Throws if no internal DB or if the query fails.
+ */
+export async function deleteWhatsAppInstallationByOrg(orgId: string): Promise<boolean> {
+  if (!hasInternalDB()) {
+    throw new Error("Cannot delete WhatsApp installation — no internal database configured");
+  }
+
+  try {
+    const rows = await internalQuery<{ phone_number_id: string }>(
+      "DELETE FROM whatsapp_installations WHERE org_id = $1 RETURNING phone_number_id",
+      [orgId],
+    );
+    return rows.length > 0;
+  } catch (err) {
+    log.error(
+      { err: err instanceof Error ? err.message : String(err), orgId },
+      "Failed to delete whatsapp_installations by org",
+    );
+    throw err;
+  }
+}

package/templates/docker/src/lib/workspace.ts

@@ -0,0 +1,89 @@
+/**
+ * Workspace status enforcement.
+ *
+ * Checks the workspace_status of the authenticated user's organization
+ * and blocks requests when the workspace is suspended or deleted.
+ * Called after authentication in request-processing routes (chat, query).
+ *
+ * - Suspended workspaces: 403 with clear reactivation message
+ * - Deleted workspaces: 404 (workspace no longer exists)
+ * - Active or no org: pass through
+ * - Pre-migration orgs (no workspace_status column): pass through
+ * - DB errors: fail closed (block request with 503)
+ */
+
+import { createLogger } from "@atlas/api/lib/logger";
+import { hasInternalDB, getWorkspaceStatus, type WorkspaceStatus } from "@atlas/api/lib/db/internal";
+
+const log = createLogger("workspace");
+
+export interface WorkspaceCheckResult {
+  allowed: boolean;
+  status?: WorkspaceStatus;
+  errorCode?: string;
+  errorMessage?: string;
+  httpStatus?: 403 | 404 | 503;
+}
+
+/**
+ * Check if the workspace is allowed to make requests.
+ *
+ * Returns `{ allowed: true }` when:
+ * - No internal DB is configured (self-hosted, no org management)
+ * - No orgId provided (user not in an org)
+ * - Workspace status is "active"
+ * - Org has no workspace_status yet (pre-migration)
+ *
+ * Returns `{ allowed: false, ... }` when suspended, deleted, or on DB error.
+ */
+export async function checkWorkspaceStatus(orgId: string | undefined): Promise<WorkspaceCheckResult> {
+  if (!orgId || !hasInternalDB()) {
+    return { allowed: true };
+  }
+
+  let status: WorkspaceStatus | null;
+  try {
+    status = await getWorkspaceStatus(orgId);
+  } catch (err) {
+    log.error(
+      { err: err instanceof Error ? err.message : String(err), orgId },
+      "Failed to check workspace status — blocking request as a precaution",
+    );
+    return {
+      allowed: false,
+      errorCode: "workspace_check_failed",
+      errorMessage: "Unable to verify workspace status. Please try again.",
+      httpStatus: 503,
+    };
+  }
+
+  // Org exists but has no workspace_status column yet (pre-migration) — allow
+  if (!status) {
+    return { allowed: true };
+  }
+
+  switch (status) {
+    case "active":
+      return { allowed: true, status };
+
+    case "suspended":
+      log.warn({ orgId }, "Request blocked: workspace is suspended");
+      return {
+        allowed: false,
+        status,
+        errorCode: "workspace_suspended",
+        errorMessage: "This workspace is suspended. Contact your administrator to reactivate it.",
+        httpStatus: 403,
+      };
+
+    case "deleted":
+      log.warn({ orgId }, "Request blocked: workspace is deleted");
+      return {
+        allowed: false,
+        status,
+        errorCode: "workspace_deleted",
+        errorMessage: "This workspace has been deleted.",
+        httpStatus: 404,
+      };
+  }
+}

package/templates/docker/src/progress.ts

@@ -0,0 +1,121 @@
+/**
+ * Progress tracking for `atlas init` profiling.
+ *
+ * Provides a spinner with table count, ETA, and elapsed time.
+ * Falls back to simple line-by-line output when stderr is not a TTY.
+ */
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+export interface ProfileProgressCallbacks {
+  onStart(total: number): void;
+  onTableStart(name: string, index: number, total: number): void;
+  onTableDone(name: string, index: number, total: number): void;
+  onTableError(name: string, error: string, index: number, total: number): void;
+  onComplete(succeeded: number, elapsedMs: number): void;
+}
+
+// ---------------------------------------------------------------------------
+// ETA helpers (exported for testing)
+// ---------------------------------------------------------------------------
+
+/** Format milliseconds as a human-friendly string (e.g. "42s", "1m 12s"). */
+export function formatDuration(ms: number): string {
+  const totalSeconds = Math.round(ms / 1000);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+}
+
+/** Estimate remaining time given elapsed time, items completed, and total items. Returns ms. */
+export function estimateRemaining(elapsedMs: number, completed: number, total: number): number {
+  if (completed <= 0 || completed >= total) return 0;
+  const perItem = elapsedMs / completed;
+  return perItem * (total - completed);
+}
+
+// ---------------------------------------------------------------------------
+// Progress tracker factory
+// ---------------------------------------------------------------------------
+
+const ETA_INTERVAL = 5; // Show ETA every N tables
+
+export function createProgressTracker(): ProfileProgressCallbacks {
+  const isTTY = process.stderr.isTTY ?? false;
+  let startTime = 0;
+  let errorCount = 0;
+  let spinner: ReturnType<typeof p.spinner> | undefined;
+
+  return {
+    onStart(total: number) {
+      startTime = Date.now();
+      errorCount = 0;
+
+      if (isTTY) {
+        process.stderr.write(`\n${pc.cyan(`Found ${total} table${total !== 1 ? "s" : ""} to profile`)}\n\n`);
+        spinner = p.spinner();
+        spinner.start("Starting profiler...");
+      } else {
+        process.stderr.write(`Found ${total} table${total !== 1 ? "s" : ""} to profile\n`);
+      }
+    },
+
+    onTableStart(name: string, index: number, total: number) {
+      const msg = `Profiling ${name} (${index + 1}/${total})...`;
+      if (isTTY && spinner) {
+        spinner.message(msg);
+      } else {
+        process.stderr.write(`  ${msg}\n`);
+      }
+    },
+
+    onTableDone(_name: string, index: number, total: number) {
+      const done = index + 1;
+
+      // Show ETA every N tables (but not on the last one — completion handles that)
+      if (done < total && done % ETA_INTERVAL === 0) {
+        const elapsed = Date.now() - startTime;
+        const remaining = estimateRemaining(elapsed, done, total);
+        const msg = `${done}/${total} tables profiled (${formatDuration(elapsed)} elapsed, ~${formatDuration(remaining)} remaining)`;
+        if (isTTY && spinner) {
+          spinner.message(msg);
+        } else {
+          process.stderr.write(`  ${msg}\n`);
+        }
+      }
+    },
+
+    onTableError(name: string, error: string, _index: number, _total: number) {
+      errorCount++;
+      if (isTTY && spinner) {
+        try {
+          // Temporarily stop spinner to print warning, then restart
+          spinner.stop(pc.yellow(`  Warning: Failed to profile ${name}: ${error}`));
+          spinner = p.spinner();
+          spinner.start("Continuing...");
+        } catch {
+          // Terminal IO failed — fall back to plain write
+          spinner = undefined;
+          process.stderr.write(`  Warning: Failed to profile ${name}: ${error}\n`);
+        }
+      } else {
+        process.stderr.write(`  ${pc.yellow(`Warning: Failed to profile ${name}: ${error}`)}\n`);
+      }
+    },
+
+    onComplete(succeeded: number, elapsedMs: number) {
+      const failPart = errorCount > 0 ? `, ${errorCount} failed` : "";
+      const summary = `Profiled ${succeeded} table${succeeded !== 1 ? "s" : ""} in ${formatDuration(elapsedMs)}${failPart}`;
+      if (isTTY && spinner) {
+        spinner.stop(pc.green(summary));
+      } else {
+        process.stderr.write(`${summary}\n`);
+      }
+    },
+  };
+}

package/templates/docker/src/types/data-table.ts

@@ -0,0 +1,48 @@
+import type { ColumnSort, RowData } from "@tanstack/react-table";
+import type { DataTableConfig } from "@/config/data-table";
+import type { FilterItemSchema } from "@/lib/parsers";
+
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- type params must match original interface for module augmentation
+  interface TableMeta<TData extends RowData> {
+    queryKeys?: QueryKeys;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- type params must match original interface for module augmentation
+  interface ColumnMeta<TData extends RowData, TValue> {
+    label?: string;
+    placeholder?: string;
+    variant?: FilterVariant;
+    options?: Option[];
+    range?: [number, number];
+    unit?: string;
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+  }
+}
+
+export interface QueryKeys {
+  page: string;
+  perPage: string;
+  sort: string;
+  filters: string;
+  joinOperator: string;
+}
+
+export interface Option {
+  label: string;
+  value: string;
+  count?: number;
+  icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+}
+
+export type FilterOperator = DataTableConfig["operators"][number];
+export type FilterVariant = DataTableConfig["filterVariants"][number];
+export type JoinOperator = DataTableConfig["joinOperators"][number];
+
+export interface ExtendedColumnSort<TData> extends Omit<ColumnSort, "id"> {
+  id: Extract<keyof TData, string>;
+}
+
+export interface ExtendedColumnFilter<TData> extends FilterItemSchema {
+  id: Extract<keyof TData, string>;
+}

package/templates/docker/src/ui/atlas-chat-reexport.ts

@@ -0,0 +1,3 @@
+/** Re-export from @useatlas/react for backwards compatibility. */
+export { AtlasChat } from "@useatlas/react";
+export type { AtlasChatProps } from "@useatlas/react";

package/templates/docker/src/ui/components/actions/action-approval-card.tsx

@@ -5,8 +5,8 @@ import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
 import {
   isActionToolResult,
   RESOLVED_STATUSES,
-  type ActionStatus,
-  type ResolvedStatus,
+  type ActionDisplayStatus,
+  type ResolvedDisplayStatus,
   type ActionApprovalResponse,
   type ActionToolResultShape,
 } from "../../lib/action-types";
@@ -34,14 +34,14 @@ function safeStringify(value: unknown): string {
 type CardState =
   | { phase: "idle" }
   | { phase: "submitting"; action: "approve" | "deny" }
-  | { phase: "resolved"; status: ResolvedStatus; result?: unknown }
+  | { phase: "resolved"; status: ResolvedDisplayStatus; result?: unknown }
   | { phase: "error"; message: string };
 
 /* ------------------------------------------------------------------ */
 /*  Border color by status                                             */
 /* ------------------------------------------------------------------ */
 
-function borderColor(status: ActionStatus): string {
+function borderColor(status: ActionDisplayStatus): string {
   switch (status) {
     case "pending_approval":
       return "border-yellow-300 dark:border-yellow-900/50";
@@ -52,7 +52,8 @@ function borderColor(status: ActionStatus): string {
     case "denied":
     case "failed":
       return "border-red-300 dark:border-red-900/50";
-    default:
+    case "rolled_back":
+    case "timed_out":
       return "border-zinc-200 dark:border-zinc-700";
   }
 }
@@ -86,12 +87,16 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
   const toolResult: ActionToolResultShape = rawResult;
 
   // Effective status: local optimistic update wins over server result
-  const effectiveStatus: ActionStatus =
+  const effectiveStatus: ActionDisplayStatus =
     cardState.phase === "resolved" ? cardState.status : toolResult.status;
 
   const isPending = effectiveStatus === "pending_approval" && cardState.phase !== "submitting";
   const isSubmitting = cardState.phase === "submitting";
-  const resolvedResult = cardState.phase === "resolved" ? cardState.result : toolResult.result;
+  const resolvedResult = cardState.phase === "resolved"
+    ? cardState.result
+    : toolResult.status === "approved" || toolResult.status === "executed" || toolResult.status === "auto_approved"
+      ? toolResult.result
+      : undefined;
 
   /* ---------------------------------------------------------------- */
   /*  API helpers                                                      */
@@ -126,8 +131,10 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
       } catch {
         throw new Error("Action was already resolved, but the response could not be read. Refresh the page.");
       }
-      const status = typeof data.status === "string" ? data.status as ResolvedStatus : "failed" as ResolvedStatus;
-      const label = status.replace(/_/g, " ");
+      if (typeof data.status !== "string" || !RESOLVED_STATUSES.has(data.status as ActionDisplayStatus)) {
+        throw new Error("Action was already resolved with an unrecognized status. Refresh the page.");
+      }
+      const label = data.status.replace(/_/g, " ");
       throw new Error(`This action was already ${label} by another user or policy.`);
     }
 
@@ -142,10 +149,10 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
     } catch {
       throw new Error("Action succeeded, but the response could not be read. Refresh the page.");
     }
-    if (typeof data.status !== "string") {
-      throw new Error("Action succeeded, but the server returned an invalid status. Refresh the page.");
+    if (typeof data.status !== "string" || !RESOLVED_STATUSES.has(data.status as ActionDisplayStatus)) {
+      throw new Error("Action succeeded, but the server returned an unrecognized status. Refresh the page.");
     }
-    setCardState({ phase: "resolved", status: data.status as ResolvedStatus, result: data.result });
+    setCardState({ phase: "resolved", status: data.status as ResolvedDisplayStatus, result: data.result });
   }
 
   async function handleApprove() {
@@ -214,13 +221,13 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
                 : safeStringify(resolvedResult)}
             </div>
           )}
-          {toolResult.error && (
+          {toolResult.status === "failed" && (
             <div className="mb-2 rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-400">
               <span className="font-medium">Error: </span>
               {toolResult.error}
             </div>
           )}
-          {toolResult.reason && RESOLVED_STATUSES.has(effectiveStatus) && (
+          {toolResult.status === "denied" && RESOLVED_STATUSES.has(effectiveStatus) && (
             <div className="mb-2 text-xs text-zinc-500 dark:text-zinc-400">
               <span className="font-medium">Reason: </span>
               {toolResult.reason}
@@ -240,7 +247,7 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
             <button
               onClick={handleApprove}
               disabled={isSubmitting}
-              className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40"
+              className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/50 disabled:opacity-40"
             >
               {isSubmitting && cardState.action === "approve" && (
                 <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
@@ -252,7 +259,7 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
               <button
                 onClick={() => setShowDenyInput(true)}
                 disabled={isSubmitting}
-                className="rounded border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-800 disabled:opacity-40 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+                className="rounded border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
               >
                 Deny
               </button>
@@ -262,13 +269,13 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
                   value={denyReason}
                   onChange={(e) => setDenyReason(e.target.value)}
                   placeholder="Reason (optional)"
-                  className="flex-1 rounded border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 placeholder-zinc-400 outline-none focus:border-red-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+                  className="flex-1 rounded border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 placeholder-zinc-400 outline-none focus-visible:border-red-400 focus-visible:ring-[3px] focus-visible:ring-red-400/30 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
                   disabled={isSubmitting}
                 />
                 <button
                   onClick={handleDeny}
                   disabled={isSubmitting}
-                  className="inline-flex items-center gap-1.5 rounded bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 disabled:opacity-40"
+                  className="inline-flex items-center gap-1.5 rounded bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-red-500/50 disabled:opacity-40"
                 >
                   {isSubmitting && cardState.action === "deny" && (
                     <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
@@ -281,7 +288,7 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
                     setDenyReason("");
                   }}
                   disabled={isSubmitting}
-                  className="text-xs text-zinc-400 hover:text-zinc-600 disabled:opacity-40 dark:hover:text-zinc-300"
+                  className="rounded text-xs text-zinc-400 hover:text-zinc-600 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40 dark:hover:text-zinc-300"
                 >
                   Cancel
                 </button>

package/templates/docker/src/ui/components/actions/action-status-badge.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import type { ActionStatus } from "../../lib/action-types";
+import type { ActionDisplayStatus } from "../../lib/action-types";
 
-const STATUS_CONFIG: Record<ActionStatus, { label: string; classes: string }> = {
+const STATUS_CONFIG: Record<ActionDisplayStatus, { label: string; classes: string }> = {
   pending_approval: {
     label: "Pending Approval",
     classes: "bg-yellow-100 text-yellow-700 dark:bg-yellow-600/20 dark:text-yellow-400",
@@ -37,7 +37,7 @@ const STATUS_CONFIG: Record<ActionStatus, { label: string; classes: string }> =
   },
 };
 
-export function ActionStatusBadge({ status }: { status: ActionStatus }) {
+export function ActionStatusBadge({ status }: { status: ActionDisplayStatus }) {
   const config = STATUS_CONFIG[status] ?? {
     label: status.replace(/_/g, " "),
     classes: "bg-zinc-100 text-zinc-700 dark:bg-zinc-600/20 dark:text-zinc-400",