Skip to content

Instantly share code, notes, and snippets.

@beckyconning

beckyconning/all-states.png

Last active May 18, 2026 16:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save beckyconning/2af668dbea60997ce9e701de59f2c6df to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save beckyconning/2af668dbea60997ce9e701de59f2c6df to your computer and use it in GitHub Desktop.
Download ZIP
Anima PR #3332 — semantic-model status indicator preview screenshots
Raw
semantic-model-status-preview.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Semantic Model Status — Preview</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--border: 240 5.9% 90%;
--destructive: 0 84.2% 60.2%;
}
body {
background: hsl(240 5% 96%);
color: hsl(var(--foreground));
font-family:
ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
}
.input {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.875rem;
color: hsl(var(--foreground));
}
.select-trigger {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: hsl(var(--foreground));
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.label {
font-size: 0.875rem;
font-weight: 500;
}
.muted {
color: hsl(var(--muted-foreground));
}
.destructive {
color: hsl(var(--destructive));
}
.copy-btn {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: hsl(var(--muted-foreground));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
</style>
</head>
<body class="p-10">
<div class="mx-auto max-w-3xl space-y-8">
<header class="space-y-1">
<h1 class="text-2xl font-bold">Debug AI → MCP card — Semantic model status indicator</h1>
<p class="muted text-sm">
The new inline status row sits directly below the existing Mode
description, and only renders when <code class="rounded bg-gray-200 px-1 py-0.5 font-mono text-xs">activeMode === 'get_answer_v1'</code>.
The mocked panel below shows the surrounding context once per state.
</p>
</header>
<!-- State 1 — generating -->
<section class="card">
<header class="flex items-center gap-2 border-b border-gray-200 px-6 py-4">
<!-- lucide Cable -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z"/><path d="M3 5V3"/><path d="M7 5V3"/><path d="M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9"/><path d="M17 21v-2"/><path d="M21 21v-2"/><path d="M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Z"/></svg>
<h2 class="text-base font-semibold">MCP Server</h2>
<span class="ml-auto rounded-full bg-indigo-100 text-indigo-700 text-xs px-2 py-0.5 font-medium">State: generating</span>
</header>
<div class="px-6 py-5 space-y-4">
<div class="space-y-2">
<label class="label">MCP Server URL</label>
<div class="flex gap-2">
<input class="input flex-1" readonly value="https://anima.precog.com/api/mcp/s/srv_b2c8…?mode=get_answer_v1" />
<button class="copy-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
</button>
</div>
</div>
<div class="space-y-2">
<label class="label">Mode</label>
<div class="select-trigger">
<span>Get Answer V1</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<p class="muted text-xs">Natural-language questions answered end-to-end via the verified-query cache and the focused-model SQL pipeline. Best for ad-hoc business questions.</p>
<!-- INDICATOR — generating -->
<p class="flex items-center gap-1.5 text-xs text-gray-900">
<svg class="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
Semantic model is being generated (running)…
</p>
</div>
</div>
</section>
<!-- State 2 — indexing -->
<section class="card">
<header class="flex items-center gap-2 border-b border-gray-200 px-6 py-4">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z"/><path d="M3 5V3"/><path d="M7 5V3"/><path d="M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9"/><path d="M17 21v-2"/><path d="M21 21v-2"/><path d="M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Z"/></svg>
<h2 class="text-base font-semibold">MCP Server</h2>
<span class="ml-auto rounded-full bg-indigo-100 text-indigo-700 text-xs px-2 py-0.5 font-medium">State: indexing</span>
</header>
<div class="px-6 py-5 space-y-4">
<div class="space-y-2">
<label class="label">Mode</label>
<div class="select-trigger">
<span>Get Answer V1</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<p class="muted text-xs">Natural-language questions answered end-to-end via the verified-query cache and the focused-model SQL pipeline. Best for ad-hoc business questions.</p>
<p class="flex items-center gap-1.5 text-xs text-gray-900">
<svg class="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
Semantic model is being indexed…
</p>
</div>
</div>
</section>
<!-- State 3 — ready -->
<section class="card">
<header class="flex items-center gap-2 border-b border-gray-200 px-6 py-4">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z"/><path d="M3 5V3"/><path d="M7 5V3"/><path d="M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9"/><path d="M17 21v-2"/><path d="M21 21v-2"/><path d="M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Z"/></svg>
<h2 class="text-base font-semibold">MCP Server</h2>
<span class="ml-auto rounded-full bg-emerald-100 text-emerald-700 text-xs px-2 py-0.5 font-medium">State: ready</span>
</header>
<div class="px-6 py-5 space-y-4">
<div class="space-y-2">
<label class="label">Mode</label>
<div class="select-trigger">
<span>Get Answer V1</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<p class="muted text-xs">Natural-language questions answered end-to-end via the verified-query cache and the focused-model SQL pipeline. Best for ad-hoc business questions.</p>
<p class="flex items-center gap-1.5 text-xs text-gray-900">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
Semantic model ready (v3).
</p>
</div>
</div>
</section>
<!-- State 4 — generation_failed -->
<section class="card">
<header class="flex items-center gap-2 border-b border-gray-200 px-6 py-4">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z"/><path d="M3 5V3"/><path d="M7 5V3"/><path d="M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9"/><path d="M17 21v-2"/><path d="M21 21v-2"/><path d="M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Z"/></svg>
<h2 class="text-base font-semibold">MCP Server</h2>
<span class="ml-auto rounded-full bg-red-100 text-red-700 text-xs px-2 py-0.5 font-medium">State: generation_failed</span>
</header>
<div class="px-6 py-5 space-y-4">
<div class="space-y-2">
<label class="label">Mode</label>
<div class="select-trigger">
<span>Get Answer V1</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<p class="muted text-xs">Natural-language questions answered end-to-end via the verified-query cache and the focused-model SQL pipeline. Best for ad-hoc business questions.</p>
<p class="flex items-center gap-1.5 text-xs destructive">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
Semantic model generation failed: Snowflake auth expired
</p>
</div>
</div>
</section>
<!-- State 5 — no_model -->
<section class="card">
<header class="flex items-center gap-2 border-b border-gray-200 px-6 py-4">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z"/><path d="M3 5V3"/><path d="M7 5V3"/><path d="M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9"/><path d="M17 21v-2"/><path d="M21 21v-2"/><path d="M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Z"/></svg>
<h2 class="text-base font-semibold">MCP Server</h2>
<span class="ml-auto rounded-full bg-gray-200 text-gray-700 text-xs px-2 py-0.5 font-medium">State: no_model</span>
</header>
<div class="px-6 py-5 space-y-4">
<div class="space-y-2">
<label class="label">Mode</label>
<div class="select-trigger">
<span>Get Answer V1</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<p class="muted text-xs">Natural-language questions answered end-to-end via the verified-query cache and the focused-model SQL pipeline. Best for ad-hoc business questions.</p>
<p class="flex items-center gap-1.5 text-xs muted">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
No semantic model has been generated for this assistant yet.
</p>
</div>
</div>
</section>
<!-- State 6 — SQL Analyst mode hides indicator -->
<section class="card">
<header class="flex items-center gap-2 border-b border-gray-200 px-6 py-4">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z"/><path d="M3 5V3"/><path d="M7 5V3"/><path d="M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9"/><path d="M17 21v-2"/><path d="M21 21v-2"/><path d="M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Z"/></svg>
<h2 class="text-base font-semibold">MCP Server</h2>
<span class="ml-auto rounded-full bg-gray-200 text-gray-700 text-xs px-2 py-0.5 font-medium">Mode: SQL Analyst v1 — indicator hidden</span>
</header>
<div class="px-6 py-5 space-y-4">
<div class="space-y-2">
<label class="label">Mode</label>
<div class="select-trigger">
<span>SQL Analyst v1</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<p class="muted text-xs">Direct SQL execution against your data warehouse. Includes database metadata and schema exploration.</p>
<!-- No semantic-model status row -->
</div>
</div>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment