devdesk/web/index.template.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#030508">
<meta name="generator" content="devdesk">
<title>DevDesk</title>
<link rel="icon" id="favicon" href="__FAVICON__">
<!--STYLES-->
</head>
<body class="dd-app">

<header class="lt-header dd-header">
  <div class="lt-header-left">
    <div class="lt-brand">
      <span class="lt-brand-title">DevDesk</span>
      <span class="lt-brand-subtitle">Claude Code workspace</span>
    </div>
    <div class="dd-session">
      <span class="lt-chip lt-chip-info" id="session-chip">—</span>
      <span class="dd-pane-title" id="pane-title"></span>
    </div>
  </div>
  <div class="lt-header-right">
    <span class="lt-ws-status" id="ws-status" data-state="connecting" role="status">
      <span class="lt-dot"></span><span id="ws-label">connecting</span>
    </span>
    <button type="button" class="lt-chip dd-sso" id="sso-badge" data-state="unknown" title="Signed in through Authelia">SSO</button>
    <div class="lt-btn-group dd-tools">
      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="font-down" title="Smaller text" aria-label="Smaller text">A−</button>
      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="font-up" title="Larger text" aria-label="Larger text">A+</button>
      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="notify-toggle" title="Desktop notification when Claude needs you">Alerts off</button>
      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="fullscreen-toggle" title="Fullscreen (also captures browser shortcuts in Chromium)">Full</button>
      <button type="button" class="lt-btn lt-btn-sm" id="sidebar-toggle" aria-controls="sidebar" aria-expanded="false">Panels</button>
    </div>
  </div>
</header>

<main class="dd-main">
  <section class="lt-frame dd-terminal-frame" aria-label="Terminal">
    <div id="terminal" class="dd-terminal"></div>
    <div id="overlay" class="dd-overlay" data-tone="info" hidden>
      <div class="lt-frame dd-overlay-card" role="alertdialog" aria-labelledby="overlay-title" aria-describedby="overlay-text">
        <div class="lt-section-header" id="overlay-title">Disconnected</div>
        <div class="lt-section-body">
          <p id="overlay-text" class="dd-overlay-text"></p>
          <div class="lt-btn-group" id="overlay-actions"></div>
        </div>
      </div>
    </div>
  </section>

  <aside id="sidebar" class="dd-sidebar" aria-label="Panels">
    <section class="lt-frame dd-widget" id="widget-sessions" data-state="live">
      <div class="lt-section-header">Sessions
        <button type="button" class="dd-header-action" id="sessions-refresh" title="Refresh" aria-label="Refresh sessions">↻</button>
      </div>
      <div class="lt-section-body">
        <ul class="dd-session-list" id="sessions-list"></ul>
        <form class="dd-new-session" id="new-session-form" autocomplete="off">
          <input class="lt-input" id="new-session-name" maxlength="64" placeholder="New session, e.g. pbs-upgrade"
                 aria-label="New session name" spellcheck="false">
          <select class="lt-select" id="project-select" aria-label="Start the new session in a project folder (optional)"></select>
          <button type="submit" class="lt-btn lt-btn-primary lt-btn-sm">Open</button>
        </form>
        <div class="dd-widget-foot">
          <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="open-picker">Picker</button>
          <span class="dd-muted dd-status" id="sessions-status" role="status"></span>
        </div>
      </div>
    </section>

    <section class="lt-frame dd-widget" id="widget-context" data-state="empty">
      <div class="lt-section-header">Claude Context</div>
      <div class="lt-section-body">
        <div class="lt-progress lt-progress--cyan" role="progressbar" aria-label="Context window used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="lt-progress-bar" style="width:0%"></div>
        </div>
        <div class="lt-kv-grid dd-context-grid">
          <span class="lt-kv-key">Context</span><span class="lt-kv-val" data-field="used">—</span>
          <span class="lt-kv-key">Model</span><span class="lt-kv-val" data-field="model">—</span>
          <span class="lt-kv-key">Cost</span><span class="lt-kv-val" data-field="cost">—</span>
          <span class="lt-kv-key">Edits</span><span class="lt-kv-val" data-field="lines">—</span>
          <span class="lt-kv-key">Updated</span><span class="lt-kv-val" data-field="updated">—</span>
        </div>
        <p class="dd-muted dd-stub-note dd-context-note"></p>
      </div>
    </section>

    <section class="lt-frame dd-widget" id="widget-repo" data-state="empty">
      <div class="lt-section-header">Repo / CI</div>
      <div class="lt-section-body">
        <div class="lt-kv-grid">
          <span class="lt-kv-key">Repo</span><span class="lt-kv-val" data-field="repo">—</span>
          <span class="lt-kv-key">Branch</span><span class="lt-kv-val" data-field="branch">—</span>
          <span class="lt-kv-key">Tree</span><span class="lt-kv-val" data-field="dirty">—</span>
          <span class="lt-kv-key">CI · HEAD</span><span class="lt-kv-val"><span class="lt-status lt-status-pending" data-field="ci">no data</span></span>
          <span class="lt-kv-key">Open PRs</span><span class="lt-kv-val" data-field="prs">—</span>
        </div>
        <p class="dd-muted dd-stub-note dd-repo-note"></p>
      </div>
    </section>

    <section class="lt-frame dd-widget" id="widget-alerts" data-state="stub">
      <div class="lt-section-header">Ops Alerts <span class="lt-badge lt-badge-sm dd-soon">v2</span></div>
      <div class="lt-section-body">
        <ul class="dd-alert-list">
          <li class="dd-alert">
            <span class="lt-dot lt-dot-idle"></span>
            <span class="dd-alert-text">No alert source connected</span>
            <button type="button" class="lt-btn lt-btn-sm dd-ask" disabled
                    data-ask-claude="Investigate the firing alert: ">Ask Claude</button>
          </li>
        </ul>
        <p class="dd-muted dd-stub-note">Firing Grafana alerts, each with an “Ask Claude” prompt.</p>
      </div>
    </section>

  </aside>
</main>

<footer class="lt-footer dd-footer">
  <div class="lt-footer-hints">
    <span class="lt-footer-hint"><span class="lt-footer-key">⇧⏎</span>newline</span>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">Esc</span>interrupt</span>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">^b 0/1</span>claude/shell</span>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">^b s</span>switch</span>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">^b d</span>detach</span>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">⇧drag</span>select</span>
  </div>
  <span class="dd-muted" id="version">devdesk</span>
</footer>

<!--SCRIPT-->
</body>
</html>