phase 2

ui/framework/src/components/LayoutGrid.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  columns?: number
+  rows?: number
+  gap?: string
+}>(), {
+  columns: 2,
+  rows: 2,
+  gap: 'var(--space-2)',
+})
+</script>
+
+<template>
+  <div
+    class="layout-grid"
+    :style="{
+      gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+      gridTemplateRows: `repeat(${props.rows}, 1fr)`,
+      gap: props.gap,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.layout-grid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+}
+</style>

ui/framework/src/components/Panel.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  status?: 'idle' | 'live' | 'processing' | 'error'
+}>()
+</script>
+
+<template>
+  <div class="panel">
+    <div class="panel-header">
+      <span class="panel-title">{{ title }}</span>
+      <span class="panel-status" :class="status ?? 'idle'" />
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+    <div class="panel-overlay">
+      <slot name="overlay" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.panel {
+  position: relative;
+  background: var(--surface-1);
+  border: var(--panel-border);
+  border-radius: var(--panel-radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--panel-header-height);
+  padding: 0 var(--space-3);
+  background: var(--surface-2);
+  border-bottom: var(--panel-border);
+  flex-shrink: 0;
+}
+
+.panel-title {
+  font-family: var(--font-ui);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.panel-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: auto;
+}
+.panel-status.idle { background: var(--status-idle); }
+.panel-status.live { background: var(--status-live); }
+.panel-status.processing { background: var(--status-processing); }
+.panel-status.error { background: var(--status-error); }
+
+.panel-body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-2);
+}
+
+.panel-overlay {
+  position: absolute;
+  inset: var(--panel-header-height) 0 0 0;
+  pointer-events: none;
+}
+.panel-overlay > :deep(*) {
+  pointer-events: auto;
+}
+</style>

ui/framework/src/index.ts

@@ -3,3 +3,7 @@ export { DataSource, type DataSourceStatus } from './datasources/DataSource'
 export { SSEDataSource } from './datasources/SSEDataSource'
 export { StaticDataSource } from './datasources/StaticDataSource'
 export { useDataSource } from './composables/useDataSource'
+
+// Components
+export { default as Panel } from './components/Panel.vue'
+export { default as LayoutGrid } from './components/LayoutGrid.vue'

ui/framework/src/tokens.css

@@ -0,0 +1,45 @@
+/* Framework design tokens — retheme by replacing this file */
+:root {
+  /* spacing scale (4px base) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* color — dark theme (observability UIs are always dark) */
+  --surface-0: #0d0d0f;
+  --surface-1: #16161a;
+  --surface-2: #1e1e24;
+  --surface-3: #26262f;
+  --border:    #2e2e38;
+
+  --text-primary:   #e8e8f0;
+  --text-secondary: #8888a0;
+  --text-dim:       #555568;
+
+  /* status colors */
+  --status-idle:       #555568;
+  --status-live:       #3ecf8e;
+  --status-processing: #4f9cf9;
+  --status-escalating: #f5a623;
+  --status-error:      #f06565;
+
+  /* confidence color scale (low → high) */
+  --conf-low:    #f06565;
+  --conf-mid:    #f5a623;
+  --conf-high:   #3ecf8e;
+
+  /* typography */
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --font-ui:   'Inter', system-ui, sans-serif;
+  --font-size-sm: 11px;
+  --font-size-base: 13px;
+  --font-size-lg: 15px;
+
+  /* panel chrome */
+  --panel-radius: 6px;
+  --panel-border: 1px solid var(--border);
+  --panel-header-height: 36px;
+}