wsb-daemon 0.275.7622

wsb's daemon: the workbench, the GitHub mirror's schedule and peer continuity, for every workspace on the machine
<script lang="ts">
  import { renderMarkdown } from "../../utils/markdown.js";

  interface Props {
    content: string;
    name?: string;
  }

  let { content, name }: Props = $props();
  let collapsed: boolean = $state(true);

  let previewLine = $derived(
    content.split("\n")[0]?.slice(0, 80) ?? "",
  );
</script>

<div class="skill-block">
  <button
    class="skill-header"
    onclick={() => {
      const sel = window.getSelection();
      if (sel && sel.toString().length > 0) return;
      collapsed = !collapsed;
    }}
  >
    <span class="skill-chevron" class:open={!collapsed}>
      &#9656;
    </span>
    <span class="skill-label">Skill: {name ?? "unknown"}</span>
    {#if collapsed && previewLine}
      <span class="skill-preview">{previewLine}</span>
    {/if}
  </button>
  {#if !collapsed}
    <div class="skill-content markdown">
      {@html renderMarkdown(content)}
    </div>
  {/if}
</div>

<style>
  .skill-block {
    border-left: 2px solid var(--wb-accent-teal, #14b8a6);
    background: var(--wb-tool-bg);
    border-radius: 0 var(--wsb-radius-sm) var(--wsb-radius-sm) 0;
    margin: 0;
  }

  .skill-header {
    display: flex;
    align-items: center;
    gap: var(--wb-spacing-6);
    padding: var(--wb-spacing-6) var(--wb-spacing-10);
    width: 100%;
    text-align: left;
    font-size: var(--wb-font-size-12);
    color: var(--vscode-foreground);
    min-width: 0;
    border-radius: 0 var(--wsb-radius-sm) var(--wsb-radius-sm) 0;
    transition: background 0.1s;
    user-select: text;
  }

  .skill-header:hover {
    background: var(--vscode-list-hoverBackground);
    color: var(--vscode-editor-foreground);
  }

  .skill-chevron {
    display: inline-block;
    font-size: var(--wb-font-size-10);
    transition: transform 0.15s;
    flex-shrink: 0;
    color: var(--vscode-disabledForeground);
  }

  .skill-chevron.open {
    transform: rotate(90deg);
  }

  .skill-label {
    font-family: var(--wsb-font-mono);
    font-weight: 500;
    font-size: var(--wb-font-size-11);
    color: var(--wb-accent-teal, #14b8a6);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .skill-preview {
    font-family: var(--wsb-font-mono);
    font-size: var(--wb-font-size-12);
    color: var(--vscode-disabledForeground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .skill-content {
    padding: var(--wb-spacing-8) var(--wb-spacing-14) var(--wb-spacing-12);
    font-size: var(--wb-font-size-13);
    color: var(--vscode-foreground);
    line-height: 1.65;
    border-top: 1px solid var(--vscode-widget-border);
    overflow-x: auto;
  }
</style>