src/components/shared/TokenChip.svelte

<script lang="ts">
  let {
    text,
    kind = 'neutral',
    selected = false,
    title = '',
    onclick,
  }: {
    text: string;
    kind?: 'green' | 'red' | 'neutral';
    selected?: boolean;
    title?: string;
    onclick?: () => void;
  } = $props();

  const cls = $derived(
    kind === 'green' ? 'tok-green' : kind === 'red' ? 'tok-red' : 'tok-neutral',
  );
  const display = $derived(text.replace(/\n/g, '\\n').trim() || text || '␣');
</script>

<button class="chip mono {cls}" class:sel={selected} {title} onclick={() => onclick?.()}>
  {display}
</button>

<style>
  .chip {
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    cursor: pointer;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chip:hover {
    border-color: var(--accent);
    background-image: none;
  }
  .chip.sel {
    border-color: var(--accent);
    outline: 2px solid var(--accent-soft);
  }
</style>