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,111 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import TopBar from './components/TopBar.svelte';
|
||||
import TrailBar from './components/TrailBar.svelte';
|
||||
import HomeView from './views/HomeView.svelte';
|
||||
import SymbolView from './views/SymbolView.svelte';
|
||||
import FileView from './views/FileView.svelte';
|
||||
import MapView from './views/MapView.svelte';
|
||||
import FlowView from './views/FlowView.svelte';
|
||||
import NotFoundView from './views/NotFoundView.svelte';
|
||||
import { router, navigate, back, mapHref, flowHref } from './lib/router.svelte';
|
||||
import { trail } from './lib/trail.svelte';
|
||||
|
||||
// Filled by the project stats call once the JSON API exists (CG-42); the
|
||||
// top bar renders nothing rather than a placeholder until then.
|
||||
let project = $state<string | null>(null);
|
||||
let stats = $state<string | null>(null);
|
||||
let query = $state('');
|
||||
|
||||
let topbar: TopBar | null = $state(null);
|
||||
|
||||
let route = $derived(router.route);
|
||||
|
||||
// Keep the in-memory trail and the `t` param in step. untrack() because the
|
||||
// body writes the same store it would otherwise read itself into a loop.
|
||||
$effect(() => {
|
||||
const current = router.route;
|
||||
const encoded = router.params.get('t');
|
||||
untrack(() => {
|
||||
trail.hydrate(encoded);
|
||||
if (current.view === 'symbol' && trail.current?.id !== current.id) {
|
||||
trail.push({ id: current.id });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function isTypingTarget(target: EventTarget | null): boolean {
|
||||
if (!(target instanceof HTMLElement)) return false;
|
||||
return (
|
||||
target.isContentEditable ||
|
||||
target instanceof HTMLInputElement ||
|
||||
target instanceof HTMLTextAreaElement ||
|
||||
target instanceof HTMLSelectElement
|
||||
);
|
||||
}
|
||||
|
||||
function onkeydown(event: KeyboardEvent) {
|
||||
if (event.defaultPrevented) return;
|
||||
|
||||
// Cmd/Ctrl+K reaches the search box even from inside another field.
|
||||
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
|
||||
event.preventDefault();
|
||||
topbar?.focusSearch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
||||
if (isTypingTarget(event.target)) return;
|
||||
|
||||
switch (event.key) {
|
||||
case '/':
|
||||
event.preventDefault();
|
||||
topbar?.focusSearch();
|
||||
break;
|
||||
case 'm':
|
||||
event.preventDefault();
|
||||
navigate(mapHref());
|
||||
break;
|
||||
case 'f':
|
||||
event.preventDefault();
|
||||
navigate(flowHref());
|
||||
break;
|
||||
case 'Backspace':
|
||||
case '[':
|
||||
event.preventDefault();
|
||||
back();
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window {onkeydown} />
|
||||
|
||||
<TopBar bind:this={topbar} bind:query {project} {stats} />
|
||||
<TrailBar />
|
||||
<main>
|
||||
{#if route.view === 'symbol'}
|
||||
<SymbolView id={route.id} line={route.line} />
|
||||
{:else if route.view === 'file'}
|
||||
<FileView path={route.path} line={route.line} />
|
||||
{:else if route.view === 'map'}
|
||||
<MapView />
|
||||
{:else if route.view === 'flow'}
|
||||
<FlowView flowKey={route.key} />
|
||||
{:else if route.view === 'unknown'}
|
||||
<NotFoundView path={route.path} />
|
||||
{:else}
|
||||
<HomeView {project} />
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
/* The shell grid lives on #app (index.html's mount host) in app.css —
|
||||
Svelte's scoped styles cannot reach an element this component does not
|
||||
render. Only <main>, which it does render, is styled here. */
|
||||
main {
|
||||
/* min-height:0 lets the row shrink so the view, not the page, scrolls. */
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user