Recursive deploy ladder: Company + Org tiers, mesh mark, two-tier rail

Completes the scale ladder (single → team → company → org). Every tier is a
topology whose nodes are the tier below; running a parent recursively runs each
child's sub-topology down to the leaf claws.

Backend:
- migration 0011: companies/company_teams, orgs/org_companies, topology_runs.tier
- cm-db repos for companies + orgs (mirror teams)
- TurnRequest.attrs (forwarded from node.attrs) for child-id binding
- SubTopologyExecutor (recursive_exec.rs): a parent "turn" runs the child's
  sub-topology; durability via parent updated_at keepalive + cancel propagation
  + depth cap; boxed future breaks the org→company recursion
- topology_worker selects executor by job.tier
- routes: /api/companies, /api/orgs (create/list/get/run) + unified
  /api/structure/{level}/{id} for the zoom canvas

Frontend:
- MeshMark: node-mesh brand glyph (replaces the claw PNG), tier variants
- TopologyGraphView: optional onNodeClick/nodeMeta + dark-token theming
- StructureCanvas + Breadcrumb: one recursive zoom view for every tier
  (drill down on node click, breadcrumb up); TeamRunPanel extracted + shared
- two-tier Discord-style rail: StructureRail (mesh mark + org/company/team
  glyphs + tools popover + deploy + user) | RosterColumn (selected group's
  children, or your claws); SecondaryNav for cross-cutting tools
- ComposeWizard (company/org) wired into DeployWizard; /companies + /orgs pages

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/app/(workspace)/companies/[id]/page.tsx

@@ -0,0 +1,6 @@
+import { StructureCanvas } from "@/components/structure/StructureCanvas";
+
+export default async function CompanyPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <StructureCanvas level="company" id={id} />;
+}

frontend/src/app/(workspace)/companies/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+interface GroupSummary {
+  id: string;
+  name: string;
+  kind: string;
+  status: string;
+}
+
+export default function CompaniesPage() {
+  const [companies, setCompanies] = useState<GroupSummary[]>([]);
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const r = await fetch("/api/companies");
+        if (r.ok) setCompanies((await r.json()) as GroupSummary[]);
+      } catch {
+        /* ignore */
+      }
+    })();
+  }, []);
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 p-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold tracking-tight">Companies</h1>
+        <Link
+          href="/claws/new"
+          className="rounded-full bg-coral px-4 py-2 text-sm font-medium text-white"
+        >
+          Deploy a company
+        </Link>
+      </div>
+
+      {companies.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No companies yet — a company is a topology of teams.
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {companies.map((c) => (
+            <li key={c.id}>
+              <Link
+                href={`/companies/${c.id}`}
+                className="flex items-center gap-3 rounded-lg border border-border p-3 hover:bg-muted/30"
+              >
+                <span className="text-sm font-medium text-foreground">{c.name}</span>
+                <span className="rounded-full bg-muted px-2 py-0.5 text-xs capitalize text-muted-foreground">
+                  {c.kind}
+                </span>
+                <span className="text-xs text-muted-foreground">{c.status}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

frontend/src/app/(workspace)/layout.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { LeftRail } from "@/components/shell/LeftRail";
 import { ApiAuthError } from "@/lib/api/http";
 import { fetchClaws, fetchCredits, fetchMe } from "@/lib/api/team";
+import { fetchCompanies, fetchOrgs, fetchTeams, type GroupSummary } from "@/lib/api/structure";
 import type { Agent, Credits, User } from "@/lib/api/schemas";
 
 // Every workspace page shares the persistent rail (§4). This layout reads
@@ -13,11 +14,19 @@ export default async function WorkspaceLayout({
   let user: User;
   let roster: Agent[];
   let credits: Credits;
+  let orgs: GroupSummary[];
+  let companies: GroupSummary[];
+  let teams: GroupSummary[];
   try {
-    [user, roster, credits] = await Promise.all([
+    // Structure lists are non-critical chrome — never let one fail the shell.
+    const groups = <T,>(p: Promise<T[]>) => p.catch(() => [] as T[]);
+    [user, roster, credits, orgs, companies, teams] = await Promise.all([
       fetchMe(),
       fetchClaws(),
       fetchCredits(),
+      groups(fetchOrgs()),
+      groups(fetchCompanies()),
+      groups(fetchTeams()),
     ]);
   } catch (error) {
     if (error instanceof ApiAuthError) {
@@ -30,6 +39,9 @@ export default async function WorkspaceLayout({
       <LeftRail
         user={user}
         roster={roster}
+        orgs={orgs}
+        companies={companies}
+        teams={teams}
         creditsBalance={credits.available}
       />
       <main className="min-w-0 flex-1">{children}</main>

frontend/src/app/(workspace)/orgs/[id]/page.tsx

@@ -0,0 +1,6 @@
+import { StructureCanvas } from "@/components/structure/StructureCanvas";
+
+export default async function OrgPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <StructureCanvas level="org" id={id} />;
+}

frontend/src/app/(workspace)/orgs/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+interface GroupSummary {
+  id: string;
+  name: string;
+  kind: string;
+  status: string;
+}
+
+export default function OrgsPage() {
+  const [orgs, setOrgs] = useState<GroupSummary[]>([]);
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const r = await fetch("/api/orgs");
+        if (r.ok) setOrgs((await r.json()) as GroupSummary[]);
+      } catch {
+        /* ignore */
+      }
+    })();
+  }, []);
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 p-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold tracking-tight">Organizations</h1>
+        <Link
+          href="/claws/new"
+          className="rounded-full bg-coral px-4 py-2 text-sm font-medium text-white"
+        >
+          Deploy an org
+        </Link>
+      </div>
+
+      {orgs.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No organizations yet — an org is a topology of companies.
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {orgs.map((o) => (
+            <li key={o.id}>
+              <Link
+                href={`/orgs/${o.id}`}
+                className="flex items-center gap-3 rounded-lg border border-border p-3 hover:bg-muted/30"
+              >
+                <span className="text-sm font-medium text-foreground">{o.name}</span>
+                <span className="rounded-full bg-muted px-2 py-0.5 text-xs capitalize text-muted-foreground">
+                  {o.kind}
+                </span>
+                <span className="text-xs text-muted-foreground">{o.status}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

frontend/src/app/(workspace)/teams/[id]/page.tsx

@@ -1,6 +1,6 @@
-import { TeamView } from "@/components/team/TeamView";
+import { StructureCanvas } from "@/components/structure/StructureCanvas";
 
 export default async function TeamPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  return <TeamView teamId={id} />;
+  return <StructureCanvas level="team" id={id} />;
 }