feat: environments crud ui (#1292)

if you're reading this just go to the top of the stack and check the UI out there

Author: jonathanlab

apps/code/src/main/services/agent/service.test.ts

@@ -351,12 +351,14 @@ describe("AgentService", () => {
       injectSession(service, "run-1");
       service.recordActivity("run-1");
       const firstDeadline = getIdleTimeouts(service).get("run-1")?.deadline;
+      if (firstDeadline === undefined)
+        throw new Error("Expected firstDeadline to be defined");
 
       vi.advanceTimersByTime(5 * 60 * 1000);
       service.recordActivity("run-1");
       const secondDeadline = getIdleTimeouts(service).get("run-1")?.deadline;
 
-      expect(secondDeadline).toBeGreaterThan(firstDeadline!);
+      expect(secondDeadline).toBeGreaterThan(firstDeadline);
     });
 
     it("kills idle session after timeout expires", () => {

apps/code/src/main/services/environment/schemas.ts

@@ -7,7 +7,6 @@ const setupSchema = z.object({
 });
 
 export const environmentActionSchema = z.object({
-  id: z.string(),
   name: z.string().min(1),
   icon: z.string().optional(),
   command: z.string().min(1),
@@ -38,18 +37,23 @@ export const deleteEnvironmentInput = repoPathWithIdInput;
 export const createEnvironmentInput = repoPathInput.extend({
   name: z.string().min(1),
   setup: setupSchema.optional(),
-  actions: z.array(environmentActionSchema.omit({ id: true })).optional(),
+  actions: z.array(environmentActionSchema).optional(),
 });
 
 export const updateEnvironmentInput = repoPathWithIdInput.extend({
   name: z.string().min(1).optional(),
   setup: setupSchema.optional(),
-  actions: z
-    .array(environmentActionSchema.extend({ id: z.string().optional() }))
-    .optional(),
+  actions: z.array(environmentActionSchema).optional(),
 });
 
 export type Environment = z.infer<typeof environmentSchema>;
 export type EnvironmentAction = z.infer<typeof environmentActionSchema>;
 export type CreateEnvironmentInput = z.infer<typeof createEnvironmentInput>;
 export type UpdateEnvironmentInput = z.infer<typeof updateEnvironmentInput>;
+
+export function slugifyEnvironmentName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}

apps/code/src/main/services/environment/service.test.ts

@@ -90,7 +90,7 @@ describe("EnvironmentService", () => {
       expect(await readEnvFiles()).toEqual(["environment.toml"]);
     });
 
-    it("generates unique ids for actions", async () => {
+    it("creates environment with actions", async () => {
       const env = await create({
         name: "Actions",
         actions: [
@@ -100,10 +100,8 @@ describe("EnvironmentService", () => {
       });
 
       expect(env.actions).toHaveLength(2);
-      const [a, b] = env.actions!;
-      expect(a.id).toBeTruthy();
-      expect(b.id).toBeTruthy();
-      expect(a.id).not.toBe(b.id);
+      expect(env.actions?.[0].name).toBe("Build");
+      expect(env.actions?.[1].name).toBe("Test");
     });
 
     it("round-trips setup script through toml", async () => {
@@ -168,26 +166,6 @@ describe("EnvironmentService", () => {
       expect(updated.actions).toEqual(env.actions);
     });
 
-    it("generates ids for new actions without an id", async () => {
-      const updated = await update({
-        id: env.id,
-        actions: [{ name: "Run", command: "npm start" }],
-      });
-
-      expect(updated.actions?.[0].id).toBeTruthy();
-    });
-
-    it("preserves existing action ids", async () => {
-      const actionId = env.actions?.[0].id;
-      const updated = await update({
-        id: env.id,
-        actions: [{ id: actionId, name: "Build v2", command: "make all" }],
-      });
-
-      expect(updated.actions?.[0].id).toBe(actionId);
-      expect(updated.actions?.[0].command).toBe("make all");
-    });
-
     it("persists update to disk", async () => {
       await update({ id: env.id, name: "Persisted" });
 

apps/code/src/main/services/environment/service.ts

@@ -1,12 +1,12 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import { injectable } from "inversify";
-import { parse as parseToml, stringify as stringifyToml } from "smol-toml";
+import { parse as parseToml } from "smol-toml";
 import {
   type CreateEnvironmentInput,
   type Environment,
-  type EnvironmentAction,
   environmentSchema,
+  slugifyEnvironmentName,
   type UpdateEnvironmentInput,
 } from "./schemas";
 
@@ -16,11 +16,41 @@ function environmentsDir(repoPath: string): string {
   return path.join(repoPath, ENVIRONMENTS_DIR);
 }
 
-function slugify(name: string): string {
-  return name
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
+function tomlString(value: string): string {
+  if (value.includes("\n")) {
+    return `'''\n${value}'''`;
+  }
+  return JSON.stringify(value);
+}
+
+function serializeEnvironment(env: Environment): string {
+  const lines: string[] = [];
+
+  lines.push(`id = ${JSON.stringify(env.id)} # DO NOT EDIT MANUALLY`);
+  lines.push(`version = ${env.version}`);
+  lines.push("");
+  lines.push(`name = ${JSON.stringify(env.name)}`);
+
+  if (env.setup?.script) {
+    lines.push("");
+    lines.push("[setup]");
+    lines.push(`script = ${tomlString(env.setup.script)}`);
+  }
+
+  if (env.actions && env.actions.length > 0) {
+    for (const action of env.actions) {
+      lines.push("");
+      lines.push("[[actions]]");
+      lines.push(`name = ${JSON.stringify(action.name)}`);
+      if (action.icon) {
+        lines.push(`icon = ${JSON.stringify(action.icon)}`);
+      }
+      lines.push(`command = ${tomlString(action.command)}`);
+    }
+  }
+
+  lines.push("");
+  return lines.join("\n");
 }
 
 interface ScannedEnvironment {
@@ -102,25 +132,17 @@ export class EnvironmentService {
     const dir = environmentsDir(repoPath);
     await fs.mkdir(dir, { recursive: true });
 
-    const id = crypto.randomUUID();
-    const actions: EnvironmentAction[] | undefined = input.actions?.map(
-      (a) => ({
-        ...a,
-        id: crypto.randomUUID(),
-      }),
-    );
-
     const environment: Environment = {
-      id,
+      id: crypto.randomUUID(),
       version: 1,
       name: input.name,
       setup: input.setup,
-      actions,
+      actions: input.actions,
     };
 
-    const slug = slugify(input.name);
+    const slug = slugifyEnvironmentName(input.name);
     const filePath = await this.uniqueFilePath(dir, slug || "environment");
-    await fs.writeFile(filePath, stringifyToml(environment), "utf-8");
+    await fs.writeFile(filePath, serializeEnvironment(environment), "utf-8");
 
     return environment;
   }
@@ -136,22 +158,15 @@ export class EnvironmentService {
 
     const existing = found.environment;
 
-    const actions: EnvironmentAction[] | undefined = input.actions?.map(
-      (a) => ({
-        ...a,
-        id: a.id ?? crypto.randomUUID(),
-      }),
-    );
-
     const updated: Environment = {
       id: existing.id,
       version: existing.version,
       name: input.name ?? existing.name,
       setup: input.setup !== undefined ? input.setup : existing.setup,
-      actions: actions !== undefined ? actions : existing.actions,
+      actions: input.actions !== undefined ? input.actions : existing.actions,
     };
 
-    await fs.writeFile(found.filePath, stringifyToml(updated), "utf-8");
+    await fs.writeFile(found.filePath, serializeEnvironment(updated), "utf-8");
 
     return updated;
   }

apps/code/src/main/services/suspension/service.test.ts

@@ -136,11 +136,13 @@ function seedWorktreeWorkspace(
     repositoryId: overrides.repositoryId ?? "repo-1",
     mode: overrides.mode ?? "worktree",
   });
-  const stored = mocks.workspaceRepo._workspaces.get(ws.id)!;
+  const stored = mocks.workspaceRepo._workspaces.get(ws.id);
+  if (!stored) throw new Error(`Workspace not found: ${ws.id}`);
   if (overrides.lastActivityAt !== undefined)
     stored.lastActivityAt = overrides.lastActivityAt;
   if (overrides.createdAt !== undefined) stored.createdAt = overrides.createdAt;
-  const resolved = mocks.workspaceRepo.findById(ws.id)!;
+  const resolved = mocks.workspaceRepo.findById(ws.id);
+  if (!resolved) throw new Error(`Workspace not found: ${ws.id}`);
   mocks.worktreeRepo.create({
     workspaceId: resolved.id,
     name: `wt-${resolved.taskId}`,

apps/code/src/main/services/suspension/service.ts

@@ -325,17 +325,21 @@ export class SuspensionService extends TypedEventEmitter<SuspensionServiceEvents
       const branch = await this.getCurrentBranchName(worktreePath);
       if (branch && branch !== "HEAD") suspendedTask.branchName = branch;
 
+      const checkpointId = suspendedTask.checkpointId;
+      if (!checkpointId)
+        throw new Error("checkpointId must be set in worktree mode");
+
       await step(
         async () => {
           await this.captureWorktreeCheckpoint(
             folderPath,
             worktreePath,
-            suspendedTask.checkpointId!,
+            checkpointId,
           );
         },
         async () => {
           const git = createGitClient(folderPath);
-          await deleteCheckpoint(git, suspendedTask.checkpointId!);
+          await deleteCheckpoint(git, checkpointId);
         },
       );
 
@@ -380,13 +384,14 @@ export class SuspensionService extends TypedEventEmitter<SuspensionServiceEvents
       workspace.mode === "worktree" &&
       suspension.checkpointId
     ) {
+      const checkpointId = suspension.checkpointId;
       await step(
         async () => {
           restoredWorktreeName = await this.restoreWorktreeFromCheckpoint(
             folderPath,
             workspace,
             suspension.branchName,
-            suspension.checkpointId!,
+            checkpointId,
             recreateBranch,
           );
         },

apps/code/src/renderer/features/environments/components/EnvironmentSelector.tsx

@@ -0,0 +1,104 @@
+import { Combobox } from "@components/ui/combobox/Combobox";
+import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
+import { HardDrives, Plus } from "@phosphor-icons/react";
+import { Flex, Tooltip } from "@radix-ui/themes";
+import { useTRPC } from "@renderer/trpc/client";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+interface EnvironmentSelectorProps {
+  repoPath: string | null;
+  value: string | null;
+  onChange: (environmentId: string | null) => void;
+  disabled?: boolean;
+  variant?: "outline" | "ghost";
+}
+
+export function EnvironmentSelector({
+  repoPath,
+  value,
+  onChange,
+  disabled = false,
+  variant = "outline",
+}: EnvironmentSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const trpc = useTRPC();
+
+  const { data: environments = [] } = useQuery({
+    ...trpc.environment.list.queryOptions({ repoPath: repoPath ?? "" }),
+    enabled: !!repoPath,
+  });
+
+  const selectedEnvironment = environments.find((env) => env.id === value);
+  const displayText = selectedEnvironment?.name ?? "No environment";
+
+  const handleChange = (newValue: string) => {
+    onChange(newValue || null);
+    setOpen(false);
+  };
+
+  const handleOpenSettings = () => {
+    setOpen(false);
+    useSettingsDialogStore
+      .getState()
+      .open("environments", { repoPath: repoPath ?? undefined });
+  };
+
+  const triggerContent = (
+    <Flex align="center" gap="1" style={{ minWidth: 0 }}>
+      <HardDrives size={16} weight="regular" style={{ flexShrink: 0 }} />
+      <span className="combobox-trigger-text">{displayText}</span>
+    </Flex>
+  );
+
+  return (
+    <Tooltip content={displayText} delayDuration={300}>
+      <Combobox.Root
+        value={value ?? ""}
+        onValueChange={handleChange}
+        open={open}
+        onOpenChange={setOpen}
+        size="1"
+        disabled={disabled || !repoPath}
+      >
+        <Combobox.Trigger variant={variant} placeholder="No environment">
+          {triggerContent}
+        </Combobox.Trigger>
+
+        <Combobox.Content>
+          <Combobox.Input placeholder="Search environments" />
+          <Combobox.Empty>No environments found.</Combobox.Empty>
+
+          <Combobox.Group heading="Environments">
+            {environments.map((env) => (
+              <Combobox.Item
+                key={env.id}
+                value={env.id}
+                icon={<HardDrives size={11} weight="regular" />}
+              >
+                {env.name}
+              </Combobox.Item>
+            ))}
+          </Combobox.Group>
+
+          <Combobox.Footer>
+            <button
+              type="button"
+              className="combobox-footer-button"
+              onClick={handleOpenSettings}
+            >
+              <Flex
+                align="center"
+                gap="2"
+                style={{ color: "var(--accent-11)" }}
+              >
+                <Plus size={11} weight="bold" />
+                <span>Create local environment</span>
+              </Flex>
+            </button>
+          </Combobox.Footer>
+        </Combobox.Content>
+      </Combobox.Root>
+    </Tooltip>
+  );
+}