@stephen-netu/design-system 0.1.0

package/src/l0-layout/epistemic/AssayDetailPanel.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import type { AssayClearanceView } from '../../epistemic/types.js';
+  import AssayBadge from '../../u0-primitives/assay-badge/AssayBadge.svelte';
+  import AssaySignalBar from '../../u0-primitives/assay-badge/AssaySignalBar.svelte';
+
+  interface Props {
+    clearance: AssayClearanceView;
+    onViewWitness?: () => void;
+    onViewHash?: () => void;
+    class?: string;
+  }
+
+  let { clearance, onViewWitness, onViewHash, class: className = '' }: Props = $props();
+
+  const hardGates = $derived(clearance.signals.filter(s => s.isHardGate));
+  const weightedSignals = $derived(clearance.signals.filter(s => !s.isHardGate));
+  const weightedSumPct = $derived((clearance.weightedSum * 100).toFixed(0));
+</script>
+
+<div class="ds-assay-detail {className}">
+  <!-- Header -->
+  <div class="header">
+    <div class="header-row">
+      <span class="label">Checkpoint:</span>
+      <span class="value">{clearance.checkpoint}</span>
+      <span class="label">Tick:</span>
+      <span class="value mono">{clearance.computedAt}</span>
+    </div>
+    <div class="header-row">
+      <span class="label">Gate:</span>
+      <AssayBadge {clearance} size="md" />
+      <span class="label">Weighted:</span>
+      <span class="value mono">{weightedSumPct}%</span>
+    </div>
+  </div>
+
+  <!-- Hard Gates section -->
+  {#if hardGates.length > 0}
+    <div class="section">
+      <div class="section-title">Hard Gates</div>
+      {#each hardGates as signal}
+        <AssaySignalBar {signal} />
+      {/each}
+    </div>
+  {/if}
+
+  <!-- Weighted Signals section -->
+  {#if weightedSignals.length > 0}
+    <div class="section">
+      <div class="section-title">Weighted Signals</div>
+      {#each weightedSignals as signal}
+        <AssaySignalBar {signal} />
+      {/each}
+    </div>
+  {/if}
+
+  {#if clearance.isDegraded}
+    <div class="degraded-notice">
+      Degraded — some soft signals were unavailable at evaluation time
+    </div>
+  {/if}
+
+  <!-- Footer -->
+  <div class="footer">
+    <button class="link-btn" type="button" onclick={onViewWitness}>
+      View sigchain witness
+    </button>
+    <button class="link-btn" type="button" onclick={onViewHash}>
+      View clearance hash
+    </button>
+  </div>
+</div>
+
+<style>
+  .ds-assay-detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    background: var(--color-bg-panel);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-default);
+    min-width: 320px;
+    font-family: var(--font-sans);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .header-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .label {
+    font-size: var(--text-xs);
+    color: var(--color-text-tertiary);
+    min-width: 6rem;
+  }
+
+  .value {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+  }
+
+  .mono {
+    font-family: var(--font-mono);
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .section-title {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--color-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: var(--space-1) 0;
+    border-bottom: 1px solid var(--border-subtle);
+    margin-bottom: var(--space-1);
+  }
+
+  .degraded-notice {
+    font-size: var(--text-xs);
+    color: var(--epistemic-degraded);
+    font-style: italic;
+    padding: var(--space-2);
+    background: rgba(107, 114, 128, 0.08);
+    border-radius: var(--radius-sm);
+  }
+
+  .footer {
+    display: flex;
+    gap: var(--space-3);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .link-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    color: var(--color-accent);
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .link-btn:hover {
+    color: var(--color-accent-hover);
+  }
+</style>

package/src/l0-layout/epistemic/AvenueTrace.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import type { AvenueTraceView, AvenueStepView } from '../../epistemic/types.js';
+
+  interface Props {
+    trace: AvenueTraceView;
+    expanded?: boolean;
+    class?: string;
+  }
+
+  let { trace, expanded = false, class: className = '' }: Props = $props();
+
+  let isExpanded: boolean = $state(false);
+
+  $effect(() => {
+    isExpanded = expanded;
+  });
+
+  const sourceCount = $derived(
+    trace.steps.filter((s: AvenueStepView) => s.step_type === 'retrieve').length
+  );
+
+  const confidencePct = $derived(`${Math.round(trace.confidence * 100)}%`);
+
+  function stepIcon(stepType: AvenueStepView['step_type']): string {
+    switch (stepType) {
+      case 'query': return '⊕';
+      case 'retrieve': return '⊙';
+      case 'filter': return '⊘';
+      case 'synthesize': return '⊛';
+      case 'contradict': return '⊗';
+      case 'verify': return '⊚';
+      default: return '○';
+    }
+  }
+
+  function stepLabel(stepType: AvenueStepView['step_type']): string {
+    switch (stepType) {
+      case 'query': return 'Query';
+      case 'retrieve': return 'Retrieve';
+      case 'filter': return 'Filter';
+      case 'synthesize': return 'Synthesize';
+      case 'contradict': return 'Contradiction';
+      case 'verify': return 'Verify';
+      default: return stepType;
+    }
+  }
+</script>
+
+<div class="ds-avenue-trace {className}" class:expanded={isExpanded}>
+
+  {#if !isExpanded}
+    <!-- Collapsed summary bar -->
+    <div class="collapsed-bar">
+      <span class="summary">
+        {trace.steps.length} step{trace.steps.length !== 1 ? 's' : ''}
+        · {sourceCount} source{sourceCount !== 1 ? 's' : ''}
+        · {confidencePct} confidence
+      </span>
+      {#if trace.isPartial}
+        <span class="partial-tag">(partial)</span>
+      {/if}
+      <button class="expand-btn" type="button" onclick={() => isExpanded = true}>
+        Expand →
+      </button>
+    </div>
+
+  {:else}
+    <!-- Expanded step timeline -->
+    <div class="expanded-header">
+      <span class="header-title">Agent Avenue</span>
+      {#if trace.isPartial}
+        <span class="partial-tag">partial — agent did not log all steps</span>
+      {/if}
+      <button class="collapse-btn" type="button" onclick={() => isExpanded = false}>
+        ← Collapse
+      </button>
+    </div>
+
+    <div class="steps">
+      {#each trace.steps as step, i}
+        <div class="step">
+          <!-- Step connector -->
+          <div class="step-track">
+            <div class="step-icon">{stepIcon(step.step_type)}</div>
+            {#if i < trace.steps.length - 1}
+              <div class="step-line"></div>
+            {/if}
+          </div>
+
+          <!-- Step content -->
+          <div class="step-body">
+            <div class="step-header">
+              <span class="step-type">{stepLabel(step.step_type)}</span>
+            </div>
+            <div class="step-summary">{step.summary}</div>
+          </div>
+        </div>
+      {/each}
+
+      {#if trace.steps.length === 0}
+        <div class="empty-steps">
+          {trace.isPartial ? 'No step data available — agent session predates structured logging.' : 'No steps recorded.'}
+        </div>
+      {/if}
+    </div>
+
+    <div class="expanded-footer">
+      <span class="footer-confidence">Aggregate confidence: {confidencePct}</span>
+    </div>
+  {/if}
+
+</div>
+
+<style>
+  .ds-avenue-trace {
+    font-family: var(--font-sans);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    background: var(--color-bg-panel-elevated);
+    overflow: hidden;
+  }
+
+  /* Collapsed */
+  .collapsed-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .summary {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+    flex: 1;
+  }
+
+  .partial-tag {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+
+  .expand-btn, .collapse-btn {
+    background: none;
+    border: none;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    color: var(--color-accent);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .expand-btn:hover, .collapse-btn:hover {
+    color: var(--color-accent-hover);
+  }
+
+  /* Expanded */
+  .expanded-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .header-title {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    flex: 1;
+  }
+
+  .steps {
+    padding: var(--space-3) var(--space-4);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .step {
+    display: flex;
+    gap: var(--space-3);
+    min-height: 2.5rem;
+  }
+
+  .step-track {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1.5rem;
+  }
+
+  .step-icon {
+    font-size: var(--text-sm);
+    color: var(--color-accent);
+    line-height: 1.4;
+  }
+
+  .step-line {
+    width: 1px;
+    flex: 1;
+    background: var(--border-default);
+    min-height: 1rem;
+    margin: 2px 0;
+  }
+
+  .step-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-bottom: var(--space-3);
+    flex: 1;
+  }
+
+  .step-header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-2);
+  }
+
+  .step-type {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .step-summary {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+  }
+
+  .empty-steps {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-style: italic;
+    padding: var(--space-4) 0;
+    text-align: center;
+  }
+
+  .expanded-footer {
+    padding: var(--space-2) var(--space-4);
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .footer-confidence {
+    font-size: var(--text-xs);
+    color: var(--color-text-tertiary);
+    font-family: var(--font-mono);
+  }
+</style>

package/src/l0-layout/epistemic/KnowledgeDetailPanel.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import type { KnowledgeEpistemicDetail, ProvenanceChainNode } from '../../epistemic/types.js';
+  import AssayBadge from '../../u0-primitives/assay-badge/AssayBadge.svelte';
+  import AllayGauge from '../../u0-primitives/allay-gauge/AllayGauge.svelte';
+  import ExpertBadge from '../../u0-primitives/expert-badge/ExpertBadge.svelte';
+  import AssayDetailPanel from './AssayDetailPanel.svelte';
+  import AllayDetailPanel from './AllayDetailPanel.svelte';
+  import ProvenanceChain from './ProvenanceChain.svelte';
+  import AvenueTrace from './AvenueTrace.svelte';
+
+  interface Props {
+    detail: KnowledgeEpistemicDetail;
+    onnodeclick?: (node: ProvenanceChainNode) => void;
+    class?: string;
+  }
+
+  let { detail, onnodeclick, class: className = '' }: Props = $props();
+
+  type Tab = 'overview' | 'allay' | 'assay' | 'provenance' | 'trace';
+  let activeTab: Tab = $state('overview');
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'allay', label: 'Allay' },
+    { id: 'assay', label: 'ASSAY' },
+    { id: 'provenance', label: 'Provenance' },
+    { id: 'trace', label: 'Ψ-Trace' },
+  ];
+
+  const hashPreview = $derived(
+    detail.contentHash.length > 12 ? detail.contentHash.slice(0, 12) + '…' : detail.contentHash
+  );
+
+
+</script>
+
+<div class="ds-knowledge-detail {className}">
+  <!-- Tab bar -->
+  <div class="tab-bar" role="tablist">
+    {#each tabs as tab}
+      <button
+        class="tab"
+        class:active={activeTab === tab.id}
+        role="tab"
+        aria-selected={activeTab === tab.id}
+        onclick={() => activeTab = tab.id}
+        type="button"
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Tab content -->
+  <div class="tab-content">
+
+    {#if activeTab === 'overview'}
+      <div class="overview">
+        <div class="field-row">
+          <span class="field-label">Title</span>
+          <span class="field-value">{detail.title}</span>
+        </div>
+        <div class="field-row">
+          <span class="field-label">Source</span>
+          <span class="field-value mono">{detail.source}</span>
+        </div>
+        <div class="field-row">
+          <span class="field-label">Expert</span>
+          {#if detail.expert && typeof detail.expert === 'object'}
+            <ExpertBadge expert={detail.expert} size="md" />
+          {:else}
+            <span class="field-value">{detail.expert ?? '—'}</span>
+          {/if}
+        </div>
+        <div class="field-row">
+          <span class="field-label">Content hash</span>
+          <span class="field-value mono" title={detail.contentHash}>{hashPreview}</span>
+        </div>
+        <div class="field-row">
+          <span class="field-label">Convergence</span>
+          <span class="field-value">{detail.convergence} independent witness(es)</span>
+        </div>
+        <div class="field-row">
+          <span class="field-label">Allay</span>
+          <AllayGauge stage={detail.allay.stage} confidence={detail.allay.confidence} size="sm" showLabel />
+        </div>
+        <div class="field-row">
+          <span class="field-label">ASSAY</span>
+          {#if detail.assay}<AssayBadge clearance={detail.assay} size="md" />{/if}
+        </div>
+      </div>
+
+    {:else if activeTab === 'allay'}
+      <AllayDetailPanel allay={detail.allay} />
+
+    {:else if activeTab === 'assay'}
+      {#if detail.assay}
+        <AssayDetailPanel clearance={detail.assay} />
+      {:else}
+        <div class="empty">ASSAY not yet evaluated for this atom.</div>
+      {/if}
+
+    {:else if activeTab === 'provenance'}
+      <ProvenanceChain nodes={detail.provenance ?? []} {onnodeclick} />
+
+    {:else if activeTab === 'trace'}
+      {#if detail.avenue}
+        <AvenueTrace trace={detail.avenue} expanded={true} />
+      {:else}
+        <div class="empty">No avenue trace available</div>
+      {/if}
+    {/if}
+
+  </div>
+</div>
+
+<style>
+  .ds-knowledge-detail {
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg-panel);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-default);
+    min-width: 360px;
+    max-width: 600px;
+    font-family: var(--font-sans);
+    overflow: hidden;
+  }
+
+  .tab-bar {
+    display: flex;
+    border-bottom: 1px solid var(--border-default);
+    background: var(--color-bg-panel-elevated);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tab-bar::-webkit-scrollbar { display: none; }
+
+  .tab {
+    padding: var(--space-2) var(--space-4);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color 150ms, border-color 150ms;
+  }
+
+  .tab:hover { color: var(--color-text-secondary); }
+
+  .tab.active {
+    color: var(--color-accent);
+    border-bottom-color: var(--color-accent);
+  }
+
+  .tab-content {
+    padding: var(--space-4);
+    overflow-y: auto;
+    max-height: 60vh;
+  }
+
+  .overview {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .field-row {
+    display: grid;
+    grid-template-columns: 7rem 1fr;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) 0;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .field-label {
+    font-size: var(--text-xs);
+    color: var(--color-text-tertiary);
+  }
+
+  .field-value {
+    font-size: var(--text-xs);
+    color: var(--color-text-primary);
+  }
+
+  .mono {
+    font-family: var(--font-mono);
+    word-break: break-all;
+  }
+
+  .empty {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-style: italic;
+    padding: var(--space-4) 0;
+    text-align: center;
+  }
+</style>