@effect-x/envault 0.1.0

package/src/tui/atoms.ts

@@ -0,0 +1,227 @@
+import * as Atom from "effect/unstable/reactivity/Atom";
+import path from "node:path";
+import type { EnvFileInfo, EnvVariable, WorkspaceInfo } from "../domain.ts";
+import { Modal } from "./modal.ts";
+import type { EnvFileGroup, EnvTableRow, EnvVaultStats, FocusTarget } from "./types.ts";
+import { matchesSearch, variableSearchText } from "./types.ts";
+
+// ─── Core state ──────────────────────────────────────────────────────────────
+
+export const rootAtom = Atom.make("");
+export const decryptAtom = Atom.make(false);
+export const workspaceAtom = Atom.make<WorkspaceInfo | undefined>(undefined);
+export const envFilesAtom = Atom.make<ReadonlyArray<EnvFileInfo>>([]);
+export const selectedPathAtom = Atom.make<string | undefined>(undefined);
+export const selectedVariableKeyAtom = Atom.make<string | undefined>(undefined);
+export const focusAtom = Atom.make<FocusTarget>("files");
+export const previousFocusAtom = Atom.make<FocusTarget>("files");
+export const queryAtom = Atom.make("");
+export const busyAtom = Atom.make(false);
+export const messageAtom = Atom.make<string | undefined>(undefined);
+
+// ─── Modal state (tagged enum) ───────────────────────────────────────────────
+
+export const modalAtom = Atom.make<Modal>(Modal.None());
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const envFileNamePattern = /(^|\/)\.env(?<suffix>(?:\.[^/]+)*)$/;
+
+const envLabel = (filePath: string): string => {
+  const name = path.basename(filePath);
+  if (name === ".env") return "base";
+  return name.slice(".env.".length).replaceAll(".", "/");
+};
+
+const groupLabel = (groupKey: string): string => (groupKey.length === 0 ? "root" : groupKey);
+
+const groupKeyForFile = (filePath: string): string => {
+  const match = envFileNamePattern.exec(filePath);
+  if (match === null) return path.dirname(filePath) === "." ? "" : path.dirname(filePath);
+  const prefix = filePath.slice(0, match.index);
+  return prefix.endsWith("/") ? prefix.slice(0, -1) : prefix;
+};
+
+const variableState = (variable: EnvVariable | undefined): string => {
+  if (variable === undefined) return "missing";
+  return variable.encrypted ? "encrypted" : "plain";
+};
+
+// ─── Derived atoms ───────────────────────────────────────────────────────────
+
+export const statsAtom = Atom.make((get): EnvVaultStats => {
+  const files = get(envFilesAtom);
+  return {
+    files: files.length,
+    variables: files.reduce((sum, file) => sum + file.variables.length, 0),
+    encryptedFiles: files.filter((file) => file.encrypted).length,
+    withKeys: files.filter((file) => file.hasKeys).length,
+  };
+});
+
+export const visibleEnvFilesAtom = Atom.make((get) => {
+  const query = get(queryAtom).trim().toLowerCase();
+  const files = get(envFilesAtom);
+  if (query.length === 0) return files;
+  return files.filter((file) => {
+    const text = [
+      file.path,
+      file.encrypted ? "encrypted" : "plain",
+      file.hasKeys ? "keys" : "no-keys",
+      file.variables.map(variableSearchText).join(" "),
+    ]
+      .join(" ")
+      .toLowerCase();
+    return matchesSearch(
+      { text, path: file.path, state: file.encrypted ? "encrypted" : "plain" },
+      query,
+    );
+  });
+});
+
+export const envFileGroupsAtom = Atom.make((get): ReadonlyArray<EnvFileGroup> => {
+  const files = get(envFilesAtom);
+  const groups = new Map<string, Array<EnvFileInfo>>();
+
+  for (const file of files) {
+    const key = groupKeyForFile(file.path);
+    groups.set(key, [...(groups.get(key) ?? []), file]);
+  }
+
+  return [...groups.entries()]
+    .map(([key, groupFiles]) => {
+      const sortedFiles = [...groupFiles].sort((left, right) =>
+        left.path.localeCompare(right.path),
+      );
+      return {
+        key,
+        label: groupLabel(key),
+        files: sortedFiles,
+        environments: sortedFiles.map((file) => ({
+          id: file.path,
+          label: envLabel(file.path),
+          path: file.path,
+          file,
+        })),
+      };
+    })
+    .sort((left, right) => left.label.localeCompare(right.label));
+});
+
+export const visibleEnvFileGroupsAtom = Atom.make((get) => {
+  const query = get(queryAtom);
+  const groups = get(envFileGroupsAtom);
+  if (query.trim().length === 0) return groups;
+
+  return groups.filter((group) =>
+    matchesSearch(
+      {
+        text: [
+          group.label,
+          group.files.map((file) => file.path).join(" "),
+          group.files.flatMap((file) => file.variables.map(variableSearchText)).join(" "),
+        ].join(" "),
+        path: group.files.map((file) => file.path).join(" "),
+        env: group.environments.map((environment) => environment.label).join(" "),
+      },
+      query,
+    ),
+  );
+});
+
+export const selectedFileAtom = Atom.make((get) => {
+  const selectedPath = get(selectedPathAtom);
+  const environment = get(selectedEnvironmentAtom);
+  const files = get(envFilesAtom);
+  return environment?.file ?? files.find((file) => file.path === selectedPath) ?? files[0];
+});
+
+export const selectedGroupAtom = Atom.make((get) => {
+  const selectedPath = get(selectedPathAtom);
+  const visibleGroups = get(visibleEnvFileGroupsAtom);
+  return (
+    visibleGroups.find((group) => group.files.some((file) => file.path === selectedPath)) ??
+    visibleGroups[0]
+  );
+});
+
+export const selectedEnvironmentAtom = Atom.make((get) => {
+  const selectedPath = get(selectedPathAtom);
+  const group = get(selectedGroupAtom);
+  return (
+    group?.environments.find((environment) => environment.path === selectedPath) ??
+    group?.environments[0]
+  );
+});
+
+export const envTableRowsAtom = Atom.make((get): ReadonlyArray<EnvTableRow> => {
+  const group = get(selectedGroupAtom);
+  const query = get(queryAtom);
+  if (group === undefined) return [];
+
+  const keys = [
+    ...new Set(group.files.flatMap((file) => file.variables.map((variable) => variable.key))),
+  ].sort((left, right) => left.localeCompare(right));
+
+  return keys
+    .map((key) => {
+      const cells = group.environments.map((environment) => ({
+        environment,
+        variable: environment.file.variables.find((variable) => variable.key === key),
+      }));
+      return {
+        key,
+        presentCount: cells.filter((cell) => cell.variable !== undefined).length,
+        cells,
+      };
+    })
+    .filter((row) =>
+      matchesSearch(
+        {
+          text: [
+            row.key,
+            row.cells.map((cell) => cell.environment.label).join(" "),
+            row.cells.map((cell) => cell.environment.path).join(" "),
+            row.cells
+              .map((cell) =>
+                cell.variable === undefined ? "missing" : variableSearchText(cell.variable),
+              )
+              .join(" "),
+          ].join(" "),
+          key: row.key,
+          value: row.cells
+            .map((cell) => cell.variable?.value ?? cell.variable?.rawValue ?? "")
+            .join(" "),
+          env: row.cells.map((cell) => cell.environment.label).join(" "),
+          path: row.cells.map((cell) => cell.environment.path).join(" "),
+          state: row.cells.map((cell) => variableState(cell.variable)).join(" "),
+        },
+        query,
+      ),
+    );
+});
+
+export const visibleVariablesAtom = Atom.make((get) => {
+  const file = get(selectedFileAtom);
+  const query = get(queryAtom).trim().toLowerCase();
+  const variables = file?.variables ?? [];
+  if (query.length === 0) return variables;
+  return variables.filter((variable) =>
+    matchesSearch(
+      {
+        text: variableSearchText(variable),
+        key: variable.key,
+        value: `${variable.value} ${variable.rawValue}`,
+        state: variable.encrypted ? "encrypted" : "plain",
+      },
+      query,
+    ),
+  );
+});
+
+export const selectedVariableAtom = Atom.make((get) => {
+  const selectedKey = get(selectedVariableKeyAtom);
+  const variables = get(visibleVariablesAtom);
+  if (selectedKey !== undefined) return variables.find((variable) => variable.key === selectedKey);
+  return variables[0];
+});

package/src/tui/colors.ts

@@ -0,0 +1,58 @@
+/** Semantic color palette — warm minimalism with amber/gold accents on deep slate */
+export const colors = {
+  // Surfaces
+  background: "#070a0d",
+  panel: "#0e151b",
+  panelAlt: "#111b23",
+  panelDeep: "#091015",
+
+  // Borders & separators
+  line: "#26333d",
+  lineHot: "#d8b45d",
+  separator: "#1e2a33",
+
+  // Text hierarchy
+  text: "#dce7ef",
+  muted: "#8a9aa8",
+  dim: "#53616d",
+
+  // Accent & interactive
+  accent: "#d8b45d",
+  gold: "#d8b45d",
+  link: "#66d9ef",
+
+  // Semantic status
+  info: "#66d9ef",
+  cyan: "#66d9ef",
+  success: "#9ad981",
+  green: "#9ad981",
+  danger: "#ff6f7d",
+  red: "#ff6f7d",
+  warning: "#ffb86c",
+  orange: "#ffb86c",
+
+  // Selection states
+  selectedBg: "#1b2a33",
+  selectedText: "#fff2c4",
+  hoverBg: "#141f27",
+
+  // Extras
+  count: "#d8b45d",
+  inlineCode: "#a6e3a1",
+  encrypted: "#ffb86c",
+} as const;
+
+/** Mix two hex colors at a given ratio (0–1, 0 = color1, 1 = color2) */
+export const mixHex = (color1: string, color2: string, ratio: number): string => {
+  const parse = (hex: string) => {
+    const h = hex.replace("#", "");
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  };
+  const [r1, g1, b1] = parse(color1);
+  const [r2, g2, b2] = parse(color2);
+  const mix = (a: number, b: number) => Math.round(a + (b - a) * ratio);
+  const r = mix(r1!, r2!).toString(16).padStart(2, "0");
+  const g = mix(g1!, g2!).toString(16).padStart(2, "0");
+  const b = mix(b1!, b2!).toString(16).padStart(2, "0");
+  return `#${r}${g}${b}`;
+};

package/src/tui/modal.ts

@@ -0,0 +1,15 @@
+import { Data } from "effect";
+import type { EditDraft } from "./types.ts";
+
+export type Modal = Data.TaggedEnum<{
+  None: {};
+  Edit: { draft: EditDraft };
+  CreateFile: { path: string };
+  ConfirmDelete: { path: string; key: string };
+  CommandPalette: { query: string; index: number };
+  Help: {};
+}>;
+
+export const Modal = Data.taggedEnum<Modal>();
+
+export const isModalOpen = (modal: Modal): boolean => modal._tag !== "None";

package/src/tui/primitives.tsx

@@ -0,0 +1,168 @@
+/** @jsxImportSource @opentui/react */
+import { TextAttributes } from "@opentui/core";
+import type { ReactNode } from "react";
+import { colors } from "./colors.ts";
+
+export function TextLine(props: {
+  readonly children: ReactNode;
+  readonly backgroundColor?: string | undefined;
+  readonly width?: number | "auto" | `${number}%`;
+}) {
+  return (
+    <box height={1} {...(props.width === undefined ? {} : { width: props.width })}>
+      <text
+        wrapMode="none"
+        truncate
+        fg={colors.text}
+        {...(props.backgroundColor === undefined ? {} : { bg: props.backgroundColor })}
+      >
+        {props.children}
+      </text>
+    </box>
+  );
+}
+
+export function PlainLine(props: {
+  readonly text: string;
+  readonly fg?: string | undefined;
+  readonly bold?: boolean | undefined;
+  readonly backgroundColor?: string | undefined;
+}) {
+  return (
+    <TextLine
+      {...(props.backgroundColor === undefined ? {} : { backgroundColor: props.backgroundColor })}
+    >
+      <span fg={props.fg ?? colors.text} attributes={props.bold === true ? TextAttributes.BOLD : 0}>
+        {props.text}
+      </span>
+    </TextLine>
+  );
+}
+
+export function Badge(props: { readonly label: string; readonly fg?: string | undefined }) {
+  return (
+    <span fg={props.fg ?? colors.accent} attributes={TextAttributes.BOLD}>
+      {props.label}
+    </span>
+  );
+}
+
+export function HintRow(props: {
+  readonly items: ReadonlyArray<{ readonly key: string; readonly label: string }>;
+  readonly compact?: boolean | undefined;
+}) {
+  return (
+    <TextLine>
+      {props.items.map((item, index) => (
+        <span key={`${item.key}-${item.label}`}>
+          {index > 0 ? <span fg={colors.dim}>{props.compact ? " " : " · "}</span> : null}
+          <span fg={colors.accent} attributes={TextAttributes.BOLD}>
+            {item.key}
+          </span>
+          <span fg={colors.muted}>{` ${item.label}`}</span>
+        </span>
+      ))}
+    </TextLine>
+  );
+}
+
+export function SectionTitle(props: {
+  readonly title: string;
+  readonly subtitle?: string | undefined;
+  readonly fg?: string | undefined;
+}) {
+  return (
+    <TextLine>
+      <span fg={props.fg ?? colors.accent} attributes={TextAttributes.BOLD}>
+        {props.title}
+      </span>
+      {props.subtitle !== undefined ? <span fg={colors.dim}> {props.subtitle}</span> : null}
+    </TextLine>
+  );
+}
+
+export function StatusBadge(props: {
+  readonly label: string;
+  readonly active: boolean;
+  readonly activeFg?: string | undefined;
+}) {
+  return (
+    <span fg={props.active ? (props.activeFg ?? colors.success) : colors.muted}>{props.label}</span>
+  );
+}
+
+export function Panel(props: {
+  readonly title: string;
+  readonly focused?: boolean | undefined;
+  readonly children: ReactNode;
+  readonly width?: number | `${number}%` | undefined;
+  readonly height?: number | `${number}%` | undefined;
+}) {
+  const focused = props.focused === true;
+  return (
+    <box
+      borderStyle={focused ? "double" : "single"}
+      borderColor={focused ? colors.accent : colors.line}
+      backgroundColor={colors.panel}
+      title={focused ? `◆ ${props.title}` : props.title}
+      padding={1}
+      flexDirection="column"
+      gap={0}
+      {...(props.width === undefined ? {} : { width: props.width })}
+      {...(props.height === undefined ? {} : { height: props.height })}
+    >
+      {props.children}
+    </box>
+  );
+}
+
+export function ScrollPanel(props: {
+  readonly title: string;
+  readonly focused?: boolean | undefined;
+  readonly children: ReactNode;
+  readonly width?: number | `${number}%` | undefined;
+  readonly height?: number | `${number}%` | undefined;
+}) {
+  const focused = props.focused === true;
+  return (
+    <box
+      borderStyle={focused ? "double" : "single"}
+      borderColor={focused ? colors.accent : colors.line}
+      backgroundColor={colors.panel}
+      title={focused ? `◆ ${props.title}` : props.title}
+      padding={1}
+      flexDirection="column"
+      {...(props.width === undefined ? {} : { width: props.width })}
+      {...(props.height === undefined ? {} : { height: props.height })}
+    >
+      <scrollbox height="100%" focused={focused} scrollY viewportCulling>
+        {props.children}
+      </scrollbox>
+    </box>
+  );
+}
+
+export function Spinner(props: { readonly label?: string | undefined }) {
+  return (
+    <TextLine>
+      <span fg={colors.warning}>◐</span>
+      <span fg={colors.muted}> {props.label ?? "loading…"}</span>
+    </TextLine>
+  );
+}
+
+export function EmptyState(props: {
+  readonly message: string;
+  readonly hint?: string | undefined;
+}) {
+  return (
+    <box flexDirection="column" justifyContent="center" alignItems="center" height="100%">
+      <PlainLine text={props.message} fg={colors.muted} />
+      {props.hint !== undefined ? <PlainLine text={props.hint} fg={colors.dim} /> : null}
+    </box>
+  );
+}
+
+export function SeparatorLine() {
+  return <box height={1} backgroundColor={colors.separator} />;
+}

package/src/tui/runTui.tsx

@@ -0,0 +1,68 @@
+/** @jsxImportSource @opentui/react */
+import { CliRenderEvents, createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { Effect } from "effect";
+import { EnvFileService } from "../env-file.ts";
+import { detectWorkspace } from "../workspace.ts";
+import { App } from "./App.tsx";
+
+export type RunTuiOptions = {
+  readonly root: string;
+  readonly decrypt: boolean;
+};
+
+export const runTui = Effect.fn("tui.runTui")(function* ({ root, decrypt }: RunTuiOptions) {
+  const envFiles = yield* EnvFileService;
+  const renderer = yield* Effect.promise(() => createCliRenderer({ exitOnCtrlC: true }));
+  const reactRoot = createRoot(renderer);
+
+  const loadWorkspace = () => detectWorkspace(root);
+  const loadEnvFiles = () => envFiles.scan({ root, decrypt, maxDepth: 8 });
+  const setVariable = ({
+    path,
+    key,
+    value,
+    encrypt,
+  }: {
+    readonly path: string;
+    readonly key: string;
+    readonly value: string;
+    readonly encrypt: boolean;
+  }) => envFiles.setVariable({ root, path, key, value, decrypt, encrypt });
+  const createFile = ({ path }: { readonly path: string }) =>
+    envFiles.createFile({ root, path, decrypt });
+  const deleteVariable = ({ path, key }: { readonly path: string; readonly key: string }) =>
+    envFiles.deleteVariable({ root, path, key, decrypt });
+
+  yield* Effect.acquireUseRelease(
+    Effect.sync(() => {
+      reactRoot.render(
+        <App
+          root={root}
+          decrypt={decrypt}
+          loadWorkspace={loadWorkspace}
+          loadEnvFiles={loadEnvFiles}
+          setVariable={setVariable}
+          createFile={createFile}
+          deleteVariable={deleteVariable}
+        />,
+      );
+      return renderer;
+    }),
+    (liveRenderer) =>
+      Effect.callback<void>((resume) => {
+        if (liveRenderer.isDestroyed) {
+          resume(Effect.void);
+          return;
+        }
+        const onDestroy = () => resume(Effect.void);
+        liveRenderer.once(CliRenderEvents.DESTROY, onDestroy);
+        return Effect.sync(() => liveRenderer.off(CliRenderEvents.DESTROY, onDestroy));
+      }),
+    (liveRenderer) =>
+      Effect.sync(() => {
+        reactRoot.unmount();
+        if (!liveRenderer.isDestroyed) liveRenderer.destroy();
+      }),
+  );
+});

package/src/tui/types.ts

@@ -0,0 +1,127 @@
+import type { Effect } from "effect";
+import type { EnvFileError } from "../env-file.ts";
+import type { EnvFileInfo, EnvVariable, WorkspaceInfo } from "../domain.ts";
+
+export type EnvEnvironment = {
+  readonly id: string;
+  readonly label: string;
+  readonly path: string;
+  readonly file: EnvFileInfo;
+};
+
+export type EnvFileGroup = {
+  readonly key: string;
+  readonly label: string;
+  readonly files: ReadonlyArray<EnvFileInfo>;
+  readonly environments: ReadonlyArray<EnvEnvironment>;
+};
+
+export type EnvTableCell = {
+  readonly environment: EnvEnvironment;
+  readonly variable: EnvVariable | undefined;
+};
+
+export type EnvTableRow = {
+  readonly key: string;
+  readonly presentCount: number;
+  readonly cells: ReadonlyArray<EnvTableCell>;
+};
+
+export type FocusTarget =
+  | "filter"
+  | "files"
+  | "variables"
+  | "edit-key"
+  | "edit-value"
+  | "file-path";
+
+export type EditMode = "add" | "update";
+
+export type EditDraft = {
+  readonly mode: EditMode;
+  readonly key: string;
+  readonly value: string;
+  readonly encrypt: boolean;
+};
+
+export type ConfirmDelete = {
+  readonly path: string;
+  readonly key: string;
+};
+
+export type AppCommand = {
+  readonly id: string;
+  readonly title: string;
+  readonly shortcut?: string | undefined;
+  readonly section?: string | undefined;
+  readonly disabledReason?: string | undefined;
+  readonly run: () => void;
+};
+
+export type AppProps = {
+  readonly root: string;
+  readonly decrypt: boolean;
+  readonly loadWorkspace: () => Effect.Effect<WorkspaceInfo, EnvFileError>;
+  readonly loadEnvFiles: () => Effect.Effect<ReadonlyArray<EnvFileInfo>, EnvFileError>;
+  readonly setVariable: (request: {
+    readonly path: string;
+    readonly key: string;
+    readonly value: string;
+    readonly encrypt: boolean;
+  }) => Effect.Effect<EnvFileInfo, EnvFileError>;
+  readonly createFile: (request: {
+    readonly path: string;
+  }) => Effect.Effect<EnvFileInfo, EnvFileError>;
+  readonly deleteVariable: (request: {
+    readonly path: string;
+    readonly key: string;
+  }) => Effect.Effect<EnvFileInfo, EnvFileError>;
+};
+
+export type EnvVaultStats = {
+  readonly files: number;
+  readonly variables: number;
+  readonly encryptedFiles: number;
+  readonly withKeys: number;
+};
+
+export const variableSearchText = (variable: EnvVariable): string =>
+  [variable.key, variable.value, variable.rawValue, variable.encrypted ? "encrypted" : "plain"]
+    .join(" ")
+    .toLowerCase();
+
+type SearchFields = {
+  readonly text: string;
+  readonly path?: string | undefined;
+  readonly key?: string | undefined;
+  readonly value?: string | undefined;
+  readonly env?: string | undefined;
+  readonly state?: string | undefined;
+};
+
+const searchable = (value: string | undefined): string => value?.toLowerCase() ?? "";
+
+export const searchTokens = (query: string): ReadonlyArray<string> =>
+  query
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((token) => token.length > 0);
+
+export const matchesSearch = (fields: SearchFields, query: string): boolean => {
+  const tokens = searchTokens(query);
+  if (tokens.length === 0) return true;
+
+  const text = searchable(fields.text);
+  return tokens.every((token) => {
+    const separator = token.indexOf(":");
+    if (separator > 0) {
+      const field = token.slice(0, separator) as keyof Omit<SearchFields, "text">;
+      const value = token.slice(separator + 1);
+      if (["path", "key", "value", "env", "state"].includes(field)) {
+        return searchable(fields[field]).includes(value);
+      }
+    }
+    return text.includes(token);
+  });
+};