feat: Add Kiro editor support to open picker (#1974)

Co-authored-by: Julius Marminge <jmarminge@gmail.com>

Author: ashvinnihalani

apps/server/src/open.test.ts

@@ -42,6 +42,16 @@ it.layer(NodeServices.layer)("resolveEditorLaunch", (it) => {
         args: ["/tmp/workspace"],
       });
 
+      const kiroLaunch = yield* resolveEditorLaunch(
+        { cwd: "/tmp/workspace", editor: "kiro" },
+        "darwin",
+        { PATH: "" },
+      );
+      assert.deepEqual(kiroLaunch, {
+        command: "kiro",
+        args: ["ide", "/tmp/workspace"],
+      });
+
       const vscodeLaunch = yield* resolveEditorLaunch(
         { cwd: "/tmp/workspace", editor: "vscode" },
         "darwin",
@@ -122,6 +132,16 @@ it.layer(NodeServices.layer)("resolveEditorLaunch", (it) => {
         args: ["--goto", "/tmp/workspace/src/open.ts:71:5"],
       });
 
+      const kiroLineAndColumn = yield* resolveEditorLaunch(
+        { cwd: "/tmp/workspace/src/open.ts:71:5", editor: "kiro" },
+        "darwin",
+        { PATH: "" },
+      );
+      assert.deepEqual(kiroLineAndColumn, {
+        command: "kiro",
+        args: ["ide", "--goto", "/tmp/workspace/src/open.ts:71:5"],
+      });
+
       const vscodeLineAndColumn = yield* resolveEditorLaunch(
         { cwd: "/tmp/workspace/src/open.ts:71:5", editor: "vscode" },
         "darwin",
@@ -354,14 +374,15 @@ it.layer(NodeServices.layer)("resolveAvailableEditors", (it) => {
       const dir = yield* fs.makeTempDirectoryScoped({ prefix: "t3-editors-" });
 
       yield* fs.writeFileString(path.join(dir, "trae.CMD"), "@echo off\r\n");
+      yield* fs.writeFileString(path.join(dir, "kiro.CMD"), "@echo off\r\n");
       yield* fs.writeFileString(path.join(dir, "code-insiders.CMD"), "@echo off\r\n");
       yield* fs.writeFileString(path.join(dir, "codium.CMD"), "@echo off\r\n");
       yield* fs.writeFileString(path.join(dir, "explorer.CMD"), "MZ");
       const editors = resolveAvailableEditors("win32", {
         PATH: dir,
         PATHEXT: ".COM;.EXE;.BAT;.CMD",
       });
-      assert.deepEqual(editors, ["trae", "vscode-insiders", "vscodium", "file-manager"]);
+      assert.deepEqual(editors, ["trae", "kiro", "vscode-insiders", "vscodium", "file-manager"]);
     }),
   );
 

apps/server/src/open.ts

@@ -75,6 +75,14 @@ function resolveCommandEditorArgs(
   }
 }
 
+function resolveEditorArgs(
+  editor: (typeof EDITORS)[number],
+  target: string,
+): ReadonlyArray<string> {
+  const baseArgs = "baseArgs" in editor ? editor.baseArgs : [];
+  return [...baseArgs, ...resolveCommandEditorArgs(editor, target)];
+}
+
 function resolveAvailableCommand(
   commands: ReadonlyArray<string>,
   options: CommandAvailabilityOptions = {},
@@ -273,7 +281,7 @@ export const resolveEditorLaunch = Effect.fn("resolveEditorLaunch")(function* (
       resolveAvailableCommand(editorDef.commands, { platform, env }) ?? editorDef.commands[0];
     return {
       command,
-      args: resolveCommandEditorArgs(editorDef, input.cwd),
+      args: resolveEditorArgs(editorDef, input.cwd),
     };
   }
 

apps/web/src/components/ChatView.browser.tsx

@@ -1803,6 +1803,55 @@ describe("ChatView timeline estimator parity (full app)", () => {
     }
   });
 
+  it("shows Kiro in the open picker menu and opens the project cwd with it", async () => {
+    setDraftThreadWithoutWorktree();
+
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: createDraftOnlySnapshot(),
+      configureFixture: (nextFixture) => {
+        nextFixture.serverConfig = {
+          ...nextFixture.serverConfig,
+          availableEditors: ["kiro"],
+        };
+      },
+    });
+
+    try {
+      await waitForServerConfigToApply();
+      const menuButton = await waitForElement(
+        () => document.querySelector('button[aria-label="Copy options"]'),
+        "Unable to find Open picker button.",
+      );
+      (menuButton as HTMLButtonElement).click();
+
+      const kiroItem = await waitForElement(
+        () =>
+          Array.from(document.querySelectorAll('[data-slot="menu-item"]')).find((item) =>
+            item.textContent?.includes("Kiro"),
+          ) ?? null,
+        "Unable to find Kiro menu item.",
+      );
+      (kiroItem as HTMLElement).click();
+
+      await vi.waitFor(
+        () => {
+          const openRequest = wsRequests.find(
+            (request) => request._tag === WS_METHODS.shellOpenInEditor,
+          );
+          expect(openRequest).toMatchObject({
+            _tag: WS_METHODS.shellOpenInEditor,
+            cwd: "/repo/project",
+            editor: "kiro",
+          });
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
   it("filters the open picker menu and opens VSCodium from the menu", async () => {
     setDraftThreadWithoutWorktree();
 

apps/web/src/components/Icons.tsx

@@ -34,6 +34,24 @@ export const TraeIcon: Icon = (props) => (
   </svg>
 );
 
+export const KiroIcon: Icon = (props) => (
+  <svg {...props} viewBox="0 0 1200 1200" fill="none">
+    <rect width="1200" height="1200" rx="260" fill="#9046FF" />
+    <path
+      d="M398.554 818.914C316.315 1001.03 491.477 1046.74 620.672 940.156C658.687 1059.66 801.052 970.473 852.234 877.795C964.787 673.567 919.318 465.357 907.64 422.374C827.637 129.443 427.623 128.946 358.8 423.865C342.651 475.544 342.402 534.18 333.458 595.051C328.986 625.86 325.507 645.488 313.83 677.785C306.873 696.424 297.68 712.819 282.773 740.645C259.915 783.881 269.604 867.113 387.87 823.883L399.051 818.914H398.554Z"
+      fill="#fff"
+    />
+    <path
+      d="M636.123 549.353C603.328 549.353 598.359 510.097 598.359 486.742C598.359 465.623 602.086 448.977 609.293 438.293C615.504 428.852 624.697 424.131 636.123 424.131C647.555 424.131 657.492 428.852 664.447 438.541C672.398 449.474 676.623 466.12 676.623 486.742C676.623 525.998 661.471 549.353 636.375 549.353H636.123Z"
+      fill="#000"
+    />
+    <path
+      d="M771.24 549.353C738.445 549.353 733.477 510.097 733.477 486.742C733.477 465.623 737.203 448.977 744.41 438.293C750.621 428.852 759.814 424.131 771.24 424.131C782.672 424.131 792.609 428.852 799.564 438.541C807.516 449.474 811.74 466.12 811.74 486.742C811.74 525.998 796.588 549.353 771.492 549.353H771.24Z"
+      fill="#000"
+    />
+  </svg>
+);
+
 export const VisualStudioCode: Icon = (props) => {
   const id = useId();
   const maskId = `${id}-vscode-a`;

apps/web/src/components/chat/OpenInPicker.tsx

@@ -10,6 +10,7 @@ import {
   AntigravityIcon,
   CursorIcon,
   Icon,
+  KiroIcon,
   TraeIcon,
   IntelliJIdeaIcon,
   VisualStudioCode,
@@ -32,6 +33,11 @@ const resolveOptions = (platform: string, availableEditors: ReadonlyArray<Editor
       Icon: TraeIcon,
       value: "trae",
     },
+    {
+      label: "Kiro",
+      Icon: KiroIcon,
+      value: "kiro",
+    },
     {
       label: "VS Code",
       Icon: VisualStudioCode,

packages/contracts/src/editor.ts

@@ -8,12 +8,14 @@ type EditorDefinition = {
   readonly id: string;
   readonly label: string;
   readonly commands: readonly [string, ...string[]] | null;
+  readonly baseArgs?: readonly string[];
   readonly launchStyle: EditorLaunchStyle;
 };
 
 export const EDITORS = [
   { id: "cursor", label: "Cursor", commands: ["cursor"], launchStyle: "goto" },
   { id: "trae", label: "Trae", commands: ["trae"], launchStyle: "goto" },
+  { id: "kiro", label: "Kiro", commands: ["kiro"], baseArgs: ["ide"], launchStyle: "goto" },
   { id: "vscode", label: "VS Code", commands: ["code"], launchStyle: "goto" },
   {
     id: "vscode-insiders",