devdesk/web/src/sessions.js

// Sessions panel: server state (via `devdesk attach --list`), recently used
// sessions remembered in this browser, and session actions (new/rename/end).

import { fetchSessionList, sessionAction } from './connection.js';
import { slugify } from './protocol.js';
import { share } from './shared.js';

const RECENTS_KEY = 'devdesk.recents';
const MAX_RECENTS = 12;

function readRecents() {
  try {
    const value = JSON.parse(localStorage.getItem(RECENTS_KEY) || '[]');
    return Array.isArray(value) ? value : [];
  } catch {
    return [];
  }
}

function writeRecents(recents) {
  try {
    localStorage.setItem(RECENTS_KEY, JSON.stringify(recents.slice(0, MAX_RECENTS)));
  } catch {
    // Storage unavailable (private mode): recents are a convenience only.
  }
}

// Session names this browser used most recently, newest first.
export function recentNames() {
  return readRecents().map((r) => r.name);
}

export function rememberSession(name) {
  if (name) writeRecents([{ name, at: Date.now() }, ...readRecents().filter((r) => r.name !== name)]);
}

function forgetRecent(name) {
  writeRecents(readRecents().filter((r) => r.name !== name));
}

function renameRecent(from, to) {
  writeRecents(readRecents().map((r) => (r.name === from ? { ...r, name: to } : r)));
}

export function ago(epochSeconds) {
  if (!epochSeconds) return '';
  const s = Math.max(0, Date.now() / 1000 - epochSeconds);
  if (s < 90) return 'now';
  if (s < 3600) return `${Math.floor(s / 60)}m`;
  if (s < 86400) return `${Math.floor(s / 3600)}h`;
  return `${Math.floor(s / 86400)}d`;
}

export function el(tag, attrs = {}, ...children) {
  const node = document.createElement(tag);
  for (const [key, value] of Object.entries(attrs)) {
    if (value === undefined || value === null || value === false) continue;
    if (key === 'class') node.className = value;
    else if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
    else node.setAttribute(key, value === true ? '' : value);
  }
  node.append(...children.filter((c) => c !== null && c !== undefined));
  return node;
}

// What Claude is doing in a session, from the devdesk-state-hook snapshot.
// Returns { key, label, dot } for display; key is one of
// waiting | working | idle | exited | running | dormant.
export function sessionStatus(s) {
  if (!s?.running) return { key: 'dormant', label: 'dormant', dot: 'lt-dot-idle' };
  switch (s.status?.state) {
    case 'waiting': return { key: 'waiting', label: 'needs you', dot: 'lt-dot-down' };
    case 'working': return { key: 'working', label: 'working', dot: 'lt-dot-warn' };
    case 'idle': return { key: 'idle', label: 'idle', dot: 'lt-dot-up' };
    case 'exited': return { key: 'exited', label: 'Claude exited', dot: 'lt-dot-idle' };
    default: return { key: 'running', label: 'running', dot: 'lt-dot-up' };
  }
}

export class SessionsPanel {
  // hooks: onOpen(name), onEnding(name), onEnded(name), onEndAborted(), onRenamed(from, to), onData(data)
  constructor({ list, form, nameInput, select, refreshButton, newToggle, status, hooks }) {
    Object.assign(this, { list, form, nameInput, select, newToggle, status, hooks });
    this.current = null;
    this.data = null;
    this.pending = null;
    refreshButton.addEventListener('click', () => this.refresh());
    newToggle.addEventListener('click', () => this.toggleForm());
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      this.createFromForm();
    });
  }

  toggleForm(open = this.form.hidden) {
    this.form.hidden = !open;
    this.newToggle.setAttribute('aria-expanded', String(open));
    if (open) this.nameInput.focus();
  }

  setCurrent(name) {
    this.current = name;
    if (this.data) this.render();
  }

  setStatus(text, isError = false) {
    this.status.textContent = text;
    this.status.classList.toggle('is-error', isError);
  }

  // Concurrent callers share the request in flight (boot awaits the first list).
  refresh() {
    this.pending ??= this.load().finally(() => { this.pending = null; });
    return this.pending;
  }

  async load() {
    let fetched = false;
    try {
      this.data = await fetchSessionList();
      fetched = true;
      share('sessions', this.data);
      if (!this.status.classList.contains('is-error')) this.setStatus('');
    } catch (err) {
      this.setStatus(`list unavailable: ${err.message}`, true);
    }
    this.render();
    this.hooks.onData?.(this.data, { fetched });
  }

  // A list another tab fetched (devdesk#8).
  accept(data) {
    this.data = data;
    this.render();
    this.hooks.onData?.(this.data, { fetched: false });
  }

  async act(label, action, ...args) {
    this.setStatus(`${label}…`);
    try {
      await sessionAction(action, ...args);
      this.setStatus('');
      return true;
    } catch (err) {
      this.setStatus(err.message, true);
      return false;
    }
  }

  async createFromForm() {
    const project = this.select.value;
    const name = slugify(this.nameInput.value) || project;
    if (!name) {
      this.setStatus('Type a session name or pick a project.', true);
      this.nameInput.focus();
      return;
    }
    // With a project the session starts in that folder; without one, in the default folder.
    if (project && !(await this.act('creating', 'new', name, project))) return;
    this.nameInput.value = '';
    this.select.value = '';
    this.toggleForm(false);
    this.hooks.onOpen(name);
  }

  async rename(name) {
    const answer = window.prompt(`Rename session "${name}" to:`, name);
    if (answer === null) return;
    const next = slugify(answer);
    if (!next || next === name) {
      if (!next) this.setStatus('Names use letters, numbers, - and _.', true);
      return;
    }
    if (await this.act('renaming', 'rename', name, next)) {
      renameRecent(name, next);
      this.hooks.onRenamed(name, next);
      await this.refresh();
    }
  }

  async end(session) {
    const question = session.running
      ? `End session "${session.name}"?\n\nClaude in this session stops. The conversation stays in Claude's history (claude --resume).`
      : `Forget dormant session "${session.name}"?`;
    if (!window.confirm(question)) return;
    if (session.name === this.current) this.hooks.onEnding?.(session.name);
    if (await this.act(session.running ? 'ending' : 'forgetting', 'end', session.name)) {
      forgetRecent(session.name);
      this.hooks.onEnded(session.name);
      await this.refresh();
    } else if (session.name === this.current) {
      this.hooks.onEndAborted?.();
    }
  }

  renderSession(s) {
    const isCurrent = s.name === this.current;
    const status = sessionStatus(s);
    const ctx = s.context?.used_pct != null ? `ctx ${Math.floor(s.context.used_pct)}%` : '';
    const since = s.status?.since ? ago(s.status.since) : ago(s.activity);
    const model = isCurrent && s.context?.model ? s.context.model.replace(/^Claude\s+/i, '') : '';
    const meta = s.running
      ? [`${status.label}${since && since !== 'now' ? ` ${since}` : ''}`, ctx, model, s.attached ? `${s.attached} open` : '']
        .filter(Boolean).join(' · ')
      : 'dormant · resumes Claude';
    const pct = s.context?.used_pct;
    const title = [
      s.dir,
      status.key === 'waiting' && s.status?.message,
      s.context?.model && `${s.context.model}${s.context.cost_usd != null ? ` · $${s.context.cost_usd.toFixed(2)}` : ''}`,
    ].filter(Boolean).join('\n');
    const iconButton = (label, glyph, onclick, extra = '') =>
      el('button', { class: `dd-icon-btn ${extra}`, type: 'button', title: label, 'aria-label': `${label} ${s.name}`, onclick }, glyph);
    return el('li', { class: `dd-session-item is-${status.key}${isCurrent ? ' is-current' : ''}` },
      el('button', { class: 'dd-session-open', type: 'button', title, onclick: () => this.hooks.onOpen(s.name) },
        el('span', { class: `lt-dot ${status.dot}` }),
        el('span', { class: 'dd-session-name' }, s.name),
        el('span', { class: 'dd-session-meta' }, meta),
        pct != null ? el('span', { class: `dd-ctx${pct >= 90 ? ' is-full' : pct >= 70 ? ' is-high' : ''}`, 'aria-hidden': 'true' },
          el('span', { class: 'dd-ctx-fill', style: `width:${Math.min(100, pct)}%` })) : null),
      el('span', { class: 'dd-session-actions' },
        iconButton('Rename', '✎', () => this.rename(s.name)),
        el('a', {
          class: 'dd-icon-btn', href: `?arg=${encodeURIComponent(s.name)}`, target: '_blank', rel: 'noopener',
          title: 'Open in a new tab', 'aria-label': `Open ${s.name} in a new tab`,
        }, '↗'),
        iconButton(s.running ? 'End session' : 'Forget', '×', () => this.end(s), 'dd-danger')));
  }

  render() {
    const sessions = this.data?.sessions ?? [];
    const known = new Set(sessions.map((s) => s.name));
    const recentsOnly = readRecents().filter((r) => !known.has(r.name)).slice(0, 5);

    const ordered = [...sessions].sort((a, b) =>
      (b.running - a.running) || ((b.activity || 0) - (a.activity || 0)) || a.name.localeCompare(b.name));
    const items = ordered.map((s) => this.renderSession(s));
    for (const r of recentsOnly) {
      items.push(el('li', { class: 'dd-session-item is-recent' },
        el('button', { class: 'dd-session-open', type: 'button', onclick: () => this.hooks.onOpen(r.name) },
          el('span', { class: 'lt-dot lt-dot-idle' }),
          el('span', { class: 'dd-session-name' }, r.name),
          el('span', { class: 'dd-session-meta' }, 'recent in this browser')),
        el('span', { class: 'dd-session-actions' },
          el('button', {
            class: 'dd-icon-btn dd-danger', type: 'button', title: 'Remove from recents',
            onclick: () => { forgetRecent(r.name); this.render(); },
          }, '×'))));
    }
    if (!items.length) items.push(el('li', { class: 'dd-empty' }, 'No sessions yet.'));
    this.list.replaceChildren(...items);

    const projects = this.data?.projects ?? [];
    const chosen = this.select.value;
    this.select.replaceChildren(
      el('option', { value: '' }, `No project (${this.data?.root ?? 'default folder'})`),
      ...projects.filter((p) => p.name !== this.data?.default)
        .map((p) => el('option', { value: p.name, title: p.dir }, p.name)));
    this.select.value = chosen;
  }
}