feat(ui): scaffold the codegraph ui viewer as a Svelte 5 + Vite workspace (CG-40)
Adds `ui/` as an npm workspace (Svelte 5.56 + Vite 7, devDependencies only — the engine's runtime dependencies are untouched) and chains its build into `npm run build`, so the browser viewer ships inside `dist/` with everything else: `build-bundle.sh` already copies `dist` wholesale and `pack-npm.sh` packs that bundle. Output is `dist/viewer/`, NOT `dist/ui/`: `src/ui/` is the engine's terminal ui (shimmer progress + its worker) and tsc compiles it to `dist/ui/`, so emitting there both deletes those modules — the CLI then dies at startup with `Cannot find module '../ui/shimmer-progress'` — and would leave the static server handing out compiled engine internals. The design spec is corrected to match. `scripts/check-ui-build.mjs` is the release guard: index.html must exist, be non-trivial, and every local asset it references must be on disk, and the compiled engine next door must still be intact. It runs after every UI build, again in `build-bundle.sh` once the bundle stage has copied `dist`, and again in `pack-npm.sh` once each archive is unpacked — so a broken viewer fails the release instead of shipping a CLI that serves a 404. `vite build` does not override an ambient NODE_ENV, so a shell or runner with NODE_ENV=development silently shipped dev-mode Svelte (~13 kB of dev-only runtime checks, warning in the user's console). The config now pins production for `command === 'build'`; macOS and Windows ARM64 then emit byte-identical bundle hashes. The shell itself follows docs/design/codegraph-ui-design-spec.md §2–§3.1: design tokens as CSS custom properties (light on bare `:root`, dark under both `prefers-color-scheme` and `[data-theme="dark"]`), square corners, hairline rules, one oxblood accent; top bar 48px / trail bar 34px / main; a hash router over `#/s/<id>`, `#/file/<path>`, with `#/map` and `#/flow` reserved for phase 2. Fonts are vendored through @fontsource rather than fetched, so a local reader works offline and never announces the project to a CDN. Verified: clean `npm run build` from an empty dist on macOS and on the Windows ARM64 VM (forward-slash asset URLs, CLI still starts, both assertion failure modes exit 1); `dist/viewer` present in a real darwin-arm64 bundle and in the packed npm platform package; shell geometry, tokens, all seven routes, both themes and font loading checked in headless Chromium with no console errors; `npm test` unaffected.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
<!--
|
||||
Placeholder for the file view: imported by | outline in source order |
|
||||
imports (design spec §3.4, task CG-46).
|
||||
-->
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
path: string;
|
||||
line: number | null;
|
||||
}
|
||||
let { path, line }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="emptystate">
|
||||
<h2>File view</h2>
|
||||
<p>
|
||||
<span class="mono">{path}</span>{#if line}<span class="dim"> · line {line}</span>{/if}
|
||||
</p>
|
||||
<p>The file's outline and its import rails are not wired up in this build yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!--
|
||||
Reserved route. The flow strip (design spec §3.5) is phase 2.
|
||||
-->
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
flowKey: string | null;
|
||||
}
|
||||
let { flowKey = null }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="emptystate">
|
||||
<h2>Flow</h2>
|
||||
<p>
|
||||
Reading a trail as a left-to-right flow — one card per hop, showing the line that makes each
|
||||
call — is not part of this release.
|
||||
</p>
|
||||
{#if flowKey}
|
||||
<p class="dim">Requested flow: <span class="mono">{flowKey}</span></p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
project?: string | null;
|
||||
}
|
||||
let { project = null }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="emptystate">
|
||||
<h2>Nothing selected</h2>
|
||||
<p>
|
||||
Search for a symbol or a file to start reading{project ? ` in ${project}` : ''}. Press
|
||||
<code>/</code> to focus the search box.
|
||||
</p>
|
||||
<p>
|
||||
Every symbol you open shows who calls it on the left, its verbatim source in the middle, and
|
||||
what it calls on the right — each callee lined up with the line that makes the call.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
Reserved route. The module-level map (design spec §3.6) is phase 2 — the
|
||||
aggregation query, cycle-breaking and layered layout land in CG-49.
|
||||
-->
|
||||
<div class="scroll">
|
||||
<div class="emptystate">
|
||||
<h2>Map</h2>
|
||||
<p>
|
||||
The module map — every module in the project, layered so dependencies point down — is not part
|
||||
of this release.
|
||||
</p>
|
||||
<p>Open a symbol instead: search for one, or press <code>/</code> to focus the search box.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
path: string;
|
||||
}
|
||||
let { path }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="emptystate">
|
||||
<h2>No such view</h2>
|
||||
<p>
|
||||
<span class="mono">#{path}</span> does not match a view. Try
|
||||
<a class="mono link" href="#/">the start</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--accent-line);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--
|
||||
Placeholder for the core screen: callers | verbatim source with gutter
|
||||
ports | line-anchored callee rail (design spec §3.2, task CG-44). It needs
|
||||
the read-only JSON API (CG-42), so until that lands this states the target
|
||||
rather than faking a reader.
|
||||
-->
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
id: string;
|
||||
line: number | null;
|
||||
}
|
||||
let { id, line }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="emptystate">
|
||||
<h2>Symbol view</h2>
|
||||
<p>
|
||||
<span class="mono">{id}</span>{#if line}<span class="dim"> · line {line}</span>{/if}
|
||||
</p>
|
||||
<p>
|
||||
Callers, the symbol's source, and its callees are not wired up in this build yet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user