@tienne/gestalt 0.87.0 → 0.89.0

package/dist/src/architecture/drilldown.js

@@ -0,0 +1,1160 @@
+import { assignStages, computeGraphLayout, environmentRank, laneOfNode, PARTITION_RANK, pinToColumnTop, stackTree, alignColumnsTo, sinkToColumnBottom, stackBands, bandGroupsOf, stackFrames, frameRects, } from './layout.js';
+import { computeFlowLevels } from './flow-layout.js';
+import { indexMicroApps, orderedApps } from './micro-app.js';
+import { irVocabulary } from './packs/index.js';
+import { computeServiceFacts } from './service-facts.js';
+import { chipTextOverride, displayKindOf } from './types.js';
+export const ROOT_LEVEL_ID = 'root';
+// 클라이언트가 받는 쪽 모듈은 보내는 모듈보다 오른쪽에 서야 화살표가 거꾸로 꺾이지 않는다.
+// 사슬 단수만큼 더해 가므로 테이블 순위와 겹치지 않게 넉넉히 띄운다
+const RECEIVER_RANK = 10;
+const TABLE_RANK_AFTER_RECEIVERS = 100;
+// 전체 레벨에서 서버를 거쳐서만 닿는 게이트웨이와 모듈. 같은 레인 안에서도 게이트웨이가 왼쪽에 선다
+// tree 드릴다운에서 바깥 카드 한 열에 세우는 최대 장수
+const OUTSIDE_PER_COLUMN = 4;
+const EXTERNAL_GATEWAY_RANK = PARTITION_RANK.app_module + 1;
+const EXTERNAL_MODULE_RANK = PARTITION_RANK.app_module + 2;
+// 저장소는 외부 서비스 레인 오른쪽 끝에 선다. 외부 서버도 같은 저장소를 쓰므로 그보다 뒤여야 선이 거꾸로 안 간다
+const DATASTORE_ROOT_RANK = EXTERNAL_MODULE_RANK + 1;
+function compareStr(a, b) {
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+function byId(a, b) {
+    return compareStr(a.id, b.id);
+}
+function buildGraph(validated) {
+    const { ir, drawableNodeIds, drawableEdgeIds } = validated;
+    const nodes = ir.nodes.filter((n) => drawableNodeIds.has(n.id));
+    const nodeById = new Map(nodes.map((n) => [n.id, n]));
+    const edges = ir.edges.filter((e) => drawableEdgeIds.has(e.id)).sort(byId);
+    const edgeById = new Map(edges.map((e) => [e.id, e]));
+    // 부모가 그려지지 않으면 자식은 부모 없는 노드로 친다. 안 그린 노드 아래로 들어가는 길을 만들지 않기 위해서다
+    const parentOf = new Map();
+    for (const n of nodes) {
+        if (n.parent !== undefined && nodeById.has(n.parent))
+            parentOf.set(n.id, n.parent);
+    }
+    return { nodeById, edgeById, edges, parentOf };
+}
+function kindOf(g, id) {
+    return g.nodeById.get(id)?.kind;
+}
+/** 가장 가까운 micro_app이나 service 조상. 화면과 기능 영역이 어느 레벨 칸에 서는지 이걸로 정한다 */
+function ownerOf(g, id) {
+    let cursor = g.parentOf.get(id);
+    const seen = new Set([id]);
+    while (cursor !== undefined && !seen.has(cursor)) {
+        const kind = kindOf(g, cursor);
+        if (kind === 'micro_app' || kind === 'service')
+            return cursor;
+        seen.add(cursor);
+        cursor = g.parentOf.get(cursor);
+    }
+    return undefined;
+}
+function featureOf(g, screenId) {
+    const parent = g.parentOf.get(screenId);
+    return parent !== undefined && kindOf(g, parent) === 'feature' ? parent : undefined;
+}
+/** 서비스나 앱 레벨에서 화면이 속하는 칸. feature 없이 서비스나 앱에 바로 달린 화면은 자기 자신이 칸이다 */
+function unitOf(g, screenId) {
+    const feature = featureOf(g, screenId);
+    if (feature !== undefined)
+        return feature;
+    const parentKind = kindOf(g, g.parentOf.get(screenId) ?? '');
+    return parentKind === 'service' || parentKind === 'micro_app' ? screenId : undefined;
+}
+function edgesOf(g, kind, fromKind, toKind) {
+    return g.edges.filter((e) => e.kind === kind && kindOf(g, e.from) === fromKind && kindOf(g, e.to) === toKind);
+}
+/** 화면 자리에 서는 카드. 하네스의 스킬은 사용자가 고르는 입구라 웹의 화면과 같은 자리에 둔다 */
+function isSurface(g, id) {
+    const kind = kindOf(g, id);
+    return kind === 'screen' || kind === 'skill';
+}
+/** 엔드포인트를 부르는 선. 화면과 스킬, 에이전트가 부른다 */
+function screenCalls(g) {
+    return g.edges.filter((e) => e.kind === 'calls' &&
+        kindOf(g, e.to) === 'endpoint' &&
+        (isSurface(g, e.from) || kindOf(g, e.from) === 'agent'));
+}
+/**
+ * 에이전트를 띄운 스킬까지 spawns를 거슬러 올라간다. 에이전트는 소유자가 없어서 묶을 때 띄운 스킬의 소유자를 빌린다.
+ * 아무도 안 띄운 에이전트나 화면, 스킬은 자기 자신을 낸다
+ */
+function callerRoots(g, id) {
+    if (kindOf(g, id) !== 'agent')
+        return [{ id, via: [] }];
+    const out = [];
+    const seen = new Set([id]);
+    const queue = [{ id, via: [] }];
+    while (queue.length > 0) {
+        const at = queue.shift();
+        const ups = g.edges.filter((e) => e.kind === 'spawns' && e.to === at.id);
+        if (ups.length === 0 && at.id !== id)
+            out.push(at);
+        for (const e of ups) {
+            const via = [e.id, ...at.via];
+            if (kindOf(g, e.from) === 'skill')
+                out.push({ id: e.from, via });
+            else if (!seen.has(e.from)) {
+                seen.add(e.from);
+                queue.push({ id: e.from, via });
+            }
+        }
+    }
+    return out.length > 0 ? out : [{ id, via: [] }];
+}
+/** 띄운 쪽에서 spawns를 따라 내려가 닿는 에이전트와 그 선 */
+function spawnedFrom(g, starts) {
+    const out = [];
+    const seen = new Set(starts);
+    const queue = [...seen];
+    while (queue.length > 0) {
+        const at = queue.shift();
+        for (const e of g.edges.filter((x) => x.kind === 'spawns' && x.from === at)) {
+            out.push(e);
+            if (seen.has(e.to))
+                continue;
+            seen.add(e.to);
+            queue.push(e.to);
+        }
+    }
+    return out;
+}
+function routesInto(g, endpointId) {
+    return g.edges.filter((e) => e.kind === 'routes' && e.to === endpointId && kindOf(g, e.from) === 'gateway');
+}
+function handlersOf(g, endpointId) {
+    return g.edges.filter((e) => e.kind === 'handles' && e.from === endpointId && kindOf(g, e.to) === 'app_module');
+}
+function gatewayHops(g) {
+    return edgesOf(g, 'routes', 'gateway', 'gateway');
+}
+/** 게이트웨이에서 gateway → gateway routes를 거꾸로 따라 올라가 맨 앞 게이트웨이까지의 사슬을 모두 낸다 */
+function chainsUp(g, gatewayId) {
+    const out = [];
+    const hops = gatewayHops(g);
+    const walk = (at, path, seen) => {
+        const incoming = hops.filter((e) => e.to === at && !seen.has(e.from));
+        if (incoming.length === 0) {
+            out.push({ head: at, hops: path });
+            return;
+        }
+        for (const e of incoming)
+            walk(e.from, [...path, e], new Set([...seen, e.from]));
+    };
+    walk(gatewayId, [], new Set([gatewayId]));
+    return out;
+}
+function ids(edges) {
+    return edges.map((e) => e.id);
+}
+class Bundler {
+    bundles = new Map();
+    /** key는 묶음 안에서 건수로 셀 단위다. 같은 key가 여러 번 들어와도 한 건이다 */
+    add(from, to, key, members) {
+        if (from === to)
+            return;
+        const id = `bundle:${from}->${to}`;
+        let b = this.bundles.get(id);
+        if (!b) {
+            b = { from, to, keys: new Set(), members: new Set() };
+            this.bundles.set(id, b);
+        }
+        b.keys.add(key);
+        for (const m of members)
+            b.members.add(m);
+    }
+    toEdges(g) {
+        return [...this.bundles.entries()]
+            .map(([id, b]) => {
+            const memberEdgeIds = [...b.members].sort(compareStr);
+            // 코드로 확인된 고리가 하나라도 있으면 실선이다. 문서나 사용자 근거만 섞였다는 건 inferred 건수로 따로 알린다
+            const inferred = memberEdgeIds.filter((m) => g.edgeById.get(m)?.lineStyle === 'dashed').length;
+            const allInferred = inferred === memberEdgeIds.length;
+            return {
+                id,
+                from: b.from,
+                to: b.to,
+                kind: 'bundle',
+                count: b.keys.size,
+                memberEdgeIds,
+                lineStyle: allInferred ? 'dashed' : 'solid',
+                ...(inferred > 0 && !allInferred ? { inferred } : {}),
+            };
+        })
+            .sort(byId);
+    }
+}
+function asDetail(edge) {
+    return {
+        id: edge.id,
+        from: edge.from,
+        to: edge.to,
+        kind: edge.kind,
+        count: 1,
+        memberEdgeIds: [edge.id],
+        lineStyle: edge.lineStyle,
+    };
+}
+/**
+ * 화면 호출을 소유자 단위로 묶는다. 게이트웨이를 거치면 소유자 → 게이트웨이, 아니면 소유자 → 모듈이다.
+ * withGatewayHops면 거친 게이트웨이 → 모듈 묶음도 이 호출들로만 만든다.
+ */
+/**
+ * 화면 호출을 소유자 단위로 묶는다. 게이트웨이를 거치면 소유자 → 사슬 맨 앞 게이트웨이, 아니면 소유자 → 모듈이다.
+ * withGatewayHops면 사슬 안 게이트웨이끼리와 맨 뒤 게이트웨이 → 모듈 묶음도 이 호출들로만 만든다.
+ */
+function bundleCalls(g, b, calls, ownerOf, withGatewayHops, liftAgents = true) {
+    for (const call of calls) {
+        const roots = liftAgents ? callerRoots(g, call.from) : [{ id: call.from, via: [] }];
+        for (const root of roots) {
+            const owner = ownerOf(root.id);
+            if (owner === undefined)
+                continue;
+            bundleCall(g, b, call, owner, root.via, withGatewayHops);
+        }
+    }
+}
+function bundleCall(g, b, call, owner, via, withGatewayHops) {
+    const routes = routesInto(g, call.to);
+    const handlers = handlersOf(g, call.to);
+    if (routes.length === 0) {
+        for (const h of handlers)
+            b.add(owner, h.to, call.id, [...via, call.id, h.id]);
+        return;
+    }
+    for (const r of routes) {
+        for (const chain of chainsUp(g, r.from)) {
+            b.add(owner, chain.head, call.id, [...via, call.id, r.id, ...ids(chain.hops)]);
+            if (!withGatewayHops)
+                continue;
+            for (const hop of chain.hops)
+                b.add(hop.from, hop.to, hop.id, [hop.id]);
+        }
+        if (!withGatewayHops)
+            continue;
+        for (const h of handlers)
+            b.add(r.from, h.to, h.id, [r.id, h.id]);
+    }
+}
+/** 게이트웨이가 넘기는 곳을 묶는다. 사슬 안 다음 게이트웨이, 엔드포인트를 받는 모듈, 펼치지 않은 모듈 셋이다 */
+function bundleGatewayRoutes(g, b) {
+    for (const hop of gatewayHops(g))
+        b.add(hop.from, hop.to, hop.id, [hop.id]);
+    for (const r of edgesOf(g, 'routes', 'gateway', 'endpoint')) {
+        for (const h of handlersOf(g, r.to))
+            b.add(r.from, h.to, h.id, [r.id, h.id]);
+    }
+    for (const r of edgesOf(g, 'routes', 'gateway', 'app_module'))
+        b.add(r.from, r.to, r.id, [r.id]);
+}
+function bundleModuleToModule(g, b) {
+    for (const use of edgesOf(g, 'uses', 'app_module', 'external_service')) {
+        for (const call of g.edges.filter((e) => e.kind === 'calls' && e.from === use.to)) {
+            const targetKind = kindOf(g, call.to);
+            if (targetKind === 'app_module') {
+                b.add(use.from, call.to, call.id, [use.id, call.id]);
+            }
+            else if (targetKind === 'endpoint') {
+                for (const h of handlersOf(g, call.to)) {
+                    b.add(use.from, h.to, call.id, [use.id, call.id, h.id]);
+                }
+            }
+            else if (targetKind === 'gateway') {
+                // 게이트웨이 뒤쪽 사슬은 bundleGatewayRoutes가 따로 묶는다
+                b.add(use.from, call.to, call.id, [use.id, call.id]);
+            }
+        }
+    }
+}
+/** 클라이언트가 부른 게이트웨이에서 routes를 앞으로 따라간다. 받는 쪽 노드마다 단계 수를 같이 낸다 */
+function routesDown(g, gatewayId) {
+    const edges = [];
+    const depth = new Map([[gatewayId, 0]]);
+    const queue = [gatewayId];
+    while (queue.length > 0) {
+        const at = queue.shift();
+        const d = depth.get(at);
+        for (const r of g.edges.filter((e) => e.kind === 'routes' && e.from === at)) {
+            edges.push(r);
+            const targetKind = kindOf(g, r.to);
+            if (!depth.has(r.to))
+                depth.set(r.to, d + 1);
+            if (targetKind === 'gateway' && depth.get(r.to) === d + 1)
+                queue.push(r.to);
+            if (targetKind === 'endpoint') {
+                for (const h of handlersOf(g, r.to)) {
+                    edges.push(h);
+                    if (!depth.has(h.to))
+                        depth.set(h.to, d + 2);
+                }
+            }
+        }
+    }
+    return { edges, depth };
+}
+/**
+ * 서비스에서 출발해 게이트웨이를 거쳐 닿는 노드. 서버에서 나가는 선은 따라가지 않는다.
+ * 다만 inProcess 선은 한 프로세스 안에서 핸들러가 엔진을 부르는 것이라 외부로 치지 않고 따라간다
+ */
+function frontReach(g, edges, inProcess = new Set()) {
+    const front = new Set([...g.nodeById.values()].filter((n) => n.kind === 'service').map((n) => n.id));
+    // 스킬이 안 부르고 세션이 바로 부르는 도구의 핸들러는 서비스에서 안 닿는다. 그 핸들러가 부르는 엔진도 같은 프로세스라 출발점에 넣는다
+    for (const e of edges)
+        if (inProcess.has(e.id))
+            front.add(e.from);
+    const queue = [...front];
+    while (queue.length > 0) {
+        const at = queue.shift();
+        const kind = kindOf(g, at);
+        const open = kind === 'service' || kind === 'gateway';
+        for (const e of edges) {
+            if (e.from !== at || front.has(e.to))
+                continue;
+            if (!open && !inProcess.has(e.id))
+                continue;
+            front.add(e.to);
+            queue.push(e.to);
+        }
+    }
+    return front;
+}
+/** 서버에서 나가는 선으로만 닿는 노드. 서비스 쪽에서 닿는 노드는 뺀다 */
+function externalReach(g, edges, front) {
+    const ext = new Set();
+    const queue = [];
+    for (const e of edges) {
+        if (kindOf(g, e.from) !== 'app_module' || front.has(e.to) || ext.has(e.to))
+            continue;
+        ext.add(e.to);
+        queue.push(e.to);
+    }
+    while (queue.length > 0) {
+        const at = queue.shift();
+        for (const e of edges) {
+            if (e.from !== at || front.has(e.to) || ext.has(e.to))
+                continue;
+            ext.add(e.to);
+            queue.push(e.to);
+        }
+    }
+    return ext;
+}
+const ROOT_KINDS = new Set([
+    'client',
+    'service',
+    'micro_app',
+    'gateway',
+    'app_module',
+    'datastore',
+]);
+/** 환경이 prod이거나 비어 있는 노드. 환경을 모르는 노드는 prod 쪽으로 친다 */
+function isProdOrUnknown(n) {
+    return n.environment === undefined || n.environment === 'prod';
+}
+/** prod가 아닌 노드와 거기 걸린 엣지를 뺀 그래프. 전체보기는 이걸로 묶어 dev 경로가 묶음 선 건수에 안 섞이게 한다 */
+function prodGraph(g) {
+    const nodeById = new Map([...g.nodeById].filter(([, n]) => isProdOrUnknown(n)));
+    const edges = g.edges.filter((e) => nodeById.has(e.from) && nodeById.has(e.to));
+    const edgeById = new Map(edges.map((e) => [e.id, e]));
+    const parentOf = new Map([...g.parentOf].filter(([c, p]) => nodeById.has(c) && nodeById.has(p)));
+    return { nodeById, edgeById, edges, parentOf };
+}
+/** 서버가 읽고 쓰는 저장소. 테이블에 걸린 선은 그 테이블이 속한 저장소로 올려 묶는다 */
+/** 핸들러 모듈이 같은 프로세스의 엔진 모듈을 쓰는 선. 하네스 MCP 서버에서 도구 핸들러가 엔진을 부르는 자리다 */
+function moduleUses(g) {
+    return edgesOf(g, 'uses', 'app_module', 'app_module');
+}
+/**
+ * 아무도 calls로 부르지 않는 MCP 도구를 parent 서비스에서 핸들러로 잇는다. 스킬 없는 MCP 서버 레포는 클라이언트가 도구를 바로 불러
+ * 서비스에서 서버로 가는 선이 하나도 안 생기기 때문이다. 스킬이 부르는 도구는 그 호출로 이미 묶이니 건수가 두 번 세지지 않게 뺀다
+ */
+function bundleDirectTools(g, b) {
+    const called = new Set(g.edges.filter((e) => e.kind === 'calls').map((e) => e.to));
+    for (const n of g.nodeById.values()) {
+        if (n.kind !== 'endpoint' || n.protocol !== 'mcp' || called.has(n.id))
+            continue;
+        const owner = g.parentOf.get(n.id);
+        if (owner === undefined || kindOf(g, owner) !== 'service')
+            continue;
+        for (const h of handlersOf(g, n.id))
+            b.add(owner, h.to, n.id, [h.id]);
+    }
+}
+/**
+ * MCP 도구 핸들러가 같은 프로세스에서 부르는 엔진 모듈. 전체 그림에서 핸들러와 엔진을 한 열에 두면 elk가 나가는 선 없는 핸들러를
+ * 엔진 층으로 밀어 버려 엔진에 따로 한 열을 준다. 핸들러를 겸하는 모듈은 핸들러 열에 남긴다
+ */
+function mcpEngines(g) {
+    const handlers = new Set(g.edges
+        .filter((e) => e.kind === 'handles' && g.nodeById.get(e.from)?.protocol === 'mcp')
+        .filter((e) => kindOf(g, e.to) === 'app_module')
+        .map((e) => e.to));
+    const engines = new Set();
+    const queue = [...handlers];
+    const uses = moduleUses(g);
+    while (queue.length > 0) {
+        const at = queue.shift();
+        for (const u of uses) {
+            if (u.from !== at || handlers.has(u.to) || engines.has(u.to))
+                continue;
+            engines.add(u.to);
+            queue.push(u.to);
+        }
+    }
+    return engines;
+}
+function bundleDatastores(g, b) {
+    for (const e of g.edges) {
+        if (e.kind !== 'reads_writes' || kindOf(g, e.from) !== 'app_module')
+            continue;
+        const toKind = kindOf(g, e.to);
+        const store = toKind === 'datastore' ? e.to : toKind === 'db_table' ? g.parentOf.get(e.to) : undefined;
+        if (store === undefined || kindOf(g, store) !== 'datastore')
+            continue;
+        b.add(e.from, store, e.id, [e.id]);
+    }
+}
+function rootLevel(full, apps) {
+    const g = prodGraph(full);
+    const nodeIds = new Set([...g.nodeById.values()].filter((n) => ROOT_KINDS.has(n.kind)).map((n) => n.id));
+    // 범용 component는 묶을 위계가 없다. 부모 없는 것만 전체에 세우고 그 사이 선은 그대로 긋는다
+    const components = new Set([...g.nodeById.values()]
+        .filter((n) => n.kind === 'component' && !g.parentOf.has(n.id))
+        .map((n) => n.id));
+    for (const id of components)
+        nodeIds.add(id);
+    const b = new Bundler();
+    bundleCalls(g, b, screenCalls(g), (s) => ownerOf(g, s), false);
+    bundleGatewayRoutes(g, b);
+    bundleModuleToModule(g, b);
+    bundleDirectTools(g, b);
+    const inProcessUses = new Set();
+    for (const u of moduleUses(g)) {
+        b.add(u.from, u.to, u.id, [u.id]);
+        inProcessUses.add(`bundle:${u.from}->${u.to}`);
+    }
+    bundleDatastores(g, b);
+    // 클라이언트가 플러그인을 싣는 선은 테두리를 넘는 일이 없어 그대로 그린다
+    const clientLoads = g.edges
+        .filter((e) => e.kind === 'loads' && kindOf(g, e.from) === 'client' && nodeIds.has(e.to))
+        .map(asDetail);
+    // 같은 서비스 안 로드는 테두리가 이미 말해준다. 테두리를 넘는 로드(여러 호스트가 같이 쓰는 리모트)만 선으로 남긴다
+    const crossing = apps.loads
+        .filter((e) => nodeIds.has(e.from) && nodeIds.has(e.to))
+        .filter((e) => g.parentOf.get(e.from) !== g.parentOf.get(e.to))
+        .map(asDetail);
+    const componentEdges = g.edges
+        .filter((e) => components.has(e.from) && components.has(e.to))
+        .map(asDetail);
+    const edges = [...b.toEdges(g), ...crossing, ...clientLoads, ...componentEdges].sort(byId);
+    const frames = [...apps.appsOf.keys()]
+        .filter((svc) => nodeIds.has(svc))
+        .sort(compareStr)
+        .map((svc) => ({ head: svc, members: orderedApps(apps, svc).filter((a) => nodeIds.has(a)) }));
+    const ext = externalReach(g, edges, frontReach(g, edges, inProcessUses));
+    const rankOverride = new Map();
+    const laneOverride = new Map();
+    const engines = mcpEngines(g);
+    // 엔진에 한 열을 내주면 그 뒤 열이 한 칸씩 밀린다. MCP 핸들러가 없는 그림은 예전 열 번호 그대로다
+    const shift = engines.size > 0 ? 1 : 0;
+    for (const id of engines)
+        if (!ext.has(id))
+            rankOverride.set(id, PARTITION_RANK.app_module + 1);
+    for (const id of ext) {
+        const kind = kindOf(g, id);
+        if (kind === 'datastore') {
+            rankOverride.set(id, DATASTORE_ROOT_RANK + shift);
+            continue;
+        }
+        if (kind !== 'gateway' && kind !== 'app_module')
+            continue;
+        rankOverride.set(id, (kind === 'gateway' ? EXTERNAL_GATEWAY_RANK : EXTERNAL_MODULE_RANK) + shift);
+        laneOverride.set(id, 'external');
+    }
+    return {
+        id: ROOT_LEVEL_ID,
+        kind: 'root',
+        title: '전체',
+        trail: [ROOT_LEVEL_ID],
+        nodeIds,
+        edges,
+        rankOverride,
+        laneOverride,
+        laneOfKind: { service: 'service', micro_app: 'service' },
+        ...(frames.length > 0 ? { frames } : {}),
+    };
+}
+/**
+ * 진입 앱을 못 정한 마이크로 프론트엔드 서비스 레벨. 앱 카드를 늘어놓고 하나씩 들어가게 한다.
+ * 어느 앱이 위계 맨 위인지 모르니 treeLevel처럼 한 나무로 세우지 못한다
+ */
+function ownerLevel(g, owner, kind, trail, extra = {}) {
+    const id = trail[trail.length - 1];
+    const children = extra.children ?? [];
+    const nodeIds = new Set();
+    for (const n of g.nodeById.values()) {
+        if (n.kind === 'feature' && g.parentOf.get(n.id) === owner.id)
+            nodeIds.add(n.id);
+        if (isSurface(g, n.id) && g.parentOf.get(n.id) === owner.id)
+            nodeIds.add(n.id);
+    }
+    const b = new Bundler();
+    const mine = (screenId) => {
+        const unit = unitOf(g, screenId);
+        return unit !== undefined && ownerOf(g, unit) === owner.id;
+    };
+    const calls = screenCalls(g).filter((c) => mine(c.from));
+    bundleCalls(g, b, calls, (s) => unitOf(g, s), true);
+    for (const nav of edgesOf(g, 'navigates', 'screen', 'screen')) {
+        if (!mine(nav.from) || !mine(nav.to))
+            continue;
+        const from = unitOf(g, nav.from);
+        const to = unitOf(g, nav.to);
+        if (from !== undefined && to !== undefined)
+            b.add(from, to, nav.id, [nav.id]);
+    }
+    const edges = b.toEdges(g);
+    for (const e of edges) {
+        nodeIds.add(e.from);
+        nodeIds.add(e.to);
+    }
+    const infra = infraChainOf(g, owner.id);
+    const base = {
+        id,
+        kind,
+        focusId: owner.id,
+        title: owner.displayName ?? owner.label,
+        trail,
+        nodeIds,
+        edges,
+        laneOfKind: { feature: 'unit', screen: 'unit', skill: 'unit' },
+    };
+    if (infra.length === 0 && children.length === 0)
+        return base;
+    // 서빙 인프라가 붙으면 도메인부터 서버까지 한 줄로 읽히게 소유자 카드를 기능 영역 레인 맨 위에 세우고
+    // 포함 선으로 기능 영역에 잇는다. 포커스가 이 선을 타고 도메인에서 서버까지 이어진다
+    const units = [...nodeIds].filter((n) => g.parentOf.get(n) === owner.id).sort(compareStr);
+    const contains = units.map((u) => ({
+        id: `contains:${owner.id}->${u}`,
+        from: owner.id,
+        to: u,
+        kind: 'contains',
+        count: 1,
+        memberEdgeIds: [],
+        lineStyle: 'solid',
+    }));
+    const rankOverride = new Map();
+    for (const n of nodeIds)
+        rankOverride.set(n, PARTITION_RANK[kindOf(g, n)] + INFRA_RANK_SHIFT);
+    rankOverride.set(owner.id, PARTITION_RANK.service + INFRA_RANK_SHIFT);
+    nodeIds.add(owner.id);
+    // 앱 카드는 기능 영역과 같은 열에 세운다. 소유자 아래 한 단계라는 점이 기능 영역과 같아서다
+    for (const c of children) {
+        nodeIds.add(c.to);
+        rankOverride.set(c.to, PARTITION_RANK.feature + INFRA_RANK_SHIFT);
+    }
+    for (const e of infra) {
+        for (const n of [e.from, e.to]) {
+            nodeIds.add(n);
+            const r = SERVICE_INFRA_RANK[kindOf(g, n)];
+            if (r !== undefined)
+                rankOverride.set(n, r);
+        }
+    }
+    return {
+        ...base,
+        edges: [...edges, ...contains, ...children, ...dedupe(infra).map(asDetail)].sort(byId),
+        rankOverride,
+        laneOfKind: {
+            feature: 'unit',
+            screen: 'unit',
+            skill: 'unit',
+            service: 'unit',
+            micro_app: 'unit',
+        },
+        pinTop: owner.id,
+        alignToPin: dedupe(infra)
+            .flatMap((e) => [e.from, e.to])
+            .filter((n) => n !== owner.id),
+        ...(children.length > 0 ? { sinkBottom: children.map((c) => c.to) } : {}),
+    };
+}
+// 나무 레벨의 열 순서. 서빙 사슬(0~2) 뒤로 소유자, 불러온 앱, 기능 영역, 화면을 한 열씩 세우고 게이트웨이부터는 그 뒤로 민다
+const TREE_RANK = { owner: 3, loaded: 4, feature: 5, screen: 6 };
+const TREE_RANK_SHIFT = TREE_RANK.screen;
+/**
+ * 소유자 하나를 펼친 레벨. 소유자 → 불러온 앱 → 기능 영역 → 화면을 열로 나눠 위계가 왼쪽에서 오른쪽으로 읽히게 하고
+ * 앞에는 소유자 서빙 사슬, 뒤에는 화면이 부르는 게이트웨이와 서버를 잇는다.
+ * 마이크로 프론트엔드든 아니든 같은 열 구성이라야 서비스끼리 오가며 봐도 자리 감각이 안 바뀐다
+ */
+function treeLevel(g, spec) {
+    const { id, root: entry, loads } = spec;
+    const remotes = new Set(loads.map((e) => e.to));
+    const owners = new Set([entry.id, ...remotes]);
+    const nodeIds = new Set(owners);
+    const rankOverride = new Map([[entry.id, TREE_RANK.owner]]);
+    const laneOverride = new Map([[entry.id, spec.rootLane]]);
+    for (const r of remotes) {
+        rankOverride.set(r, TREE_RANK.loaded);
+        laneOverride.set(r, 'remote');
+    }
+    const tree = [];
+    const children = new Map([[entry.id, [...remotes]]]);
+    // 리모트 블록을 먼저 쌓고 호스트 자기 기능 영역, 호스트에 바로 단 화면 순으로 잇는다. 첫 줄이 호스트 → 리모트 → 기능 → 화면으로 읽힌다
+    const sortKey = new Map();
+    for (const r of remotes)
+        sortKey.set(r, 0);
+    for (const n of [...g.nodeById.values()].sort(byId)) {
+        if (n.kind !== 'feature' && !isSurface(g, n.id))
+            continue;
+        const owner = ownerOf(g, n.id);
+        const parent = g.parentOf.get(n.id);
+        if (owner === undefined || !owners.has(owner) || parent === undefined)
+            continue;
+        nodeIds.add(n.id);
+        rankOverride.set(n.id, n.kind === 'feature' ? TREE_RANK.feature : TREE_RANK.screen);
+        children.set(parent, [...(children.get(parent) ?? []), n.id]);
+        sortKey.set(n.id, n.kind === 'feature' ? 1 : 2);
+        tree.push({
+            id: `contains:${parent}->${n.id}`,
+            from: parent,
+            to: n.id,
+            kind: 'contains',
+            count: 1,
+            memberEdgeIds: [],
+            lineStyle: 'solid',
+        });
+    }
+    // 스킬이 띄우는 에이전트는 스킬 바로 뒤 열에 세우고 띄운 선을 그대로 그린다
+    const spawns = spawnedFrom(g, [...nodeIds].filter((n) => kindOf(g, n) === 'skill'));
+    for (const e of spawns) {
+        if (nodeIds.has(e.to))
+            continue;
+        nodeIds.add(e.to);
+        rankOverride.set(e.to, PARTITION_RANK.agent + TREE_RANK_SHIFT);
+    }
+    const invokes = g.edges.filter((e) => e.kind === 'invokes' && nodeIds.has(e.from) && nodeIds.has(e.to));
+    const b = new Bundler();
+    const calls = screenCalls(g).filter((c) => nodeIds.has(c.from));
+    // MCP 도구는 하네스 그림의 중심이라 묶어 접지 않고 카드로 세운다. 웹 API처럼 수백 개가 되는 일이 없다
+    const toolCalls = calls.filter((c) => g.nodeById.get(c.to)?.protocol === 'mcp');
+    const toolEdges = dedupe([...toolCalls, ...toolCalls.flatMap((c) => handlersOf(g, c.to))]);
+    for (const e of toolEdges) {
+        for (const n of [e.from, e.to]) {
+            if (nodeIds.has(n))
+                continue;
+            nodeIds.add(n);
+            rankOverride.set(n, PARTITION_RANK[kindOf(g, n)] + TREE_RANK_SHIFT);
+        }
+    }
+    bundleCalls(g, b, calls.filter((c) => !toolCalls.includes(c)), (s) => s, true, false);
+    const bundles = b.toEdges(g);
+    for (const e of bundles) {
+        for (const n of [e.from, e.to]) {
+            if (nodeIds.has(n))
+                continue;
+            nodeIds.add(n);
+            rankOverride.set(n, PARTITION_RANK[kindOf(g, n)] + TREE_RANK_SHIFT);
+        }
+    }
+    const infra = dedupe(infraChainOf(g, entry.id));
+    for (const e of infra) {
+        for (const n of [e.from, e.to]) {
+            nodeIds.add(n);
+            const r = SERVICE_INFRA_RANK[kindOf(g, n)];
+            if (r !== undefined)
+                rankOverride.set(n, r);
+        }
+    }
+    return {
+        id,
+        kind: spec.kind,
+        focusId: entry.id,
+        title: spec.title,
+        trail: spec.trail,
+        nodeIds,
+        edges: [
+            ...bundles,
+            ...tree,
+            ...loads.map(asDetail),
+            ...infra.map(asDetail),
+            ...dedupe([...spawns, ...invokes, ...toolEdges]).map(asDetail),
+        ].sort(byId),
+        rankOverride,
+        laneOverride,
+        laneOfKind: { feature: 'unit', screen: 'screen' },
+        pinTop: entry.id,
+        tree: { root: entry.id, children, sortKey },
+        alignToPin: infra.flatMap((e) => [e.from, e.to]).filter((n) => n !== entry.id),
+    };
+}
+// 서비스 레벨 왼쪽 인프라 레인. 요청이 들어오는 순서(도메인 → CDN → 버킷이나 SSR 서버)대로 놓고 나머지는 그 뒤로 민다
+const SERVICE_INFRA_RANK = {
+    domain: 0,
+    cdn: 1,
+    bucket: 2,
+    deploy_target: 2,
+};
+const INFRA_RANK_SHIFT = 3;
+/** 서비스를 서빙하는 버킷이나 SSR 서버에서 CDN, 도메인까지 거슬러 올라간 엣지 */
+function infraChainOf(g, serviceId) {
+    const into = (kind, to, fromKind) => g.edges.filter((e) => e.kind === kind && e.to === to && kindOf(g, e.from) === fromKind);
+    const serves = [
+        ...into('serves', serviceId, 'bucket'),
+        ...into('serves', serviceId, 'deploy_target'),
+    ];
+    const origins = serves.flatMap((s) => into('origin', s.from, 'cdn'));
+    const resolves = [
+        ...origins,
+        ...serves.filter((s) => kindOf(g, s.from) === 'deploy_target'),
+    ].flatMap((o) => into('resolves_to', o.from, 'domain'));
+    return [...serves, ...origins, ...resolves];
+}
+function serverLevel(g, server) {
+    const id = `server:${server.id}`;
+    const picked = [];
+    const rankOverride = new Map();
+    if (server.kind === 'gateway') {
+        picked.push(...g.edges.filter((e) => e.kind === 'routes' && e.from === server.id));
+    }
+    else {
+        picked.push(...g.edges.filter((e) => e.kind === 'handles' && e.to === server.id && kindOf(g, e.from) === 'endpoint'), ...g.edges.filter((e) => e.kind === 'reads_writes' &&
+            e.from === server.id &&
+            (kindOf(g, e.to) === 'db_table' || kindOf(g, e.to) === 'datastore')));
+        for (const use of g.edges.filter((e) => e.kind === 'uses' && e.from === server.id && kindOf(g, e.to) === 'external_service')) {
+            picked.push(use);
+            for (const call of g.edges.filter((e) => e.kind === 'calls' && e.from === use.to)) {
+                const targetKind = kindOf(g, call.to);
+                if (call.to === server.id)
+                    continue;
+                if (targetKind === 'app_module') {
+                    picked.push(call);
+                    rankOverride.set(call.to, RECEIVER_RANK);
+                }
+                else if (targetKind === 'endpoint') {
+                    picked.push(call);
+                    rankOverride.set(call.to, RECEIVER_RANK);
+                    for (const h of handlersOf(g, call.to)) {
+                        if (h.to === server.id)
+                            continue;
+                        picked.push(h);
+                        rankOverride.set(h.to, RECEIVER_RANK + 1);
+                    }
+                }
+                else if (targetKind === 'gateway') {
+                    picked.push(call);
+                    const down = routesDown(g, call.to);
+                    for (const e of down.edges)
+                        if (e.to !== server.id)
+                            picked.push(e);
+                    for (const [nodeId, d] of down.depth) {
+                        if (nodeId !== server.id)
+                            rankOverride.set(nodeId, RECEIVER_RANK + d);
+                    }
+                }
+            }
+        }
+    }
+    const nodeIds = new Set([server.id]);
+    for (const e of picked) {
+        nodeIds.add(e.from);
+        nodeIds.add(e.to);
+    }
+    const laneOverride = new Map();
+    for (const id of rankOverride.keys())
+        laneOverride.set(id, 'external');
+    // 같은 프로세스 안 모듈은 외부가 아니다. 부르는 핸들러는 엔드포인트 열에, 불리는 엔진은 받는 쪽 열에 둔다
+    if (server.kind === 'app_module') {
+        for (const u of moduleUses(g)) {
+            if (u.from !== server.id && u.to !== server.id)
+                continue;
+            picked.push(u);
+            const other = u.from === server.id ? u.to : u.from;
+            nodeIds.add(other);
+            rankOverride.set(other, u.from === server.id ? RECEIVER_RANK : PARTITION_RANK.endpoint);
+            laneOverride.set(other, 'app_module');
+        }
+    }
+    // 레지스트리가 읽어 들이는 에이전트는 받는 쪽 열에 세운다. 스킬이 안 띄우는 에이전트가 드릴다운에 서는 유일한 자리다
+    if (server.kind === 'app_module') {
+        for (const l of edgesOf(g, 'loads', 'app_module', 'agent')) {
+            if (l.from !== server.id)
+                continue;
+            picked.push(l);
+            nodeIds.add(l.to);
+            rankOverride.set(l.to, RECEIVER_RANK);
+            laneOverride.set(l.to, 'agent');
+        }
+    }
+    // 테이블은 받는 쪽 모듈들 뒤 맨 오른쪽 레인에 모은다
+    for (const id of nodeIds) {
+        const kind = kindOf(g, id);
+        if (kind === 'db_table' || kind === 'datastore')
+            rankOverride.set(id, TABLE_RANK_AFTER_RECEIVERS);
+    }
+    const edges = dedupe(picked).map(asDetail);
+    return {
+        id,
+        kind: 'server',
+        focusId: server.id,
+        title: server.displayName ?? server.label,
+        trail: [ROOT_LEVEL_ID, id],
+        nodeIds,
+        edges,
+        rankOverride,
+        laneOverride,
+    };
+}
+function featureLevel(g, feature, ownerTrail) {
+    const id = `feature:${feature.id}`;
+    const screens = new Set([...g.nodeById.values()]
+        .filter((n) => isSurface(g, n.id) && featureOf(g, n.id) === feature.id)
+        .map((n) => n.id));
+    const picked = [];
+    const spawns = spawnedFrom(g, screens);
+    const callers = new Set([...screens, ...spawns.map((e) => e.to)]);
+    picked.push(...spawns, ...g.edges.filter((e) => e.kind === 'invokes' && screens.has(e.from)));
+    for (const call of screenCalls(g).filter((c) => callers.has(c.from))) {
+        const routes = routesInto(g, call.to);
+        picked.push(call, ...routes, ...handlersOf(g, call.to));
+        for (const r of routes) {
+            for (const chain of chainsUp(g, r.from))
+                picked.push(...chain.hops);
+        }
+    }
+    picked.push(...edgesOf(g, 'navigates', 'screen', 'screen').filter((e) => screens.has(e.from) && screens.has(e.to)));
+    const nodeIds = new Set(screens);
+    for (const e of picked) {
+        nodeIds.add(e.from);
+        nodeIds.add(e.to);
+    }
+    return {
+        id,
+        kind: 'feature',
+        focusId: feature.id,
+        title: feature.displayName ?? feature.label,
+        trail: [...ownerTrail, id],
+        nodeIds,
+        edges: dedupe(picked).map(asDetail),
+    };
+}
+function dedupe(edges) {
+    const seen = new Map();
+    for (const e of edges)
+        seen.set(e.id, e);
+    return [...seen.values()].sort(byId);
+}
+/** 자식을 순서 키, elk가 정한 높이, id 순으로 줄 세운다. 같은 블록 안에서는 elk가 줄인 교차를 그대로 살린다 */
+function treeOrder(layout, tree) {
+    const yOf = new Map(layout.nodes.map((n) => [n.id, n.y]));
+    const children = new Map();
+    for (const [parent, list] of tree.children) {
+        children.set(parent, [...list].sort((a, b) => (tree.sortKey.get(a) ?? 0) - (tree.sortKey.get(b) ?? 0) ||
+            (yOf.get(a) ?? 0) - (yOf.get(b) ?? 0) ||
+            compareStr(a, b)));
+    }
+    return { root: tree.root, children };
+}
+/**
+ * tree 전략의 레벨. 전체는 parent 없는 노드를, 자식이 있는 노드마다 그 직속 자식을 세운다.
+ * 자손끼리의 선은 이 레벨에 선 카드까지 끌어올려 묶는다. 밖으로 나가는 선은 상대를 이 레벨의 형제 높이까지 올려 같이 세운다
+ */
+function groupDrafts(full) {
+    const g = prodGraph(full);
+    const children = new Map();
+    for (const [c, p] of [...g.parentOf].sort((a, b) => compareStr(a[0], b[0]))) {
+        children.set(p, [...(children.get(p) ?? []), c]);
+    }
+    const chainOf = (id) => {
+        const out = [id];
+        for (let p = g.parentOf.get(id); p !== undefined; p = g.parentOf.get(p))
+            out.push(p);
+        return out;
+    };
+    const levelIdOf = (id) => `group:${id}`;
+    const enter = {};
+    for (const id of children.keys())
+        enter[id] = levelIdOf(id);
+    const draftFor = (focus) => {
+        const members = new Set(focus === undefined
+            ? [...g.nodeById.keys()].filter((id) => !g.parentOf.has(id))
+            : children.get(focus));
+        // 이 레벨에 선 카드 중 id를 품은 것. 없으면 이 레벨 밖이다
+        const lift = (id) => chainOf(id).find((x) => members.has(x));
+        const around = new Set(focus === undefined ? [] : chainOf(focus));
+        // 밖의 끝점은 이 레벨을 품은 조상 바로 아래까지만 올린다. 그래야 옆 서브넷이나 옆 조직처럼 한 단계 위 형제로 보인다
+        const liftOutside = (id) => {
+            let x = id;
+            for (let p = g.parentOf.get(x); p !== undefined && !around.has(p); p = g.parentOf.get(x))
+                x = p;
+            return x;
+        };
+        const nodeIds = new Set(members);
+        const sendsOut = new Set();
+        const receives = new Set();
+        const b = new Bundler();
+        const detail = [];
+        const pairs = new Map();
+        for (const e of g.edges) {
+            let from = lift(e.from);
+            let to = lift(e.to);
+            if (from === undefined && to === undefined)
+                continue;
+            if (focus !== undefined && from === undefined)
+                from = liftOutside(e.from);
+            if (focus !== undefined && to === undefined)
+                to = liftOutside(e.to);
+            if (from === undefined || to === undefined || from === to)
+                continue;
+            nodeIds.add(from);
+            nodeIds.add(to);
+            if (!members.has(from))
+                sendsOut.add(from);
+            if (!members.has(to))
+                receives.add(to);
+            const k = `${from}\u0000${to}`;
+            pairs.set(k, [...(pairs.get(k) ?? []), e]);
+        }
+        for (const [k, es] of pairs) {
+            const [from, to] = k.split('\u0000');
+            // 끌어올리지 않은 선 하나는 원래 kind 그대로 그려야 범례 글자가 맞는다
+            if (es.length === 1 && es[0].from === from && es[0].to === to)
+                detail.push(asDetail(es[0]));
+            else
+                for (const e of es)
+                    b.add(from, to, e.id, [e.id]);
+        }
+        // 바깥 카드를 kind 순위대로 두면 안쪽 카드 사이에 끼어 선이 크게 돈다. 받는 쪽은 오른쪽 끝, 보내기만 하는 쪽은 왼쪽 끝에 모은다.
+        // 한 열에 다 쌓으면 바깥 카드가 많을 때 그림이 세로로만 길어진다. 그래서 kind 순위마다 열을 나누고 한 열이 넘치면 옆 열로 넘긴다
+        const ranks = [...members].map((id) => PARTITION_RANK[g.nodeById.get(id).kind]);
+        const rankOverride = new Map();
+        const laneOverride = new Map();
+        const outsideColumns = (ids) => {
+            const byRank = new Map();
+            for (const id of [...ids].sort(compareStr)) {
+                const r = PARTITION_RANK[g.nodeById.get(id).kind];
+                byRank.set(r, [...(byRank.get(r) ?? []), id]);
+            }
+            return [...byRank.keys()]
+                .sort((x, y) => x - y)
+                .flatMap((r) => {
+                const list = byRank.get(r);
+                return Array.from({ length: Math.ceil(list.length / OUTSIDE_PER_COLUMN) }, (_, i) => list.slice(i * OUTSIDE_PER_COLUMN, (i + 1) * OUTSIDE_PER_COLUMN));
+            });
+        };
+        const right = outsideColumns([...receives]);
+        right.forEach((col, i) => {
+            for (const id of col) {
+                rankOverride.set(id, Math.max(...ranks) + 1 + i);
+                laneOverride.set(id, 'outside_to');
+            }
+        });
+        const left = outsideColumns([...sendsOut].filter((id) => !receives.has(id)));
+        left.forEach((col, i) => {
+            for (const id of col) {
+                rankOverride.set(id, Math.min(...ranks) - left.length + i);
+                laneOverride.set(id, 'outside_from');
+            }
+        });
+        const node = focus === undefined ? undefined : g.nodeById.get(focus);
+        const trail = [
+            ROOT_LEVEL_ID,
+            ...(focus === undefined ? [] : chainOf(focus).reverse().map(levelIdOf)),
+        ];
+        return {
+            id: focus === undefined ? ROOT_LEVEL_ID : levelIdOf(focus),
+            kind: focus === undefined ? 'root' : 'group',
+            ...(focus !== undefined ? { focusId: focus } : {}),
+            title: node === undefined ? '전체' : (node.displayName ?? node.label),
+            trail,
+            nodeIds,
+            edges: [...b.toEdges(g), ...detail].sort(byId),
+            ...(rankOverride.size > 0 ? { rankOverride, laneOverride } : {}),
+        };
+    };
+    const drafts = [draftFor(undefined), ...[...children.keys()].sort(compareStr).map(draftFor)];
+    return { drafts, enter };
+}
+/** service 노드가 하나라도 그려지면 드릴다운으로 그린다 */
+export function shouldDrillDown(validated) {
+    return (validated.ir.nodes.some((n) => n.kind === 'service' && validated.drawableNodeIds.has(n.id)) ||
+        // 독립 흐름은 레벨로만 그려지므로 서비스가 없어도 드릴다운 HTML이 필요하다
+        (validated.ir.flows ?? []).some((f) => f.service === undefined) ||
+        // 질문별 그림도 레벨로만 붙는다
+        (validated.drawableProjectionIds?.size ?? 0) > 0 ||
+        // tree 팩은 포함 관계가 하나라도 있으면 한 단계씩 들어가 본다
+        (irVocabulary(validated.ir).drilldown === 'tree' &&
+            validated.ir.nodes.some((n) => n.parent !== undefined &&
+                validated.drawableNodeIds.has(n.id) &&
+                validated.drawableNodeIds.has(n.parent))));
+}
+/**
+ * 검증된 IR에서 드릴다운 레벨과 묶음 엣지를 계산하고 레벨마다 elkjs 좌표를 미리 낸다.
+ * 정렬은 전부 id 기준이라 같은 입력이면 같은 결과가 나온다.
+ */
+/** 서비스 id → 그린 흐름 수. 카드 배지 폭과 글자가 같은 수를 써야 한다 */
+export function flowCountByService(flows) {
+    const out = {};
+    for (const f of flows)
+        if (f.service !== undefined)
+            out[f.service] = (out[f.service] ?? 0) + 1;
+    return out;
+}
+export async function computeDrilldown(validated) {
+    const g = buildGraph(validated);
+    const facts = computeServiceFacts([...g.nodeById.values()], g.edges);
+    const sorted = [...g.nodeById.values()].sort(byId);
+    const bands = bandGroupsOf(validated.ir);
+    const apps = indexMicroApps(sorted, g.edges);
+    const tree = irVocabulary(validated.ir).drilldown === 'tree' ? groupDrafts(g) : undefined;
+    const drafts = tree?.drafts ?? [rootLevel(g, apps)];
+    const enter = tree?.enter ?? {};
+    const entryApps = new Set(apps.entryOf.values());
+    const trailOf = (ownerId) => {
+        const owner = g.nodeById.get(ownerId);
+        if (owner?.kind === 'service')
+            return [ROOT_LEVEL_ID, `service:${owner.id}`];
+        if (owner?.kind !== 'micro_app')
+            return undefined;
+        const parent = g.parentOf.get(owner.id);
+        // 진입 앱은 서비스 레벨이 곧 그 앱 레벨이다. 사용자가 서비스로 들어가면 처음 받는 게 이 앱이라서다
+        if (entryApps.has(owner.id))
+            return [ROOT_LEVEL_ID, `service:${parent}`];
+        return [
+            ROOT_LEVEL_ID,
+            ...(parent !== undefined && kindOf(g, parent) === 'service' ? [`service:${parent}`] : []),
+            `app:${owner.id}`,
+        ];
+    };
+    const loadsFrom = (appId) => apps.loads.filter((e) => e.from === appId && e.to !== appId);
+    // 진입 앱을 못 정한 서비스는 앱 카드를 서비스 아래에 포함 선으로 늘어놓고 하나씩 들어가게 한다
+    const appCardsOf = (serviceId) => orderedApps(apps, serviceId).map((a) => ({
+        id: `contains:${serviceId}->${a}`,
+        from: serviceId,
+        to: a,
+        kind: 'contains',
+        count: 1,
+        memberEdgeIds: [],
+        lineStyle: 'solid',
+    }));
+    for (const n of tree === undefined ? sorted : []) {
+        if (n.kind === 'service') {
+            const entry = g.nodeById.get(apps.entryOf.get(n.id) ?? '');
+            const trail = trailOf(n.id);
+            const id = trail[trail.length - 1];
+            const title = n.displayName ?? n.label;
+            const level = entry !== undefined
+                ? treeLevel(g, {
+                    id,
+                    kind: 'service',
+                    title,
+                    trail,
+                    root: entry,
+                    rootLane: 'host',
+                    loads: loadsFrom(entry.id),
+                })
+                : apps.appsOf.has(n.id)
+                    ? ownerLevel(g, n, 'service', trail, { children: appCardsOf(n.id) })
+                    : treeLevel(g, {
+                        id,
+                        kind: 'service',
+                        title,
+                        trail,
+                        root: n,
+                        rootLane: 'service',
+                        loads: [],
+                    });
+            drafts.push(level);
+            enter[n.id] = level.id;
+            if (entry !== undefined)
+                enter[entry.id] = level.id;
+        }
+        else if (n.kind === 'micro_app') {
+            if (entryApps.has(n.id))
+                continue;
+            const trail = trailOf(n.id);
+            const level = treeLevel(g, {
+                id: trail[trail.length - 1],
+                kind: 'app',
+                title: n.displayName ?? n.label,
+                trail,
+                root: n,
+                rootLane: 'remote',
+                loads: loadsFrom(n.id),
+            });
+            drafts.push(level);
+            enter[n.id] = level.id;
+        }
+        else if (n.kind === 'gateway' || n.kind === 'app_module') {
+            const level = serverLevel(g, n);
+            drafts.push(level);
+            enter[n.id] = level.id;
+        }
+        else if (n.kind === 'feature') {
+            const ownerTrail = trailOf(g.parentOf.get(n.id) ?? '');
+            if (ownerTrail === undefined)
+                continue;
+            const level = featureLevel(g, n, ownerTrail);
+            drafts.push(level);
+            enter[n.id] = level.id;
+        }
+    }
+    const [root, ...rest] = drafts;
+    const ordered = [root, ...rest.sort(byId)];
+    const levels = [];
+    const staged = assignStages(validated.ir);
+    const flowLevels = computeFlowLevels(validated);
+    const flowCount = flowCountByService(flowLevels);
+    for (const d of ordered) {
+        const nodeIds = [...d.nodeIds].filter((id) => g.nodeById.has(id)).sort(compareStr);
+        const layoutNodes = nodeIds.map((id) => {
+            const node = g.nodeById.get(id);
+            const f = facts.get(id);
+            return {
+                id,
+                label: node.label,
+                ...(node.displayName !== undefined ? { displayName: node.displayName } : {}),
+                ...(node.displayNameInferred ? { displayNameInferred: true } : {}),
+                rank: d.rankOverride?.get(id) ?? PARTITION_RANK[node.kind],
+                lane: d.laneOverride?.get(id) ?? d.laneOfKind?.[node.kind] ?? laneOfNode(node),
+                ...(staged !== undefined ? { stage: staged.indexOf.get(id) } : {}),
+                kind: displayKindOf(node),
+                ...(chipTextOverride(node) !== undefined ? { chip: chipTextOverride(node) } : {}),
+                ...(d.orderOverride?.has(id)
+                    ? { order: d.orderOverride.get(id) }
+                    : node.environment !== undefined
+                        ? { order: environmentRank(node.environment) }
+                        : {}),
+                ...(f !== undefined && f.platforms.length > 0 ? { platforms: f.platforms } : {}),
+                ...(f?.webHosting !== undefined ? { webHosting: f.webHosting } : {}),
+                ...(f?.prodDomain !== undefined ? { secondLine: f.prodDomain } : {}),
+                ...(flowCount[id] !== undefined ? { flows: flowCount[id] } : {}),
+            };
+        });
+        const laid = await computeGraphLayout(layoutNodes, d.edges, staged?.labels);
+        const pinned = d.pinTop !== undefined ? pinToColumnTop(laid, d.pinTop) : laid;
+        const treed = d.tree !== undefined ? stackTree(pinned, treeOrder(pinned, d.tree)) : pinned;
+        const aligned = d.pinTop !== undefined && d.alignToPin !== undefined
+            ? alignColumnsTo(treed, d.pinTop, d.alignToPin)
+            : treed;
+        const sunk = d.sinkBottom !== undefined ? sinkToColumnBottom(aligned, d.sinkBottom) : aligned;
+        const framed = d.frames !== undefined ? stackFrames(sunk, d.frames) : sunk;
+        const banded = stackBands(framed, bands, validated.ir.edges);
+        const layout = d.frames !== undefined ? frameRects(banded, d.frames) : banded;
+        levels.push({
+            id: d.id,
+            kind: d.kind,
+            ...(d.focusId !== undefined ? { focusId: d.focusId } : {}),
+            title: d.title,
+            trail: d.trail,
+            nodeIds,
+            edges: d.edges,
+            layout,
+        });
+    }
+    return { levels, enter, flows: flowLevels };
+}
+//# sourceMappingURL=drilldown.js.map