+ );
+}
diff --git a/apps/desktop/src/components/agents/org-chart.tsx b/apps/desktop/src/components/agents/org-chart.tsx
index 409359d..3cb7af0 100644
--- a/apps/desktop/src/components/agents/org-chart.tsx
+++ b/apps/desktop/src/components/agents/org-chart.tsx
@@ -1,22 +1,33 @@
+import { useLayoutEffect, useRef, useState } from "react";
import { Link } from "react-router";
-import { Globe, Plus } from "lucide-react";
-import type { Agent, TeamGroup, TeamNode } from "@godmode/shared";
+import { Plus, Users } from "lucide-react";
+import type { Agent, TeamNode } from "@godmode/shared";
import { leadOf, presenceLabel, teamTree } from "@godmode/shared";
import { AgentAvatar } from "@/components/common";
import { useWorkspaces } from "@/lib/hooks";
import { cn } from "@/lib/utils";
import { AgentStatus, useAgentMood, useAgentPresence } from "./agent-actions";
+import { WorkspaceSection, type AgentGroup } from "./agent-groups";
+
+interface Panel {
+ group: AgentGroup;
+ roots: TeamNode[];
+ /** Title and face for a team panel (one workspace, split by lead). */
+ lead?: Agent;
+}
/**
- * The team as a tree: the built-in agent on top, everyone under their lead, with role and live status. Nested lists,
- * so the hierarchy reads the same to a screen reader and every control on a node is a normal tab stop. Agents that
- * don't match the search stay in place, dimmed, so the shape of the team doesn't jump around.
+ * The team as a chart: the built-in agent on top, then a panel per workspace (or, inside one workspace, per team) with
+ * everyone under their lead. Nested lists, so the hierarchy reads the same to a screen reader and every control on a
+ * node is a normal tab stop. Agents that don't match the search stay in place, dimmed, so the shape doesn't jump.
*/
export function OrgChart({
shown,
all,
byWorkspace,
matches,
+ stats,
+ forceOpen,
}: {
/** The agents of the current scope and filter. */
shown: Agent[];
@@ -25,18 +36,79 @@ export function OrgChart({
byWorkspace: boolean;
/** Search hits; null = no search. */
matches: Set | null;
+ stats: (agents: Agent[]) => { working: number; needsYou: number };
+ forceOpen?: boolean;
}) {
+ const { data: workspaces = [] } = useWorkspaces();
const groups = teamTree(shown, all, { byWorkspace });
+ let hub: TeamNode | null = null;
+ for (const g of groups) {
+ const i = g.roots.findIndex((n) => n.agent.isDefault);
+ if (i < 0) continue;
+ hub = g.roots[i]!;
+ g.roots = [...hub.reports, ...g.roots.filter((_, j) => j !== i)];
+ }
+
+ const order = new Map(workspaces.map((w, i) => [w.id, i]));
+ const panels: Panel[] = [];
+ if (byWorkspace) {
+ for (const g of groups) {
+ if (!g.roots.length) continue;
+ const key = g.workspaceId ?? "global";
+ panels.push({ group: { key, workspace: workspaces.find((w) => w.id === g.workspaceId) ?? null, agents: g.roots.flatMap(flatten) }, roots: g.roots });
+ }
+ panels.sort((a, b) => rank(a, order) - rank(b, order));
+ } else {
+ const roots = groups.flatMap((g) => g.roots);
+ const direct = new Set(hub?.reports.map((n) => n.agent.id));
+ const loose = roots.filter((n) => !n.reports.length && direct.has(n.agent.id));
+ // Their lead is filtered out, or they lead each other in a loop.
+ const others = roots.filter((n) => !n.reports.length && !direct.has(n.agent.id));
+ const teams = roots.filter((n) => n.reports.length);
+ if (loose.length) panels.push({ group: { key: "org:direct", workspace: null, agents: loose.map((n) => n.agent) }, roots: loose });
+ if (others.length) panels.push({ group: { key: "org:others", workspace: null, agents: others.map((n) => n.agent) }, roots: others });
+ for (const t of teams) panels.push({ group: { key: `org:team:${t.agent.id}`, workspace: null, agents: flatten(t) }, roots: [t], lead: t.agent });
+ }
+
const onlyBuiltin = all.length === 1 && all[0]!.isDefault;
+ const [ref, width] = useWidth();
+ const columns = balance(panels, Math.min(panels.length, width >= 1100 ? 3 : width >= 720 ? 2 : 1));
return (
-
+ Leads {direct} agent{direct === 1 ? "" : "s"} directly
+ {(workspaces > 1 || (global && workspaces > 0)) && <>, across {where}}
+ . Everyone without a lead of their own reports here.
+
)}
-
- {group.roots.map((n) => (
-
- ))}
-
-
+
);
}
-function Branch({
- node,
- depth,
- all,
- matches,
- spread,
- inColumns,
-}: {
- node: TeamNode;
- depth: number;
- all: Agent[];
- matches: Set | null;
- spread?: boolean;
- /** Laid out as a column of its lead's team: no connector on a wide screen. */
- inColumns?: boolean;
-}) {
- const reports = node.reports;
- // On a wide screen the top of a team reads like a chart: each report with a team of its own gets a column, the
- // others stack in one more column.
- const branches = reports.filter((r) => r.reports.length > 0);
- const leaves = reports.filter((r) => r.reports.length === 0);
- const columns = !!spread && depth === 0 && branches.length > 0 && reports.length > 1;
- const sub = (r: TeamNode) => ;
+function Branch({ node, depth, all, matches, last }: { node: TeamNode; depth: number; all: Agent[]; matches: Set | null; last?: boolean }) {
return (
- ))}
+ {depth > 0 && (
+ <>
+ {/* Elbow into the row, and the line on to the next sibling. */}
+
+ {!last && }
+
+ )}
+
+ {node.reports.length > 0 && (
+
+ {node.reports.map((r, i) => (
+
+ ))}
+
+ )}
);
}
-function NodeCard({ node, all, dim }: { node: TeamNode; all: Agent[]; dim: boolean }) {
+function Row({ node, all, dim }: { node: TeamNode; all: Agent[]; dim: boolean }) {
const agent = node.agent;
const mood = useAgentMood(agent);
const presence = useAgentPresence(agent);
const lead = leadOf(agent, all);
- const label = `${agent.name}, ${agent.role || "no role yet"}, ${presenceLabel(presence)}, reports to ${agent.isDefault ? "you" : (lead?.name ?? "Godmode")}`;
+ const label = `${agent.name}, ${agent.role || "no role yet"}, ${presenceLabel(presence)}, reports to ${lead?.name ?? "Godmode"}`;
+ const team = node.reports.length;
return (