declare-cc 1.0.7 → 2.0.0

package/README.md

@@ -1,262 +1,228 @@
-<div align="center">
+# Declare
 
-# DECLARE
+**Future-driven development for AI agents.**
 
-**A future-driven meta-prompting engine for agentic development.**
+Declare flips the script on project planning. Instead of task lists, you write **declarations** — verifiable statements about what will be true when your project succeeds. AI agents then derive milestones, plan actions, execute code, and verify results — all traceable back to the future you declared.
 
-[![npm](https://img.shields.io/npm/v/declare-cc?style=for-the-badge&color=7c3aed)](https://www.npmjs.com/package/declare-cc)
-[![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](LICENSE)
+```
+npx dcl
+```
 
-*Declare what's true when this succeeds. The system derives the rest backward.*
+## Why Declare
 
-</div>
+**You don't manage tasks. You declare futures.**
 
----
+Most planning tools track what you're *doing*. Declare tracks what must be *true*. This distinction matters because:
 
-## Setup
+- **Declarations are verifiable.** "Users can log in via OAuth" is either true or false. "Implement auth" is vague forever.
+- **Milestones are states, not tasks.** "The database supports multi-tenancy" vs "design the schema." States can be checked; tasks just get checked off.
+- **Actions have causal context.** Every action knows *why* it exists — which milestone it advances, which declaration it ultimately serves. Agents never lose the plot.
+- **Verification is honest.** The verifier checks if the *outcome* holds, not if actions were completed. Stub implementations get flagged. Empty files get caught.
 
-Add to your project:
+## How it works
 
-```bash
-npm install --save-dev declare-cc
 ```
-
-Add a script to `package.json`:
-
-```json
-{
-  "scripts": {
-    "plan": "dcl"
-  }
-}
+Declaration (what must be true)
+  └── Milestone (what state must hold)
+       └── Action (what to do, with verify command)
 ```
 
-Run it:
+1. **Declare** — Write present-tense statements about your project's future
+2. **Derive** — AI breaks each declaration into verifiable milestones
+3. **Plan** — AI plans concrete actions with files, verify commands, and wave assignments
+4. **Execute** — Agents write code, wave by wave (parallel within each wave)
+5. **Verify** — Deep verification: artifacts exist, aren't stubs, are properly wired
 
-```bash
-npm run plan
-```
+Everything lives in `.planning/` as markdown files you can read, edit, and version control.
 
-This auto-initializes a `.planning/` directory if one doesn't exist, starts the Declare server on a random free port, writes the port to `.planning/server.port`, and prints the dashboard URL.
+## Getting started
 
-Or run directly:
+### Start the dashboard
 
 ```bash
 npx dcl
 ```
 
-Requires Node.js 18+.
-
----
-
-## What This Is
-
-Most planning tools start from the present and work forward — "what should we do first?" Declare starts from the future and works backward — "what must be true for this to succeed?"
-
-You declare present-tense statements of fact about your project's future. The system derives milestones ("what must be true?") and actions ("what must be done?") through causal structure, then spawns Claude Code agents to execute them — visible in real time through a browser dashboard.
-
----
-
-## How It Works
-
-Everything happens through the dashboard. `dcl` starts the server and prints the URL — click it to open.
-
-### 1. Declare Futures
-
-Create declarations directly in the dashboard — present-tense statements about your project's future. Not goals, not wishes.
-
-### 2. Derive Milestones
-
-Press **P** on a declaration card. The AI works backward: "What must be true for this to hold?" Milestones appear as cards immediately.
-
-### 3. Plan Actions
-
-Press **P** on a milestone card. The AI derives 2-5 concrete actions. Actions auto-accept and appear as cards — the action list IS the plan.
-
-### 4. Review & Approve
+Opens a web dashboard at `http://localhost:3847`. If no `.planning/` folder exists, it scaffolds one and starts the onboarding flow.
 
-Navigate with **Arrow keys**. Press **A** to approve, **E** to edit, **D** to delete. Milestones only move to "Ready to Execute" when all their actions are approved.
+### Onboarding
 
-### 5. Execute
+The dashboard guides you through:
 
-Press **E** on an approved action. A Claude Code agent spawns with full context: declaration → milestone → action + sibling actions. It reads your codebase, implements changes, and commits.
+1. **Vision** — Describe what success looks like (not *how* to build it)
+2. **Questions** — AI asks clarifying questions to sharpen your vision
+3. **Declarations** — AI generates declaration candidates, you approve
 
----
+### CLI commands
 
-## The DAG
-
-```
-Declarations (D-XX)     "What is true when this succeeds"
-    │
-    ▼
-Milestones (M-XX)       "What must be true" (derived backward)
-    │
-    ▼
-Actions (A-XX)          "What must be done" (derived backward)
+```bash
+dcl              # Start server + open dashboard
+dcl init         # Scaffold .planning/ in current directory
+dcl status       # Print graph health (declarations, milestones, actions)
+dcl mcp          # Start MCP server on stdio
 ```
 
-Every action traces back to a declaration through causal edges.
+## Three interfaces, same capability
 
----
+Every operation works through all three interfaces:
 
-## Dashboard
+| Interface | For | How |
+|-----------|-----|-----|
+| **Web dashboard** | Visual users | `npx dcl` — full lifecycle UI |
+| **MCP server** | AI agents | `dcl mcp` — tools, resources, prompts over stdio |
+| **CLI** | Terminal users | `dcl status`, `dcl init` |
 
-### Lifecycle Stages
+### MCP integration
 
-Cards are grouped into stages at each level:
+Add to your Claude Code settings (`.claude/settings.json`):
 
-| Stage | Meaning |
-|-------|---------|
-| **Needs Planning** | Approved, no actions yet |
-| **Needs Approval** | Has unapproved items |
-| **Ready to Execute** | All approved, ready to run |
-| **In Execution** | Agent running |
-| **Done** | Completed |
+```json
+{
+  "mcpServers": {
+    "declare": {
+      "command": "bun",
+      "args": ["run", "/path/to/dcl/src/mcp/index.ts"],
+      "env": {
+        "DCL_PROJECT_ROOT": "/path/to/your/project"
+      }
+    }
+  }
+}
+```
 
-### Keyboard Shortcuts
+**MCP tools:** `get-graph`, `add-declaration`, `update-declaration`, `delete-declaration`, `approve-batch`, `get-status`
 
-| Key | Action |
-|-----|--------|
-| **P** | Plan (derive milestones/actions) |
-| **A** | Approve |
-| **E** | Edit / Execute |
-| **D** | Delete |
-| **Arrow keys** | Navigate cards, drill in/out |
-| **Ctrl+Shift+A** | Approve all visible |
-| **C** | Command bar |
+**MCP resources:** `declare://graph`, `declare://project`, `declare://prompt/{name}`
 
----
+**MCP prompts:** `onboard`, `derive-milestones`, `plan-actions`
 
-## Server & Port Discovery
+## The meta-prompts
 
-The Declare server uses OS-assigned ports so multiple projects can run simultaneously without collisions.
+Declare's core value is its prompting methodology. Seven standalone markdown files in `src/agents/prompts/` encode the full workflow:
 
-### How it works
+| Prompt | Purpose |
+|--------|---------|
+| `00-research.md` | Codebase mapping before planning — stack, conventions, tests, pitfalls |
+| `01-vision.md` | Extract vivid future state (what, not how) |
+| `02-declarations.md` | Transform vision into falsifiable present-tense statements |
+| `03-milestones.md` | Derive verifiable states backward from declarations |
+| `04-actions.md` | Plan actions with must-haves, verify commands, wave assignments |
+| `05-execution.md` | Execute with causal context + write tests alongside code |
+| `06-verification.md` | 3-level check: exists, substantive (not stub), wired (actually used) |
 
-1. `dcl` (or `dcl serve`) starts the server on **port 0** — the OS assigns a random free port
-2. After the server is listening, it writes the port number to `.planning/server.port` (plain text, e.g. `62964`)
-3. On shutdown (SIGINT, SIGTERM, process exit), the file is deleted
-4. Next time `dcl` runs, it reads the port file. If the server is still alive, it reuses it. If the file is stale (server crashed), it cleans up and starts fresh.
+Each prompt is self-contained and doubles as documentation. They're exposed as MCP resources so any agent can read them.
 
-### For external tools
+## Key concepts
 
-To discover a running Declare server for a project:
+### Declarations
 
-```js
-const port = fs.readFileSync('<project>/.planning/server.port', 'utf8').trim();
-// Verify it's alive:
-// GET http://localhost:<port>/api/graph → 200 = running
-// Embed dashboard:
-// <iframe src="http://localhost:<port>/" />
-```
+Present-tense statements about the future. Not goals or tasks — *truths that will hold*.
 
-If the file doesn't exist, the server isn't running. Start it:
+```markdown
+## D-01: Users can search the full product catalog in under 200ms
 
-```bash
-cd <project> && npx dcl serve
+**Statement:** Any search query against the product catalog returns relevant results
+within 200ms at the 95th percentile, with zero downtime during index rebuilds.
+**Why:** Search is the primary discovery mechanism. If it's slow, users browse Amazon instead.
 ```
 
-Then poll for `.planning/server.port` to appear (~1 second).
+### Milestones
 
-### Explicit port
+States that must independently hold. Derived backward from declarations.
 
-If you need a specific port:
-
-```bash
-dcl serve --port 4000
+```
+M-01: Full-text search index covers all product fields
+M-02: Search API responds within 200ms p95 under load
+M-03: Index rebuilds happen without search downtime
 ```
 
----
-
-## For Agents
-
-If you're an AI agent (Claude Code, Cursor, etc.) working in a project that uses Declare, here's what you need to know:
-
-### Project state lives in `.planning/`
+### Actions with must-haves
 
-- **`FUTURE.md`** — Declared futures (present-tense statements about what's true when the project succeeds)
-- **`MILESTONES.md`** — Milestones derived backward from futures
-- **`.planning/milestones/M-XX-slug/PLAN.md`** — Actions for each milestone (title, produces, causes)
-- **`.planning/STATE.md`** — Current project state and decisions
-- **`.planning/PROJECT.md`** — Project context and background
+Each plan declares what must be true (truths), what files must exist (artifacts), and how components connect (key links). Actions include runnable verify commands.
 
-### The DAG structure
+```markdown
+**Truths:**
+- Search returns results for partial matches
+- Index rebuilds don't drop existing results
 
-Declarations (D-XX) → Milestones (M-XX) → Actions (A-XX). Each layer links to the one above via `realizes` (milestones → declarations) and `causes` (actions → milestones). Read the graph with:
+**Artifacts:**
+- `src/search/index.ts` — Search index builder
+- `src/search/query.ts` — Query parser and executor
 
-```bash
-node_modules/.bin/declare-cc load-graph
+**Key Links:**
+- from: `src/search/index.ts` -> to: `src/api/search.ts` -> via: searchIndex.query()
 ```
 
-Returns JSON with `declarations`, `milestones`, `actions` arrays.
-
-### Slash commands available to you
-
-If you're running inside Claude Code with declare-cc installed, these slash commands are available:
-
-- `/declare:status` — See where the project stands
-- `/declare:execute M-XX` — Execute actions for a milestone
-- `/declare:verify M-XX` — Validate deliverables
-- `/declare:trace A-XX` — Understand why an action exists (walk the why-chain)
-- `/declare:progress` — Find the next thing to work on
-- `/declare:help` — See all commands
+### Wave execution
 
-### Dashboard API
+Actions are assigned to waves. Wave 1 runs first, Wave 2 after Wave 1 completes. Actions within the same wave run concurrently.
 
-If the server is running (check `.planning/server.port`), you can use the HTTP API:
+### Deep verification
 
-| Method | Path | Returns |
-|--------|------|---------|
-| GET | `/api/graph` | Full DAG (declarations, milestones, actions) |
-| GET | `/api/status` | Integrity/alignment metrics |
-| GET | `/api/agents` | Running/completed agents |
-| GET | `/api/events` | SSE stream (real-time updates) |
-| POST | `/api/review` | Approve/reject a node |
-| POST | `/api/action/:id/execute` | Execute an action |
+The verifier doesn't just check if files exist. Three levels:
 
----
+1. **Exists** — Is the artifact at the expected path?
+2. **Substantive** — Is it real code, not a stub? (`return null`, `// TODO`, empty bodies get flagged)
+3. **Wired** — Is it actually used? (imports that are never called, components that are never rendered)
 
-## CLI Commands
+## Project structure
 
-The dashboard is the primary interface. All operations are also available as slash commands in Claude Code:
+```
+src/
+  agents/           # Claude agent spawning + prompts
+    prompts/        # 7 standalone meta-prompt markdown files
+    claude.ts       # AI runner (SDK integration)
+    runner.ts       # Agent registry + lifecycle
+  server/           # Hono API server
+    routes/         # graph.ts, agents.ts, onboard.ts
+    sse.ts          # Real-time event streaming
+  core/             # Planning engine
+    dag.ts          # Three-layer DAG (declarations → milestones → actions)
+    graph.ts        # Graph builder from disk artifacts
+    artifacts/      # Markdown parsers/writers (FUTURE.md, MILESTONES.md, PLAN.md)
+  app/              # React 19 dashboard
+  cli/              # CLI entry point
+  mcp/              # MCP server (tools, resources, prompts)
+```
 
-| Command | What it does |
-|---------|--------------|
-| `/declare:future` | Guided conversation to capture futures |
-| `/declare:milestones` | Derive milestones from declarations |
-| `/declare:actions M-XX` | Derive actions for a milestone |
-| `/declare:execute M-XX` | Execute actions |
-| `/declare:verify M-XX` | Conversational UAT |
-| `/declare:audit M-XX` | Cross-reference against declarations |
-| `/declare:trace A-XX` | Walk the why-chain to its declaration |
-| `/declare:status` | Graph health and layer counts |
-| `/declare:dashboard` | Start server and print URL |
-| `/declare:help` | Show all commands |
+~5,000 lines of TypeScript. The folder structure maps 1:1 to concepts.
 
----
+## Planning files
 
-## Project Structure
+All state lives in `.planning/` as human-readable markdown:
 
 ```
 .planning/
-├── server.port          # Active server port (auto-managed)
-├── config.json          # Settings
-├── agent-state.json     # Agent lifecycle state
-├── milestones/
-│   └── M-XX-slug/
-│       └── PLAN.md      # Actions for this milestone
-FUTURE.md                # Declared futures
-MILESTONES.md            # Derived milestones
+  FUTURE.md              # Declarations (D-01, D-02, ...)
+  MILESTONES.md          # Milestone table (M-01, M-02, ...)
+  PROJECT.md             # Project context
+  config.json            # Settings
+  agent-state.json       # Persisted agent registry
+  milestones/
+    M-01-search-index/
+      PLAN.md            # Actions for this milestone (A-01, A-02, ...)
 ```
 
----
+## Development
 
-## License
+```bash
+bun install
+bun dev           # Start server + client with hot reload
+bun test          # Unit tests (vitest)
+bun run test:e2e  # E2E tests (playwright)
+bun run lint      # Type check (tsc --noEmit)
+bun run build     # Production build
+```
 
-MIT — See [LICENSE](LICENSE).
+## Tech stack
 
-<div align="center">
+- **Runtime:** Bun
+- **Server:** Hono
+- **Frontend:** React 19 + TanStack Router/Query + Tailwind 4
+- **AI:** Claude Agent SDK (local auth, no API key needed)
+- **MCP:** @modelcontextprotocol/sdk
+- **Tests:** Vitest (unit) + Playwright (E2E)
 
-**Declare the future. Derive backward. Execute with integrity.**
+## License
 
-</div>
+MIT

package/dist/client/assets/index-BVuhr02G.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-mono:var(--font-mono);--color-red-50:oklch(97.1% .013 17.38);--color-red-300:oklch(80.8% .114 19.571);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-950:oklch(25.8% .092 26.042);--spacing:.25rem;--container-xl:36rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-relaxed:1.625;--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-node-decl:var(--node-decl);--color-node-decl-bg:var(--node-decl-bg);--color-node-mile:var(--node-mile);--color-node-mile-bg:var(--node-mile-bg);--color-node-act:var(--node-act);--color-node-act-bg:var(--node-act-bg)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}}body{background-color:var(--background);font-family:var(--font-sans);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@layer components;@layer utilities{.visible{visibility:visible}.static{position:static}.sticky{position:sticky}.end{inset-inline-end:var(--spacing)}.bottom-0{bottom:calc(var(--spacing) * 0)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-9{margin-left:calc(var(--spacing) * 9)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.h-2{height:calc(var(--spacing) * 2)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-px{height:1px}.h-screen{height:100vh}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-24{max-height:calc(var(--spacing) * 24)}.max-h-40{max-height:calc(var(--spacing) * 40)}.w-2{width:calc(var(--spacing) * 2)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-72{width:calc(var(--spacing) * 72)}.w-\[480px\]{width:480px}.w-full{width:100%}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:calc(var(--radius) * 1.333)}.rounded-md{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-brand{border-color:var(--brand)}.border-muted-foreground\/30{border-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.border-muted-foreground\/30{border-color:color-mix(in oklab,var(--muted-foreground) 30%,transparent)}}.border-node-act\/20{border-color:var(--node-act)}@supports (color:color-mix(in lab,red,red)){.border-node-act\/20{border-color:color-mix(in oklab,var(--node-act) 20%,transparent)}}.border-node-decl\/20{border-color:var(--node-decl)}@supports (color:color-mix(in lab,red,red)){.border-node-decl\/20{border-color:color-mix(in oklab,var(--node-decl) 20%,transparent)}}.border-node-mile\/20{border-color:var(--node-mile)}@supports (color:color-mix(in lab,red,red)){.border-node-mile\/20{border-color:color-mix(in oklab,var(--node-mile) 20%,transparent)}}.border-red-300{border-color:var(--color-red-300)}.border-warning\/40{border-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.border-warning\/40{border-color:color-mix(in oklab,var(--warning) 40%,transparent)}}.bg-accent{background-color:var(--accent)}.bg-border{background-color:var(--border)}.bg-brand,.bg-brand\/10{background-color:var(--brand)}@supports (color:color-mix(in lab,red,red)){.bg-brand\/10{background-color:color-mix(in oklab,var(--brand) 10%,transparent)}}.bg-brand\/20{background-color:var(--brand)}@supports (color:color-mix(in lab,red,red)){.bg-brand\/20{background-color:color-mix(in oklab,var(--brand) 20%,transparent)}}.bg-card{background-color:var(--card)}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.bg-muted,.bg-muted\/60{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/60{background-color:color-mix(in oklab,var(--muted) 60%,transparent)}}.bg-node-act-bg{background-color:var(--node-act-bg)}.bg-node-decl-bg{background-color:var(--node-decl-bg)}.bg-node-mile-bg{background-color:var(--node-mile-bg)}.bg-red-50{background-color:var(--color-red-50)}.bg-success,.bg-success\/10{background-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.bg-success\/10{background-color:color-mix(in oklab,var(--success) 10%,transparent)}}.bg-warning,.bg-warning\/5{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.bg-warning\/5{background-color:color-mix(in oklab,var(--warning) 5%,transparent)}}.bg-warning\/10{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.bg-warning\/10{background-color:color-mix(in oklab,var(--warning) 10%,transparent)}}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[15px\]{font-size:15px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-pre-wrap{white-space:pre-wrap}.text-brand{color:var(--brand)}.text-brand-foreground{color:var(--brand-foreground)}.text-destructive{color:var(--destructive)}.text-foreground,.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab,red,red)){.text-foreground\/80{color:color-mix(in oklab,var(--foreground) 80%,transparent)}}.text-muted-foreground,.text-muted-foreground\/60{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/60{color:color-mix(in oklab,var(--muted-foreground) 60%,transparent)}}.text-node-act{color:var(--node-act)}.text-node-decl{color:var(--node-decl)}.text-node-mile{color:var(--node-mile)}.text-primary{color:var(--primary)}.text-red-700{color:var(--color-red-700)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.opacity-0{opacity:0}.opacity-60{opacity:.6}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-brand\/40{--tw-ring-color:var(--brand)}@supports (color:color-mix(in lab,red,red)){.ring-brand\/40{--tw-ring-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}@media(hover:hover){.hover\:border-destructive\/30:hover{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:border-destructive\/30:hover{border-color:color-mix(in oklab,var(--destructive) 30%,transparent)}}.hover\:border-foreground\/30:hover{border-color:var(--foreground)}@supports (color:color-mix(in lab,red,red)){.hover\:border-foreground\/30:hover{border-color:color-mix(in oklab,var(--foreground) 30%,transparent)}}.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/10:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.hover\:bg-warning\/10:hover{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-warning\/10:hover{background-color:color-mix(in oklab,var(--warning) 10%,transparent)}}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:opacity-90:hover{opacity:.9}.hover\:brightness-90:hover{--tw-brightness:brightness(90%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\:brightness-\[0\.98\]:hover{--tw-brightness:brightness(.98);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-brand\/40:focus{--tw-ring-color:var(--brand)}@supports (color:color-mix(in lab,red,red)){.focus\:ring-brand\/40:focus{--tw-ring-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:40rem){.sm\:block{display:block}}.dark\:border-red-800:is(.dark *){border-color:var(--color-red-800)}.dark\:bg-red-950:is(.dark *){background-color:var(--color-red-950)}.dark\:text-red-300:is(.dark *){color:var(--color-red-300)}@media(hover:hover){.dark\:hover\:brightness-110:is(.dark *):hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% .01 60);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% .01 60);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% .01 60);--muted:oklch(95.5% .006 80);--muted-foreground:oklch(46% .012 60);--accent:oklch(95.5% .008 80);--accent-foreground:oklch(20% .01 60);--border:oklch(91.5% .005 80);--input:oklch(88% .006 80);--ring:oklch(20.5% .012 60);--primary:oklch(20.5% .012 60);--primary-foreground:oklch(98% .005 60);--secondary:oklch(95.5% .006 80);--secondary-foreground:oklch(20% .01 60);--destructive:oklch(58% .22 27);--destructive-foreground:oklch(97% .01 17);--success:oklch(60% .17 149);--success-foreground:oklch(98% .02 156);--warning:oklch(75% .15 70);--warning-foreground:oklch(99% .02 95);--sidebar:oklch(97.5% .006 80);--sidebar-foreground:oklch(20% .01 60);--sidebar-accent:oklch(94% .012 80);--sidebar-accent-foreground:oklch(20% .01 60);--sidebar-border:oklch(91.5% .005 80);--brand:oklch(89% .2 118);--brand-foreground:oklch(19% .01 107);--node-decl:oklch(45% .15 260);--node-decl-bg:oklch(95% .02 260);--node-mile:oklch(50% .18 290);--node-mile-bg:oklch(95% .03 290);--node-act:oklch(32% .1 155);--node-act-bg:oklch(95% .02 155);--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-mono:"CommitMono", ui-monospace, SFMono-Regular, Menlo, monospace;--spacing:.25rem;--radius:.375rem;--shadow-xs:oklch(0% 0 0/.03) 0px 1px 2px;--shadow-sm:oklch(0% 0 0/.04) 0px 2px 4px, oklch(0% 0 0/.02) 0px 1px 2px;--shadow-md:oklch(0% 0 0/.06) 0px 4px 12px, oklch(0% 0 0/.04) 0px 2px 4px;--shadow-lg:oklch(0% 0 0/.08) 0px 8px 32px, oklch(0% 0 0/.06) 0px 4px 12px}.dark{--background:oklch(15.5% .005 60);--foreground:oklch(96% .005 60);--card:oklch(18.5% .005 60);--card-foreground:oklch(96% .005 60);--popover:oklch(22% .005 60);--popover-foreground:oklch(96% .005 60);--muted:oklch(23% .005 60);--muted-foreground:oklch(62% .008 60);--accent:oklch(26% .005 60);--accent-foreground:oklch(96% .005 60);--border:oklch(26% .005 60);--input:oklch(28% .005 60);--ring:oklch(82% .01 60);--primary:oklch(82% .01 60);--primary-foreground:oklch(14% .01 60);--secondary:oklch(21% .005 60);--secondary-foreground:oklch(96% .005 60);--destructive:oklch(45% .2 27);--destructive-foreground:oklch(97% .01 17);--success:oklch(45% .15 149);--success-foreground:oklch(97% .02 156);--warning:oklch(65% .15 70);--warning-foreground:oklch(98% .02 95);--sidebar:oklch(17.5% .005 60);--sidebar-foreground:oklch(96% .005 60);--sidebar-accent:oklch(23% .005 60);--sidebar-accent-foreground:oklch(96% .005 60);--sidebar-border:oklch(26% .005 60);--brand:oklch(89% .2 118);--brand-foreground:oklch(14% .01 60);--node-decl:oklch(72% .12 250);--node-decl-bg:oklch(20% .03 250);--node-mile:oklch(72% .15 290);--node-mile-bg:oklch(20% .03 290);--node-act:oklch(72% .14 155);--node-act-bg:oklch(20% .03 155)}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}