<script lang="ts">
import { appStore } from '$lib/store.svelte.js';
</script>
<div class="panel">
<div class="header">MCP</div>
{#if appStore.activeMcpServer}
<div class="status">
<span class="dot active"></span>
<span class="name">{appStore.activeMcpServer}</span>
</div>
{:else}
<div class="status">
<span class="dot"></span>
<span class="dim">idle</span>
</div>
{/if}
</div>
<style>
.panel {
font-family: monospace;
font-size: 0.8rem;
}
.header {
color: var(--accent);
padding: 0.25rem 0.5rem;
font-weight: bold;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.status {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.5rem;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fg-dim);
flex-shrink: 0;
}
.dot.active {
background: var(--green);
box-shadow: 0 0 4px var(--green);
}
.name {
color: var(--cyan);
font-size: 0.75rem;
}
.dim {
color: var(--fg-dim);
font-size: 0.7rem;
}
</style>