Something went wrong. Try again.
small gleam coding and persistent agent daemon with a detachable cli and a canvas ui forked from okami.mom/albedo
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<script lang="ts"> import { listSkillLoads, type SkillLoadSummary } from './api'; import { ago } from './format'; import MenuButton from './MenuButton.svelte';
// The skills a session loaded, by its model or by a slash command: a book // icon, with how many, that lists them first loaded first with where each // came from. Read again when the session's work stops and when the list // opens. Nothing shows until there is one. let { sessionId, busy = false, up = false, inline = false }: { sessionId: string; busy?: boolean; up?: boolean; inline?: boolean } = $props(); let loaded = $state<SkillLoadSummary[]>([]); let listed = $state(false);
$effect(() => { void busy; void listed; const reading = new AbortController(); listSkillLoads(sessionId, reading.signal).then( (found) => (loaded = found), () => {}, ); return () => reading.abort(); });</script>
{#if loaded.length || inline} <MenuButton label="skills this session loaded" count={loaded.length} {up} {inline} bind:open={listed}> {#snippet icon()} <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path d="M3 3.5A1.5 1.5 0 0 1 4.5 2H13v10H4.5A1.5 1.5 0 0 0 3 13.5zM3 13.5A1.5 1.5 0 0 0 4.5 15H13v-3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" /></svg> {/snippet} {#each loaded as skill (skill.name)} <li class="skill" title={skill.source}> <span class="name">{skill.name}</span> <span class="when">{skill.scope}</span> <span class="when">{ago(new Date(skill.last_loaded_at * 1000).toISOString())}</span> </li> {/each} </MenuButton>{/if}
<style> .skill { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 7px 10px; color: var(--text); font-size: calc(12.5px * var(--ui-scale)); } .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }</style>