feat: v0.5.0 header, switcher, phone key bar, shared polling, Matrix "needs you"
- Header: no SSO chip ("Sign in again" only on expiry), state dot on the
session chip, LIVE as a dot, ⋯ menu for text size/notifications/fullscreen,
Panels badge for waiting sessions and alerts.
- Session switcher on the chip; bare URL reattaches the last session; + New
opens the panel form with project folders.
- Notifications when other sessions start waiting; alerts polled with the
panels closed; one tab polls for all tabs over BroadcastChannel.
- Sidebar: context bar per session instead of the Context panel; compact
Repo/CI with "Ask Claude to fix CI"; legible labels.
- Phone: key bar, drawer with backdrop, visualViewport-aware layout, DOM
renderer on touch, compact connection dot.
- devdesk-notify-matrix: one Matrix message per wait that lasts
DEVDESK_MATRIX_DELAY seconds with nobody attached.
Closes #8
Closes #13
Closes #14
Closes #15
Closes #16
Closes #17
Closes #28
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
+61
-53
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<meta name="theme-color" content="#030508">
|
||||
<meta name="generator" content="devdesk">
|
||||
@@ -16,27 +16,38 @@
|
||||
<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="lt-chip dd-state-chip" id="state-chip" data-state=""></span>
|
||||
<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>
|
||||
<span class="lt-ws-status" id="ws-status" data-state="connecting" role="status">
|
||||
<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-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 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="notify-toggle" role="menuitem">Desktop notifications</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-panels" id="sidebar-toggle" aria-controls="sidebar" aria-expanded="false">Panels<span class="dd-badge" id="panels-badge" hidden></span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -56,54 +67,24 @@
|
||||
</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
|
||||
<button type="button" class="dd-header-action" id="sessions-refresh" title="Refresh" aria-label="Refresh sessions">↻</button>
|
||||
<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">
|
||||
<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"
|
||||
<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>
|
||||
<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>
|
||||
<ul class="dd-session-list" id="sessions-list"></ul>
|
||||
<span class="dd-muted dd-status" id="sessions-status" role="status"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -114,11 +95,26 @@
|
||||
<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">
|
||||
<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>
|
||||
@@ -130,8 +126,20 @@
|
||||
<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>
|
||||
</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>
|
||||
<span class="dd-muted" id="version">devdesk</span>
|
||||
</footer>
|
||||
|
||||
<!--SCRIPT-->
|
||||
|
||||
@@ -12,11 +12,17 @@ export async function fetchToken() {
|
||||
const res = await fetch(tokenUrl(window.location), {
|
||||
cache: 'no-store', credentials: 'same-origin', redirect: 'manual',
|
||||
});
|
||||
if (res.type === 'opaqueredirect') throw new AuthExpiredError('SSO session expired');
|
||||
if (res.type === 'opaqueredirect') {
|
||||
// Any request can discover an expired Authelia session; the header shows
|
||||
// "Sign in again" when this fires (devdesk#13).
|
||||
window.dispatchEvent(new CustomEvent('devdesk:auth', { detail: 'expired' }));
|
||||
throw new AuthExpiredError('SSO session expired');
|
||||
}
|
||||
if (res.status === 401 || res.status === 403 || res.status === 407) {
|
||||
throw new UnauthorizedError(`HTTP ${res.status}`);
|
||||
}
|
||||
if (!res.ok) throw new Error(`token request failed: HTTP ${res.status}`);
|
||||
window.dispatchEvent(new CustomEvent('devdesk:auth', { detail: 'ok' }));
|
||||
const body = await res.json();
|
||||
return body.token || '';
|
||||
}
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
// Claude Context panel: the current session's model, context-window use, cost
|
||||
// and edits, from the snapshot devdesk-statusline writes on every Claude update.
|
||||
|
||||
import { ago } from './sessions.js';
|
||||
|
||||
function compact(tokens) {
|
||||
if (tokens == null) return '—';
|
||||
if (tokens >= 1e6) return `${+(tokens / 1e6).toFixed(tokens % 1e6 ? 1 : 0)}M`;
|
||||
if (tokens >= 1e3) return `${Math.round(tokens / 1e3)}k`;
|
||||
return String(tokens);
|
||||
}
|
||||
|
||||
export function renderContext(root, session, context) {
|
||||
const set = (field, text) => {
|
||||
const node = root.querySelector(`[data-field="${field}"]`);
|
||||
if (node) node.textContent = text;
|
||||
};
|
||||
const bar = root.querySelector('.lt-progress');
|
||||
const fill = root.querySelector('.lt-progress-bar');
|
||||
const note = root.querySelector('.dd-context-note');
|
||||
|
||||
if (!context) {
|
||||
root.dataset.state = 'empty';
|
||||
fill.style.width = '0%';
|
||||
bar.setAttribute('aria-valuenow', '0');
|
||||
for (const f of ['used', 'model', 'cost', 'lines', 'updated']) set(f, '—');
|
||||
note.textContent = session
|
||||
? 'No data yet: it appears once Claude has redrawn its status line in this session.'
|
||||
: 'Open a session to see its context.';
|
||||
return;
|
||||
}
|
||||
|
||||
const pct = context.used_pct;
|
||||
root.dataset.state = 'live';
|
||||
fill.style.width = `${Math.min(100, pct ?? 0)}%`;
|
||||
bar.setAttribute('aria-valuenow', String(Math.round(pct ?? 0)));
|
||||
bar.classList.remove('lt-progress--cyan', 'lt-progress--red');
|
||||
if (pct == null || pct < 70) bar.classList.add('lt-progress--cyan');
|
||||
else if (pct >= 90) bar.classList.add('lt-progress--red');
|
||||
|
||||
set('used', pct == null
|
||||
? `— / ${compact(context.window)}`
|
||||
: `${compact(context.used_tokens)} / ${compact(context.window)} (${pct.toFixed(pct < 10 ? 1 : 0)}%)`);
|
||||
set('model', [context.model, context.effort].filter(Boolean).join(' · ') || '—');
|
||||
set('cost', context.cost_usd == null ? '—' : `$${context.cost_usd.toFixed(2)}`);
|
||||
set('lines', `+${context.lines_added ?? 0} −${context.lines_removed ?? 0}`);
|
||||
set('updated', context.updated ? `${ago(context.updated)} ago`.replace('now ago', 'just now') : '—');
|
||||
note.textContent = pct != null && pct >= 80
|
||||
? 'Context is filling up; consider /compact or a new conversation.'
|
||||
: '';
|
||||
}
|
||||
+269
-73
@@ -4,11 +4,11 @@ import {
|
||||
TtydConnection, fetchAlerts, fetchRepo, fetchToken, uploadFile, AuthExpiredError, UnauthorizedError,
|
||||
} from './connection.js';
|
||||
import { parseTitle, pasteSafe, sessionFromSearch } from './protocol.js';
|
||||
import { SessionsPanel, rememberSession, sessionStatus } from './sessions.js';
|
||||
import { SessionsPanel, el, recentNames, rememberSession, sessionStatus } from './sessions.js';
|
||||
import { renderAlerts } from './alerts.js';
|
||||
import { renderContext } from './context.js';
|
||||
import { renderRepo } from './repo.js';
|
||||
import { bindAskClaude } from './widgets.js';
|
||||
import { heardWithin, onShared, share } from './shared.js';
|
||||
import * as notify from './notify.js';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
@@ -35,21 +35,27 @@ const ui = {
|
||||
body: document.body,
|
||||
wsStatus: $('ws-status'),
|
||||
wsLabel: $('ws-label'),
|
||||
sso: $('sso-badge'),
|
||||
reauth: $('reauth'),
|
||||
sessionChip: $('session-chip'),
|
||||
stateChip: $('state-chip'),
|
||||
sessionName: $('session-name'),
|
||||
switcher: $('switcher'),
|
||||
attention: $('attention-chip'),
|
||||
paneTitle: $('pane-title'),
|
||||
overlay: $('overlay'),
|
||||
overlayTitle: $('overlay-title'),
|
||||
overlayText: $('overlay-text'),
|
||||
overlayActions: $('overlay-actions'),
|
||||
moreToggle: $('more-toggle'),
|
||||
moreMenu: $('more-menu'),
|
||||
notifyButton: $('notify-toggle'),
|
||||
sidebarButton: $('sidebar-toggle'),
|
||||
panelsBadge: $('panels-badge'),
|
||||
backdrop: $('backdrop'),
|
||||
};
|
||||
|
||||
const urlSession = sessionFromSearch(window.location.search);
|
||||
const state = {
|
||||
session: sessionFromSearch(window.location.search), // null = picker
|
||||
session: urlSession, // null = picker
|
||||
conn: null,
|
||||
attempts: 0,
|
||||
retryTimer: null,
|
||||
@@ -58,23 +64,22 @@ const state = {
|
||||
lastActivity: Date.now(),
|
||||
};
|
||||
|
||||
const touch = window.matchMedia('(pointer: coarse)').matches;
|
||||
const isNarrow = () => !window.matchMedia('(min-width: 1100px)').matches;
|
||||
|
||||
let term;
|
||||
let fit;
|
||||
let sessionsPanel;
|
||||
let lastAlerts = null;
|
||||
let waitingOthers = [];
|
||||
let paneTitleRaw = '';
|
||||
|
||||
// ---------------------------------------------------------------- status UI
|
||||
|
||||
function setWsState(stateName, label) {
|
||||
ui.wsStatus.dataset.state = stateName;
|
||||
ui.wsLabel.textContent = label;
|
||||
}
|
||||
|
||||
function setSso(stateName) {
|
||||
ui.sso.dataset.state = stateName;
|
||||
ui.sso.textContent = stateName === 'expired' ? 'SSO expired' : 'SSO';
|
||||
ui.sso.title = stateName === 'expired'
|
||||
? 'Authelia session expired. Click to sign in again.'
|
||||
: 'Signed in through Authelia';
|
||||
ui.wsStatus.title = label;
|
||||
}
|
||||
|
||||
function showOverlay({ title, text, actions = [], tone = 'info' }) {
|
||||
@@ -96,25 +101,67 @@ function hideOverlay() {
|
||||
ui.overlay.hidden = true;
|
||||
}
|
||||
|
||||
function showContext() {
|
||||
const data = sessionsPanel?.data;
|
||||
const current = data?.sessions?.find((s) => s.name === state.session);
|
||||
renderContext($('widget-context'), state.session, current?.context ?? null);
|
||||
showSessionState(data, current);
|
||||
// Pane title (Claude's own title) only when it says more than the session name.
|
||||
function renderPaneTitle() {
|
||||
const bare = paneTitleRaw.replace(/^[^\p{L}\p{N}]+/u, '').trim();
|
||||
ui.paneTitle.textContent = bare && bare !== state.session ? paneTitleRaw : '';
|
||||
}
|
||||
|
||||
// Header: what Claude is doing here, and which other sessions are waiting on you.
|
||||
function showSessionState(data, current) {
|
||||
function renderSessionChip() {
|
||||
const data = sessionsPanel?.data;
|
||||
const current = data?.sessions?.find((s) => s.name === state.session);
|
||||
const status = current ? sessionStatus(current) : null;
|
||||
const key = status && ['working', 'waiting', 'idle'].includes(status.key) ? status.key : '';
|
||||
ui.stateChip.dataset.state = key;
|
||||
ui.stateChip.textContent = key ? status.label : '';
|
||||
ui.stateChip.title = current?.status?.message || '';
|
||||
const waiting = (data?.sessions ?? []).filter((s) => s.name !== state.session && sessionStatus(s).key === 'waiting');
|
||||
ui.attention.classList.toggle('is-active', waiting.length > 0);
|
||||
ui.attention.textContent = waiting.length === 1 ? `${waiting[0].name} needs you` : `${waiting.length} need you`;
|
||||
ui.attention.title = waiting.map((s) => `${s.name}: ${s.status?.message || 'waiting'}`).join('\n');
|
||||
ui.attention.dataset.target = waiting[0]?.name || '';
|
||||
ui.sessionName.textContent = state.session || 'picker';
|
||||
ui.sessionChip.dataset.state = status?.key ?? '';
|
||||
ui.sessionChip.title = [
|
||||
state.session ? `Session ${state.session}${status ? ` · ${status.label}` : ''}` : 'Session picker',
|
||||
current?.status?.message,
|
||||
current?.context?.used_pct != null ? `context ${Math.floor(current.context.used_pct)}%` : '',
|
||||
'Click to switch session',
|
||||
].filter(Boolean).join('\n');
|
||||
}
|
||||
|
||||
// Other sessions waiting on you: header chip, a notification when one starts
|
||||
// waiting (devdesk#15), and the Panels badge. Only the tab that fetched the list
|
||||
// notifies, so several open tabs don't ring once each.
|
||||
let prevWaiting = new Set();
|
||||
function renderAttention(fetched) {
|
||||
const data = sessionsPanel?.data;
|
||||
waitingOthers = (data?.sessions ?? []).filter((s) => s.name !== state.session && sessionStatus(s).key === 'waiting');
|
||||
for (const s of waitingOthers) {
|
||||
if (fetched && !prevWaiting.has(s.name)) notify.ring(s.name, s.status?.message || 'Claude needs your input');
|
||||
}
|
||||
prevWaiting = new Set(waitingOthers.map((s) => s.name));
|
||||
ui.attention.classList.toggle('is-active', waitingOthers.length > 0);
|
||||
ui.attention.textContent = waitingOthers.length === 1 ? `${waitingOthers[0].name} needs you` : `${waitingOthers.length} need you`;
|
||||
ui.attention.title = waitingOthers.map((s) => `${s.name}: ${s.status?.message || 'waiting'}`).join('\n');
|
||||
ui.attention.dataset.target = waitingOthers[0]?.name || '';
|
||||
renderPanelsBadge();
|
||||
}
|
||||
|
||||
function renderPanelsBadge() {
|
||||
const alerts = lastAlerts?.alerts ?? [];
|
||||
const count = waitingOthers.length + alerts.length;
|
||||
const urgent = waitingOthers.length > 0 || alerts.some((a) => a.severity === 'critical');
|
||||
ui.panelsBadge.hidden = count === 0 || ui.body.classList.contains('dd-sidebar-open');
|
||||
ui.panelsBadge.textContent = String(count);
|
||||
ui.panelsBadge.classList.toggle('is-urgent', urgent);
|
||||
ui.panelsBadge.title = [
|
||||
waitingOthers.length ? `${waitingOthers.length} session(s) need you` : '',
|
||||
alerts.length ? `${alerts.length} Grafana alert(s)` : '',
|
||||
].filter(Boolean).join(' · ');
|
||||
}
|
||||
|
||||
function onSessionData({ fetched = false } = {}) {
|
||||
renderSessionChip();
|
||||
renderAttention(fetched);
|
||||
if (!ui.switcher.hidden) renderSwitcher();
|
||||
}
|
||||
|
||||
function showAlerts(data) {
|
||||
lastAlerts = data;
|
||||
renderAlerts($('widget-alerts'), data);
|
||||
renderPanelsBadge();
|
||||
}
|
||||
|
||||
let alertsBusy = false;
|
||||
@@ -122,7 +169,8 @@ async function refreshAlerts() {
|
||||
if (alertsBusy) return;
|
||||
alertsBusy = true;
|
||||
try {
|
||||
renderAlerts($('widget-alerts'), await fetchAlerts());
|
||||
showAlerts(await fetchAlerts());
|
||||
share('alerts', lastAlerts);
|
||||
} catch {
|
||||
// Keep the last rendering; the next refresh retries.
|
||||
} finally {
|
||||
@@ -254,8 +302,9 @@ function connect(session, { reconnect = false } = {}) {
|
||||
state.session = session;
|
||||
updateUrl(session);
|
||||
sessionsPanel?.setCurrent(session);
|
||||
showContext();
|
||||
ui.sessionChip.textContent = session || 'picker';
|
||||
paneTitleRaw = '';
|
||||
renderPaneTitle();
|
||||
onSessionData();
|
||||
hideOverlay();
|
||||
setWsState('connecting', 'connecting');
|
||||
state.openedAt = 0;
|
||||
@@ -268,7 +317,6 @@ function connect(session, { reconnect = false } = {}) {
|
||||
state.openedAt = Date.now();
|
||||
state.attempts = 0;
|
||||
setWsState('connected', 'live');
|
||||
setSso('ok');
|
||||
if (session) rememberSession(session);
|
||||
refreshRepo();
|
||||
fit.fit();
|
||||
@@ -323,12 +371,11 @@ function onClosed(code) {
|
||||
|
||||
function onFailure(error) {
|
||||
if (error instanceof AuthExpiredError) {
|
||||
setSso('expired');
|
||||
setWsState('disconnected', 'signed out');
|
||||
showOverlay({
|
||||
title: 'Sign-in expired',
|
||||
text: 'Your Authelia session has expired. Claude keeps running on the server; sign in again to reattach.',
|
||||
actions: [{ label: 'Re-authenticate', primary: true, run: () => window.location.reload() }],
|
||||
actions: [{ label: 'Sign in again', primary: true, run: () => window.location.reload() }],
|
||||
tone: 'warn',
|
||||
});
|
||||
return;
|
||||
@@ -373,12 +420,14 @@ function applyTitle() {
|
||||
titleFrame = 0;
|
||||
const parsed = parseTitle(pendingTitle);
|
||||
if (!parsed) {
|
||||
ui.paneTitle.textContent = pendingTitle;
|
||||
paneTitleRaw = pendingTitle;
|
||||
renderPaneTitle();
|
||||
return;
|
||||
}
|
||||
if (parsed.session === 'picker') {
|
||||
ui.sessionChip.textContent = 'picker';
|
||||
ui.paneTitle.textContent = 'choose a session';
|
||||
ui.sessionName.textContent = 'picker';
|
||||
paneTitleRaw = 'choose a session';
|
||||
renderPaneTitle();
|
||||
notify.setBaseTitle('DevDesk · picker');
|
||||
return;
|
||||
}
|
||||
@@ -388,45 +437,152 @@ function applyTitle() {
|
||||
updateUrl(parsed.session);
|
||||
rememberSession(parsed.session);
|
||||
sessionsPanel.setCurrent(parsed.session);
|
||||
showContext();
|
||||
onSessionData();
|
||||
refreshRepo();
|
||||
}
|
||||
ui.sessionChip.textContent = parsed.session;
|
||||
ui.paneTitle.textContent = parsed.pane;
|
||||
paneTitleRaw = parsed.pane;
|
||||
renderPaneTitle();
|
||||
notify.setBaseTitle(`${parsed.session} · DevDesk`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- menus
|
||||
|
||||
const menus = [];
|
||||
function wireMenu(button, menu, onOpen) {
|
||||
menus.push({ button, menu });
|
||||
button.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const open = menu.hidden;
|
||||
closeMenus();
|
||||
if (open) {
|
||||
onOpen?.();
|
||||
menu.hidden = false;
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
menu.addEventListener('click', (event) => event.stopPropagation());
|
||||
}
|
||||
|
||||
function closeMenus() {
|
||||
for (const { button, menu } of menus) {
|
||||
menu.hidden = true;
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// Session switcher on the session chip (devdesk#16).
|
||||
function renderSwitcher() {
|
||||
const sessions = [...(sessionsPanel?.data?.sessions ?? [])].sort((a, b) =>
|
||||
(b.running - a.running) || ((b.activity || 0) - (a.activity || 0)) || a.name.localeCompare(b.name));
|
||||
const choose = (run) => () => {
|
||||
closeMenus();
|
||||
run();
|
||||
};
|
||||
const items = sessions.map((s) => {
|
||||
const status = sessionStatus(s);
|
||||
const ctx = s.context?.used_pct != null ? ` · ctx ${Math.floor(s.context.used_pct)}%` : '';
|
||||
return el('button', {
|
||||
type: 'button', role: 'menuitem',
|
||||
class: `dd-menu-item dd-switch-item is-${status.key}${s.name === state.session ? ' is-current' : ''}`,
|
||||
title: s.dir || '', onclick: choose(() => connect(s.name)),
|
||||
},
|
||||
el('span', { class: `lt-dot ${status.dot}` }),
|
||||
el('span', { class: 'dd-switch-name' }, s.name),
|
||||
el('span', { class: 'dd-switch-meta' }, `${status.label}${ctx}`));
|
||||
});
|
||||
if (!items.length) items.push(el('div', { class: 'dd-menu-note' }, sessionsPanel?.data ? 'No sessions yet.' : 'Loading…'));
|
||||
ui.switcher.replaceChildren(
|
||||
...items,
|
||||
el('div', { class: 'dd-menu-sep' }),
|
||||
el('button', {
|
||||
type: 'button', role: 'menuitem', class: 'dd-menu-item',
|
||||
onclick: choose(() => {
|
||||
setSidebar(true);
|
||||
sessionsPanel.toggleForm(true);
|
||||
}),
|
||||
}, '+ New session…'),
|
||||
el('button', { type: 'button', role: 'menuitem', class: 'dd-menu-item', onclick: choose(() => connect(null)) }, 'Open picker'),
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- chrome controls
|
||||
|
||||
function setFontSize(size) {
|
||||
const clamped = Math.min(24, Math.max(10, size));
|
||||
term.options.fontSize = clamped;
|
||||
store.set('fontSize', clamped);
|
||||
$('font-size').textContent = String(clamped);
|
||||
fit.fit();
|
||||
}
|
||||
|
||||
function renderNotifyButton() {
|
||||
const labels = { granted: 'Alerts on', denied: 'Alerts blocked', default: 'Alerts off', unsupported: 'No alerts' };
|
||||
const current = notify.notificationsState();
|
||||
const labels = {
|
||||
unsupported: 'Desktop notifications: unsupported',
|
||||
denied: 'Desktop notifications: blocked by the browser',
|
||||
default: 'Enable desktop notifications',
|
||||
granted: notify.isMuted() ? 'Desktop notifications: muted (unmute)' : 'Desktop notifications: on (mute)',
|
||||
};
|
||||
ui.notifyButton.textContent = labels[current];
|
||||
ui.notifyButton.dataset.state = current;
|
||||
ui.notifyButton.disabled = current === 'unsupported' || current === 'denied';
|
||||
}
|
||||
|
||||
function setSidebar(open) {
|
||||
ui.body.classList.toggle('dd-sidebar-open', open);
|
||||
ui.sidebarButton.setAttribute('aria-expanded', String(open));
|
||||
store.set('sidebar', open ? 'open' : 'closed');
|
||||
if (open) sessionsPanel?.refresh();
|
||||
ui.backdrop.hidden = !(open && isNarrow());
|
||||
if (!isNarrow()) store.set('sidebar', open ? 'open' : 'closed');
|
||||
if (open) {
|
||||
sessionsPanel?.refresh();
|
||||
refreshAlerts();
|
||||
refreshRepo();
|
||||
}
|
||||
renderPanelsBadge();
|
||||
}
|
||||
|
||||
function closeDrawerIfNarrow() {
|
||||
if (isNarrow() && ui.body.classList.contains('dd-sidebar-open')) setSidebar(false);
|
||||
}
|
||||
|
||||
// Phone key bar: keys an on-screen keyboard can't send (devdesk#14).
|
||||
const KEYS = {
|
||||
esc: '\x1b', tab: '\t', stab: '\x1b[Z', ctrlc: '\x03', up: '\x1b[A', down: '\x1b[B', enter: '\r',
|
||||
claude: '\x020', shell: '\x021', // tmux prefix (C-b) + window number
|
||||
};
|
||||
|
||||
function wireKeybar() {
|
||||
if (!touch) return;
|
||||
ui.body.classList.add('dd-touch');
|
||||
const bar = $('keybar');
|
||||
bar.hidden = false;
|
||||
// Don't steal focus from the terminal (that would close the on-screen keyboard).
|
||||
bar.addEventListener('pointerdown', (event) => event.preventDefault());
|
||||
bar.addEventListener('click', (event) => {
|
||||
const key = event.target.closest('[data-keys]')?.dataset.keys;
|
||||
if (key && KEYS[key]) state.conn?.sendInput(KEYS[key]);
|
||||
});
|
||||
// Keep the terminal above the on-screen keyboard.
|
||||
const vv = window.visualViewport;
|
||||
if (vv) {
|
||||
const update = () => {
|
||||
const hidden = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
|
||||
document.documentElement.style.setProperty('--dd-kb', `${hidden}px`);
|
||||
};
|
||||
vv.addEventListener('resize', update);
|
||||
vv.addEventListener('scroll', update);
|
||||
}
|
||||
}
|
||||
|
||||
function wireChrome() {
|
||||
$('font-down').addEventListener('click', () => setFontSize(term.options.fontSize - 1));
|
||||
$('font-up').addEventListener('click', () => setFontSize(term.options.fontSize + 1));
|
||||
ui.notifyButton.addEventListener('click', async () => {
|
||||
await notify.requestNotifications();
|
||||
if (notify.notificationsState() === 'default') await notify.requestNotifications();
|
||||
else if (notify.notificationsState() === 'granted') notify.setMuted(!notify.isMuted());
|
||||
renderNotifyButton();
|
||||
});
|
||||
renderNotifyButton();
|
||||
$('fullscreen-toggle').addEventListener('click', async () => {
|
||||
closeMenus();
|
||||
if (document.fullscreenElement) {
|
||||
await document.exitFullscreen();
|
||||
return;
|
||||
@@ -435,13 +591,37 @@ function wireChrome() {
|
||||
// Chromium: capture Ctrl+W/Ctrl+T/Esc etc. for the terminal while fullscreen.
|
||||
navigator.keyboard?.lock?.().catch(() => {});
|
||||
});
|
||||
ui.sidebarButton.addEventListener('click', () => setSidebar(!ui.body.classList.contains('dd-sidebar-open')));
|
||||
const wide = window.matchMedia('(min-width: 1100px)').matches;
|
||||
setSidebar(store.get('sidebar', wide ? 'open' : 'closed') === 'open');
|
||||
|
||||
ui.sso.addEventListener('click', () => {
|
||||
if (ui.sso.dataset.state === 'expired') window.location.reload();
|
||||
wireMenu(ui.moreToggle, ui.moreMenu, renderNotifyButton);
|
||||
wireMenu(ui.sessionChip, ui.switcher, () => {
|
||||
renderSwitcher();
|
||||
sessionsPanel.refresh();
|
||||
});
|
||||
document.addEventListener('click', closeMenus);
|
||||
|
||||
ui.sidebarButton.addEventListener('click', () => setSidebar(!ui.body.classList.contains('dd-sidebar-open')));
|
||||
ui.backdrop.addEventListener('click', () => setSidebar(false));
|
||||
setSidebar(!isNarrow() && store.get('sidebar', 'open') === 'open');
|
||||
window.matchMedia('(min-width: 1100px)').addEventListener('change', () => {
|
||||
ui.backdrop.hidden = !(ui.body.classList.contains('dd-sidebar-open') && isNarrow());
|
||||
});
|
||||
|
||||
// Esc closes menus and the narrow-screen drawer before the terminal sees it.
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Escape') return;
|
||||
const menuOpen = menus.some(({ menu }) => !menu.hidden);
|
||||
const drawerOpen = isNarrow() && ui.body.classList.contains('dd-sidebar-open');
|
||||
if (!menuOpen && !drawerOpen) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
closeMenus();
|
||||
if (drawerOpen) setSidebar(false);
|
||||
}, true);
|
||||
|
||||
// "Sign in again" appears only when a request finds the SSO session expired (devdesk#13).
|
||||
window.addEventListener('devdesk:auth', (event) => {
|
||||
ui.reauth.hidden = event.detail !== 'expired';
|
||||
});
|
||||
ui.reauth.addEventListener('click', () => window.location.reload());
|
||||
|
||||
// Ctrl+W closes the tab before the terminal sees it; ask first.
|
||||
window.addEventListener('beforeunload', (event) => {
|
||||
@@ -455,27 +635,27 @@ function wireChrome() {
|
||||
document.addEventListener(type, () => { state.lastActivity = Date.now(); }, { capture: true, passive: true });
|
||||
}
|
||||
// While you're active, touch the Authelia gate so its inactivity timer doesn't lapse.
|
||||
setInterval(async () => {
|
||||
setInterval(() => {
|
||||
if (Date.now() - state.lastActivity > 10 * 60 * 1000) return;
|
||||
try {
|
||||
await fetchToken();
|
||||
setSso('ok');
|
||||
} catch (error) {
|
||||
if (error instanceof AuthExpiredError) setSso('expired');
|
||||
}
|
||||
fetchToken().catch(() => {});
|
||||
}, 3 * 60 * 1000);
|
||||
|
||||
window.addEventListener('online', retrySoon);
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) retrySoon();
|
||||
});
|
||||
// Session states feed the header chips too, so refresh even with the sidebar closed.
|
||||
// Session states feed the header chip and the notifications for other sessions,
|
||||
// so poll even in a background tab (browsers throttle that to about once a
|
||||
// minute) — unless another tab just shared a fresh list (devdesk#8, #15).
|
||||
onShared('sessions', (data) => sessionsPanel.accept(data));
|
||||
setInterval(() => {
|
||||
if (!document.hidden) sessionsPanel.refresh();
|
||||
if (!heardWithin('sessions', 16 * 1000)) sessionsPanel.refresh();
|
||||
}, 15 * 1000);
|
||||
// Alerts feed the Panels badge too.
|
||||
onShared('alerts', showAlerts);
|
||||
setInterval(() => {
|
||||
if (!document.hidden && ui.body.classList.contains('dd-sidebar-open')) refreshAlerts();
|
||||
}, 30 * 1000);
|
||||
if (!heardWithin('alerts', 62 * 1000)) refreshAlerts();
|
||||
}, 60 * 1000);
|
||||
// Repo status: on connect, after Claude's turns, and once a minute (devdesk#5, #8).
|
||||
setInterval(() => {
|
||||
if (!document.hidden && ui.body.classList.contains('dd-sidebar-open')) refreshRepo();
|
||||
@@ -485,11 +665,23 @@ function wireChrome() {
|
||||
});
|
||||
}
|
||||
|
||||
// A bare URL (no ?arg=) reattaches the session you used last, or the most
|
||||
// recently active one; the picker is only the fallback (devdesk#16).
|
||||
function defaultSession(data) {
|
||||
const sessions = data?.sessions ?? [];
|
||||
const known = new Set(sessions.map((s) => s.name));
|
||||
const recent = recentNames().find((name) => known.has(name));
|
||||
if (recent) return recent;
|
||||
const running = sessions.filter((s) => s.running).sort((a, b) => (b.activity || 0) - (a.activity || 0));
|
||||
return running[0]?.name ?? null;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- boot
|
||||
|
||||
async function boot() {
|
||||
$('version').textContent = `devdesk ${__DEVDESK_VERSION__}`;
|
||||
const fontSize = Math.min(24, Math.max(10, Number(store.get('fontSize', 14)) || 14));
|
||||
$('font-size').textContent = String(fontSize);
|
||||
await loadFonts(fontSize);
|
||||
|
||||
({ term, fit } = createTerminal($('terminal'), {
|
||||
@@ -504,8 +696,8 @@ async function boot() {
|
||||
if (!titleFrame) titleFrame = requestAnimationFrame(applyTitle);
|
||||
});
|
||||
term.onBell(() => {
|
||||
notify.ring(state.session, ui.paneTitle.textContent);
|
||||
refreshSoon(); // Claude finished a turn: context numbers just changed
|
||||
notify.ring(state.session, ui.paneTitle.textContent || 'Claude needs your attention');
|
||||
refreshSoon(); // Claude finished a turn: states and context just changed
|
||||
setTimeout(refreshRepo, 2000); // …and maybe committed or pushed
|
||||
});
|
||||
|
||||
@@ -526,11 +718,13 @@ async function boot() {
|
||||
nameInput: $('new-session-name'),
|
||||
select: $('project-select'),
|
||||
refreshButton: $('sessions-refresh'),
|
||||
pickerButton: $('open-picker'),
|
||||
newToggle: $('new-session-toggle'),
|
||||
status: $('sessions-status'),
|
||||
hooks: {
|
||||
onOpen: (name) => connect(name),
|
||||
onPicker: () => connect(null),
|
||||
onOpen: (name) => {
|
||||
closeDrawerIfNarrow();
|
||||
connect(name);
|
||||
},
|
||||
onEnding: () => { state.endingCurrent = true; },
|
||||
onEnded: (name) => {
|
||||
if (name !== state.session) state.endingCurrent = false;
|
||||
@@ -541,23 +735,25 @@ async function boot() {
|
||||
state.session = to;
|
||||
updateUrl(to);
|
||||
rememberSession(to);
|
||||
ui.sessionChip.textContent = to;
|
||||
sessionsPanel.setCurrent(to);
|
||||
renderSessionChip();
|
||||
},
|
||||
onData: () => showContext(),
|
||||
onData: (_data, meta) => onSessionData(meta),
|
||||
},
|
||||
});
|
||||
bindAskClaude($('sidebar'), (text) => {
|
||||
// Alert text is untrusted: no control characters (a newline would run it in a
|
||||
// shell window, CR would submit), and bracketed paste around it (devdesk#2).
|
||||
term.paste(pasteSafe(text));
|
||||
closeDrawerIfNarrow();
|
||||
term.focus();
|
||||
});
|
||||
wireChrome();
|
||||
wireKeybar();
|
||||
wireUploads();
|
||||
sessionsPanel.refresh();
|
||||
refreshAlerts();
|
||||
connect(state.session);
|
||||
await sessionsPanel.refresh();
|
||||
connect(urlSession ?? defaultSession(sessionsPanel.data));
|
||||
}
|
||||
|
||||
boot();
|
||||
|
||||
+19
-1
@@ -32,11 +32,29 @@ export async function requestNotifications() {
|
||||
return Notification.requestPermission();
|
||||
}
|
||||
|
||||
const MUTE_KEY = 'devdesk.notify.muted';
|
||||
|
||||
export function isMuted() {
|
||||
try {
|
||||
return localStorage.getItem(MUTE_KEY) === '1';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function setMuted(muted) {
|
||||
try {
|
||||
localStorage.setItem(MUTE_KEY, muted ? '1' : '0');
|
||||
} catch {
|
||||
// Private mode: the mute just won't persist.
|
||||
}
|
||||
}
|
||||
|
||||
export function ring(session, detail) {
|
||||
if (attentive()) return;
|
||||
unread += 1;
|
||||
render();
|
||||
if (notificationsState() === 'granted') {
|
||||
if (notificationsState() === 'granted' && !isMuted()) {
|
||||
const note = new Notification(`Claude · ${session || 'devdesk'}`, {
|
||||
body: detail || 'Claude needs your attention',
|
||||
tag: `devdesk-${session}`,
|
||||
|
||||
+16
-11
@@ -21,21 +21,21 @@ function link(href, text) {
|
||||
export function renderRepo(root, repo) {
|
||||
const field = (name) => root.querySelector(`[data-field="${name}"]`);
|
||||
const set = (name, value) => field(name).replaceChildren(value);
|
||||
const grid = root.querySelector('.dd-repo-grid');
|
||||
const note = root.querySelector('.dd-repo-note');
|
||||
const fix = root.querySelector('.dd-fix-ci');
|
||||
fix.hidden = true;
|
||||
|
||||
// No repository: one line instead of a grid of dashes (devdesk#17).
|
||||
if (!repo || !repo.git) {
|
||||
root.dataset.state = 'empty';
|
||||
for (const f of ['repo', 'branch', 'dirty', 'prs']) set(f, '—');
|
||||
const ci = field('ci');
|
||||
ci.className = 'lt-status lt-status-pending';
|
||||
ci.textContent = 'no data';
|
||||
note.textContent = repo
|
||||
? `${repo.dir} is not a git repository.`
|
||||
: 'Open a session to see its repository.';
|
||||
grid.hidden = true;
|
||||
note.textContent = repo ? `Not a git repository: ${repo.dir}` : 'Open a session to see its repository.';
|
||||
return;
|
||||
}
|
||||
|
||||
root.dataset.state = 'live';
|
||||
grid.hidden = false;
|
||||
set('repo', repo.url ? link(repo.url, repo.repo) : (repo.remote || 'no remote'));
|
||||
const sync = repo.upstream
|
||||
? [repo.ahead ? `↑${repo.ahead}` : '', repo.behind ? `↓${repo.behind}` : ''].filter(Boolean).join(' ') || 'in sync'
|
||||
@@ -45,12 +45,17 @@ export function renderRepo(root, repo) {
|
||||
|
||||
const ci = field('ci');
|
||||
const [label, cls] = repo.ci?.total ? (CI[repo.ci.state] || [repo.ci.state, 'lt-status-pending'])
|
||||
: [repo.ahead ? 'not pushed' : 'no CI', 'lt-status-pending'];
|
||||
: [repo.ahead ? 'not pushed' : 'no CI', ''];
|
||||
ci.className = `lt-status ${cls}`;
|
||||
ci.replaceChildren(repo.ci?.url ? link(repo.ci.url, label) : label);
|
||||
|
||||
set('prs', repo.url && repo.prs != null
|
||||
? link(`${repo.url}/pulls`, `${repo.prs} open`)
|
||||
: '—');
|
||||
set('prs', repo.url && repo.prs != null ? link(`${repo.url}/pulls`, `${repo.prs} open`) : '—');
|
||||
note.textContent = repo.repo ? '' : 'Not a Gitea repository; CI status unavailable.';
|
||||
|
||||
if (repo.ci?.total && ['failure', 'error'].includes(repo.ci.state)) {
|
||||
fix.hidden = false;
|
||||
fix.dataset.askClaude = `CI is failing for ${repo.repo} on ${repo.branch} at ${repo.sha}`
|
||||
+ ` (${repo.ci.url || 'see Gitea Actions'}). Use the gitea MCP server to read the failed job's log,`
|
||||
+ ' find the cause, and fix it. Tell me the plan before pushing anything.';
|
||||
}
|
||||
}
|
||||
|
||||
+47
-14
@@ -3,6 +3,7 @@
|
||||
|
||||
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;
|
||||
@@ -24,6 +25,11 @@ function writeRecents(recents) {
|
||||
}
|
||||
}
|
||||
|
||||
// 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)]);
|
||||
}
|
||||
@@ -72,20 +78,26 @@ export function sessionStatus(s) {
|
||||
}
|
||||
|
||||
export class SessionsPanel {
|
||||
// hooks: onOpen(name), onPicker(), onEnded(name), onRenamed(from, to), onData(data)
|
||||
constructor({ list, form, nameInput, select, refreshButton, pickerButton, status, hooks }) {
|
||||
Object.assign(this, { list, nameInput, select, status, hooks });
|
||||
// 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.busy = false;
|
||||
this.pending = null;
|
||||
refreshButton.addEventListener('click', () => this.refresh());
|
||||
pickerButton.addEventListener('click', () => hooks.onPicker());
|
||||
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();
|
||||
@@ -96,19 +108,31 @@ export class SessionsPanel {
|
||||
this.status.classList.toggle('is-error', isError);
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
if (this.busy) return;
|
||||
this.busy = true;
|
||||
// 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);
|
||||
} finally {
|
||||
this.busy = false;
|
||||
}
|
||||
this.render();
|
||||
this.hooks.onData?.(this.data);
|
||||
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) {
|
||||
@@ -135,6 +159,7 @@ export class SessionsPanel {
|
||||
if (project && !(await this.act('creating', 'new', name, project))) return;
|
||||
this.nameInput.value = '';
|
||||
this.select.value = '';
|
||||
this.toggleForm(false);
|
||||
this.hooks.onOpen(name);
|
||||
}
|
||||
|
||||
@@ -173,18 +198,26 @@ export class SessionsPanel {
|
||||
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, s.attached ? `${s.attached} open` : '']
|
||||
? [`${status.label}${since && since !== 'now' ? ` ${since}` : ''}`, ctx, model, s.attached ? `${s.attached} open` : '']
|
||||
.filter(Boolean).join(' · ')
|
||||
: 'dormant · resumes Claude';
|
||||
const title = [s.dir, status.key === 'waiting' && s.status?.message].filter(Boolean).join('\n');
|
||||
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)),
|
||||
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', {
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
// One tab polls for every open DevDesk tab (devdesk#8): whoever fetches the
|
||||
// session list or the alerts broadcasts the result, and a tab that heard a fresh
|
||||
// result recently skips its own poll. Each poll costs a ttyd client and a PTY.
|
||||
|
||||
const channel = typeof BroadcastChannel === 'function' ? new BroadcastChannel('devdesk') : null;
|
||||
const heard = new Map();
|
||||
const handlers = new Map();
|
||||
|
||||
channel?.addEventListener('message', (event) => {
|
||||
const { key, data } = event.data ?? {};
|
||||
const handler = handlers.get(key);
|
||||
if (!handler) return;
|
||||
heard.set(key, Date.now());
|
||||
handler(data);
|
||||
});
|
||||
|
||||
export function onShared(key, handler) {
|
||||
handlers.set(key, handler);
|
||||
}
|
||||
|
||||
export function share(key, data) {
|
||||
try {
|
||||
channel?.postMessage({ key, data });
|
||||
} catch {
|
||||
// Not cloneable or channel closed: the other tabs just poll themselves.
|
||||
}
|
||||
}
|
||||
|
||||
export function heardWithin(key, ms) {
|
||||
return Date.now() - (heard.get(key) ?? 0) < ms;
|
||||
}
|
||||
+3
-4
@@ -1,7 +1,6 @@
|
||||
// Sidebar widgets. In v1 only Sessions is live; Repo/CI and Claude Context get
|
||||
// data from devdesk-api in v1.1, Ops Alerts in v2. The "Ask Claude" pattern is
|
||||
// already wired: any [data-ask-claude] button types its prompt into the current
|
||||
// session without pressing Enter, so you can review it before sending.
|
||||
// "Ask Claude": any [data-ask-claude] button (Ops Alerts, Repo/CI) types its
|
||||
// prompt into the current session without pressing Enter, so you can review it
|
||||
// before sending.
|
||||
|
||||
export function bindAskClaude(root, send) {
|
||||
root.addEventListener('click', (event) => {
|
||||
|
||||
+180
-36
@@ -37,9 +37,12 @@ body.dd-app::after {
|
||||
}
|
||||
|
||||
.dd-header .lt-header-left {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
.dd-header .lt-header-right { flex: 0 0 auto; }
|
||||
.dd-session { flex: 0 1 auto; }
|
||||
|
||||
.dd-session {
|
||||
display: flex;
|
||||
@@ -57,26 +60,115 @@ body.dd-app::after {
|
||||
max-width: 38vw;
|
||||
}
|
||||
|
||||
.dd-sso {
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
.dd-session-chip {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: 34vw;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--accent-cyan-border);
|
||||
background: var(--accent-cyan-dim);
|
||||
color: var(--accent-cyan);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.dd-sso[data-state="ok"] { color: var(--accent-green); background: var(--accent-green-dim); }
|
||||
.dd-sso[data-state="unknown"] { color: var(--text-muted); }
|
||||
.dd-sso[data-state="expired"] {
|
||||
color: var(--accent-red);
|
||||
background: var(--accent-red-dim);
|
||||
text-shadow: var(--glow-red);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dd-session-chip:hover,
|
||||
.dd-session-chip[aria-expanded="true"] { border-color: var(--accent-cyan); box-shadow: var(--box-glow-cyan); }
|
||||
.dd-session-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dd-caret { color: var(--text-muted); font-size: 0.7rem; }
|
||||
/* Current session's Claude state as a dot on the chip (devdesk#13). */
|
||||
.dd-state-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
|
||||
.dd-session-chip[data-state="working"] .dd-state-dot { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber); animation: lt-pulse 1.2s ease-in-out infinite; }
|
||||
.dd-session-chip[data-state="waiting"] { border-color: rgba(255, 45, 85, 0.6); color: var(--accent-red); background: var(--accent-red-dim); }
|
||||
.dd-session-chip[data-state="waiting"] .dd-state-dot { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); animation: lt-pulse 1.2s ease-in-out infinite; }
|
||||
.dd-session-chip[data-state="idle"] .dd-state-dot { background: var(--accent-green); }
|
||||
|
||||
.dd-tools .lt-btn[data-state="granted"] { color: var(--accent-green); border-color: var(--accent-green-border); }
|
||||
.dd-tools .lt-btn[data-state="denied"] { color: var(--accent-red); }
|
||||
/* Connection status: a dot; the word only when it isn't "live". */
|
||||
.dd-ws[data-state="connected"] #ws-label { display: none; }
|
||||
|
||||
.dd-panels { position: relative; clip-path: none; } /* the corner cut hid the active border */
|
||||
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
|
||||
.dd-attention,
|
||||
.dd-session-chip .dd-state-dot { animation: none !important; }
|
||||
}
|
||||
/* base.css draws keys in --text-dim (~1.5:1 on this background). */
|
||||
.dd-sidebar .lt-kv-key { color: var(--text-secondary); font-size: 0.7rem; }
|
||||
#sidebar-toggle[aria-expanded="true"] {
|
||||
color: var(--accent-orange);
|
||||
border-color: var(--accent-orange-border);
|
||||
}
|
||||
.dd-badge {
|
||||
margin-left: 6px;
|
||||
min-width: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
background: var(--accent-amber);
|
||||
color: var(--bg-primary);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.dd-badge.is-urgent { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); }
|
||||
.dd-badge[hidden] { display: none; }
|
||||
|
||||
/* ---- menus (session switcher, ⋯) ----------------------------------------------- */
|
||||
.dd-session,
|
||||
.dd-more { position: relative; }
|
||||
.dd-more-toggle { font-size: 1rem; line-height: 1; padding-inline: 8px; }
|
||||
.dd-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
z-index: 40;
|
||||
min-width: 240px;
|
||||
max-width: min(360px, calc(100vw - 16px));
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--accent-cyan-border);
|
||||
background: var(--bg-secondary);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), var(--box-glow-cyan);
|
||||
}
|
||||
.dd-menu[hidden] { display: none; }
|
||||
.dd-switcher { left: 0; }
|
||||
.dd-more-menu { right: 0; }
|
||||
.dd-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dd-menu-item:hover:not(:disabled),
|
||||
.dd-menu-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
|
||||
.dd-menu-item:disabled { color: var(--text-muted); cursor: default; }
|
||||
.dd-menu-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.dd-menu-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); }
|
||||
.dd-menu-sep { height: 1px; margin: 4px 0; background: var(--border-dim); }
|
||||
.dd-menu-note { padding: 6px 8px; color: var(--text-muted); font-size: 0.72rem; }
|
||||
.dd-menu-foot { padding: 6px 8px 2px; border-top: 1px solid var(--border-dim); margin-top: 4px; color: var(--text-muted); font-size: 0.62rem; }
|
||||
.dd-switch-item.is-current { border-color: var(--accent-orange-border); background: var(--accent-orange-dim); }
|
||||
.dd-switch-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
|
||||
.dd-switch-meta { color: var(--text-muted); font-size: 0.64rem; white-space: nowrap; }
|
||||
.dd-switch-item.is-waiting .dd-switch-meta { color: var(--accent-red); }
|
||||
.dd-switch-item.is-working .dd-switch-meta { color: var(--accent-amber); }
|
||||
|
||||
/* ---- layout ---------------------------------------------------------------- */
|
||||
.dd-main {
|
||||
@@ -134,14 +226,8 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.dd-soon {
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.dd-header-actions { margin-left: auto; display: inline-flex; gap: var(--space-sm); }
|
||||
.dd-header-action {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--accent-cyan);
|
||||
@@ -153,7 +239,7 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
|
||||
.dd-muted {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.dd-stub-note {
|
||||
@@ -193,7 +279,7 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
text-align: left;
|
||||
}
|
||||
.dd-session-open:hover { background: var(--accent-cyan-dim); }
|
||||
.dd-session-open .lt-dot { grid-row: 1 / span 2; }
|
||||
.dd-session-open .lt-dot { grid-row: 1 / span 3; }
|
||||
|
||||
.dd-session-name {
|
||||
font-size: 0.78rem;
|
||||
@@ -204,10 +290,22 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
}
|
||||
|
||||
.dd-session-meta {
|
||||
font-size: 0.62rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Context-window fill under each session (devdesk#17). */
|
||||
.dd-ctx {
|
||||
grid-column: 2;
|
||||
height: 2px;
|
||||
margin-top: 3px;
|
||||
background: var(--bg-tertiary);
|
||||
overflow: hidden;
|
||||
}
|
||||
.dd-ctx-fill { display: block; height: 100%; background: var(--accent-cyan); }
|
||||
.dd-ctx.is-high .dd-ctx-fill { background: var(--accent-amber); }
|
||||
.dd-ctx.is-full .dd-ctx-fill { background: var(--accent-red); }
|
||||
|
||||
.dd-session-item.is-recent .dd-session-name { color: var(--text-secondary); font-weight: 400; }
|
||||
|
||||
.dd-session-item.is-dormant .dd-session-name { color: var(--text-secondary); }
|
||||
@@ -215,12 +313,17 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
.dd-session-item.is-waiting .dd-session-meta { color: var(--accent-red); }
|
||||
.dd-session-item.is-working .dd-session-meta { color: var(--accent-amber); }
|
||||
|
||||
/* Header chips: current session's Claude state, and sessions needing you. */
|
||||
.dd-state-chip { display: none; }
|
||||
.dd-state-chip[data-state="working"] { display: inline-flex; color: var(--accent-amber); background: var(--accent-amber-dim); }
|
||||
.dd-state-chip[data-state="waiting"] { display: inline-flex; color: var(--accent-red); background: var(--accent-red-dim); text-shadow: var(--glow-red); }
|
||||
.dd-state-chip[data-state="idle"] { display: inline-flex; color: var(--accent-green); background: var(--accent-green-dim); }
|
||||
/* base.css sets display on .lt-btn/.lt-chip, which beats the [hidden] attribute. */
|
||||
.dd-header [hidden] { display: none !important; }
|
||||
|
||||
/* Header chip: other sessions waiting on you. */
|
||||
.dd-attention {
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
max-width: 22vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
@@ -276,6 +379,7 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.dd-new-session[hidden] { display: none; }
|
||||
.dd-new-session {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@@ -315,9 +419,11 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
.dd-alert .dd-ask { align-self: flex-start; margin-top: 2px; }
|
||||
.dd-all-clear { display: flex; align-items: center; gap: var(--space-sm); color: var(--accent-green); font-size: 0.74rem; }
|
||||
|
||||
.dd-context-grid { margin-top: var(--space-sm); }
|
||||
|
||||
[data-state="stub"] .lt-section-body { opacity: 0.75; }
|
||||
.dd-repo-grid[hidden] { display: none; }
|
||||
.dd-repo-note:empty { display: none; }
|
||||
.dd-fix-ci { margin-top: var(--space-sm); }
|
||||
.dd-fix-ci[hidden] { display: none; }
|
||||
|
||||
/* ---- file drop / upload ------------------------------------------------------ */
|
||||
.dd-drop-overlay {
|
||||
@@ -398,6 +504,33 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
|
||||
.dd-footer .lt-footer-key { margin-right: 4px; }
|
||||
|
||||
.dd-keybar { display: flex; gap: 4px; width: 100%; overflow-x: auto; scrollbar-width: none; }
|
||||
.dd-keybar[hidden] { display: none; }
|
||||
.dd-keybar button {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 34px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.dd-keybar button:active { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
|
||||
|
||||
/* Touch: the key bar replaces the shortcut hints; the page shrinks above the
|
||||
on-screen keyboard (--dd-kb is set from visualViewport). */
|
||||
body.dd-touch { --dd-footer-height: 44px; }
|
||||
body.dd-touch .dd-hints { display: none; }
|
||||
body.dd-touch .dd-main { bottom: calc(var(--dd-footer-height) + var(--dd-kb, 0px) + env(safe-area-inset-bottom, 0px)); }
|
||||
body.dd-touch .dd-footer {
|
||||
bottom: var(--dd-kb, 0px);
|
||||
height: calc(var(--dd-footer-height) + env(safe-area-inset-bottom, 0px));
|
||||
padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
/* ---- small screens ----------------------------------------------------------- */
|
||||
@media (max-width: 1099px) {
|
||||
.dd-sidebar {
|
||||
@@ -405,7 +538,7 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
top: var(--dd-gap);
|
||||
right: var(--dd-gap);
|
||||
bottom: var(--dd-gap);
|
||||
width: min(var(--dd-sidebar-width), calc(100vw - 2 * var(--dd-gap)));
|
||||
width: min(var(--dd-sidebar-width), calc(100vw - 56px)); /* leave a strip to tap out */
|
||||
z-index: 20;
|
||||
background-color: var(--bg-secondary);
|
||||
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
|
||||
@@ -414,14 +547,25 @@ body.dd-sidebar-open .dd-sidebar {
|
||||
.dd-pane-title { display: none; }
|
||||
}
|
||||
|
||||
.dd-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 15;
|
||||
background: rgba(1, 3, 4, 0.55);
|
||||
}
|
||||
.dd-backdrop[hidden] { display: none; }
|
||||
|
||||
@media (max-width: 719px) {
|
||||
:root { --dd-gap: 4px; }
|
||||
.lt-brand-subtitle,
|
||||
#font-down,
|
||||
#font-up,
|
||||
#fullscreen-toggle,
|
||||
.dd-sso { display: none; }
|
||||
.lt-brand { display: none; }
|
||||
.dd-session-chip { max-width: 46vw; }
|
||||
/* Phones: the red Panels badge and the switcher carry "needs you" instead. */
|
||||
.dd-attention.is-active { display: none; }
|
||||
.dd-header { padding: 0 var(--space-sm); gap: var(--space-sm); }
|
||||
.dd-header .lt-header-left { gap: var(--space-sm); }
|
||||
/* base.css hides the WS indicator on phones; keep it as a bare dot. */
|
||||
.dd-header .dd-ws { display: inline-flex; padding: 4px; }
|
||||
.dd-header .dd-ws #ws-label { display: none; }
|
||||
.dd-footer .lt-footer-hints .lt-footer-hint:nth-child(n + 5),
|
||||
.dd-footer .lt-footer-sep:nth-child(n + 4) { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user