whygraph 0.1.0

package/dist/entity/parser.js

@@ -0,0 +1,166 @@
+import matter from "gray-matter";
+const STRUCTURAL_LABELS = new Set(["App", "Feature", "Component"]);
+/**
+ * Parse markdown body into named sections keyed by ## headings.
+ * Returns a map of heading name (lowercase) -> trimmed content.
+ */
+function parseSections(body) {
+    const sections = new Map();
+    const lines = body.split("\n");
+    let currentKey = null;
+    let currentLines = [];
+    for (const line of lines) {
+        const headingMatch = line.match(/^## (.+)$/);
+        if (headingMatch) {
+            if (currentKey !== null) {
+                sections.set(currentKey, currentLines.join("\n").trim());
+            }
+            currentKey = headingMatch[1].trim().toLowerCase();
+            currentLines = [];
+        }
+        else if (currentKey !== null) {
+            currentLines.push(line);
+        }
+    }
+    /* v8 ignore next 2 */
+    if (currentKey !== null) {
+        sections.set(currentKey, currentLines.join("\n").trim());
+    }
+    return sections;
+}
+function isValidStructuralLabel(label) {
+    return STRUCTURAL_LABELS.has(label);
+}
+function parseStructuralNode(data, body) {
+    const { id, label, name, status, created_at, updated_at } = data;
+    /* v8 ignore start */
+    if (typeof id !== "string" ||
+        typeof label !== "string" ||
+        typeof name !== "string" ||
+        typeof status !== "string" ||
+        typeof created_at !== "string" &&
+            !(created_at instanceof Date) ||
+        typeof updated_at !== "string" &&
+            !(updated_at instanceof Date)) {
+        return null;
+    }
+    /* v8 ignore stop */
+    /* v8 ignore next 1 */
+    if (!isValidStructuralLabel(label))
+        return null;
+    /* v8 ignore next 1 */
+    if (status !== "active" && status !== "deprecated")
+        return null;
+    const node = {
+        id,
+        label,
+        name,
+        status: status,
+        created_at: String(created_at),
+        updated_at: String(updated_at),
+    };
+    if (typeof data.parent === "string") {
+        node.parent = data.parent;
+    }
+    if (Array.isArray(data.refs)) {
+        const refs = [];
+        for (const ref of data.refs) {
+            /* v8 ignore next 1 */
+            if (typeof ref === "object" && ref !== null && typeof ref.file === "string") {
+                const symbolRef = { file: ref.file };
+                if (typeof ref.symbol === "string") {
+                    symbolRef.symbol = ref.symbol;
+                }
+                refs.push(symbolRef);
+            }
+        }
+        /* v8 ignore next 1 */
+        if (refs.length > 0) {
+            node.refs = refs;
+        }
+    }
+    if (typeof data.description === "string") {
+        node.description = data.description;
+    }
+    else {
+        const trimmed = body.trim();
+        if (trimmed.length > 0) {
+            node.description = trimmed;
+        }
+    }
+    if (typeof data.removed_at === "string" || data.removed_at instanceof Date) {
+        node.removed_at = String(data.removed_at);
+    }
+    return node;
+}
+function parseDecisionNode(data, body) {
+    const { id, title, status, date, affects, tags, created_at, updated_at } = data;
+    /* v8 ignore start */
+    if (typeof id !== "string" ||
+        typeof title !== "string" ||
+        typeof status !== "string" ||
+        (typeof date !== "string" && !(date instanceof Date)) ||
+        !Array.isArray(affects) ||
+        !Array.isArray(tags) ||
+        (typeof created_at !== "string" && !(created_at instanceof Date)) ||
+        (typeof updated_at !== "string" && !(updated_at instanceof Date))) {
+        return null;
+    }
+    /* v8 ignore stop */
+    /* v8 ignore next 1 */
+    if (status !== "active" && status !== "superseded")
+        return null;
+    const validAffects = affects.filter((a) => typeof a === "string");
+    const rawTags = tags.filter((t) => typeof t === "string");
+    const sections = parseSections(body);
+    const node = {
+        id,
+        label: "Decision",
+        title,
+        status: status,
+        date: String(date),
+        affects: validAffects,
+        tags: rawTags,
+        /* v8 ignore start */
+        context: sections.get("context") ?? "",
+        decision: sections.get("decision") ?? "",
+        tradeoffs: sections.get("tradeoffs") ?? "",
+        alternatives: sections.get("alternatives") ?? "",
+        /* v8 ignore stop */
+        created_at: String(created_at),
+        updated_at: String(updated_at),
+    };
+    if (typeof data.supersedes === "string") {
+        node.supersedes = data.supersedes;
+    }
+    if (typeof data.removed_at === "string" || data.removed_at instanceof Date) {
+        node.removed_at = String(data.removed_at);
+    }
+    return node;
+}
+/**
+ * Parse a markdown string with YAML front matter into a typed Entity object.
+ * Returns null for unparseable content.
+ */
+export function parseEntity(content) {
+    if (!content || !content.trim())
+        return null;
+    try {
+        const { data, content: body } = matter(content);
+        if (!data || typeof data !== "object" || !data.label)
+            return null;
+        const label = data.label;
+        if (label === "Decision") {
+            return parseDecisionNode(data, body);
+        }
+        if (isValidStructuralLabel(label)) {
+            return parseStructuralNode(data, body);
+        }
+        return null;
+        /* v8 ignore start */
+    }
+    catch {
+        return null; // unreachable in practice — defensive guard
+    }
+    /* v8 ignore stop */
+}

package/dist/entity/types.d.ts

@@ -0,0 +1,54 @@
+export type StructuralLabel = "App" | "Feature" | "Component";
+export type NodeLabel = StructuralLabel | "Decision";
+export type StructuralStatus = "active" | "deprecated";
+export type DecisionStatus = "active" | "superseded";
+export type DecisionTag = "arch" | "data" | "security" | "performance" | "integration" | "infra" | "ux";
+export declare const DECISION_TAGS: readonly DecisionTag[];
+export type EdgeLabel = "COMPOSES" | "AFFECTS" | "SUPERSEDES";
+export interface SymbolRef {
+    file: string;
+    symbol?: string;
+}
+export interface StructuralNode {
+    id: string;
+    label: StructuralLabel;
+    name: string;
+    status: StructuralStatus;
+    parent?: string;
+    refs?: SymbolRef[];
+    description?: string;
+    created_at: string;
+    updated_at: string;
+    removed_at?: string;
+}
+export interface DecisionNode {
+    id: string;
+    label: "Decision";
+    title: string;
+    status: DecisionStatus;
+    date: string;
+    affects: string[];
+    tags: DecisionTag[];
+    supersedes?: string;
+    context: string;
+    decision: string;
+    tradeoffs: string;
+    alternatives: string;
+    created_at: string;
+    updated_at: string;
+    removed_at?: string;
+}
+export type Entity = StructuralNode | DecisionNode;
+export declare function isStructuralNode(entity: Entity): entity is StructuralNode;
+export declare function isDecisionNode(entity: Entity): entity is DecisionNode;
+export type Environment = "claude-code" | "cursor" | "copilot" | "other";
+export type McpMode = "default" | "strict";
+export interface WhygraphConfig {
+    appName: string;
+    environment: Environment;
+    prefix: string;
+    idLength: number;
+    tags: DecisionTag[];
+    mcpMode: McpMode;
+    serverPort: number;
+}

package/dist/entity/types.js

@@ -0,0 +1,21 @@
+// ============================================================
+// Labels & Status
+// ============================================================
+export const DECISION_TAGS = [
+    "arch",
+    "data",
+    "security",
+    "performance",
+    "integration",
+    "infra",
+    "ux",
+];
+// ============================================================
+// Type Guards
+// ============================================================
+export function isStructuralNode(entity) {
+    return entity.label !== "Decision";
+}
+export function isDecisionNode(entity) {
+    return entity.label === "Decision";
+}

package/dist/entity/validate.d.ts

@@ -0,0 +1,12 @@
+import type { Entity } from "./types.js";
+export declare function validateEntityRefs(entity: Entity, entityMap: Map<string, Entity>): ValidationError[];
+export interface ValidationError {
+    field: string;
+    message: string;
+    severity: "error" | "warning";
+}
+export interface ValidationResult {
+    valid: boolean;
+    errors: ValidationError[];
+}
+export declare function validateEntity(entity: Entity): ValidationResult;

package/dist/entity/validate.js

@@ -0,0 +1,136 @@
+import { DECISION_TAGS, isStructuralNode, isDecisionNode, } from "./types.js";
+// ============================================================
+// Cross-reference Validation
+// ============================================================
+export function validateEntityRefs(entity, entityMap) {
+    const errors = [];
+    if (isDecisionNode(entity)) {
+        for (const ref of entity.affects) {
+            if (!entityMap.has(ref)) {
+                errors.push({
+                    field: "affects",
+                    message: `affects ref "${ref}" does not exist in the graph`,
+                    severity: "warning",
+                });
+            }
+        }
+        if (entity.supersedes && !entityMap.has(entity.supersedes)) {
+            errors.push({
+                field: "supersedes",
+                message: `supersedes ref "${entity.supersedes}" does not exist in the graph`,
+                severity: "warning",
+            });
+        }
+    }
+    if (isStructuralNode(entity) && entity.parent && !entityMap.has(entity.parent)) {
+        errors.push({
+            field: "parent",
+            message: `parent ref "${entity.parent}" does not exist in the graph`,
+            severity: "warning",
+        });
+    }
+    return errors;
+}
+// ============================================================
+// Helpers
+// ============================================================
+const VALID_LABELS = ["App", "Feature", "Component", "Decision"];
+const ISO_8601_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+function isNonEmptyString(value) {
+    return typeof value === "string" && value.length > 0;
+}
+function isValidISO8601(value) {
+    /* v8 ignore next 1 */
+    if (typeof value !== "string")
+        return false;
+    return ISO_8601_RE.test(value);
+}
+function isValidDate(value) {
+    /* v8 ignore next 1 */
+    if (typeof value !== "string")
+        return false;
+    return DATE_RE.test(value);
+}
+// ============================================================
+// Validator
+// ============================================================
+export function validateEntity(entity) {
+    const errors = [];
+    // Common fields
+    if (!isNonEmptyString(entity.id)) {
+        errors.push({ field: "id", message: "id is required and must be a non-empty string", severity: "error" });
+    }
+    if (!VALID_LABELS.includes(entity.label)) {
+        errors.push({ field: "label", message: `label must be one of: ${VALID_LABELS.join(", ")}`, severity: "error" });
+    }
+    if (!isValidISO8601(entity.created_at)) {
+        errors.push({ field: "created_at", message: "created_at must be a valid ISO 8601 timestamp", severity: "error" });
+    }
+    if (!isValidISO8601(entity.updated_at)) {
+        errors.push({ field: "updated_at", message: "updated_at must be a valid ISO 8601 timestamp", severity: "error" });
+    }
+    if (entity.removed_at !== undefined && !isValidISO8601(entity.removed_at)) {
+        errors.push({ field: "removed_at", message: "removed_at must be a valid ISO 8601 timestamp", severity: "error" });
+    }
+    // Structural node validations
+    if (isStructuralNode(entity)) {
+        if (!isNonEmptyString(entity.name)) {
+            errors.push({ field: "name", message: "name is required and must be a non-empty string", severity: "error" });
+        }
+        if (entity.status !== "active" && entity.status !== "deprecated") {
+            errors.push({ field: "status", message: "structural node status must be \"active\" or \"deprecated\"", severity: "error" });
+        }
+        if (entity.parent !== undefined && !isNonEmptyString(entity.parent)) {
+            errors.push({ field: "parent", message: "parent, if present, must be a non-empty string", severity: "error" });
+        }
+        if (entity.label === "App" && entity.parent !== undefined) {
+            errors.push({ field: "parent", message: "App nodes should not have a parent", severity: "warning" });
+        }
+        if ((entity.label === "Feature" || entity.label === "Component") && entity.parent === undefined) {
+            errors.push({ field: "parent", message: `${entity.label} nodes should have a parent`, severity: "warning" });
+        }
+    }
+    // Decision node validations
+    if (isDecisionNode(entity)) {
+        if (!isNonEmptyString(entity.title)) {
+            errors.push({ field: "title", message: "title is required and must be a non-empty string", severity: "error" });
+        }
+        if (entity.status !== "active" && entity.status !== "superseded") {
+            errors.push({ field: "status", message: "decision node status must be \"active\" or \"superseded\"", severity: "error" });
+        }
+        if (!isValidDate(entity.date)) {
+            errors.push({ field: "date", message: "date must match YYYY-MM-DD format", severity: "error" });
+        }
+        if (!Array.isArray(entity.affects) || entity.affects.length === 0) {
+            errors.push({ field: "affects", message: "affects is required and must be a non-empty array", severity: "error" });
+        }
+        /* v8 ignore next 1 */
+        if (Array.isArray(entity.tags)) {
+            for (const tag of entity.tags) {
+                if (!DECISION_TAGS.includes(tag)) {
+                    errors.push({ field: "tags", message: `invalid tag "${tag}"; must be one of: ${DECISION_TAGS.join(", ")}`, severity: "error" });
+                }
+            }
+        }
+        if (!isNonEmptyString(entity.context)) {
+            errors.push({ field: "context", message: "context is required and must be a non-empty string", severity: "error" });
+        }
+        if (!isNonEmptyString(entity.decision)) {
+            errors.push({ field: "decision", message: "decision is required and must be a non-empty string", severity: "error" });
+        }
+        if (!isNonEmptyString(entity.tradeoffs)) {
+            errors.push({ field: "tradeoffs", message: "tradeoffs is required and must be a non-empty string", severity: "error" });
+        }
+        if (!isNonEmptyString(entity.alternatives)) {
+            errors.push({ field: "alternatives", message: "alternatives is required and must be a non-empty string", severity: "error" });
+        }
+        if (entity.supersedes !== undefined && !isNonEmptyString(entity.supersedes)) {
+            errors.push({ field: "supersedes", message: "supersedes, if present, must be a non-empty string", severity: "error" });
+        }
+    }
+    return {
+        valid: errors.filter((e) => e.severity === "error").length === 0,
+        errors,
+    };
+}

package/dist/entity/writer.d.ts

@@ -0,0 +1,16 @@
+import type { Entity } from "./types.js";
+import type { ValidationResult } from "./validate.js";
+/**
+ * Pure function: render an Entity to a markdown string with YAML front matter.
+ */
+export declare function renderEntity(entity: Entity): string;
+export interface WriteEntityResult {
+    filePath: string;
+    validation: ValidationResult;
+}
+/**
+ * Write an entity to disk as a markdown file. Always writes (never loses data),
+ * but returns validation results so callers can surface issues.
+ * Uses atomic write (temp file + rename). Creates parent directories if needed.
+ */
+export declare function writeEntity(dirPath: string, entity: Entity): WriteEntityResult;

package/dist/entity/writer.js

@@ -0,0 +1,142 @@
+import { writeFileSync, mkdirSync, renameSync } from "node:fs";
+import { join } from "node:path";
+import { isDecisionNode } from "./types.js";
+import { toFilename } from "./id.js";
+import { validateEntity } from "./validate.js";
+// ============================================================
+// YAML front matter rendering
+// ============================================================
+/**
+ * Quote a string value for YAML — wraps in double quotes if the value
+ * contains characters that could cause YAML parsing issues.
+ */
+function yamlValue(value) {
+    // Always quote timestamps, dates, and values that look ambiguous
+    if (/^\d/.test(value) ||
+        /[:{}\[\],&*?|>!%#@`]/.test(value) ||
+        value === "true" ||
+        value === "false" ||
+        value === "null" ||
+        value === "") {
+        return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+    }
+    return value;
+}
+function renderFrontMatter(lines) {
+    return `---\n${lines.join("\n")}\n---`;
+}
+function renderStructuralFrontMatter(node) {
+    const lines = [
+        `id: ${node.id}`,
+        `label: ${node.label}`,
+        `name: ${yamlValue(node.name)}`,
+        `status: ${node.status}`,
+    ];
+    if (node.parent !== undefined) {
+        lines.push(`parent: ${node.parent}`);
+    }
+    if (node.refs !== undefined && node.refs.length > 0) {
+        lines.push("refs:");
+        for (const ref of node.refs) {
+            if (ref.symbol !== undefined) {
+                lines.push(`  - file: ${yamlValue(ref.file)}`);
+                lines.push(`    symbol: ${yamlValue(ref.symbol)}`);
+            }
+            else {
+                lines.push(`  - file: ${yamlValue(ref.file)}`);
+            }
+        }
+    }
+    if (node.description !== undefined) {
+        lines.push(`description: ${yamlValue(node.description)}`);
+    }
+    lines.push(`created_at: ${yamlValue(node.created_at)}`);
+    lines.push(`updated_at: ${yamlValue(node.updated_at)}`);
+    if (node.removed_at !== undefined) {
+        lines.push(`removed_at: ${yamlValue(node.removed_at)}`);
+    }
+    return lines;
+}
+function renderDecisionFrontMatter(node) {
+    const lines = [
+        `id: ${node.id}`,
+        `label: Decision`,
+        `title: ${yamlValue(node.title)}`,
+        `status: ${node.status}`,
+        `date: ${yamlValue(node.date)}`,
+    ];
+    lines.push("affects:");
+    for (const a of node.affects) {
+        lines.push(`  - ${a}`);
+    }
+    lines.push("tags:");
+    for (const t of node.tags) {
+        lines.push(`  - ${t}`);
+    }
+    if (node.supersedes !== undefined) {
+        lines.push(`supersedes: ${node.supersedes}`);
+    }
+    lines.push(`created_at: ${yamlValue(node.created_at)}`);
+    lines.push(`updated_at: ${yamlValue(node.updated_at)}`);
+    if (node.removed_at !== undefined) {
+        lines.push(`removed_at: ${yamlValue(node.removed_at)}`);
+    }
+    return lines;
+}
+// ============================================================
+// Body rendering
+// ============================================================
+function renderStructuralBody(node) {
+    if (node.description !== undefined) {
+        return `\n${node.description}\n`;
+    }
+    return "\n";
+}
+function renderDecisionBody(node) {
+    const sections = [
+        { heading: "Context", content: node.context },
+        { heading: "Decision", content: node.decision },
+        { heading: "Tradeoffs", content: node.tradeoffs },
+        { heading: "Alternatives", content: node.alternatives },
+    ];
+    const parts = [];
+    for (const { heading, content } of sections) {
+        parts.push(`## ${heading}\n\n${content}`);
+    }
+    return `\n${parts.join("\n\n")}\n`;
+}
+// ============================================================
+// Public API
+// ============================================================
+/**
+ * Pure function: render an Entity to a markdown string with YAML front matter.
+ */
+export function renderEntity(entity) {
+    if (isDecisionNode(entity)) {
+        const fm = renderDecisionFrontMatter(entity);
+        return renderFrontMatter(fm) + renderDecisionBody(entity);
+    }
+    // structural node — description goes in body, not front matter
+    const node = entity;
+    const fmLines = renderStructuralFrontMatter(node);
+    // Remove description from front matter — it goes in the body
+    const fmWithoutDesc = fmLines.filter((line) => !line.startsWith("description:"));
+    return renderFrontMatter(fmWithoutDesc) + renderStructuralBody(node);
+}
+/**
+ * Write an entity to disk as a markdown file. Always writes (never loses data),
+ * but returns validation results so callers can surface issues.
+ * Uses atomic write (temp file + rename). Creates parent directories if needed.
+ */
+export function writeEntity(dirPath, entity) {
+    const validation = validateEntity(entity);
+    const titleOrName = isDecisionNode(entity) ? entity.title : entity.name;
+    const filename = toFilename(entity.id, titleOrName);
+    const filePath = join(dirPath, filename);
+    const tempPath = filePath + ".tmp";
+    mkdirSync(dirPath, { recursive: true });
+    const content = renderEntity(entity);
+    writeFileSync(tempPath, content, "utf-8");
+    renameSync(tempPath, filePath);
+    return { filePath, validation };
+}

package/dist/frontend/assets/index-ByZzPwVe.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap";:root{--surface-0: #080F18;--surface-1: #091421;--surface-2: #0B1A2C;--surface-3: #0E2D4D;--surface-1-rgb: 9, 20, 33;--surface-2-rgb: 11, 26, 44;--color-primary: #71D7CD;--color-on-primary: #004944;--color-secondary: #323C4C;--color-tertiary: #FFC87F;--color-error: #EE7D77;--color-success: #4CAF50;--color-surface-tint: #71D7CD;--text-primary: #E8ECF1;--text-secondary: #8FA3B8;--text-muted: #506070;--border-ghost: rgba(51, 73, 102, .2);--shadow-glow: 0 0 40px rgba(113, 215, 205, .08);--font-heading: "Space Grotesk", sans-serif;--font-body: "Inter", sans-serif;--text-xs: .6875rem;--text-sm: .75rem;--text-base: .875rem;--text-lg: 1rem;--text-xl: 1.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--radius: 0px;--transition-fast: .15s ease;--transition-normal: .3s ease-in-out}[data-theme=light]{--surface-0: #F4F1EA;--surface-1: #FFFFFF;--surface-2: #EDE8E3;--surface-3: #DDD8D3;--surface-1-rgb: 255, 255, 255;--surface-2-rgb: 237, 232, 227;--color-primary: #71D7CD;--color-on-primary: #004944;--color-secondary: #C8C2BC;--color-tertiary: #E8A54C;--color-error: #D44840;--color-success: #3D8B40;--color-surface-tint: #71D7CD;--text-primary: #1A1F26;--text-secondary: #5A6570;--text-muted: #8A9099;--border-ghost: rgba(0, 0, 0, .1);--shadow-glow: 0 0 40px rgba(113, 215, 205, .06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-body);font-size:var(--text-base);background:var(--surface-0);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit;cursor:pointer;border-radius:var(--radius)}input,select,textarea{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit;border-radius:var(--radius)}.tree-nav{display:flex;flex-direction:row;flex-shrink:0;width:2.5rem;background:var(--surface-1);border-right:1px solid var(--border-ghost);overflow:hidden;transition:width var(--transition-normal);z-index:4}.tree-nav--open{width:264px}.tree-nav__toggle{flex-shrink:0;width:2.5rem;align-self:flex-start;padding:var(--space-3) 0;color:var(--text-muted);font-size:var(--text-base);text-align:center;transition:color var(--transition-fast)}.tree-nav__toggle:hover{color:var(--text-primary)}.tree-nav__body{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.tree-nav__heading{flex-shrink:0;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);border-bottom:1px solid var(--border-ghost)}.tree-nav__scroll{flex:1;overflow-y:auto;padding:var(--space-2) 0}.tree-section{margin-bottom:var(--space-1)}.tree-section--orphans{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--border-ghost)}.tree-section__label{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.tree-accordion{margin-bottom:1px}.tree-accordion__row{display:flex;align-items:center}.tree-accordion__arrow{flex-shrink:0;width:1.25rem;font-size:10px;color:var(--text-muted);text-align:center;padding:0 var(--space-1);transition:color var(--transition-fast)}.tree-accordion__arrow:hover{color:var(--text-secondary)}.tree-accordion__children{padding-left:1.25rem}.tree-node{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:3px var(--space-3) 3px var(--space-2);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-secondary);text-align:left;border-radius:0;transition:background var(--transition-fast),color var(--transition-fast);white-space:nowrap;overflow:hidden}.tree-node:hover{background:var(--surface-2);color:var(--text-primary)}.tree-node--selected{background:var(--surface-2);color:var(--text-primary);box-shadow:inset 2px 0 0 var(--color-primary)}.tree-node__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.tree-node__icon{flex-shrink:0;width:10px;height:10px;border-radius:50%;display:inline-block}.tree-node__icon--app{width:12px;height:12px;background:#1e3a5f;border:1.5px solid rgba(255,255,255,.3)}.tree-node__icon--feature{background:#2b8a8a;border:1.5px solid rgba(255,255,255,.2)}.tree-node__icon--component{width:8px;height:8px;background:#7ec8e3;border:1px solid rgba(255,255,255,.2)}.tree-node--decision{font-size:var(--text-xs);color:var(--text-muted);padding-left:var(--space-3)}.tree-node__icon--decision{width:auto;height:auto;background:none;border:none;color:#e07020;font-size:8px;border-radius:0}.tree-node__badge{flex-shrink:0;font-size:10px;font-weight:700;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1}.tree-node__badge--error{background:#e74c3ce6;color:#fff}.tree-node__badge--stale{background:#e67e22e6;color:#fff}.gap-toggle{display:inline-flex;align-items:center;gap:var(--space-2)}.gap-toggle__btn{padding:var(--space-1) var(--space-3);background:var(--surface-2);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius);border:1px solid var(--border-ghost);transition:background var(--transition-fast),color var(--transition-fast)}.gap-toggle__btn:hover{background:var(--surface-3)}.gap-toggle__btn[aria-pressed=true]{background:var(--color-tertiary);color:#1a1a1a;border-color:transparent}.gap-toggle__count{font-size:var(--text-xs);color:var(--text-muted)}.stale-ref-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.stale-ref-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:#ee7d771a;color:var(--color-error);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius);border:1px solid rgba(238,125,119,.3);transition:background var(--transition-fast)}.stale-ref-btn:hover{background:#ee7d7733}.stale-ref-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.stale-ref-modal{background:var(--surface-2);border-radius:var(--radius);padding:var(--space-6);max-width:480px;width:100%;box-shadow:var(--shadow-glow)}.stale-ref-modal h3{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-4)}.stale-ref-modal p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-2)}.stale-ref-modal code{font-size:var(--text-sm);color:var(--color-primary)}.stale-ref-modal__field{margin:var(--space-4) 0}.stale-ref-modal__field label{display:block;font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-1)}.stale-ref-modal__input{width:100%;padding:var(--space-2) var(--space-3);background:var(--surface-0);color:var(--text-primary);border:1px solid var(--border-ghost);font-size:var(--text-base)}.stale-ref-modal__input:focus{outline:1px solid var(--color-primary);outline-offset:-1px}.stale-ref-modal__actions{display:flex;gap:var(--space-2);justify-content:flex-end}.btn-ghost{padding:var(--space-2) var(--space-4);background:transparent;color:var(--text-secondary);border:1px solid var(--border-ghost);font-size:var(--text-sm);font-weight:500;border-radius:var(--radius)}.btn-ghost:hover{background:var(--surface-3);color:var(--text-primary)}.btn-primary{padding:var(--space-2) var(--space-4);background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius)}.btn-primary:hover{opacity:.9}.tag-filter{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.tag-chip{padding:var(--space-1) var(--space-3);background:var(--surface-2);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius);border:1px solid var(--border-ghost);transition:background var(--transition-fast),color var(--transition-fast)}.tag-chip:hover{background:var(--surface-3);color:var(--text-primary)}.tag-chip[aria-checked=true]{background:var(--color-tertiary);color:#1a1a1a;border-color:transparent}.tag-chip--clear{padding:var(--space-1) var(--space-3);background:transparent;color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius);transition:color var(--transition-fast)}.tag-chip--clear:hover{color:var(--text-primary)}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#0000004d;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.menu-dropdown{position:absolute;top:100%;right:var(--space-6);z-index:50;min-width:280px;background:rgba(var(--surface-2-rgb),.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-glow);border:1px solid var(--border-ghost);border-radius:var(--radius);padding:var(--space-4)}.menu-section{margin-bottom:var(--space-4)}.menu-section:last-child{margin-bottom:0}.menu-section__title{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--space-2)}.theme-toggle{display:flex;align-items:center;gap:var(--space-3)}.theme-toggle__icon{font-size:var(--text-base);color:var(--text-secondary);width:20px;text-align:center}.theme-toggle__track{position:relative;width:40px;height:22px;background:var(--surface-3);border-radius:var(--radius);padding:2px;transition:background var(--transition-fast)}.theme-toggle__track[data-active=true]{background:var(--color-primary)}.theme-toggle__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--text-primary);border-radius:var(--radius);transition:transform var(--transition-fast)}.theme-toggle__track[data-active=true] .theme-toggle__thumb{transform:translate(18px)}.error-banner{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;gap:8px;padding:10px 16px;background:#e74c3c26;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,76,60,.3);color:var(--text-primary, #e0e8f0);font-size:13px}.error-banner__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e74c3c;color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.error-banner__text{display:flex;flex-direction:column;gap:2px}.error-banner__detail{display:block;font-size:11px;opacity:.7}.timeline{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-1);border-radius:var(--radius)}.timeline__label{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);white-space:nowrap}.timeline__slider{flex:1;accent-color:var(--color-primary)}.timeline__value{font-size:var(--text-xs);color:var(--text-muted);min-width:180px;text-align:center}.timeline__play-btn{padding:var(--space-1) var(--space-3);background:var(--surface-2);color:var(--text-secondary);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius);border:1px solid var(--border-ghost);min-width:2rem}.timeline__play-btn:hover{background:var(--surface-3)}.timeline__live-btn{padding:var(--space-1) var(--space-3);background:var(--surface-2);color:var(--text-secondary);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius);border:1px solid var(--border-ghost)}.timeline__live-btn[disabled]{background:#4caf5026;color:var(--color-success);border-color:transparent;cursor:default;font-weight:600}.app-shell{display:grid;grid-template-rows:auto 1fr auto auto;height:100vh;overflow:hidden;background:var(--surface-0)}.app-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);background:var(--surface-1);position:relative}.app-header__logo{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.app-header__subtitle{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-muted)}.app-header__spacer{flex:1}.app-header__menu-btn{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);padding:var(--space-2) var(--space-3);background:var(--surface-2);border-radius:var(--radius);transition:background var(--transition-fast)}.app-header__menu-btn:hover,.app-header__menu-btn--active{background:var(--surface-3)}.badge{display:inline-block;padding:var(--space-1) var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius)}.badge--success{background:#4caf5026;color:var(--color-success)}.badge--error{background:#ee7d7726;color:var(--color-error)}.app-graph-area{display:flex;flex-direction:row;overflow:hidden;background:var(--surface-0)}.graph-area-main{flex:1;display:flex;flex-direction:row;overflow:hidden}.graph-viewport{flex:1;position:relative;overflow:hidden}.graph-container{width:100%;height:100%;position:relative}.graph-svg{width:100%;height:100%;display:block}.focus-blur-overlay{position:absolute;top:0;right:0;bottom:0;left:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;opacity:0;transition:opacity .22s ease;z-index:3}.graph-center-btn{position:absolute;bottom:var(--space-4);right:var(--space-4);width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-secondary);font-size:var(--text-base);border-radius:var(--radius);border:1px solid var(--border-ghost);opacity:.7;transition:opacity var(--transition-fast),background var(--transition-fast);z-index:5}.graph-center-btn:hover{opacity:1;background:var(--surface-3)}.detail-panel{flex-shrink:0;width:0;min-width:0;overflow:hidden;background:var(--surface-1);border-left:1px solid var(--border-ghost);box-shadow:var(--shadow-glow);transition:width var(--transition-normal)}.detail-panel[data-open=true]{width:360px}.detail-panel__inner{width:360px;height:100%;overflow-y:auto;padding:var(--space-6);position:relative}.detail-panel__close{position:absolute;top:var(--space-4);right:var(--space-4);font-size:var(--text-xl);color:var(--text-secondary);padding:var(--space-1);line-height:1}.detail-panel__close:hover{color:var(--text-primary)}.detail-panel h2{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-4);padding-right:var(--space-8)}.detail-field{margin-bottom:var(--space-4);font-size:var(--text-base);color:var(--text-primary);line-height:1.5}.detail-field strong{display:block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:var(--space-1)}.detail-field p{margin:var(--space-1) 0 0;color:var(--text-primary)}.detail-field ul{list-style:none;padding:0;margin:var(--space-1) 0 0}.detail-field li{padding:var(--space-1) 0;color:var(--text-secondary);font-size:var(--text-sm)}.detail-field li:before{content:"•";color:var(--color-primary);margin-right:var(--space-2)}.detail-tag{display:inline-block;padding:var(--space-1) var(--space-2);margin:2px;background:var(--surface-2);color:var(--text-secondary);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius)}.detail-errors{margin-top:var(--space-8);margin-bottom:var(--space-4);padding:var(--space-3);background:#e74c3c1a;border:1px solid rgba(231,76,60,.3);border-radius:var(--radius)}.detail-errors__status{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:#e74c3c;margin-bottom:var(--space-2)}.detail-errors__list{list-style:none;padding:0;margin:0}.detail-errors__item{font-size:var(--text-xs);color:var(--text-secondary);padding:var(--space-1) 0}.detail-errors__item strong{display:inline;font-size:inherit;text-transform:none;letter-spacing:normal;color:var(--text-primary)}.detail-status--error{color:#e74c3c;font-weight:600}.app-footer{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-2) var(--space-6);background:var(--surface-1);font-family:var(--font-body);font-size:var(--text-xs);color:var(--text-muted)}.app-footer__stat{display:inline-flex;align-items:center;gap:var(--space-2)}.app-footer__stat-label{text-transform:uppercase;letter-spacing:.05em}.app-footer__stat-value{color:var(--text-secondary);font-weight:600}