@effect-x/envault 0.1.0

package/src/tui/App.tsx

@@ -0,0 +1,1591 @@
+/** @jsxImportSource @opentui/react */
+import { RegistryProvider, useAtomSet, useAtomValue } from "@effect/atom-react";
+import { TextAttributes } from "@opentui/core";
+import { createDefaultOpenTuiKeymap } from "@opentui/keymap/opentui";
+import { KeymapProvider, useBindings } from "@opentui/keymap/react";
+import { useRenderer, useTerminalDimensions } from "@opentui/react";
+import { Effect } from "effect";
+import { useCallback, useEffect, useMemo } from "react";
+import type { EnvVariable } from "../domain.ts";
+import {
+  busyAtom,
+  envFilesAtom,
+  envTableRowsAtom,
+  focusAtom,
+  messageAtom,
+  modalAtom,
+  previousFocusAtom,
+  queryAtom,
+  rootAtom,
+  decryptAtom,
+  selectedEnvironmentAtom,
+  selectedFileAtom,
+  selectedGroupAtom,
+  selectedPathAtom,
+  selectedVariableAtom,
+  selectedVariableKeyAtom,
+  statsAtom,
+  visibleEnvFileGroupsAtom,
+  workspaceAtom,
+} from "./atoms.ts";
+import { colors } from "./colors.ts";
+import { Modal } from "./modal.ts";
+import {
+  EmptyState,
+  HintRow,
+  PlainLine,
+  ScrollPanel,
+  SectionTitle,
+  TextLine,
+} from "./primitives.tsx";
+import type { AppCommand, AppProps, EditDraft, EnvTableCell, FocusTarget } from "./types.ts";
+
+// ─── Utilities ───────────────────────────────────────────────────────────────
+
+const focusLabel = (focus: FocusTarget): string => {
+  switch (focus) {
+    case "files":
+      return "projects";
+    case "variables":
+      return "keys";
+    case "filter":
+      return "search";
+    case "edit-key":
+      return "edit key";
+    case "edit-value":
+      return "edit value";
+    case "file-path":
+      return "new file";
+  }
+};
+
+const maskedValue = (variable: EnvVariable): string => {
+  if (!variable.encrypted) return variable.value;
+  if (variable.value === "***") return "•••••• encrypted";
+  return variable.value;
+};
+
+const commandMatches = (command: AppCommand, query: string): boolean => {
+  const normalized = query.trim().toLowerCase();
+  if (normalized.length === 0) return true;
+  return [command.id, command.title, command.shortcut ?? ""]
+    .join(" ")
+    .toLowerCase()
+    .includes(normalized);
+};
+
+const ellipsize = (value: string, width: number): string => {
+  if (value.length <= width) return value.padEnd(width);
+  if (width <= 1) return value.slice(0, width);
+  return `${value.slice(0, width - 1)}…`;
+};
+
+const cellValue = (cell: EnvTableCell, width: number): string => {
+  if (cell.variable === undefined) return "—".padEnd(width);
+  return ellipsize(maskedValue(cell.variable), width);
+};
+
+const selectedCellDetail = (cell: EnvTableCell): string => {
+  if (cell.variable === undefined) return "missing";
+  return maskedValue(cell.variable);
+};
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), max);
+
+// ─── Layout hook ─────────────────────────────────────────────────────────────
+
+const useLayout = () => {
+  const { width, height } = useTerminalDimensions();
+  return {
+    width,
+    height,
+    isWide: width >= 120,
+    isNarrow: width < 80,
+    bodyHeight: height - 4, // header + tabs + footer + padding
+  };
+};
+
+// ─── Header ──────────────────────────────────────────────────────────────────
+
+function Header() {
+  const decrypt = useAtomValue(decryptAtom);
+  const stats = useAtomValue(statsAtom);
+
+  return (
+    <box height={1} paddingLeft={1} paddingRight={1} flexDirection="row">
+      <box height={1}>
+        <TextLine>
+          <span fg={colors.accent} attributes={TextAttributes.BOLD}>
+            ENV VAULT
+          </span>
+          <span fg={colors.dim}> │ </span>
+          <span fg={colors.text}>{`${stats.files} files`}</span>
+          <span fg={colors.dim}> · </span>
+          <span fg={colors.text}>{`${stats.variables} vars`}</span>
+          {stats.encryptedFiles > 0 ? (
+            <span>
+              <span fg={colors.dim}> · </span>
+              <span fg={colors.encrypted}>{`${stats.encryptedFiles} enc`}</span>
+            </span>
+          ) : null}
+          <span fg={colors.dim}> │ </span>
+          <span fg={decrypt ? colors.success : colors.muted}>{decrypt ? "decrypt" : "locked"}</span>
+        </TextLine>
+      </box>
+    </box>
+  );
+}
+
+// ─── Project Tabs ────────────────────────────────────────────────────────────
+
+function ProjectTabs() {
+  const groups = useAtomValue(visibleEnvFileGroupsAtom);
+  const selectedGroup = useAtomValue(selectedGroupAtom);
+  const focus = useAtomValue(focusAtom);
+  const layout = useLayout();
+
+  return (
+    <box flexDirection="column" height={2} backgroundColor={colors.panelDeep}>
+      <box
+        height={1}
+        backgroundColor={focus === "files" ? colors.panelAlt : colors.panelDeep}
+        paddingLeft={1}
+        paddingRight={1}
+        flexDirection="row"
+      >
+        <TextLine>
+          {groups.length === 0 ? <span fg={colors.muted}>no env groups found</span> : null}
+          {groups.map((group, index) => {
+            const active = group.key === selectedGroup?.key;
+            const labelWidth = layout.width < 100 ? 14 : 20;
+            return (
+              <span key={group.key}>
+                {index > 0 ? <span fg={colors.dim}> </span> : null}
+                <span
+                  fg={active ? colors.panelDeep : colors.text}
+                  bg={active ? colors.accent : colors.panel}
+                  attributes={active ? TextAttributes.BOLD : 0}
+                >
+                  {` ${ellipsize(group.label, labelWidth)} `}
+                </span>
+                <span
+                  fg={active ? colors.panelDeep : colors.muted}
+                  bg={active ? colors.accent : colors.panel}
+                >
+                  {`${group.environments.length}e `}
+                </span>
+              </span>
+            );
+          })}
+        </TextLine>
+      </box>
+      <box height={1} backgroundColor={colors.line} />
+    </box>
+  );
+}
+
+// ─── Env Matrix ──────────────────────────────────────────────────────────────
+
+type EnvMatrixProps = {
+  readonly availableWidth: number;
+};
+
+function EnvMatrix(props: EnvMatrixProps) {
+  const rows = useAtomValue(envTableRowsAtom);
+  const group = useAtomValue(selectedGroupAtom);
+  const selectedEnvironment = useAtomValue(selectedEnvironmentAtom);
+  const selectedVariableKey = useAtomValue(selectedVariableKeyAtom);
+  const focus = useAtomValue(focusAtom);
+
+  if (group === undefined) {
+    return <EmptyState message="select a project" hint="use h/l to navigate projects" />;
+  }
+
+  if (rows.length === 0) {
+    return <EmptyState message="no matching keys" hint="try adjusting your search filter" />;
+  }
+
+  const keyWidth = clamp(Math.floor(props.availableWidth * 0.28), 22, 34);
+  const countWidth = 5;
+  const chromeWidth = 1 + keyWidth + 3 + countWidth;
+  const environmentAreaWidth = Math.max(12, props.availableWidth - chromeWidth - 4);
+  const minimumEnvironmentWidth = props.availableWidth < 110 ? 16 : 20;
+  const selectedEnvironmentIndex = Math.max(
+    0,
+    group.environments.findIndex((environment) => environment.path === selectedEnvironment?.path),
+  );
+  const visibleEnvironmentCount = clamp(
+    Math.floor(environmentAreaWidth / minimumEnvironmentWidth),
+    1,
+    group.environments.length,
+  );
+  const environmentWidth = Math.max(
+    minimumEnvironmentWidth,
+    Math.floor(environmentAreaWidth / visibleEnvironmentCount),
+  );
+  const visibleEnvironmentStart = Math.min(
+    Math.max(0, selectedEnvironmentIndex - Math.floor(visibleEnvironmentCount / 2)),
+    Math.max(0, group.environments.length - visibleEnvironmentCount),
+  );
+  const visibleEnvironments = group.environments.slice(
+    visibleEnvironmentStart,
+    visibleEnvironmentStart + visibleEnvironmentCount,
+  );
+  const hiddenLeft = visibleEnvironmentStart;
+  const hiddenRight =
+    group.environments.length - visibleEnvironmentStart - visibleEnvironments.length;
+  const envRange =
+    group.environments.length > visibleEnvironments.length
+      ? ` · ${visibleEnvironmentStart + 1}-${visibleEnvironmentStart + visibleEnvironments.length}/${group.environments.length} envs`
+      : ` · ${group.environments.length} env${group.environments.length === 1 ? "" : "s"}`;
+
+  return (
+    <ScrollPanel
+      title={`keys ${rows.length}${envRange}`}
+      focused={focus === "variables"}
+      width="100%"
+      height="100%"
+    >
+      <TextLine backgroundColor={colors.panelDeep}>
+        <span fg={colors.dim}> {ellipsize("key", keyWidth)}</span>
+        <span fg={colors.dim}> │ </span>
+        {visibleEnvironments.map((environment) => {
+          const active = environment.path === selectedEnvironment?.path;
+          return (
+            <span
+              key={environment.path}
+              fg={active ? colors.accent : colors.info}
+              attributes={active ? TextAttributes.BOLD : 0}
+            >
+              {ellipsize(environment.label, environmentWidth)}
+            </span>
+          );
+        })}
+        <span fg={colors.dim}>{ellipsize("", countWidth)}</span>
+      </TextLine>
+      {hiddenLeft > 0 || hiddenRight > 0 ? (
+        <TextLine>
+          <span fg={colors.dim}> {ellipsize("", keyWidth)}</span>
+          <span fg={colors.dim}> │ </span>
+          <span fg={colors.muted}>
+            {ellipsize(
+              `${hiddenLeft > 0 ? `← ${hiddenLeft} hidden` : ""}${hiddenLeft > 0 && hiddenRight > 0 ? " · " : ""}${hiddenRight > 0 ? `${hiddenRight} hidden →` : ""}`,
+              environmentWidth * visibleEnvironmentCount,
+            )}
+          </span>
+        </TextLine>
+      ) : null}
+      {rows.map((row) => {
+        const active = row.key === selectedVariableKey;
+        const visibleCells = visibleEnvironments.map((environment) =>
+          row.cells.find((cell) => cell.environment.path === environment.path),
+        );
+        return (
+          <TextLine key={row.key} {...(active ? { backgroundColor: colors.selectedBg } : {})}>
+            <span fg={active ? colors.accent : colors.dim}>{active ? "▸" : " "}</span>
+            <span
+              fg={active ? colors.selectedText : colors.text}
+              attributes={active ? TextAttributes.BOLD : 0}
+            >
+              {ellipsize(row.key, keyWidth)}
+            </span>
+            <span fg={colors.dim}> │ </span>
+            {visibleCells.map((cell) => {
+              if (cell === undefined) return null;
+              const selectedCell = cell.environment.path === selectedEnvironment?.path;
+              return (
+                <span
+                  key={cell.environment.path}
+                  fg={
+                    cell.variable === undefined
+                      ? colors.dim
+                      : cell.variable.encrypted
+                        ? colors.encrypted
+                        : selectedCell
+                          ? colors.selectedText
+                          : colors.text
+                  }
+                  attributes={selectedCell && active ? TextAttributes.BOLD : 0}
+                >
+                  {cellValue(cell, environmentWidth)}
+                </span>
+              );
+            })}
+            <span fg={colors.dim}>
+              {ellipsize(`${row.presentCount}/${row.cells.length}`, countWidth)}
+            </span>
+          </TextLine>
+        );
+      })}
+    </ScrollPanel>
+  );
+}
+
+// ─── Detail Panel ─────────────────────────────────────────────────────────────
+
+function DetailPanel(props: { readonly compact?: boolean | undefined }) {
+  const selectedVariable = useAtomValue(selectedVariableAtom);
+  const selectedEnvironment = useAtomValue(selectedEnvironmentAtom);
+  const selectedVariableKey = useAtomValue(selectedVariableKeyAtom);
+  const rows = useAtomValue(envTableRowsAtom);
+
+  if (selectedVariableKey === undefined) {
+    return (
+      <ScrollPanel title="detail" width="100%" height="100%">
+        <EmptyState message="no key selected" />
+      </ScrollPanel>
+    );
+  }
+
+  const row = rows.find((row) => row.key === selectedVariableKey);
+  const title = ellipsize(selectedVariableKey, 72);
+
+  return (
+    <ScrollPanel title={title} width="100%" height="100%">
+      <TextLine>
+        <span fg={colors.dim}>key </span>
+        <span fg={colors.accent} attributes={TextAttributes.BOLD}>
+          {selectedVariableKey}
+        </span>
+      </TextLine>
+      <TextLine>
+        <span fg={colors.dim}>env </span>
+        <span fg={colors.info}>{selectedEnvironment?.label ?? "—"}</span>
+        <span fg={colors.dim}> · </span>
+        <span fg={selectedVariable?.encrypted ? colors.warning : colors.muted}>
+          {selectedVariable?.encrypted
+            ? "encrypted"
+            : selectedVariable === undefined
+              ? "missing"
+              : "plain"}
+        </span>
+      </TextLine>
+      <TextLine>
+        <span fg={colors.dim}>value </span>
+        <span
+          fg={
+            selectedVariable === undefined
+              ? colors.dim
+              : selectedVariable.encrypted
+                ? colors.encrypted
+                : colors.text
+          }
+        >
+          {selectedVariable === undefined ? "missing" : maskedValue(selectedVariable)}
+        </span>
+      </TextLine>
+      {row !== undefined && row.cells.length > 1 ? (
+        <box flexDirection="column" marginTop={1}>
+          {row.cells.map((cell) => (
+            <TextLine key={cell.environment.path}>
+              <span
+                fg={
+                  cell.environment.path === selectedEnvironment?.path ? colors.accent : colors.muted
+                }
+              >
+                {ellipsize(cell.environment.label, props.compact ? 10 : 14)}
+              </span>
+              <span fg={colors.dim}> </span>
+              <span
+                fg={
+                  cell.variable === undefined
+                    ? colors.dim
+                    : cell.variable.encrypted
+                      ? colors.encrypted
+                      : colors.text
+                }
+              >
+                {ellipsize(selectedCellDetail(cell), props.compact ? 40 : 72)}
+              </span>
+            </TextLine>
+          ))}
+        </box>
+      ) : null}
+    </ScrollPanel>
+  );
+}
+
+// ─── Search Footer ───────────────────────────────────────────────────────────
+
+function SearchFooter() {
+  const query = useAtomValue(queryAtom);
+  const setQuery = useAtomSet(queryAtom);
+
+  return (
+    <box
+      height={3}
+      borderStyle="single"
+      borderColor={colors.accent}
+      backgroundColor={colors.panel}
+      paddingLeft={1}
+      paddingRight={1}
+      flexDirection="column"
+    >
+      <input
+        value={query}
+        onInput={(value) => setQuery(value)}
+        onSubmit={() => setQuery(query)}
+        focused={true}
+        placeholder="search projects + keys"
+      />
+    </box>
+  );
+}
+
+// ─── Footer ──────────────────────────────────────────────────────────────────
+
+const footerHints = (
+  focus: FocusTarget,
+  isWide: boolean,
+): ReadonlyArray<{ readonly key: string; readonly label: string }> => {
+  if (!isWide) {
+    // Compact hints for narrow terminals
+    switch (focus) {
+      case "files":
+        return [
+          { key: "h/l", label: "project" },
+          { key: "↵", label: "keys" },
+          { key: "/", label: "search" },
+          { key: ":", label: "cmd" },
+        ];
+      case "variables":
+        return [
+          { key: "j/k", label: "nav" },
+          { key: "e", label: "edit" },
+          { key: "n", label: "add" },
+          { key: "/", label: "search" },
+        ];
+      default:
+        return [
+          { key: "esc", label: "close" },
+          { key: "↵", label: "confirm" },
+        ];
+    }
+  }
+  switch (focus) {
+    case "files":
+      return [
+        { key: "h/l", label: "project" },
+        { key: "enter/tab", label: "keys" },
+        { key: "/", label: "search" },
+        { key: "N", label: "new file" },
+        { key: "r", label: "refresh" },
+        { key: ":", label: "commands" },
+        { key: "?", label: "help" },
+      ];
+    case "variables":
+      return [
+        { key: "j/k", label: "key" },
+        { key: "h/l", label: "env" },
+        { key: "e", label: "edit" },
+        { key: "n", label: "add" },
+        { key: "d", label: "delete" },
+        { key: "/", label: "search" },
+        { key: ":", label: "commands" },
+      ];
+    case "edit-key":
+    case "edit-value":
+      return [
+        { key: "tab", label: "field" },
+        { key: "Y", label: "encrypt" },
+        { key: "enter", label: "save" },
+        { key: "esc", label: "cancel" },
+      ];
+    case "file-path":
+      return [
+        { key: "enter", label: "create" },
+        { key: "esc", label: "cancel" },
+      ];
+    case "filter":
+      return [
+        { key: "enter/esc", label: "close" },
+        { key: "ctrl+u", label: "clear" },
+      ];
+  }
+};
+
+function Footer() {
+  const focus = useAtomValue(focusAtom);
+  const message = useAtomValue(messageAtom);
+  const query = useAtomValue(queryAtom);
+  const root = useAtomValue(rootAtom);
+  const busy = useAtomValue(busyAtom);
+  const layout = useLayout();
+
+  return (
+    <box
+      height={1}
+      backgroundColor={colors.panel}
+      paddingLeft={1}
+      paddingRight={1}
+      flexDirection="row"
+    >
+      <box height={1} flexGrow={1}>
+        <HintRow items={footerHints(focus, layout.isWide)} compact={!layout.isWide} />
+      </box>
+      <box height={1} justifyContent="flex-end">
+        <TextLine>
+          <span fg={colors.accent} attributes={TextAttributes.BOLD}>
+            {focusLabel(focus)}
+          </span>
+          {query.trim().length > 0 ? (
+            <span>
+              <span fg={colors.dim}> /</span>
+              <span fg={colors.info}>{query}</span>
+            </span>
+          ) : null}
+          <span fg={colors.dim}> │ </span>
+          <span fg={busy ? colors.warning : colors.success}>{busy ? "◐ syncing" : "● ready"}</span>
+          {message !== undefined ? (
+            <span>
+              <span fg={colors.dim}> │ </span>
+              <span fg={message.startsWith("error") ? colors.red : colors.muted}>{message}</span>
+            </span>
+          ) : null}
+          <span fg={colors.dim}> │ </span>
+          <span fg={colors.dim}>
+            {ellipsize(root, Math.max(12, Math.floor(layout.width * 0.3)))}
+          </span>
+        </TextLine>
+      </box>
+    </box>
+  );
+}
+
+// ─── Command Palette Modal ───────────────────────────────────────────────────
+
+function CommandPalette(props: { readonly commands: ReadonlyArray<AppCommand> }) {
+  const modal = useAtomValue(modalAtom);
+  const setModal = useAtomSet(modalAtom);
+
+  if (modal._tag !== "CommandPalette") return null;
+
+  const commands = props.commands.filter((command) => commandMatches(command, modal.query));
+  const selectedIndex = commands.length === 0 ? 0 : Math.min(modal.index, commands.length - 1);
+
+  return (
+    <box
+      position="absolute"
+      left={6}
+      top={4}
+      width="82%"
+      height={18}
+      borderStyle="double"
+      borderColor={colors.accent}
+      backgroundColor={colors.panelAlt}
+      padding={1}
+      flexDirection="column"
+      gap={1}
+    >
+      <SectionTitle title="COMMANDS" subtitle="type to filter" />
+      <input
+        value={modal.query}
+        onInput={(value) => setModal(Modal.CommandPalette({ query: value, index: modal.index }))}
+        focused={true}
+        placeholder="type an action…"
+      />
+      {commands.map((command, commandIndex) => {
+        const active = commandIndex === selectedIndex;
+        return (
+          <TextLine key={command.id} {...(active ? { backgroundColor: colors.selectedBg } : {})}>
+            <span fg={active ? colors.accent : colors.dim}>{active ? "▸" : " "}</span>
+            <span fg={colors.dim}> </span>
+            {command.section !== undefined ? (
+              <span fg={colors.muted}>{`${command.section} › `}</span>
+            ) : null}
+            <span
+              fg={command.disabledReason ? colors.dim : active ? colors.selectedText : colors.text}
+              attributes={active ? TextAttributes.BOLD : 0}
+            >
+              {command.title}
+            </span>
+            {command.shortcut !== undefined ? (
+              <span fg={colors.dim}>{`  ${command.shortcut}`}</span>
+            ) : null}
+            {command.disabledReason !== undefined ? (
+              <span fg={colors.red}>{`  ${command.disabledReason}`}</span>
+            ) : null}
+          </TextLine>
+        );
+      })}
+      <HintRow
+        items={[
+          { key: "j/k", label: "navigate" },
+          { key: "enter", label: "run" },
+          { key: "esc", label: "close" },
+        ]}
+      />
+    </box>
+  );
+}
+
+// ─── Edit Modal ──────────────────────────────────────────────────────────────
+
+function EditModal() {
+  const focus = useAtomValue(focusAtom);
+  const modal = useAtomValue(modalAtom);
+  const setModal = useAtomSet(modalAtom);
+
+  if (modal._tag !== "Edit") return null;
+  const { draft } = modal;
+
+  const updateDraft = (patch: Partial<EditDraft>) =>
+    setModal(Modal.Edit({ draft: { ...draft, ...patch } }));
+
+  return (
+    <box
+      position="absolute"
+      left={8}
+      top={6}
+      width="78%"
+      height={13}
+      borderStyle="double"
+      borderColor={colors.info}
+      backgroundColor={colors.panelAlt}
+      padding={1}
+      flexDirection="column"
+      gap={1}
+    >
+      <SectionTitle
+        title={draft.mode === "add" ? "ADD SECRET" : "EDIT SECRET"}
+        subtitle="current env"
+        fg={colors.info}
+      />
+      <PlainLine text="key" fg={focus === "edit-key" ? colors.accent : colors.muted} />
+      <input
+        value={draft.key}
+        focused={focus === "edit-key"}
+        onInput={(value) => updateDraft({ key: value })}
+        placeholder="API_TOKEN"
+      />
+      <PlainLine text="value" fg={focus === "edit-value" ? colors.accent : colors.muted} />
+      <input
+        value={draft.value}
+        focused={focus === "edit-value"}
+        onInput={(value) => updateDraft({ value })}
+        placeholder="secret value"
+      />
+      <TextLine>
+        <span fg={draft.encrypt ? colors.warning : colors.muted}>
+          {draft.encrypt ? "● encrypt:on" : "○ encrypt:off"}
+        </span>
+        <span fg={colors.dim}> press Y to toggle</span>
+      </TextLine>
+      <HintRow
+        items={[
+          { key: "tab", label: "field" },
+          { key: "Y", label: "encrypt" },
+          { key: "enter", label: "save" },
+          { key: "esc", label: "cancel" },
+        ]}
+      />
+    </box>
+  );
+}
+
+// ─── File Create Modal ───────────────────────────────────────────────────────
+
+function FileModal() {
+  const modal = useAtomValue(modalAtom);
+  const setModal = useAtomSet(modalAtom);
+  const focus = useAtomValue(focusAtom);
+
+  if (modal._tag !== "CreateFile") return null;
+
+  return (
+    <box
+      position="absolute"
+      left={8}
+      top={7}
+      width="78%"
+      height={8}
+      borderStyle="double"
+      borderColor={colors.success}
+      backgroundColor={colors.panelAlt}
+      padding={1}
+      flexDirection="column"
+      gap={1}
+    >
+      <SectionTitle title="CREATE ENV FILE" fg={colors.success} />
+      <PlainLine text="relative path" fg={focus === "file-path" ? colors.accent : colors.muted} />
+      <input
+        value={modal.path}
+        focused={focus === "file-path"}
+        onInput={(value) => setModal(Modal.CreateFile({ path: value }))}
+        placeholder="apps/web/.env.local"
+      />
+      <HintRow
+        items={[
+          { key: "enter", label: "create" },
+          { key: "esc", label: "cancel" },
+        ]}
+      />
+    </box>
+  );
+}
+
+// ─── Confirm Delete Modal ────────────────────────────────────────────────────
+
+function ConfirmDeleteModal() {
+  const modal = useAtomValue(modalAtom);
+
+  if (modal._tag !== "ConfirmDelete") return null;
+
+  return (
+    <box
+      position="absolute"
+      left={8}
+      top={8}
+      width="78%"
+      height={8}
+      borderStyle="double"
+      borderColor={colors.red}
+      backgroundColor={colors.panelAlt}
+      padding={1}
+      flexDirection="column"
+      gap={1}
+    >
+      <SectionTitle title="CONFIRM DELETE" fg={colors.red} />
+      <PlainLine text={`delete ${modal.key} from ${modal.path}?`} fg={colors.text} />
+      <PlainLine
+        text="this removes the key line while preserving the rest of the file"
+        fg={colors.muted}
+      />
+      <HintRow
+        items={[
+          { key: "y", label: "delete" },
+          { key: "n/esc", label: "cancel" },
+        ]}
+      />
+    </box>
+  );
+}
+
+// ─── Help Modal ──────────────────────────────────────────────────────────────
+
+function HelpModal() {
+  const modal = useAtomValue(modalAtom);
+
+  if (modal._tag !== "Help") return null;
+
+  const groups = [
+    [
+      "NAVIGATION",
+      "tab        cycle projects/keys",
+      "h/l ←/→   select project or env tab",
+      "j/k ↑/↓   move through keys",
+      "g/G        jump to top/bottom",
+    ],
+    [
+      "ACTIONS",
+      "n          add variable to active env",
+      "N          create new env file",
+      "e          edit selected cell",
+      "d/del      delete from active env",
+      "r          refresh vault",
+    ],
+    [
+      "SEARCH",
+      "/          focus search input",
+      "           space-separated tokens",
+      "           field filters: key: env: value: path: state:",
+      "           state supports missing/encrypted/plain",
+      "ctrl+u     clear search",
+      "x          clear all filters",
+    ],
+    [
+      "SAFETY",
+      "writes preserve comments/order/quotes",
+      "delete requires y/n confirmation",
+      "encrypted write-back uses dotenvx + .env.keys",
+    ],
+  ] as const;
+
+  return (
+    <box
+      position="absolute"
+      left={4}
+      top={3}
+      width="88%"
+      height={24}
+      borderStyle="double"
+      borderColor={colors.accent}
+      backgroundColor={colors.panelAlt}
+      padding={1}
+      flexDirection="column"
+      gap={1}
+    >
+      <SectionTitle title="ENV VAULT HELP" subtitle="keyboard reference" />
+      {groups.map(([title, ...items]) => (
+        <box key={title} flexDirection="column">
+          <TextLine>
+            <span fg={colors.info} attributes={TextAttributes.BOLD}>
+              {title}
+            </span>
+          </TextLine>
+          {items.map((item) => (
+            <PlainLine key={item} text={`  ${item}`} fg={colors.text} />
+          ))}
+        </box>
+      ))}
+      <HintRow items={[{ key: "?/esc", label: "close" }]} />
+    </box>
+  );
+}
+
+// ─── Dashboard (main orchestrator) ──────────────────────────────────────────
+
+function Dashboard(props: AppProps) {
+  const renderer = useRenderer();
+  const layout = useLayout();
+  const setRoot = useAtomSet(rootAtom);
+  const setDecrypt = useAtomSet(decryptAtom);
+  const setWorkspace = useAtomSet(workspaceAtom);
+  const setEnvFiles = useAtomSet(envFilesAtom);
+  const setSelectedPath = useAtomSet(selectedPathAtom);
+  const setSelectedVariableKey = useAtomSet(selectedVariableKeyAtom);
+  const setFocus = useAtomSet(focusAtom);
+  const setPreviousFocus = useAtomSet(previousFocusAtom);
+  const setQuery = useAtomSet(queryAtom);
+  const setBusy = useAtomSet(busyAtom);
+  const setMessage = useAtomSet(messageAtom);
+  const setModal = useAtomSet(modalAtom);
+  const groups = useAtomValue(visibleEnvFileGroupsAtom);
+  const rows = useAtomValue(envTableRowsAtom);
+  const selectedFile = useAtomValue(selectedFileAtom);
+  const selectedGroup = useAtomValue(selectedGroupAtom);
+  const selectedEnvironment = useAtomValue(selectedEnvironmentAtom);
+  const selectedVariable = useAtomValue(selectedVariableAtom);
+  const selectedVariableKey = useAtomValue(selectedVariableKeyAtom);
+  const focus = useAtomValue(focusAtom);
+  const previousFocus = useAtomValue(previousFocusAtom);
+  const modal = useAtomValue(modalAtom);
+
+  // ─── Actions ─────────────────────────────────────────────────────────────
+
+  const refresh = useCallback(
+    (message?: string | undefined) => {
+      setBusy(true);
+      void Effect.runPromise(
+        Effect.all({ workspace: props.loadWorkspace(), envFiles: props.loadEnvFiles() }).pipe(
+          Effect.tap(({ workspace, envFiles }) =>
+            Effect.sync(() => {
+              setWorkspace(workspace);
+              setEnvFiles(envFiles);
+              setSelectedPath((current) =>
+                current !== undefined && envFiles.some((file) => file.path === current)
+                  ? current
+                  : envFiles[0]?.path,
+              );
+              setBusy(false);
+              setMessage(message);
+            }),
+          ),
+          Effect.catchTag("EnvFileError", (cause) =>
+            Effect.sync(() => {
+              setBusy(false);
+              setMessage(`error: ${cause.message}`);
+            }),
+          ),
+        ),
+      );
+    },
+    [props.loadWorkspace, props.loadEnvFiles],
+  );
+
+  useEffect(() => {
+    setRoot(props.root);
+    setDecrypt(props.decrypt);
+    refresh();
+  }, [props.root, props.decrypt]);
+
+  useEffect(() => {
+    if (selectedFile !== undefined) setSelectedPath(selectedFile.path);
+  }, [selectedFile, setSelectedPath]);
+
+  useEffect(() => {
+    if (rows.length === 0) {
+      setSelectedVariableKey(undefined);
+      return;
+    }
+    if (selectedVariableKey === undefined || !rows.some((row) => row.key === selectedVariableKey)) {
+      setSelectedVariableKey(rows[0]?.key);
+    }
+  }, [rows, selectedVariableKey, setSelectedVariableKey]);
+
+  const openCommands = () => {
+    setPreviousFocus(focus);
+    setModal(Modal.CommandPalette({ query: "", index: 0 }));
+  };
+
+  const closeModal = () => {
+    setModal(Modal.None());
+    setFocus(
+      previousFocus === "edit-key" ||
+        previousFocus === "edit-value" ||
+        previousFocus === "file-path"
+        ? "variables"
+        : previousFocus,
+    );
+  };
+
+  const openEdit = (mode: "add" | "update") => {
+    if (selectedFile === undefined) {
+      setMessage("select an env tab first");
+      return;
+    }
+    setPreviousFocus(focus);
+    setModal(
+      Modal.Edit({
+        draft: {
+          mode,
+          key: mode === "update" ? (selectedVariableKey ?? selectedVariable?.key ?? "") : "",
+          value:
+            mode === "update" ? (selectedVariable?.rawValue ?? selectedVariable?.value ?? "") : "",
+          encrypt: mode === "update" ? selectedVariable?.encrypted === true : false,
+        },
+      }),
+    );
+    setFocus("edit-key");
+  };
+
+  const openFileCreate = () => {
+    setPreviousFocus(focus);
+    setModal(Modal.CreateFile({ path: ".env.local" }));
+    setFocus("file-path");
+  };
+
+  const submitFileCreate = () => {
+    if (modal._tag !== "CreateFile") return;
+    const nextPath = modal.path.trim();
+    if (nextPath.length === 0) {
+      setMessage("enter an env file path");
+      return;
+    }
+    setBusy(true);
+    void Effect.runPromise(
+      props.createFile({ path: nextPath }).pipe(
+        Effect.tap((file) =>
+          Effect.sync(() => {
+            setEnvFiles((current) =>
+              [...current.filter((item) => item.path !== file.path), file].sort((left, right) =>
+                left.path.localeCompare(right.path),
+              ),
+            );
+            setSelectedPath(file.path);
+            setSelectedVariableKey(undefined);
+            setModal(Modal.None());
+            setFocus("files");
+            setBusy(false);
+            setMessage(`created ${file.path}`);
+          }),
+        ),
+        Effect.catchTag("EnvFileError", (cause) =>
+          Effect.sync(() => {
+            setBusy(false);
+            setMessage(`error: ${cause.message}`);
+          }),
+        ),
+      ),
+    );
+  };
+
+  const submitEdit = () => {
+    if (selectedFile === undefined || modal._tag !== "Edit") return;
+    const { draft } = modal;
+    setBusy(true);
+    void Effect.runPromise(
+      props
+        .setVariable({
+          path: selectedFile.path,
+          key: draft.key.trim(),
+          value: draft.value,
+          encrypt: draft.encrypt,
+        })
+        .pipe(
+          Effect.tap((file) =>
+            Effect.sync(() => {
+              setEnvFiles((current) =>
+                current.map((item) => (item.path === file.path ? file : item)),
+              );
+              setSelectedVariableKey(draft.key.trim());
+              setModal(Modal.None());
+              setFocus("variables");
+              setBusy(false);
+              setMessage(`${draft.mode === "add" ? "added" : "updated"} ${draft.key.trim()}`);
+            }),
+          ),
+          Effect.catchTag("EnvFileError", (cause) =>
+            Effect.sync(() => {
+              setBusy(false);
+              setMessage(`error: ${cause.message}`);
+            }),
+          ),
+        ),
+    );
+  };
+
+  const deleteSelected = () => {
+    if (selectedFile === undefined || selectedVariableKey === undefined) {
+      setMessage("select a key first");
+      return;
+    }
+    if (selectedVariable === undefined) {
+      setMessage(
+        `${selectedVariableKey} is missing in ${selectedEnvironment?.label ?? selectedFile.path}`,
+      );
+      return;
+    }
+    setPreviousFocus(focus);
+    setModal(Modal.ConfirmDelete({ path: selectedFile.path, key: selectedVariableKey }));
+  };
+
+  const confirmDeleteSelected = () => {
+    if (modal._tag !== "ConfirmDelete") return;
+    setBusy(true);
+    void Effect.runPromise(
+      props.deleteVariable({ path: modal.path, key: modal.key }).pipe(
+        Effect.tap((file) =>
+          Effect.sync(() => {
+            setEnvFiles((current) =>
+              current.map((item) => (item.path === file.path ? file : item)),
+            );
+            setSelectedVariableKey(file.variables[0]?.key);
+            setModal(Modal.None());
+            setFocus("variables");
+            setBusy(false);
+            setMessage(`deleted ${modal.key}`);
+          }),
+        ),
+        Effect.catchTag("EnvFileError", (cause) =>
+          Effect.sync(() => {
+            setModal(Modal.None());
+            setBusy(false);
+            setMessage(`error: ${cause.message}`);
+          }),
+        ),
+      ),
+    );
+  };
+
+  const moveGroups = (direction: -1 | 1) => {
+    if (groups.length === 0) return;
+    const index = groups.findIndex((group) => group.key === selectedGroup?.key);
+    const next = Math.min(Math.max(0, groups.length - 1), (index < 0 ? 0 : index) + direction);
+    setSelectedPath(groups[next]?.environments[0]?.path);
+    setFocus((current) => (current === "variables" ? "variables" : "files"));
+  };
+
+  const moveEnvironment = (direction: -1 | 1) => {
+    if (selectedGroup === undefined || selectedGroup.environments.length === 0) return;
+    const index = selectedGroup.environments.findIndex(
+      (environment) => environment.path === selectedEnvironment?.path,
+    );
+    const next = Math.min(
+      Math.max(0, selectedGroup.environments.length - 1),
+      (index < 0 ? 0 : index) + direction,
+    );
+    setSelectedPath(selectedGroup.environments[next]?.path);
+    setFocus("variables");
+  };
+
+  const moveVariables = (direction: -1 | 1) => {
+    if (rows.length === 0) return;
+    const index = rows.findIndex((row) => row.key === selectedVariableKey);
+    const next = Math.min(Math.max(0, rows.length - 1), (index < 0 ? 0 : index) + direction);
+    setSelectedVariableKey(rows[next]?.key);
+    setFocus("variables");
+  };
+
+  const jumpVariables = (position: "first" | "last") => {
+    if (rows.length === 0) return;
+    setSelectedVariableKey(position === "first" ? rows[0]?.key : rows[rows.length - 1]?.key);
+    setFocus("variables");
+  };
+
+  // ─── Commands ──────────────────────────────────────────────────────────────
+
+  const commands = useMemo<ReadonlyArray<AppCommand>>(
+    () => [
+      {
+        id: "refresh",
+        title: "Refresh vault",
+        shortcut: "r",
+        section: "APP",
+        run: () => refresh(),
+      },
+      {
+        id: "add",
+        title: "Add variable",
+        shortcut: "n",
+        section: "EDIT",
+        run: () => openEdit("add"),
+      },
+      {
+        id: "file-create",
+        title: "Create env file",
+        shortcut: "N",
+        section: "EDIT",
+        run: openFileCreate,
+      },
+      {
+        id: "help",
+        title: "Show keyboard help",
+        shortcut: "?",
+        section: "APP",
+        run: () => setModal(Modal.Help()),
+      },
+      {
+        id: "edit",
+        title: "Edit selected cell",
+        shortcut: "e",
+        section: "EDIT",
+        ...(selectedVariableKey === undefined ? { disabledReason: "no key" } : {}),
+        run: () => openEdit("update"),
+      },
+      {
+        id: "delete",
+        title: "Delete selected cell",
+        shortcut: "d",
+        section: "EDIT",
+        ...(selectedVariable === undefined ? { disabledReason: "missing in env" } : {}),
+        run: deleteSelected,
+      },
+      {
+        id: "clear",
+        title: "Clear filter",
+        shortcut: "x",
+        section: "SEARCH",
+        run: () => {
+          setQuery("");
+          setMessage("filter cleared");
+        },
+      },
+      { id: "quit", title: "Quit", shortcut: "q", section: "APP", run: () => renderer.destroy() },
+    ],
+    [selectedVariable, selectedVariableKey, selectedFile, selectedEnvironment, focus, modal],
+  );
+
+  // ─── Keymap bindings ───────────────────────────────────────────────────────
+
+  useBindings(
+    () => ({
+      commands: [
+        // Global
+        {
+          name: "app.quit",
+          run: () => {
+            renderer.destroy();
+          },
+        },
+        {
+          name: "app.forceQuit",
+          run: () => {
+            renderer.destroy();
+          },
+        },
+        {
+          name: "app.commands",
+          run: () => {
+            openCommands();
+          },
+        },
+        {
+          name: "app.help",
+          run: () => {
+            setModal(Modal.Help());
+          },
+        },
+        {
+          name: "app.search",
+          run: () => {
+            setPreviousFocus(focus);
+            setFocus("filter");
+          },
+        },
+        {
+          name: "app.refresh",
+          run: () => {
+            refresh();
+          },
+        },
+        {
+          name: "app.clearFilter",
+          run: () => {
+            setQuery("");
+            setMessage("filter cleared");
+          },
+        },
+        // Navigation
+        {
+          name: "nav.tab",
+          run: () => {
+            setFocus((current: FocusTarget) => (current === "files" ? "variables" : "files"));
+          },
+        },
+        {
+          name: "nav.enter",
+          run: () => {
+            if (focus === "files") setFocus("variables");
+          },
+        },
+        {
+          name: "nav.groupLeft",
+          run: () => {
+            moveGroups(-1);
+          },
+        },
+        {
+          name: "nav.groupRight",
+          run: () => {
+            moveGroups(1);
+          },
+        },
+        {
+          name: "nav.envLeft",
+          run: () => {
+            moveEnvironment(-1);
+          },
+        },
+        {
+          name: "nav.envRight",
+          run: () => {
+            moveEnvironment(1);
+          },
+        },
+        {
+          name: "nav.up",
+          run: () => {
+            moveVariables(-1);
+          },
+        },
+        {
+          name: "nav.down",
+          run: () => {
+            moveVariables(1);
+          },
+        },
+        {
+          name: "nav.top",
+          run: () => {
+            jumpVariables("first");
+          },
+        },
+        {
+          name: "nav.bottom",
+          run: () => {
+            jumpVariables("last");
+          },
+        },
+        // Edit actions
+        {
+          name: "edit.add",
+          run: () => {
+            openEdit("add");
+          },
+        },
+        {
+          name: "edit.update",
+          run: () => {
+            openEdit("update");
+          },
+        },
+        {
+          name: "edit.delete",
+          run: () => {
+            deleteSelected();
+          },
+        },
+        {
+          name: "edit.createFile",
+          run: () => {
+            openFileCreate();
+          },
+        },
+        // Modal actions
+        {
+          name: "modal.close",
+          run: () => {
+            closeModal();
+          },
+        },
+        {
+          name: "modal.cmdUp",
+          run: () => {
+            if (modal._tag === "CommandPalette")
+              setModal(
+                Modal.CommandPalette({ query: modal.query, index: Math.max(0, modal.index - 1) }),
+              );
+          },
+        },
+        {
+          name: "modal.cmdDown",
+          run: () => {
+            if (modal._tag === "CommandPalette") {
+              const filtered = commands.filter((c) => commandMatches(c, modal.query));
+              setModal(
+                Modal.CommandPalette({
+                  query: modal.query,
+                  index: Math.min(filtered.length - 1, modal.index + 1),
+                }),
+              );
+            }
+          },
+        },
+        {
+          name: "modal.cmdRun",
+          run: () => {
+            if (modal._tag === "CommandPalette") {
+              const filtered = commands.filter((c) => commandMatches(c, modal.query));
+              const cmd = filtered[Math.min(modal.index, filtered.length - 1)];
+              if (cmd?.disabledReason) setMessage(cmd.disabledReason);
+              else cmd?.run();
+              setModal(Modal.None());
+              setFocus(
+                previousFocus === "edit-key" || previousFocus === "edit-value"
+                  ? "variables"
+                  : previousFocus,
+              );
+            }
+          },
+        },
+        // Edit modal
+        {
+          name: "edit.tabField",
+          run: () => {
+            setFocus(focus === "edit-key" ? "edit-value" : "edit-key");
+          },
+        },
+        {
+          name: "edit.toggleEncrypt",
+          run: () => {
+            if (modal._tag === "Edit")
+              setModal(Modal.Edit({ draft: { ...modal.draft, encrypt: !modal.draft.encrypt } }));
+          },
+        },
+        {
+          name: "edit.submit",
+          run: () => {
+            if (focus === "edit-key") setFocus("edit-value");
+            else submitEdit();
+          },
+        },
+        // File modal
+        {
+          name: "file.submit",
+          run: () => {
+            submitFileCreate();
+          },
+        },
+        // Confirm delete
+        {
+          name: "confirm.yes",
+          run: () => {
+            confirmDeleteSelected();
+          },
+        },
+        {
+          name: "confirm.no",
+          run: () => {
+            closeModal();
+          },
+        },
+        // Search
+        {
+          name: "search.close",
+          run: () => {
+            setFocus(previousFocus === "filter" ? "variables" : previousFocus);
+          },
+        },
+        {
+          name: "search.clear",
+          run: () => {
+            setQuery("");
+          },
+        },
+        // Help
+        {
+          name: "help.close",
+          run: () => {
+            setModal(Modal.None());
+          },
+        },
+      ],
+      bindings: [
+        // Global bindings (when no modal is open)
+        ...(modal._tag === "None" && focus !== "filter"
+          ? ([
+              { key: "q", cmd: "app.quit" },
+              { key: "escape", cmd: "app.quit" },
+              { key: ":", cmd: "app.commands" },
+              { key: "?", cmd: "app.help" },
+              { key: "/", cmd: "app.search" },
+              { key: "r", cmd: "app.refresh" },
+              { key: "x", cmd: "app.clearFilter" },
+              { key: "tab", cmd: "nav.tab" },
+              { key: "enter", cmd: "nav.enter" },
+              // Files focus
+              ...(focus === "files"
+                ? [
+                    { key: "h", cmd: "nav.groupLeft" },
+                    { key: "left", cmd: "nav.groupLeft" },
+                    { key: "l", cmd: "nav.groupRight" },
+                    { key: "right", cmd: "nav.groupRight" },
+                  ]
+                : []),
+              // Variables focus
+              ...(focus === "variables"
+                ? [
+                    { key: "h", cmd: "nav.envLeft" },
+                    { key: "left", cmd: "nav.envLeft" },
+                    { key: "l", cmd: "nav.envRight" },
+                    { key: "right", cmd: "nav.envRight" },
+                    { key: "k", cmd: "nav.up" },
+                    { key: "up", cmd: "nav.up" },
+                    { key: "j", cmd: "nav.down" },
+                    { key: "down", cmd: "nav.down" },
+                    { key: "g", cmd: "nav.top" },
+                    { key: "G", cmd: "nav.bottom" },
+                  ]
+                : []),
+              // Edit actions
+              { key: "n", cmd: "edit.add" },
+              { key: "N", cmd: "edit.createFile" },
+              { key: "e", cmd: "edit.update" },
+              { key: "d", cmd: "edit.delete" },
+              { key: "delete", cmd: "edit.delete" },
+            ] as const)
+          : []),
+        // Command palette bindings
+        ...(modal._tag === "CommandPalette"
+          ? ([
+              { key: "escape", cmd: "modal.close" },
+              { key: "k", cmd: "modal.cmdUp" },
+              { key: "up", cmd: "modal.cmdUp" },
+              { key: "j", cmd: "modal.cmdDown" },
+              { key: "down", cmd: "modal.cmdDown" },
+              { key: "enter", cmd: "modal.cmdRun" },
+            ] as const)
+          : []),
+        // Edit modal bindings
+        ...(modal._tag === "Edit"
+          ? ([
+              { key: "escape", cmd: "modal.close" },
+              { key: "tab", cmd: "edit.tabField" },
+              { key: "Y", cmd: "edit.toggleEncrypt" },
+              { key: "enter", cmd: "edit.submit" },
+            ] as const)
+          : []),
+        // File create modal bindings
+        ...(modal._tag === "CreateFile"
+          ? ([
+              { key: "escape", cmd: "modal.close" },
+              { key: "enter", cmd: "file.submit" },
+            ] as const)
+          : []),
+        // Confirm delete bindings
+        ...(modal._tag === "ConfirmDelete"
+          ? ([
+              { key: "y", cmd: "confirm.yes" },
+              { key: "enter", cmd: "confirm.yes" },
+              { key: "n", cmd: "confirm.no" },
+              { key: "escape", cmd: "confirm.no" },
+            ] as const)
+          : []),
+        // Help bindings
+        ...(modal._tag === "Help"
+          ? ([
+              { key: "?", cmd: "help.close" },
+              { key: "escape", cmd: "help.close" },
+            ] as const)
+          : []),
+        // Search bindings
+        ...(focus === "filter"
+          ? ([
+              { key: "escape", cmd: "search.close" },
+              { key: "enter", cmd: "search.close" },
+              { key: "ctrl+u", cmd: "search.clear" },
+            ] as const)
+          : []),
+        // Ctrl+C always quits
+        { key: "ctrl+c", cmd: "app.forceQuit" },
+      ],
+    }),
+    [
+      modal,
+      focus,
+      previousFocus,
+      groups,
+      rows,
+      selectedGroup,
+      selectedEnvironment,
+      selectedVariableKey,
+      selectedVariable,
+      selectedFile,
+      commands,
+    ],
+  );
+
+  // ─── Render ────────────────────────────────────────────────────────────────
+
+  const detailBesideMatrix = layout.width >= 120;
+  const topHeight = 2;
+  const appPadding = 2;
+  const footerHeight = focus === "filter" ? 3 : 1;
+  const bodyHeight = Math.max(1, layout.height - topHeight - footerHeight - appPadding);
+  const detailHeight = Math.min(12, Math.max(7, Math.floor(bodyHeight * 0.34)));
+  const matrixHeight = Math.max(8, bodyHeight - detailHeight);
+  const contentWidth = Math.max(1, layout.width - 2);
+
+  return (
+    <box
+      width="100%"
+      height="100%"
+      position="relative"
+      flexDirection="column"
+      backgroundColor={colors.background}
+    >
+      {layout.isNarrow || layout.height < 24 ? (
+        <box borderStyle="double" borderColor={colors.red} padding={1} flexDirection="column">
+          <PlainLine text="terminal too small for Envault" fg={colors.red} bold />
+          <PlainLine
+            text={`current ${layout.width}×${layout.height} — need at least 80×24`}
+            fg={colors.muted}
+          />
+        </box>
+      ) : null}
+      <Header />
+      <ProjectTabs />
+      <box flexDirection="column" gap={0} flexGrow={1}>
+        <box width="100%" height={matrixHeight}>
+          <EnvMatrix availableWidth={contentWidth} />
+        </box>
+        <box width="100%" height={detailHeight}>
+          <DetailPanel compact={!detailBesideMatrix} />
+        </box>
+      </box>
+      {focus === "filter" ? <SearchFooter /> : <Footer />}
+      <CommandPalette commands={commands} />
+      <EditModal />
+      <FileModal />
+      <ConfirmDeleteModal />
+      <HelpModal />
+    </box>
+  );
+}
+
+// ─── App Root ────────────────────────────────────────────────────────────────
+
+export function App(props: AppProps) {
+  const renderer = useRenderer();
+  const keymap = useMemo(() => createDefaultOpenTuiKeymap(renderer), [renderer]);
+
+  return (
+    <RegistryProvider>
+      <KeymapProvider keymap={keymap}>
+        <Dashboard {...props} />
+      </KeymapProvider>
+    </RegistryProvider>
+  );
+}