agents-panel

1// Agents Panel: the project's .claude/agents as a side panel, each with a run button.
2
3import { atom, read, update } from "claude-code";
4import type { Register } from "claude-code";
5
6import type { AgentsPanelAgent } from "../types";
7
8const PANE = "agents-panel";
9const DIR = ".claude/agents";
10const DOTS = ["blue", "cyan", "yellow", "red", "magenta", "green"];
11
12const agents = atom({ plugin: "agents-panel", key: "agents" } as const, [] as AgentsPanelAgent[]);
13
14export const register: Register = (on) => {
15  on("session.start", async ($, e, next) => {
16    await $.command.register({
17      name: "agents-panel",
18      description: "Show or hide the project's agents in a side panel",
19    });
20    return next(e);
21  });
22
23  on("command.run", { command: "agents-panel" }, async ($) => {
24    const panes = await $.ui.panes();
25    if (panes.some((p) => p.id === PANE)) {
26      await $.ui.close({ id: PANE });
27      return { text: "Agents panel hidden." };
28    }
29    await load($);
30    await $.ui.open({ id: PANE, title: "Agents" });
31    return { text: "Agents panel open." };
32  });
33
34  on("ui.render", { component: "Pane", requestId: PANE }, async ($, e) => {
35    const { Box, Text, Button } = $.ui.resolve(e);
36    const list = await read($, agents);
37
38    return (
39      <Box flexDirection="column" paddingX={1}>
40        <Box flexDirection="row">
41          <Text color="red">◆ </Text>
42          <Text bold>Agents</Text>
43          <Text dimColor> in this project  ·  {list.length} defined</Text>
44        </Box>
45        <Text dimColor>{DIR}</Text>
46        {list.length === 0 && <Text dimColor>No agent files found.</Text>}
47        {list.map((a, i) => (
48          <Box key={a.name} flexDirection="column" marginTop={1}>
49            <Box flexDirection="row">
50              <Text color={DOTS[i % DOTS.length]}>● </Text>
51              <Text bold>{a.name}</Text>
52              <Text dimColor> {a.model}</Text>
53              <Box flexGrow={1} />
54              <Button
55                key={`run-${a.name}`}
56                label="▶ run"
57                dimColor
58                onPress={() => run($, a)}
59              />
60            </Box>
61            <Text dimColor wrap="truncate-end">{a.description}</Text>
62          </Box>
63        ))}
64        <Box marginTop={1}>
65          <Text dimColor>click ▶ run to start one · /agents-panel to hide</Text>
66        </Box>
67      </Box>
68    );
69  });
70};
71
72async function load($) {
73  const entries = await $.fs.list(DIR).catch(() => []);
74  const found: AgentsPanelAgent[] = [];
75  for (const f of entries.filter((f) => f.kind === "file" && f.name.endsWith(".md"))) {
76    const text = await $.fs.read(`${DIR}/${f.name}`).catch(() => "");
77    const meta = frontmatter(text);
78    found.push({
79      name: meta.name || f.name.replace(/\.md$/, ""),
80      model: meta.model || "inherit",
81      description: meta.description || "",
82    });
83  }
84  found.sort((a, b) => a.name.localeCompare(b.name));
85  await update($, agents, () => found);
86}
87
88export function frontmatter(text: string): Record<string, string> {
89  const block = /^---\r?\n([\s\S]*?)\r?\n---/.exec(text)?.[1] ?? "";
90  const meta: Record<string, string> = {};
91  for (const line of block.split(/\r?\n/)) {
92    const m = /^([A-Za-z_-]+):\s*(.*)$/.exec(line);
93    if (m) meta[m[1]] = m[2].replace(/^["']|["']$/g, "").trim();
94  }
95  return meta;
96}
97
98async function run($, a: AgentsPanelAgent) {
99  try {
100    await $.agent.spawn({
101      subagentType: a.name,
102      description: a.name,
103      prompt: "Run your default task on this project.",
104    });
105    $.ui.toast(`${a.name}: started`);
106  } catch (err) {
107    $.ui.toast(`${a.name}: ${err instanceof Error ? err.message : "could not start"}`);
108  }
109}
110

1export type AgentsPanelAgent = { name: string; model: string; description: string };
2
3declare module "claude-code" {
4  interface PluginState {
5    "agents-panel": { agents: AgentsPanelAgent[] };
6  }
7}
8