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, interactive-widget=resizes-content">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#030508">
<meta name="generator" content="devdesk">
<title>DevDesk</title>
<link rel="icon" id="favicon" href="__FAVICON__">
<script>
  // Theme before first paint (same key as web_template's lt.theme), no dark flash.
  try {
    var t = localStorage.getItem('lt_theme');
    if (t !== 'light' && t !== 'dark') t = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', t);
    document.documentElement.style.colorScheme = t;
  } catch (e) { /* storage blocked: stay dark */ }
</script>
<!--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>
    </div>
    <div class="dd-session">
      <button type="button" class="dd-session-chip" id="session-chip" data-state="" aria-haspopup="menu" aria-expanded="false" title="Switch session">
        <span class="dd-state-dot" aria-hidden="true"></span><span class="dd-session-label" id="session-name">—</span><span class="dd-caret" aria-hidden="true">▾</span>
      </button>
      <span class="dd-pane-title" id="pane-title"></span>
      <div class="dd-menu dd-switcher" id="switcher" role="menu" hidden></div>
    </div>
  </div>
  <div class="lt-header-right">
    <button type="button" class="lt-chip dd-attention" id="attention-chip" title="Sessions waiting for you"></button>
    <button type="button" class="lt-btn lt-btn-danger lt-btn-sm dd-reauth" id="reauth" hidden title="Your Authelia session expired. Claude keeps running; sign in again to keep using the panels.">Sign in again</button>
    <span class="lt-ws-status dd-ws" 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-btn lt-btn-ghost lt-btn-sm dd-cmd-btn" id="cmd-toggle" title="Command palette (Ctrl+Shift+P)" aria-label="Open command palette">⌕<span class="dd-cmd-kbd">&nbsp;⌃⇧P</span></button>
    <button type="button" class="lt-theme-btn" id="theme-toggle" aria-label="Switch to light mode" title="Switch to light mode">☀</button>
    <div class="lt-notif-dropdown-wrap dd-inbox">
      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-bell-btn" id="inbox-toggle" aria-haspopup="dialog" aria-expanded="false" aria-controls="inbox-panel" aria-label="Inbox" title="Inbox">🔔</button>
      <span class="lt-notif-badge" id="inbox-badge" data-count="0" aria-hidden="true"></span>
      <div class="lt-notif-panel dd-inbox-panel" id="inbox-panel" role="dialog" aria-label="Inbox" aria-hidden="true">
        <div class="lt-notif-panel-header"><span>Inbox</span><button type="button" class="lt-notif-panel-clear">Mark all read</button></div>
        <div class="lt-notif-panel-list"></div>
      </div>
    </div>
    <div class="dd-more">
      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm dd-more-toggle" id="more-toggle" aria-haspopup="menu" aria-expanded="false" title="Settings" aria-label="Settings">⋯</button>
      <div class="dd-menu dd-more-menu" id="more-menu" role="menu" hidden>
        <div class="dd-menu-row">
          <span>Text size</span>
          <span class="dd-menu-inline">
            <button type="button" class="dd-icon-btn" id="font-down" aria-label="Smaller text">A−</button>
            <span id="font-size">14</span>
            <button type="button" class="dd-icon-btn" id="font-up" aria-label="Larger text">A+</button>
          </span>
        </div>
        <button type="button" class="dd-menu-item" id="theme-menu" role="menuitem">Light mode</button>
        <button type="button" class="dd-menu-item" id="notify-toggle" role="menuitem">Desktop notifications</button>
        <button type="button" class="dd-menu-item" id="palette-menu" role="menuitem">Command palette</button>
        <button type="button" class="dd-menu-item" id="help-open" role="menuitem">Keyboard shortcuts</button>
        <button type="button" class="dd-menu-item" id="fullscreen-toggle" role="menuitem" title="In Chromium, fullscreen also captures Ctrl+W/Ctrl+T for the terminal">Fullscreen</button>
        <div class="dd-menu-foot" id="version">devdesk</div>
      </div>
    </div>
    <button type="button" class="lt-btn lt-btn-sm dd-files-toggle" id="files-toggle" aria-controls="files" aria-expanded="false" title="Files: browse, preview and diff this session's folder (Ctrl+Shift+E)"><span class="dd-panels-label">Files</span><span class="dd-panels-icon" aria-hidden="true">🗀</span></button>
    <button type="button" class="lt-btn lt-btn-sm dd-panels" id="sidebar-toggle" aria-controls="sidebar" aria-expanded="false"><span class="dd-panels-label">Panels</span><span class="dd-panels-icon" aria-hidden="true">▤</span></button>
  </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="drop-overlay" class="dd-drop-overlay" hidden><span>Drop to attach to <b id="drop-session">this session</b></span></div>
    <div id="upload-status" class="dd-upload-status" role="status" hidden></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>

  <section class="lt-frame dd-files" id="files" aria-label="Files" hidden>
    <div class="dd-files-resizer" id="files-resizer" role="separator" aria-orientation="vertical" aria-label="Resize the files pane" tabindex="0"></div>
    <div class="dd-files-head">
      <button type="button" class="dd-icon-btn dd-explorer-toggle" title="Show / hide the explorer" aria-label="Toggle explorer">☰</button>
      <div class="dd-tabs" role="tablist" aria-label="Open files"></div>
      <span class="dd-files-actions">
        <button type="button" class="dd-icon-btn dd-files-find" title="Go to file (Ctrl+P)" aria-label="Go to file">⌕</button>
        <button type="button" class="dd-icon-btn dd-files-refresh" title="Refresh" aria-label="Refresh">↻</button>
        <button type="button" class="dd-icon-btn dd-files-close" title="Close (Esc)" aria-label="Close files">✕</button>
      </span>
    </div>
    <div class="dd-files-main">
      <div class="dd-explorer">
        <div class="dd-explorer-views" role="tablist">
          <button type="button" role="tab" data-files-view="explorer" aria-selected="true">Explorer</button>
          <button type="button" role="tab" data-files-view="changes" aria-selected="false">Changes <span class="dd-files-count"></span></button>
        </div>
        <div class="dd-explorer-body" role="tree" aria-label="Files"></div>
      </div>
      <div class="dd-editor-area"></div>
    </div>
  </section>

  <div class="dd-backdrop" id="backdrop" hidden></div>
  <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
        <span class="dd-header-actions">
          <button type="button" class="dd-header-action" id="new-session-toggle" aria-expanded="false" title="New session">+ New</button>
          <button type="button" class="dd-header-action" id="sessions-refresh" title="Refresh" aria-label="Refresh sessions">↻</button>
        </span>
      </div>
      <div class="lt-section-body">
        <form class="dd-new-session" id="new-session-form" autocomplete="off" hidden>
          <input class="lt-input" id="new-session-name" maxlength="64" placeholder="Name, 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>
        <ul class="dd-session-list" id="sessions-list"></ul>
        <span class="dd-muted dd-status" id="sessions-status" role="status"></span>
      </div>
    </section>

    <section class="lt-frame dd-widget" id="widget-alerts" data-state="empty">
      <div class="lt-section-header">Ops Alerts <span class="lt-badge lt-badge-sm dd-alert-count"></span></div>
      <div class="lt-section-body">
        <ul class="dd-alert-list"><li class="dd-empty">Loading…</li></ul>
        <p class="dd-muted dd-stub-note dd-alerts-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 dd-repo-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" data-field="ci">—</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-repo-note"></p>
        <button type="button" class="lt-btn lt-btn-sm dd-ask dd-fix-ci" hidden>Ask Claude to fix CI</button>
      </div>
    </section>
  </aside>
</main>

<footer class="lt-footer dd-footer">
  <div class="lt-footer-hints dd-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>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">drop / paste</span>attach files</span>
    <span class="lt-footer-sep">│</span>
    <span class="lt-footer-hint"><span class="lt-footer-key">^⇧P</span>commands</span>
    <button type="button" class="dd-footer-help" id="footer-help">all keys</button>
  </div>
  <div class="dd-keybar" id="keybar" role="toolbar" aria-label="Terminal keys" hidden>
    <button type="button" data-keys="esc">Esc</button>
    <button type="button" data-keys="tab">Tab</button>
    <button type="button" data-keys="stab">⇧Tab</button>
    <button type="button" data-keys="ctrlc">^C</button>
    <button type="button" data-keys="up">↑</button>
    <button type="button" data-keys="down">↓</button>
    <button type="button" data-keys="enter">⏎</button>
    <button type="button" data-keys="claude">Claude</button>
    <button type="button" data-keys="shell">Shell</button>
  </div>
</footer>

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