nanobot-voice-interface/examples/cards/templates/todo-item-live/template.html

<style>
  @font-face {
    font-family: 'M-1m Code';
    src: url('/card-templates/todo-item-live/assets/mplus-1m-regular-sub.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'M-1m Code';
    src: url('/card-templates/todo-item-live/assets/mplus-1m-bold-sub.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'IBM Plex Sans Condensed';
    src: url('/card-templates/todo-item-live/assets/ibm-plex-sans-condensed-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'IBM Plex Sans Condensed';
    src: url('/card-templates/todo-item-live/assets/ibm-plex-sans-condensed-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'IBM Plex Sans Condensed';
    src: url('/card-templates/todo-item-live/assets/ibm-plex-sans-condensed-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  .task-card {
    --task-accent: #58706f;
    --task-accent-soft: rgba(88, 112, 111, 0.12);
    --task-ink: #2f241e;
    --task-muted: #7e6659;
    --task-surface: rgba(255, 248, 239, 0.92);
    --task-surface-strong: rgba(250, 238, 221, 0.95);
    --task-border: rgba(87, 65, 50, 0.14);
    --task-button-ink: #214240;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--task-border);
    background:
      radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 32%),
      linear-gradient(145deg, rgba(253, 245, 235, 0.98), rgba(242, 227, 211, 0.97));
    color: var(--task-ink);
    font-family: 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      0 18px 36px rgba(79, 56, 43, 0.12);
  }

  .task-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(122, 97, 78, 0.035) 0,
        rgba(122, 97, 78, 0.035) 2px,
        transparent 2px,
        transparent 10px
      );
    pointer-events: none;
    opacity: 0.55;
  }

  .task-card__inner {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 15px 14px 13px 14px;
  }

  .task-card__topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .task-card__lane {
    min-width: 0;
    font-size: 0.69rem;
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--task-muted);
    font-weight: 700;
  }

  .task-card__stamp {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .task-card__title {
    font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
    font-size: 1.08rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--task-ink);
    text-wrap: balance;
    word-break: break-word;
  }

  .task-card__tags {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
  }

  .task-card__tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--task-accent-soft);
    color: var(--task-button-ink);
    font-size: 0.71rem;
    line-height: 1;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.035);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .task-card__body {
    display: none;
    font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
    font-size: 0.86rem;
    line-height: 1.34;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #624d40;
    opacity: 0.95;
  }

  .task-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .task-card__meta-chip {
    display: none;
    align-items: center;
    min-height: 25px;
    border-radius: 999px;
    padding: 5px 9px;
    background: var(--task-surface);
    color: var(--task-muted);
    font-size: 0.69rem;
    line-height: 1;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .task-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1px;
  }

  .task-card__button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 8px 11px;
    background: var(--task-accent);
    color: #f9f4ed;
    font: 700 0.74rem/1 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .task-card__button--secondary {
    background: var(--task-surface-strong);
    color: var(--task-button-ink);
  }

  .task-card__button:disabled {
    cursor: default;
    opacity: 0.55;
  }

  .task-card__move {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
  }

  .task-card__move-button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255, 248, 239, 0.78);
    color: var(--task-button-ink);
    font: 700 0.7rem/1 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
</style>

<div data-task-item-card class="task-card">
  <div class="task-card__inner">
    <div class="task-card__topline">
      <div data-task-subtitle class="task-card__lane">Task</div>
      <span data-task-status class="task-card__stamp"></span>
    </div>

    <div data-task-summary class="task-card__title">Loading...</div>
    <div data-task-tags class="task-card__tags"></div>
    <div data-task-description class="task-card__body"></div>

    <div class="task-card__meta">
      <div data-task-due class="task-card__meta-chip"></div>
      <div data-task-age class="task-card__meta-chip"></div>
    </div>

    <div class="task-card__actions">
      <button data-task-primary type="button" class="task-card__button" style="display:none;">Start</button>
      <button data-task-move-toggle type="button" class="task-card__button task-card__button--secondary" style="display:none;">Move</button>
    </div>

    <div data-task-move-menu class="task-card__move"></div>
  </div>
</div>

<script>
(() => {
  const script = document.currentScript;
  const root = script?.closest('[data-nanobot-card-root]');
  const state = window.__nanobotGetCardState?.(script) || {};
  if (!(root instanceof HTMLElement)) return;

  const cardEl = root.querySelector('[data-task-item-card]');
  const subtitleEl = root.querySelector('[data-task-subtitle]');
  const statusEl = root.querySelector('[data-task-status]');
  const summaryEl = root.querySelector('[data-task-summary]');
  const tagsEl = root.querySelector('[data-task-tags]');
  const dueEl = root.querySelector('[data-task-due]');
  const ageEl = root.querySelector('[data-task-age]');
  const descriptionEl = root.querySelector('[data-task-description]');
  const primaryEl = root.querySelector('[data-task-primary]');
  const moveToggleEl = root.querySelector('[data-task-move-toggle]');
  const moveMenuEl = root.querySelector('[data-task-move-menu]');
  if (
    !(cardEl instanceof HTMLElement) ||
    !(subtitleEl instanceof HTMLElement) ||
    !(statusEl instanceof HTMLElement) ||
    !(summaryEl instanceof HTMLElement) ||
    !(tagsEl instanceof HTMLElement) ||
    !(dueEl instanceof HTMLElement) ||
    !(ageEl instanceof HTMLElement) ||
    !(descriptionEl instanceof HTMLElement) ||
    !(primaryEl instanceof HTMLButtonElement) ||
    !(moveToggleEl instanceof HTMLButtonElement) ||
    !(moveMenuEl instanceof HTMLElement)
  ) return;

  const taskPath = typeof state.task_path === 'string' ? state.task_path.trim() : '';
  const taskKey = typeof state.task_key === 'string' ? state.task_key.trim() : '';
  const title = typeof state.title === 'string' ? state.title.trim() : '';
  const lane = typeof state.lane === 'string' ? state.lane.trim() : 'backlog';
  const created = typeof state.created === 'string' ? state.created.trim() : '';
  const updated = typeof state.updated === 'string' ? state.updated.trim() : '';
  const due = typeof state.due === 'string' ? state.due.trim() : '';
  const body = typeof state.body === 'string' ? state.body.trim() : '';
  const tags = Array.isArray(state.tags)
    ? state.tags.map((value) => String(value || '').trim()).filter(Boolean)
    : [];
  const metadata = state && typeof state.metadata === 'object' && state.metadata && !Array.isArray(state.metadata)
    ? state.metadata
    : {};

  const laneLabels = {
    backlog: 'Backlog',
    'in-progress': 'In Progress',
    blocked: 'Blocked',
    done: 'Done',
    canceled: 'Canceled',
  };

  const laneThemes = {
    backlog: {
      accent: '#5f7884',
      accentSoft: 'rgba(95, 120, 132, 0.13)',
      muted: '#6b7e87',
      buttonInk: '#294a57',
    },
    'in-progress': {
      accent: '#4f7862',
      accentSoft: 'rgba(79, 120, 98, 0.13)',
      muted: '#5e7768',
      buttonInk: '#214437',
    },
    blocked: {
      accent: '#a55f4b',
      accentSoft: 'rgba(165, 95, 75, 0.13)',
      muted: '#906659',
      buttonInk: '#6c2f21',
    },
    done: {
      accent: '#6d7f58',
      accentSoft: 'rgba(109, 127, 88, 0.12)',
      muted: '#6b755d',
      buttonInk: '#304121',
    },
    canceled: {
      accent: '#7b716a',
      accentSoft: 'rgba(123, 113, 106, 0.12)',
      muted: '#7b716a',
      buttonInk: '#433932',
    },
  };

  const actionLabels = {
    backlog: 'Backlog',
    'in-progress': 'Start',
    blocked: 'Block',
    done: 'Done',
    canceled: 'Cancel',
  };

  const primaryActionForLane = (value) => {
    if (value === 'backlog') return { lane: 'in-progress', label: 'Start' };
    if (value === 'in-progress') return { lane: 'done', label: 'Done' };
    if (value === 'blocked') return { lane: 'in-progress', label: 'Resume' };
    return null;
  };

  const moveOptionsForLane = (value) => {
    const primary = primaryActionForLane(value);
    return ['backlog', 'in-progress', 'blocked', 'done', 'canceled']
      .filter((targetLane) => targetLane !== value)
      .filter((targetLane) => !primary || targetLane !== primary.lane)
      .map((targetLane) => ({
        lane: targetLane,
        label: actionLabels[targetLane] || targetLane,
      }));
  };

  const applyTheme = () => {
    const theme = laneThemes[lane] || laneThemes.backlog;
    cardEl.style.setProperty('--task-accent', theme.accent);
    cardEl.style.setProperty('--task-accent-soft', theme.accentSoft);
    cardEl.style.setProperty('--task-muted', theme.muted);
    cardEl.style.setProperty('--task-button-ink', theme.buttonInk);
  };

  const setStatus = (label, fg, bg) => {
    statusEl.textContent = label;
    statusEl.style.color = fg;
    statusEl.style.background = bg;
    statusEl.style.display = label ? 'inline-flex' : 'none';
  };

  const parseDueTimeMs = () => {
    if (!due) return null;
    const raw = due.includes('T') ? due : `${due}T12:00:00`;
    const parsed = new Date(raw).getTime();
    return Number.isFinite(parsed) ? parsed : null;
  };

  const parseCreatedTimeMs = () => {
    if (!created) return null;
    const parsed = new Date(created).getTime();
    return Number.isFinite(parsed) ? parsed : null;
  };

  const computeScore = () => {
    const now = Date.now();
    const dueMs = parseDueTimeMs();
    let score = 70;
    if (Number.isFinite(dueMs)) {
      const hoursUntilDue = (dueMs - now) / (60 * 60 * 1000);
      if (hoursUntilDue <= 0) score = 100;
      else if (hoursUntilDue <= 6) score = 96;
      else if (hoursUntilDue <= 24) score = 92;
      else if (hoursUntilDue <= 72) score = 82;
      else if (hoursUntilDue <= 168) score = 72;
      else score = 62;
    } else {
      const createdMs = parseCreatedTimeMs();
      if (Number.isFinite(createdMs)) {
        const ageDays = Math.max(0, (now - createdMs) / (24 * 60 * 60 * 1000));
        if (ageDays >= 30) score = 94;
        else if (ageDays >= 21) score = 90;
        else if (ageDays >= 14) score = 86;
        else if (ageDays >= 7) score = 82;
        else if (ageDays >= 3) score = 78;
        else if (ageDays >= 1) score = 74;
      }
    }
    if (lane === 'blocked') return Math.min(100, score + 4);
    if (lane === 'in-progress') return Math.min(100, score + 2);
    return score;
  };

  const formatDue = () => {
    if (!due) return '';
    const raw = due.includes('T') ? due : `${due}T00:00:00`;
    const parsed = new Date(raw);
    if (Number.isNaN(parsed.getTime())) return `Due ${due}`;
    if (due.includes('T')) {
      return `Due ${parsed.toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}`;
    }
    return `Due ${parsed.toLocaleDateString([], { month: 'short', day: 'numeric' })}`;
  };

  const formatAge = () => {
    const createdMs = parseCreatedTimeMs();
    if (!Number.isFinite(createdMs)) return '';
    const days = Math.floor((Date.now() - createdMs) / (24 * 60 * 60 * 1000));
    if (days <= 0) return 'New today';
    if (days < 7) return `${days}d old`;
    if (days < 30) return `${Math.floor(days / 7)}w old`;
    return `${Math.floor(days / 30)}mo old`;
  };

  const summarizeBody = () => {
    if (!body) return '';
    const trimmed = body.trim();
    if (!trimmed || /^##\s+Imported\b/i.test(trimmed)) return '';
    const [firstSection] = trimmed.split(/\n##\s+/);
    const summary = firstSection
      .split(/\n{2,}/)
      .map((part) => part.trim())
      .find(Boolean);
    if (!summary) return '';
    if (summary.toLowerCase() === title.toLowerCase()) return '';
    return summary;
  };

  const publishLiveContent = (statusValue, exists = true, error = '') => {
    window.__nanobotSetCardLiveContent?.(script, {
      kind: 'file_task',
      exists,
      task_path: taskPath || null,
      task_key: taskKey || null,
      title: title || null,
      lane,
      created: created || null,
      updated: updated || null,
      due: due || null,
      tags,
      metadata,
      score: computeScore(),
      status: statusValue,
      error: error || null,
    });
  };

  const shellQuote = (value) => `'${String(value).replace(/'/g, `'\"'\"'`)}'`;

  const parseExecPayload = (result) => {
    if (result && typeof result === 'object' && result.parsed && typeof result.parsed === 'object') {
      return result.parsed;
    }
    const raw = typeof result?.content === 'string' ? result.content : '';
    const cleaned = raw.replace(/\nExit code:\s*\d+\s*$/i, '').trim();
    if (!cleaned) return null;
    try {
      return JSON.parse(cleaned);
    } catch {
      return null;
    }
  };

  const setBusy = (busy) => {
    primaryEl.disabled = busy;
    moveToggleEl.disabled = busy;
    for (const button of moveMenuEl.querySelectorAll('button')) {
      if (button instanceof HTMLButtonElement) button.disabled = busy;
    }
  };

  const refreshCards = () => {
    moveMenuEl.style.display = 'none';
    moveToggleEl.textContent = 'Move';
    moveToggleEl.setAttribute('aria-expanded', 'false');
    window.dispatchEvent(new Event('nanobot:cards-refresh'));
  };

  const runTransition = async (targetLane) => {
    if (!taskPath) return;
    setBusy(true);
    setStatus('Saving', '#6e5b4d', 'rgba(255, 244, 227, 0.9)');
    try {
      const command = [
        'python3',
        '/home/kacper/nanobot/scripts/task_cards.py',
        'move',
        '--task',
        shellQuote(taskPath),
        '--lane',
        shellQuote(targetLane),
      ].join(' ');
      const result = await window.__nanobotCallToolAsync?.(
        'exec',
        {
          command,
          max_output_chars: 50000,
        },
        {
          pollMs: 350,
          timeoutMs: 30000,
        },
      );
      const payload = parseExecPayload(result);
      if (payload && typeof payload === 'object' && payload.sync && typeof payload.sync === 'object') {
        publishLiveContent(targetLane, targetLane !== 'done' && targetLane !== 'canceled', '');
      }
      refreshCards();
    } catch (error) {
      console.error('Task transition failed', error);
      setBusy(false);
      setStatus('Unavailable', '#8e3023', '#f3d3cc');
      publishLiveContent(lane, true, String(error));
    }
  };

  const renderTags = () => {
    tagsEl.innerHTML = '';
    if (!tags.length) {
      tagsEl.style.display = 'none';
      return;
    }
    const visibleTags = tags.slice(0, 4);
    for (const tag of visibleTags) {
      const chip = document.createElement('span');
      chip.className = 'task-card__tag';
      chip.textContent = tag;
      tagsEl.appendChild(chip);
    }
    if (tags.length > visibleTags.length) {
      const overflow = document.createElement('span');
      overflow.className = 'task-card__tag';
      overflow.textContent = `+${tags.length - visibleTags.length}`;
      tagsEl.appendChild(overflow);
    }
    tagsEl.style.display = 'flex';
  };

  const renderMoveMenu = () => {
    moveMenuEl.innerHTML = '';
    const options = moveOptionsForLane(lane);
    if (!options.length || !taskPath) {
      moveToggleEl.style.display = 'none';
      return;
    }
    moveToggleEl.style.display = 'inline-flex';
    for (const option of options) {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'task-card__move-button';
      button.textContent = option.label;
      button.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        runTransition(option.lane);
      });
      moveMenuEl.appendChild(button);
    }
  };

  const renderPrimaryAction = () => {
    const primary = primaryActionForLane(lane);
    if (!primary || !taskPath) {
      primaryEl.style.display = 'none';
      primaryEl.disabled = true;
      return;
    }
    primaryEl.textContent = primary.label;
    primaryEl.style.display = 'inline-flex';
    primaryEl.disabled = false;
    primaryEl.onclick = (event) => {
      event.preventDefault();
      event.stopPropagation();
      runTransition(primary.lane);
    };
  };

  moveToggleEl.addEventListener('click', (event) => {
    event.preventDefault();
    event.stopPropagation();
    const open = moveMenuEl.style.display === 'flex';
    moveMenuEl.style.display = open ? 'none' : 'flex';
    moveToggleEl.textContent = open ? 'Move' : 'Close';
    moveToggleEl.setAttribute('aria-expanded', open ? 'false' : 'true');
  });

  const render = () => {
    applyTheme();
    subtitleEl.textContent = laneLabels[lane] || 'Task';
    summaryEl.textContent = title || '(Untitled task)';

    const dueText = formatDue();
    dueEl.textContent = dueText;
    dueEl.style.display = dueText ? 'inline-flex' : 'none';

    const ageText = formatAge();
    ageEl.textContent = ageText;
    ageEl.style.display = ageText ? 'inline-flex' : 'none';

    const bodySummary = summarizeBody();
    descriptionEl.textContent = bodySummary;
    descriptionEl.style.display = bodySummary ? 'block' : 'none';

    renderTags();
    setStatus('', '', 'transparent');
    renderPrimaryAction();
    renderMoveMenu();
    moveMenuEl.style.display = 'none';
    moveToggleEl.textContent = 'Move';
    moveToggleEl.setAttribute('aria-expanded', 'false');
    publishLiveContent(lane, true, '');
  };

  render();
})();
</script>