mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-08 16:39:42 +02:00
Merge remote-tracking branch 'origin/master' into pr251-review-fixes
# Conflicts: # CLAUDE.md
This commit is contained in:
Codeman maintainer
@@ -237,10 +237,17 @@ const _SSE_HANDLER_MAP = [
|
||||
[SSE_EVENTS.HOOK_IDLE_PROMPT, '_onHookIdlePrompt'],
|
||||
[SSE_EVENTS.HOOK_PERMISSION_PROMPT, '_onHookPermissionPrompt'],
|
||||
[SSE_EVENTS.HOOK_ELICITATION_DIALOG, '_onHookElicitationDialog'],
|
||||
[SSE_EVENTS.HOOK_ELICITATION_COMPLETE, '_onHookElicitationComplete'],
|
||||
[SSE_EVENTS.HOOK_ELICITATION_RESPONSE, '_onHookElicitationResponse'],
|
||||
[SSE_EVENTS.HOOK_STOP, '_onHookStop'],
|
||||
[SSE_EVENTS.HOOK_TEAMMATE_IDLE, '_onHookTeammateIdle'],
|
||||
[SSE_EVENTS.HOOK_TASK_COMPLETED, '_onHookTaskCompleted'],
|
||||
|
||||
// Approvals Inbox (handlers in approvals-ui.js)
|
||||
[SSE_EVENTS.APPROVAL_PENDING, '_onApprovalPending'],
|
||||
[SSE_EVENTS.APPROVAL_UPDATED, '_onApprovalUpdated'],
|
||||
[SSE_EVENTS.APPROVAL_RESOLVED, '_onApprovalResolved'],
|
||||
|
||||
// Subagents (Claude Code background agents)
|
||||
[SSE_EVENTS.SUBAGENT_DISCOVERED, '_onSubagentDiscovered'],
|
||||
[SSE_EVENTS.SUBAGENT_UPDATED, '_onSubagentUpdated'],
|
||||
@@ -615,6 +622,11 @@ class CodemanApp {
|
||||
this.fileBrowserFilter = '';
|
||||
this.fileBrowserAllExpanded = false;
|
||||
this.fileBrowserDragListeners = null;
|
||||
// Show hidden (dot-prefixed) files and folders in the File Viewer tree.
|
||||
// Per-device, persisted to its own localStorage key by panels-ui.js. Safe to
|
||||
// call a mixin method here: instantiation is deferred to DOMContentLoaded,
|
||||
// so every module's Object.assign has already run.
|
||||
this.fileBrowserShowHidden = this._loadFileBrowserShowHidden?.() ?? false;
|
||||
this.filePreviewContent = '';
|
||||
|
||||
// Toast container cache (methods in panels-ui.js)
|
||||
@@ -630,6 +642,9 @@ class CodemanApp {
|
||||
// Tracks pending hook events that need resolution (permission_prompt, elicitation_dialog, idle_prompt)
|
||||
this.pendingHooks = new Map();
|
||||
|
||||
// Approvals Inbox: Map<approvalId, ApprovalItem> (methods in approvals-ui.js)
|
||||
this.approvals = new Map();
|
||||
|
||||
// WebSocket terminal I/O (low-latency bypass of HTTP POST + SSE)
|
||||
this._ws = null; // WebSocket instance for active session
|
||||
this._wsSessionId = null; // Session ID the WS is connected to
|
||||
@@ -669,6 +684,17 @@ class CodemanApp {
|
||||
this.maxReconnectAttempts = 10;
|
||||
this.isOnline = navigator.onLine;
|
||||
|
||||
// Connection-loss UI (banner + full-screen overlay). The decision itself is
|
||||
// pure and lives in constants.js (computeConnectionLossUi); these are just
|
||||
// its inputs. `_connDownSince` is the timestamp the transport LEFT the
|
||||
// connected state, which is what the grace window is measured from.
|
||||
this._connDownSince = null;
|
||||
this._nextSseRetryAt = null; // when the scheduled SSE retry fires (countdown)
|
||||
this._offlineOverlayDismissed = false;
|
||||
this._offlineRetryPending = false; // a user-triggered retry is in flight
|
||||
this._offlineUiTicker = null;
|
||||
this._lastOfflineUiKey = '';
|
||||
|
||||
// Reliable, durable input delivery (replaces the old best-effort queue).
|
||||
// Every input byte is recorded with a stable clientId + a monotonic
|
||||
// per-session seq, persisted to localStorage, and only dropped once the
|
||||
@@ -1457,6 +1483,10 @@ class CodemanApp {
|
||||
// then ramp up for real network issues.
|
||||
const delay = this.reconnectAttempts <= 1 ? 200
|
||||
: Math.min(500 * Math.pow(2, this.reconnectAttempts - 2), 30000);
|
||||
// Feeds the "Retrying in Ns" countdown. With a 30s cap on the backoff, a
|
||||
// silent wait that long is indistinguishable from a hung app.
|
||||
this._nextSseRetryAt = Date.now() + delay;
|
||||
this._updateConnectionLossUi();
|
||||
this.sseReconnectTimeout = setTimeout(() => this.connectSSE(), delay);
|
||||
};
|
||||
|
||||
@@ -2333,7 +2363,17 @@ class CodemanApp {
|
||||
|
||||
setConnectionStatus(status) {
|
||||
this._connectionStatus = status;
|
||||
// Track when the transport left 'connected'. The connection-loss UI waits
|
||||
// out a deploy-length blip before showing anything (see constants.js).
|
||||
if (status === 'connected') {
|
||||
this._connDownSince = null;
|
||||
this._nextSseRetryAt = null;
|
||||
this._offlineOverlayDismissed = false;
|
||||
} else if (this._connDownSince === null) {
|
||||
this._connDownSince = Date.now();
|
||||
}
|
||||
this._updateConnectionIndicator();
|
||||
this._updateConnectionLossUi();
|
||||
if (status === 'connected') {
|
||||
// Reconnected (SSE) — push any durably-queued input out immediately
|
||||
// instead of waiting for the next 2s sweep.
|
||||
@@ -2955,6 +2995,9 @@ class CodemanApp {
|
||||
window.addEventListener('online', () => {
|
||||
this.isOnline = true;
|
||||
this.reconnectAttempts = 0;
|
||||
// Restart the grace window: the radio just came back, so the next couple
|
||||
// of seconds of "not connected" are expected, not a server problem.
|
||||
this._connDownSince = Date.now();
|
||||
this.connectSSE();
|
||||
// Network came back — drain durably-queued input right away.
|
||||
this._redeliverSweep();
|
||||
@@ -2965,6 +3008,116 @@ class CodemanApp {
|
||||
});
|
||||
}
|
||||
|
||||
// ── Connection-loss UI ─────────────────────────────────────────────────────
|
||||
// Why this exists: the service worker serves the cached app shell, so opening
|
||||
// Codeman with the server unreachable (phone off the tailnet, VPN down,
|
||||
// server stopped) rendered a normal-looking but empty dashboard whose only
|
||||
// hint was an 8px red dot in the header corner. The decision of what to show
|
||||
// is pure (computeConnectionLossUi in constants.js); this is the writer.
|
||||
|
||||
/** Apply the offline banner / overlay for the current connection state. */
|
||||
_updateConnectionLossUi() {
|
||||
const policy = window.CodemanConnectionLoss;
|
||||
const banner = this.$('offlineBanner');
|
||||
const overlay = this.$('offlineOverlay');
|
||||
if (!policy || !banner || !overlay) return;
|
||||
|
||||
const state = policy.compute({
|
||||
isOnline: this.isOnline,
|
||||
status: this._connectionStatus,
|
||||
// Server state has landed at least once this page load (SSE `init`), so
|
||||
// there is a UI worth keeping visible behind a non-blocking banner.
|
||||
everLoaded: this._initGeneration > 0,
|
||||
downSince: this._connDownSince,
|
||||
now: Date.now(),
|
||||
nextRetryAt: this._nextSseRetryAt,
|
||||
overlayDismissed: this._offlineOverlayDismissed,
|
||||
retryPending: this._offlineRetryPending,
|
||||
});
|
||||
|
||||
// The ticker drives both the countdown and the grace deadline; neither is
|
||||
// event-driven, so it must run whenever the transport is down, including
|
||||
// while the decision is still 'hidden' inside the grace window.
|
||||
if (this._connDownSince === null) this._stopOfflineTicker();
|
||||
else this._startOfflineTicker();
|
||||
|
||||
const retryLabel = this._offlineRetryPending
|
||||
? 'Reconnecting…'
|
||||
: state.retryInSec != null && state.retryInSec > 0
|
||||
? `Retrying in ${state.retryInSec}s`
|
||||
: 'Retrying…';
|
||||
|
||||
// Called every second by the ticker, so skip the DOM writes when the rendered
|
||||
// result is unchanged (same reasoning as _updateConnectionIndicator).
|
||||
const key = `${state.mode}|${state.kind}|${retryLabel}`;
|
||||
if (key === this._lastOfflineUiKey) return;
|
||||
this._lastOfflineUiKey = key;
|
||||
|
||||
banner.hidden = state.mode !== 'banner';
|
||||
overlay.hidden = state.mode !== 'overlay';
|
||||
document.body.classList.toggle('connection-lost', state.mode !== 'hidden');
|
||||
|
||||
if (state.mode === 'banner') {
|
||||
const text = this.$('offlineBannerText');
|
||||
const detail = this.$('offlineBannerDetail');
|
||||
if (text) text.textContent = state.title;
|
||||
if (detail) detail.textContent = retryLabel;
|
||||
} else if (state.mode === 'overlay') {
|
||||
const title = this.$('offlineOverlayTitle');
|
||||
const body = this.$('offlineOverlayBody');
|
||||
const host = this.$('offlineOverlayHost');
|
||||
const status = this.$('offlineOverlayStatus');
|
||||
if (title) title.textContent = state.title;
|
||||
if (body) body.textContent = state.detail;
|
||||
if (host) host.textContent = location.host;
|
||||
if (status) status.textContent = retryLabel;
|
||||
}
|
||||
}
|
||||
|
||||
_startOfflineTicker() {
|
||||
if (this._offlineUiTicker) return;
|
||||
this._offlineUiTicker = setInterval(() => this._updateConnectionLossUi(), 1000);
|
||||
}
|
||||
|
||||
_stopOfflineTicker() {
|
||||
if (!this._offlineUiTicker) return;
|
||||
clearInterval(this._offlineUiTicker);
|
||||
this._offlineUiTicker = null;
|
||||
}
|
||||
|
||||
/** Retry button on the banner/overlay: reconnect now instead of waiting out
|
||||
* the backoff (capped at 30s, and the WS plan can give up entirely). */
|
||||
retryConnection() {
|
||||
this._offlineRetryPending = true;
|
||||
this._nextSseRetryAt = null;
|
||||
this.reconnectAttempts = 0;
|
||||
this._clearTimer('sseReconnectTimeout');
|
||||
this.isOnline = navigator.onLine;
|
||||
this._lastOfflineUiKey = '';
|
||||
this._updateConnectionLossUi();
|
||||
this.connectSSE();
|
||||
// The terminal socket does not always come back on its own (planWsReconnect
|
||||
// 'give-up'), so the same button re-arms it.
|
||||
if (this.activeSessionId && this._wsState !== 'connected') {
|
||||
this._wsReconnectAttempts = 0;
|
||||
this._connectWs(this.activeSessionId);
|
||||
}
|
||||
this._clearTimer('_offlineRetryTimer');
|
||||
this._offlineRetryTimer = setTimeout(() => {
|
||||
this._offlineRetryPending = false;
|
||||
this._lastOfflineUiKey = '';
|
||||
this._updateConnectionLossUi();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
/** "Show cached view": demote the blocking overlay to the banner for the rest
|
||||
* of this outage, so the cached UI can be inspected offline. */
|
||||
dismissOfflineOverlay() {
|
||||
this._offlineOverlayDismissed = true;
|
||||
this._lastOfflineUiKey = '';
|
||||
this._updateConnectionLossUi();
|
||||
}
|
||||
|
||||
/** Show/hide the CJK input textarea based on user setting or server override */
|
||||
_updateCjkInputState() {
|
||||
const cjkEl = document.getElementById('cjkInput');
|
||||
@@ -3030,6 +3183,8 @@ class CodemanApp {
|
||||
this._predictiveEcho?.clearPredictions();
|
||||
// Clear pending hooks
|
||||
this.pendingHooks.clear();
|
||||
// Clear approvals (re-seeded from GET /api/approvals right after init)
|
||||
this.approvals?.clear();
|
||||
// Clear parent name cache (prevents stale session name entries accumulating)
|
||||
if (this._parentNameCache) this._parentNameCache.clear();
|
||||
// Clear subagent activity/results maps (prevents leaks if data.subagents is missing)
|
||||
@@ -3170,6 +3325,10 @@ class CodemanApp {
|
||||
this.updateCost();
|
||||
this.renderSessionTabs();
|
||||
|
||||
// Approvals Inbox: re-seed pending prompts from the server so alerts
|
||||
// survive reloads and SSE reconnects (methods in approvals-ui.js).
|
||||
this.seedApprovals?.();
|
||||
|
||||
// Start/stop system stats polling based on session count
|
||||
if (this.sessions.size > 0) {
|
||||
this.startSystemStatsPolling();
|
||||
@@ -3527,6 +3686,8 @@ class CodemanApp {
|
||||
// (create, delete, idle, working, exit, hook alerts via updateTabAlertFromHooks)
|
||||
// already funnels through here. No-ops unless that surface is showing.
|
||||
this._refreshMobileOverviewIfVisible?.();
|
||||
// Same deal for the desktop home screen's tab column.
|
||||
this._refreshHomeSessionsIfVisible?.();
|
||||
}
|
||||
|
||||
// Auto-wrap desktop session tabs to a second row when they overflow one row,
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* @fileoverview Approvals Inbox UI: cross-session queue of prompts waiting on a human.
|
||||
*
|
||||
* Everything here is gated on the OPT-IN `approvalsInboxEnabled` setting
|
||||
* (synced, default OFF): with it off, no bell, no drawer, no overview strips,
|
||||
* no seeding. When on, the header bell renders only while items are pending
|
||||
* (count badge), opening a right-side drawer of approval cards; pending items
|
||||
* are seeded from `GET /api/approvals` on init/reconnect (so tab alerts
|
||||
* survive a reload) and answered in place via `POST /api/approvals/:id/answer`. Cards render
|
||||
* buttons from the server-parsed dialog options; without parsed options they
|
||||
* fall back to Approve/Deny (permission/question) or a text prompt (idle).
|
||||
* Backend: src/web/approval-inbox.ts, design: docs/approvals-inbox-plan.md.
|
||||
*
|
||||
* @mixin Extends CodemanApp.prototype via Object.assign
|
||||
* @dependency app.js (CodemanApp class, this.approvals, setPendingHook/clearPendingHooks, selectSession)
|
||||
* @dependency constants.js (escapeHtml)
|
||||
* @dependency api-client.js at runtime (this._apiJson; loads later but is only called after init)
|
||||
* @loadorder 11.6 of 17, after ultracode-panel.js, before admin-ui.js
|
||||
*/
|
||||
|
||||
/** Map an approval kind to the pendingHooks entry that drives tab alerts. */
|
||||
function approvalKindToHook(kind) {
|
||||
return kind === 'permission' ? 'permission_prompt' : kind === 'question' ? 'elicitation_dialog' : 'idle_prompt';
|
||||
}
|
||||
|
||||
Object.assign(CodemanApp.prototype, {
|
||||
/** Synced setting, default OFF, opt-in via App Settings → Panels. */
|
||||
approvalsInboxEnabled() {
|
||||
return this.loadAppSettingsFromStorage().approvalsInboxEnabled === true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Seed pending approvals from the server. Called from handleInit, i.e. on
|
||||
* every page load AND SSE reconnect; this is what makes pending alerts
|
||||
* survive a reload (pre-inbox they lived only in SSE-transient memory).
|
||||
*/
|
||||
async seedApprovals() {
|
||||
if (!this.approvals) this.approvals = new Map();
|
||||
this.approvals.clear();
|
||||
if (this.approvalsInboxEnabled()) {
|
||||
const data = await this._apiJson('/api/approvals');
|
||||
for (const item of (data && data.approvals) || []) {
|
||||
this.approvals.set(item.id, item);
|
||||
// Re-arm the tab alert state machine (idempotent set-add).
|
||||
this.setPendingHook(item.sessionId, approvalKindToHook(item.kind));
|
||||
}
|
||||
}
|
||||
this.renderApprovals();
|
||||
},
|
||||
|
||||
// ─── SSE handlers ────────────────────────────────────────────
|
||||
|
||||
_onApprovalPending(item) {
|
||||
if (!item || !item.id) return;
|
||||
if (!this.approvals) this.approvals = new Map();
|
||||
// One active item per session (server invariant): drop any stale sibling.
|
||||
for (const [id, existing] of this.approvals) {
|
||||
if (existing.sessionId === item.sessionId) this.approvals.delete(id);
|
||||
}
|
||||
this.approvals.set(item.id, item);
|
||||
this.renderApprovals();
|
||||
},
|
||||
|
||||
_onApprovalUpdated(item) {
|
||||
if (!item || !item.id || !this.approvals?.has(item.id)) return;
|
||||
this.approvals.set(item.id, item);
|
||||
this.renderApprovals();
|
||||
},
|
||||
|
||||
_onApprovalResolved(info) {
|
||||
if (!info || !info.id || !this.approvals) return;
|
||||
if (this.approvals.delete(info.id)) {
|
||||
// Clear the matching tab alert: the inbox resolves on more signals than
|
||||
// the hook handlers do (superseded, expired, answered from another
|
||||
// device), and clearPendingHooks is a no-op when nothing is set.
|
||||
this.clearPendingHooks(info.sessionId, approvalKindToHook(info.kind));
|
||||
this.renderApprovals();
|
||||
}
|
||||
},
|
||||
|
||||
// ─── Actions ─────────────────────────────────────────────────
|
||||
|
||||
async answerApproval(id, action, option) {
|
||||
const body = option !== undefined ? { action, option } : { action };
|
||||
const data = await this._apiJson(`/api/approvals/${encodeURIComponent(id)}/answer`, {
|
||||
method: 'POST',
|
||||
body,
|
||||
});
|
||||
if (data) {
|
||||
this.showToast(action === 'deny' ? 'Denied' : 'Answer sent', 'success');
|
||||
} else {
|
||||
// 404/409 = resolved elsewhere or the dialog left the screen; refresh truth.
|
||||
this.showToast('Could not answer, the prompt may already be resolved', 'warning');
|
||||
this.seedApprovals();
|
||||
}
|
||||
},
|
||||
|
||||
/** Idle prompts: send the typed line from the card's input as a prompt. */
|
||||
async answerApprovalIdleText(id) {
|
||||
const input = document.getElementById(`approvalText-${id}`);
|
||||
const text = input ? input.value.trim() : '';
|
||||
if (!text) return;
|
||||
const data = await this._apiJson(`/api/approvals/${encodeURIComponent(id)}/answer`, {
|
||||
method: 'POST',
|
||||
body: { action: 'text', text },
|
||||
});
|
||||
if (data) this.showToast('Prompt sent', 'success');
|
||||
else {
|
||||
this.showToast('Could not send, the session may be busy', 'warning');
|
||||
this.seedApprovals();
|
||||
}
|
||||
},
|
||||
|
||||
async dismissApproval(id) {
|
||||
await this._apiJson(`/api/approvals/${encodeURIComponent(id)}/dismiss`, { method: 'POST', body: {} });
|
||||
// The SSE resolved event also lands; delete now for instant feedback.
|
||||
if (this.approvals?.delete(id)) this.renderApprovals();
|
||||
},
|
||||
|
||||
openApprovalSession(id) {
|
||||
const item = this.approvals?.get(id);
|
||||
if (!item) return;
|
||||
this.closeApprovalsInbox();
|
||||
if (this.sessions.has(item.sessionId)) this.selectSession(item.sessionId);
|
||||
},
|
||||
|
||||
/**
|
||||
* Push-notification action relay (sw.js → settings-ui notification-click →
|
||||
* here). Falls back to opening the session when the item is unknown, or
|
||||
* when the inbox is disabled (a stale notification from before the toggle
|
||||
* flipped can still carry an action).
|
||||
*/
|
||||
handleNotificationAction(action, approvalId, sessionId) {
|
||||
if ((action === 'approve' || action === 'deny') && approvalId && this.approvalsInboxEnabled()) {
|
||||
this.answerApproval(approvalId, action);
|
||||
return;
|
||||
}
|
||||
if (sessionId && this.sessions.has(sessionId)) this.selectSession(sessionId);
|
||||
},
|
||||
|
||||
// ─── Rendering ───────────────────────────────────────────────
|
||||
|
||||
toggleApprovalsInbox() {
|
||||
const drawer = document.getElementById('approvalsDrawer');
|
||||
if (!drawer) return;
|
||||
if (drawer.classList.contains('open')) this.closeApprovalsInbox();
|
||||
else {
|
||||
drawer.classList.add('open');
|
||||
document.querySelector('.btn-approvals')?.setAttribute('aria-expanded', 'true');
|
||||
this.renderApprovals();
|
||||
}
|
||||
},
|
||||
|
||||
closeApprovalsInbox() {
|
||||
document.getElementById('approvalsDrawer')?.classList.remove('open');
|
||||
document.querySelector('.btn-approvals')?.setAttribute('aria-expanded', 'false');
|
||||
},
|
||||
|
||||
renderApprovals() {
|
||||
const count = this.approvals ? this.approvals.size : 0;
|
||||
const btn = document.querySelector('.btn-approvals');
|
||||
if (btn) {
|
||||
// Marker-class visibility (base header rules are display !important):
|
||||
// the bell exists only while something is pending, so the header stays
|
||||
// untouched for everyone else.
|
||||
btn.classList.toggle('btn-approvals--hidden', count === 0 || !this.approvalsInboxEnabled());
|
||||
const badge = document.getElementById('approvalsBadge');
|
||||
if (badge) badge.textContent = String(count);
|
||||
}
|
||||
this.renderApprovalsDrawer();
|
||||
// Phone overview NEEDS YOU rows re-render on the tab-render tail; nudge it
|
||||
// so inline approve/deny buttons appear without a state change elsewhere.
|
||||
this.renderSessionTabs?.();
|
||||
},
|
||||
|
||||
renderApprovalsDrawer() {
|
||||
const drawer = document.getElementById('approvalsDrawer');
|
||||
if (!drawer || !drawer.classList.contains('open')) return;
|
||||
const list = drawer.querySelector('.approvals-list');
|
||||
if (!list) return;
|
||||
const items = this.approvals ? [...this.approvals.values()].sort((a, b) => a.createdAt - b.createdAt) : [];
|
||||
if (items.length === 0) {
|
||||
list.innerHTML = '<div class="approvals-empty">No pending approvals</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = items.map((item) => this._approvalCardHtml(item)).join('');
|
||||
},
|
||||
|
||||
_approvalCardHtml(item) {
|
||||
const id = escapeHtml(item.id);
|
||||
const kindLabel = item.kind === 'permission' ? 'Permission' : item.kind === 'question' ? 'Question' : 'Idle';
|
||||
const summary = item.toolName
|
||||
? `${item.toolName}${item.toolSummary ? ': ' + item.toolSummary : ''}`
|
||||
: item.message || '';
|
||||
const age = this._approvalAge(item.createdAt);
|
||||
let actions = '';
|
||||
if (item.kind === 'idle') {
|
||||
actions =
|
||||
`<div class="approval-text-row">` +
|
||||
`<input type="text" id="approvalText-${id}" class="approval-text-input" placeholder="Send a prompt…" data-i18n-skip ` +
|
||||
`onkeydown="if(event.key==='Enter')app.answerApprovalIdleText('${id}')">` +
|
||||
`<button class="approval-btn approval-btn-primary" onclick="app.answerApprovalIdleText('${id}')">Send</button>` +
|
||||
`</div>`;
|
||||
} else if (item.options && item.options.length) {
|
||||
actions = item.options
|
||||
.map(
|
||||
(o) =>
|
||||
`<button class="approval-btn ${o.n === 1 ? 'approval-btn-primary' : ''}" data-i18n-skip ` +
|
||||
`title="${escapeHtml(o.label)}" onclick="app.answerApproval('${id}','option',${o.n})">` +
|
||||
`${o.n}. ${escapeHtml(o.label.length > 42 ? o.label.slice(0, 42) + '…' : o.label)}</button>`
|
||||
)
|
||||
.join('');
|
||||
} else {
|
||||
actions =
|
||||
`<button class="approval-btn approval-btn-primary" onclick="app.answerApproval('${id}','approve')">Approve</button>` +
|
||||
`<button class="approval-btn approval-btn-danger" onclick="app.answerApproval('${id}','deny')">Deny (Esc)</button>`;
|
||||
}
|
||||
return (
|
||||
`<div class="approval-card approval-kind-${item.kind}" data-approval-id="${id}">` +
|
||||
`<div class="approval-card-head">` +
|
||||
`<span class="approval-kind-badge">${kindLabel}</span>` +
|
||||
`<span class="approval-session" data-i18n-skip>${escapeHtml(item.sessionName || item.sessionId.slice(0, 8))}</span>` +
|
||||
`<span class="approval-age" data-i18n-skip>${age}</span>` +
|
||||
`</div>` +
|
||||
(summary ? `<div class="approval-summary" data-i18n-skip>${escapeHtml(summary)}</div>` : '') +
|
||||
(item.context ? `<pre class="approval-context">${escapeHtml(item.context)}</pre>` : '') +
|
||||
`<div class="approval-actions">${actions}</div>` +
|
||||
`<div class="approval-meta-actions">` +
|
||||
`<button class="approval-link" onclick="app.openApprovalSession('${id}')">Open session</button>` +
|
||||
`<button class="approval-link" onclick="app.dismissApproval('${id}')">Dismiss</button>` +
|
||||
`</div>` +
|
||||
`</div>`
|
||||
);
|
||||
},
|
||||
|
||||
_approvalAge(createdAt) {
|
||||
const s = Math.max(0, Math.floor((Date.now() - createdAt) / 1000));
|
||||
if (s < 60) return `${s}s`;
|
||||
if (s < 3600) return `${Math.floor(s / 60)}m`;
|
||||
return `${Math.floor(s / 3600)}h`;
|
||||
},
|
||||
});
|
||||
@@ -180,6 +180,81 @@ function planWsReconnect(code, attempt) {
|
||||
return { action: 'reconnect', delayMs };
|
||||
}
|
||||
|
||||
// Connection-loss UI policy.
|
||||
//
|
||||
// With the service worker serving the cached app shell, Codeman still *renders*
|
||||
// when the server is unreachable (phone off the tailnet, VPN down, server
|
||||
// stopped): a dashboard with no sessions and an 8px red dot in the header
|
||||
// corner. That reads as "there are no sessions", not "you are not connected".
|
||||
// This decides what the app surfaces instead:
|
||||
//
|
||||
// 'overlay': full-screen "can't reach Codeman". Used while the page has
|
||||
// never loaded server state, where the UI behind it is empty
|
||||
// anyway, so blocking it costs nothing and explains everything.
|
||||
// 'banner': non-blocking bar under the header. Used once state HAS loaded,
|
||||
// so the terminal scrollback stays readable while the link is down.
|
||||
// 'hidden': connected, or still inside the grace window.
|
||||
//
|
||||
// Grace: a COM deploy restarts the server and SSE is back in ~200ms. Shouting
|
||||
// on every deploy trains the user to ignore the warning, so a transport that is
|
||||
// merely *not yet connected* gets CONNECTION_LOSS_GRACE_MS to recover.
|
||||
// `navigator.onLine === false` skips the grace entirely: the device itself is
|
||||
// saying there is no network, which is never a 200ms blip.
|
||||
//
|
||||
// Pure: no DOM, no timers, no side effects. `now` is passed in.
|
||||
const CONNECTION_LOSS_GRACE_MS = 2500;
|
||||
|
||||
function computeConnectionLossUi(input) {
|
||||
const {
|
||||
isOnline = true,
|
||||
status = 'connected',
|
||||
everLoaded = false,
|
||||
downSince = null,
|
||||
now = 0,
|
||||
nextRetryAt = null,
|
||||
overlayDismissed = false,
|
||||
retryPending = false,
|
||||
} = input || {};
|
||||
|
||||
const hidden = { mode: 'hidden', kind: 'connected', title: '', detail: '', retryInSec: null };
|
||||
|
||||
// The browser's own offline flag outranks the transport state: no network
|
||||
// means no reconnect is coming until it returns.
|
||||
const hardOffline = !isOnline || status === 'offline';
|
||||
if (!hardOffline) {
|
||||
if (status === 'connected') return hidden;
|
||||
const downMs = downSince == null ? 0 : Math.max(0, now - downSince);
|
||||
if (downMs < CONNECTION_LOSS_GRACE_MS) return { ...hidden, kind: 'connecting' };
|
||||
}
|
||||
|
||||
// Dismissing the overlay ("show cached view") demotes it to the banner for
|
||||
// the rest of this outage, never back to invisible.
|
||||
const mode = everLoaded || overlayDismissed ? 'banner' : 'overlay';
|
||||
// A retry the user just triggered has no scheduled time; the caller renders
|
||||
// an indeterminate "Retrying…" for null.
|
||||
const retryInSec =
|
||||
retryPending || nextRetryAt == null ? null : Math.max(0, Math.ceil((nextRetryAt - now) / 1000));
|
||||
|
||||
if (hardOffline) {
|
||||
return {
|
||||
mode,
|
||||
kind: 'offline',
|
||||
title: 'No network connection',
|
||||
detail: 'This device is offline. Codeman is showing the last cached view.',
|
||||
retryInSec,
|
||||
};
|
||||
}
|
||||
return {
|
||||
mode,
|
||||
kind: 'unreachable',
|
||||
title: "Can't reach the Codeman server",
|
||||
detail:
|
||||
'This device has a network, but the Codeman server is not answering. ' +
|
||||
'If you reach Codeman over Tailscale or a VPN, check that it is connected.',
|
||||
retryInSec,
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.WEBGL_FALLBACK = WEBGL_FALLBACK;
|
||||
window.evaluateWebGLLongTaskTrip = evaluateWebGLLongTaskTrip;
|
||||
@@ -190,6 +265,10 @@ if (typeof window !== 'undefined') {
|
||||
window.CodemanWsReconnect = {
|
||||
plan: planWsReconnect,
|
||||
};
|
||||
window.CodemanConnectionLoss = {
|
||||
compute: computeConnectionLossUi,
|
||||
GRACE_MS: CONNECTION_LOSS_GRACE_MS,
|
||||
};
|
||||
}
|
||||
|
||||
// Scheduler API — prioritize terminal writes over background UI updates.
|
||||
@@ -408,10 +487,17 @@ const SSE_EVENTS = {
|
||||
HOOK_IDLE_PROMPT: 'hook:idle_prompt',
|
||||
HOOK_PERMISSION_PROMPT: 'hook:permission_prompt',
|
||||
HOOK_ELICITATION_DIALOG: 'hook:elicitation_dialog',
|
||||
HOOK_ELICITATION_COMPLETE: 'hook:elicitation_complete',
|
||||
HOOK_ELICITATION_RESPONSE: 'hook:elicitation_response',
|
||||
HOOK_STOP: 'hook:stop',
|
||||
HOOK_TEAMMATE_IDLE: 'hook:teammate_idle',
|
||||
HOOK_TASK_COMPLETED: 'hook:task_completed',
|
||||
|
||||
// Approvals Inbox
|
||||
APPROVAL_PENDING: 'approval:pending',
|
||||
APPROVAL_UPDATED: 'approval:updated',
|
||||
APPROVAL_RESOLVED: 'approval:resolved',
|
||||
|
||||
// Subagents (Claude Code background agents)
|
||||
SUBAGENT_DISCOVERED: 'subagent:discovered',
|
||||
SUBAGENT_UPDATED: 'subagent:updated',
|
||||
|
||||
@@ -0,0 +1,335 @@
|
||||
/**
|
||||
* @fileoverview Desktop home screen session list: the open tabs as a vertical
|
||||
* column down the left of the welcome overlay.
|
||||
*
|
||||
* The welcome screen centers ~560px of content in a window that is usually
|
||||
* 1400px+, so the two gutters are dead space. The left one now carries the same
|
||||
* list a phone gets on its home screen (mobile-overview.js), turned vertical:
|
||||
* one row per live tab, in TAB ORDER (not sorted by state) so it reads as the
|
||||
* tab strip rotated, and so Alt+1..9 still matches what you see.
|
||||
*
|
||||
* DESKTOP ONLY, and only in a wide enough window: the column is absolutely
|
||||
* positioned so the centered welcome content never moves, which means it can
|
||||
* only exist where the gutter is genuinely wider than the column. Below
|
||||
* `HOME_SESSIONS_MIN_WIDTH` nothing renders; on a phone the mobile overview owns
|
||||
* the home screen entirely and this surface stays out of its way.
|
||||
*
|
||||
* The working state is deliberately identical to the phone's: a pulsing green
|
||||
* dot ringed by the spinner a tab shows while it loads (`tab-load-spin`, reused
|
||||
* from styles.css), plus a green halo. Same signal, same motion, both surfaces.
|
||||
*
|
||||
* Everything renders from state the page already holds (`this.sessions`,
|
||||
* `this.cases`, `this.pendingHooks`, `this.webviews`) — no endpoint, no SSE
|
||||
* event, no schema. State classification and case matching are reused from
|
||||
* mobile-overview.js rather than re-derived, so the two home screens can never
|
||||
* disagree about what "working" means.
|
||||
*
|
||||
* @mixin Extends CodemanApp.prototype via Object.assign
|
||||
* @dependency app.js (this.sessions, this.cases, this.pendingHooks, selectSession)
|
||||
* @dependency mobile-overview.js (_mobileOverviewState, _mobileOverviewCaseFor, shouldUseMobileOverview)
|
||||
* @dependency webview-tabs.js (this.webviews, this.webviewOrder, openWebview)
|
||||
* @dependency mobile-handlers.js (MobileDetection)
|
||||
* @loadorder 12.56 of 16, after mobile-overview.js, before entrance-animations.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Narrowest window that gets the column. The welcome content is 560px wide and
|
||||
* centered, so at 1180px each gutter is 310px — enough for the 256px column plus
|
||||
* its 20px offset and still a visible gap. Anything narrower would overlap the
|
||||
* search panel, which is why this is a width gate and not a device-type gate.
|
||||
*/
|
||||
const HOME_SESSIONS_MIN_WIDTH = 1180;
|
||||
|
||||
/** Pill copy per state. Same words as the phone overview, same reasons. */
|
||||
const HOME_SESSIONS_PILL_LABEL = {
|
||||
needs: 'needs you',
|
||||
error: 'error',
|
||||
waiting: 'waiting',
|
||||
working: 'working',
|
||||
idle: 'idle',
|
||||
done: 'done',
|
||||
};
|
||||
|
||||
/** Short backend badge, mirroring `.tab-mode` in the tab strip. */
|
||||
const HOME_SESSIONS_MODE_BADGE = {
|
||||
shell: 'sh',
|
||||
opencode: 'oc',
|
||||
codex: 'cx',
|
||||
gemini: 'gm',
|
||||
antigravity: 'ag',
|
||||
};
|
||||
|
||||
Object.assign(CodemanApp.prototype, {
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// Gate + visibility
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Width-driven, like every other layout decision in the app. Explicitly yields
|
||||
* to the phone overview: that surface already lists the same sessions, and two
|
||||
* lists of the same thing on one screen is worse than none.
|
||||
*/
|
||||
shouldShowHomeSessions() {
|
||||
if (this.isSoloWindow) return false;
|
||||
if (this.shouldUseMobileOverview?.()) return false;
|
||||
return window.innerWidth >= HOME_SESSIONS_MIN_WIDTH;
|
||||
},
|
||||
|
||||
/** True while the column is the visible home surface. */
|
||||
isHomeSessionsVisible() {
|
||||
const el = document.getElementById('homeSessions');
|
||||
return !!el && !el.hidden;
|
||||
},
|
||||
|
||||
showHomeSessions() {
|
||||
const el = document.getElementById('homeSessions');
|
||||
if (!el) return;
|
||||
this._wireHomeSessions(el);
|
||||
if (!this.shouldShowHomeSessions()) {
|
||||
el.hidden = true;
|
||||
return;
|
||||
}
|
||||
el.hidden = false;
|
||||
this.renderHomeSessions();
|
||||
},
|
||||
|
||||
hideHomeSessions() {
|
||||
const el = document.getElementById('homeSessions');
|
||||
if (el) el.hidden = true;
|
||||
},
|
||||
|
||||
/** Re-render only when showing (called from the tab renderer's tail). */
|
||||
_refreshHomeSessionsIfVisible() {
|
||||
if (!this.isHomeSessionsVisible()) return;
|
||||
this._debouncedCall('homeSessions', () => this.renderHomeSessions(), 150);
|
||||
},
|
||||
|
||||
/**
|
||||
* One delegated click listener for every row, plus a width listener so
|
||||
* resizing the window while on the home screen adds or drops the column
|
||||
* instead of leaving it overlapping the content it was sized to clear.
|
||||
*/
|
||||
_wireHomeSessions(el) {
|
||||
if (this._homeSessionsWired) return;
|
||||
this._homeSessionsWired = true;
|
||||
|
||||
el.addEventListener('click', (event) => {
|
||||
const target = event.target?.closest?.('[data-hs-action]');
|
||||
if (!target) return;
|
||||
if (target.dataset.hsAction === 'session') {
|
||||
void this.selectSession(target.dataset.hsSession);
|
||||
} else if (target.dataset.hsAction === 'webview') {
|
||||
void this.openWebview?.(target.dataset.hsWebview);
|
||||
}
|
||||
});
|
||||
|
||||
if (window.matchMedia) {
|
||||
const mq = window.matchMedia(`(min-width: ${HOME_SESSIONS_MIN_WIDTH}px)`);
|
||||
const onChange = () => {
|
||||
// Only relevant while the welcome screen is up; entering a session
|
||||
// re-decides through hideWelcome()/showWelcome() anyway.
|
||||
if (this.activeSessionId) return;
|
||||
const overlay = document.getElementById('welcomeOverlay');
|
||||
if (!overlay || !overlay.classList.contains('visible')) return;
|
||||
this.showHomeSessions();
|
||||
};
|
||||
if (mq.addEventListener) mq.addEventListener('change', onChange);
|
||||
else if (mq.addListener) mq.addListener(onChange);
|
||||
}
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// Model
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* One row per live session, in the user's tab order. State classification is
|
||||
* `_mobileOverviewState()` (mobile-overview.js) so both home screens agree on
|
||||
* what counts as needing you; the ORDER differs on purpose — the phone sorts
|
||||
* by urgency because it shows one screenful at a time, this column mirrors the
|
||||
* tab strip so the number badges line up with Alt+1..9.
|
||||
* @returns {Array<object>} row descriptors, ready to render
|
||||
*/
|
||||
buildHomeSessionRows() {
|
||||
const cases = Array.isArray(this.cases) ? this.cases : [];
|
||||
const order = Array.isArray(this.sessionOrder) ? this.sessionOrder : [];
|
||||
const ids = order.filter((id) => this.sessions?.has(id));
|
||||
// A session created before the order list caught up would otherwise be
|
||||
// invisible here while its tab already exists.
|
||||
for (const id of this.sessions?.keys() || []) if (!ids.includes(id)) ids.push(id);
|
||||
|
||||
return ids.map((id, index) => {
|
||||
const session = this.sessions.get(id);
|
||||
const matched = this._mobileOverviewCaseFor(session.workingDir, cases);
|
||||
const state = this._mobileOverviewState(session, this.pendingHooks?.get(id));
|
||||
const mode = session.mode || 'claude';
|
||||
return {
|
||||
id,
|
||||
index,
|
||||
name: this.getSessionName ? this.getSessionName(session) : session.name || id.slice(0, 8),
|
||||
mode,
|
||||
modeBadge: HOME_SESSIONS_MODE_BADGE[mode] || '',
|
||||
caseName: matched ? matched.name : '',
|
||||
dir: this._shortenHomePath ? this._shortenHomePath(session.workingDir) : session.workingDir || '',
|
||||
state,
|
||||
pill: HOME_SESSIONS_PILL_LABEL[state] || state,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// Render
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
renderHomeSessions() {
|
||||
const el = document.getElementById('homeSessions');
|
||||
if (!el) return;
|
||||
|
||||
const rows = this.buildHomeSessionRows();
|
||||
const webviews = (this.webviewOrder || []).map((id) => this.webviews?.get(id)).filter(Boolean);
|
||||
|
||||
// Nothing open means nothing to list: an empty framed box next to a
|
||||
// first-run welcome screen is noise, not information.
|
||||
if (!rows.length && !webviews.length) {
|
||||
el.hidden = true;
|
||||
el.replaceChildren();
|
||||
return;
|
||||
}
|
||||
el.hidden = false;
|
||||
|
||||
el.replaceChildren();
|
||||
el.appendChild(this._buildHomeSessionsHeader(rows.length + webviews.length));
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.className = 'home-sessions-list';
|
||||
for (const row of rows) list.appendChild(this._buildHomeSessionRow(row));
|
||||
for (const webview of webviews) list.appendChild(this._buildHomeSessionsWebviewRow(webview));
|
||||
el.appendChild(list);
|
||||
},
|
||||
|
||||
_buildHomeSessionsHeader(count) {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'home-sessions-header';
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.className = 'home-sessions-title';
|
||||
label.textContent = 'Open tabs';
|
||||
header.appendChild(label);
|
||||
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'home-sessions-count';
|
||||
badge.setAttribute('data-i18n-skip', '');
|
||||
badge.textContent = String(count);
|
||||
header.appendChild(badge);
|
||||
|
||||
return header;
|
||||
},
|
||||
|
||||
/**
|
||||
* A session row. The state class drives the same visual language as the
|
||||
* session tabs and the phone overview: green dot when it is fine (pulsing and
|
||||
* ringed by the load spinner while working), a yellow row when it wants input,
|
||||
* a red row when it asked a question.
|
||||
*/
|
||||
_buildHomeSessionRow(row) {
|
||||
const item = document.createElement('button');
|
||||
item.type = 'button';
|
||||
item.className = 'home-sessions-row home-sessions-row--' + row.state;
|
||||
item.dataset.hsAction = 'session';
|
||||
item.dataset.hsSession = row.id;
|
||||
item.title = row.dir ? `${row.name} (${row.dir})` : row.name;
|
||||
|
||||
if (row.index < 9) {
|
||||
const number = document.createElement('span');
|
||||
number.className = 'home-sessions-number';
|
||||
number.setAttribute('data-i18n-skip', '');
|
||||
number.textContent = String(row.index + 1);
|
||||
item.appendChild(number);
|
||||
}
|
||||
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'home-sessions-dot home-sessions-dot--' + row.state;
|
||||
dot.setAttribute('aria-hidden', 'true');
|
||||
item.appendChild(dot);
|
||||
|
||||
const body = document.createElement('span');
|
||||
body.className = 'home-sessions-row-body';
|
||||
|
||||
const line1 = document.createElement('span');
|
||||
line1.className = 'home-sessions-row-title';
|
||||
if (row.modeBadge) {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = `home-sessions-mode ${row.mode}`;
|
||||
badge.setAttribute('data-i18n-skip', '');
|
||||
badge.textContent = row.modeBadge;
|
||||
line1.appendChild(badge);
|
||||
}
|
||||
const name = document.createElement('span');
|
||||
// .session-name is in the i18n skip list: a session name is user content.
|
||||
name.className = 'session-name';
|
||||
name.textContent = row.name;
|
||||
line1.appendChild(name);
|
||||
body.appendChild(line1);
|
||||
|
||||
const line2 = document.createElement('span');
|
||||
line2.className = 'home-sessions-row-sub';
|
||||
line2.setAttribute('data-i18n-skip', '');
|
||||
line2.textContent = row.caseName || row.dir || row.mode;
|
||||
body.appendChild(line2);
|
||||
|
||||
item.appendChild(body);
|
||||
|
||||
const pill = document.createElement('span');
|
||||
pill.className = 'home-sessions-pill home-sessions-pill--' + row.state;
|
||||
// Skipped by i18n on purpose: generic single words ("idle", "done", "error")
|
||||
// that collide with state strings on other surfaces.
|
||||
pill.setAttribute('data-i18n-skip', '');
|
||||
pill.textContent = row.pill;
|
||||
item.appendChild(pill);
|
||||
|
||||
return item;
|
||||
},
|
||||
|
||||
/** A saved dashboard, listed after the sessions exactly as in the tab strip. */
|
||||
_buildHomeSessionsWebviewRow(webview) {
|
||||
const item = document.createElement('button');
|
||||
item.type = 'button';
|
||||
item.className = 'home-sessions-row home-sessions-row--web';
|
||||
item.dataset.hsAction = 'webview';
|
||||
item.dataset.hsWebview = webview.id;
|
||||
item.title = webview.url || webview.name;
|
||||
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'home-sessions-dot home-sessions-dot--web';
|
||||
dot.setAttribute('aria-hidden', 'true');
|
||||
item.appendChild(dot);
|
||||
|
||||
const body = document.createElement('span');
|
||||
body.className = 'home-sessions-row-body';
|
||||
|
||||
const title = document.createElement('span');
|
||||
title.className = 'home-sessions-row-title';
|
||||
const name = document.createElement('span');
|
||||
// A dashboard name is user content.
|
||||
name.className = 'case-name';
|
||||
name.textContent = webview.name;
|
||||
title.appendChild(name);
|
||||
body.appendChild(title);
|
||||
|
||||
const sub = document.createElement('span');
|
||||
sub.className = 'home-sessions-row-sub';
|
||||
sub.setAttribute('data-i18n-skip', '');
|
||||
sub.textContent = webview.url || '';
|
||||
body.appendChild(sub);
|
||||
|
||||
item.appendChild(body);
|
||||
|
||||
const pill = document.createElement('span');
|
||||
pill.className = 'home-sessions-pill home-sessions-pill--web';
|
||||
pill.setAttribute('data-i18n-skip', '');
|
||||
pill.textContent = 'web';
|
||||
item.appendChild(pill);
|
||||
|
||||
return item;
|
||||
},
|
||||
});
|
||||
@@ -235,6 +235,22 @@
|
||||
Subagents: '子智能体',
|
||||
'Ultracode Agents': 'Ultracode 智能体',
|
||||
'Ultracode Floating Windows': 'Ultracode 浮动窗口',
|
||||
'Approvals Inbox': '审批收件箱',
|
||||
Approvals: '审批',
|
||||
'Prompts waiting on you, across all sessions': '所有会话中等待您处理的提示',
|
||||
'No pending approvals': '没有待处理的审批',
|
||||
'Approvals waiting on you': '等待您审批的请求',
|
||||
'Open approvals inbox': '打开审批收件箱',
|
||||
'Close approvals inbox': '关闭审批收件箱',
|
||||
Approve: '批准',
|
||||
'Deny (Esc)': '拒绝 (Esc)',
|
||||
Deny: '拒绝',
|
||||
'Open session': '打开会话',
|
||||
Dismiss: '忽略',
|
||||
Send: '发送',
|
||||
Permission: '权限',
|
||||
Question: '问题',
|
||||
Idle: '空闲',
|
||||
'Subagent Options': '子智能体选项',
|
||||
'Enable Tracking': '启用跟踪',
|
||||
'Active Tab Only': '仅活动标签页',
|
||||
@@ -371,6 +387,9 @@
|
||||
'在手机上，点击 C 图标打开会话概览（需要你 / 空间 / 空闲），而不是欢迎页',
|
||||
Phone: '手机',
|
||||
|
||||
// Desktop home screen tab column (home-sessions.js)
|
||||
'Open tabs': '打开的标签',
|
||||
|
||||
// Session/case dialogs
|
||||
'Session Options': '会话选项',
|
||||
'Session Name': '会话名称',
|
||||
|
||||
@@ -131,6 +131,10 @@
|
||||
<button class="btn-icon-header btn-response-viewer-header btn-response-viewer-header--hidden" onclick="app.toggleResponseViewer()" title="View last response" aria-label="View last response"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
|
||||
<button class="btn-icon-header btn-away-digest btn-away-digest--hidden" onclick="app.openAwayDigest()" title="Away Digest" aria-label="Open away digest"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg></button>
|
||||
<button class="btn-icon-header btn-session-manager btn-session-manager--hidden" onclick="app.openSessionManager()" title="Session Manager" aria-label="Open session manager"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg></button>
|
||||
<button class="btn-icon-header btn-approvals btn-approvals--hidden" id="approvalsBtn" onclick="app.toggleApprovalsInbox()" title="Approvals waiting on you" aria-label="Open approvals inbox" aria-expanded="false">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="approvals-badge" id="approvalsBadge">0</span>
|
||||
</button>
|
||||
<button class="btn-icon-header btn-attachments-history btn-attachments-history--hidden" id="attachmentsHistoryBtn" onclick="app.toggleAttachmentHistory()" title="Attachments" aria-label="Open attachment history" aria-expanded="false">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
|
||||
<span class="attachment-history-badge" id="attachmentHistoryBadge" style="display:none;">0</span>
|
||||
@@ -149,6 +153,16 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Connection-loss banner: shown once session state HAS loaded and the
|
||||
link then drops, so the terminal stays readable behind it.
|
||||
The blocking variant is #offlineOverlay at the end of <body>. -->
|
||||
<div class="offline-banner" id="offlineBanner" role="status" hidden>
|
||||
<span class="offline-banner-dot" aria-hidden="true"></span>
|
||||
<span class="offline-banner-text" id="offlineBannerText">No connection to the Codeman server</span>
|
||||
<span class="offline-banner-detail" id="offlineBannerDetail"></span>
|
||||
<button class="offline-banner-retry" id="offlineBannerRetry" onclick="app.retryConnection()">Retry now</button>
|
||||
</div>
|
||||
|
||||
<!-- Timer Banner (shown when timed run is active) -->
|
||||
<div class="timer-banner" id="timerBanner" style="display: none;">
|
||||
<div class="timer-content">
|
||||
@@ -308,6 +322,11 @@
|
||||
|
||||
<!-- Welcome Overlay (shown when no session active) -->
|
||||
<div class="welcome-overlay" id="welcomeOverlay">
|
||||
<!-- Open tabs as a vertical column in the left gutter (home-sessions.js).
|
||||
Absolutely positioned so the centered content below never moves, and
|
||||
therefore only rendered where the gutter is wider than the column;
|
||||
ships `hidden` and only that module reveals it. -->
|
||||
<aside class="home-sessions" id="homeSessions" hidden></aside>
|
||||
<div class="welcome-content">
|
||||
<h1 class="welcome-title">Codeman</h1>
|
||||
<p class="welcome-desc">Manage AI Coding tools in persistent tmux sessions.</p>
|
||||
@@ -407,6 +426,7 @@
|
||||
<div class="file-browser-header">
|
||||
<span class="file-browser-title">Files</span>
|
||||
<div class="file-browser-actions">
|
||||
<button class="btn-icon-sm btn-file-browser-hidden" onclick="app.toggleFileBrowserHidden()" title="Show hidden files and folders" aria-label="Show hidden files and folders" aria-pressed="false" id="fileBrowserHiddenBtn">.*</button>
|
||||
<button class="btn-icon-sm" onclick="app.refreshFileBrowser()" title="Refresh">↻</button>
|
||||
<button class="btn-icon-sm" onclick="app.toggleFileBrowserExpand()" title="Expand/Collapse All" id="fileBrowserExpandBtn">⊞</button>
|
||||
<button class="btn-icon-sm" onclick="app.closeFileBrowserPanel()" title="Close">×</button>
|
||||
@@ -1522,6 +1542,13 @@
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="settings-item" title="Cross-session inbox of prompts waiting on you (permission dialogs, questions, idle prompts) with answer-in-place buttons; the header bell appears only while something is pending">
|
||||
<span class="settings-item-label">Approvals Inbox</span>
|
||||
<label class="switch switch-sm">
|
||||
<input type="checkbox" id="appSettingsApprovalsInbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="settings-item" title="Show ultracode / Workflow runs as a master-detail tab (tasks on the left, agents with tokens + tool calls on the right)">
|
||||
<span class="settings-item-label">Ultracode Agents</span>
|
||||
<label class="switch switch-sm">
|
||||
@@ -2725,6 +2752,51 @@
|
||||
<!-- Lines drawn dynamically -->
|
||||
</svg>
|
||||
|
||||
<!-- Connection-loss overlay: the app shell is served from the service-worker
|
||||
cache, so Codeman renders even with nothing reachable. Without this, that
|
||||
looks like an empty dashboard rather than a dead connection. Only shown
|
||||
while no server state has loaded this page load. -->
|
||||
<div class="offline-overlay" id="offlineOverlay" hidden>
|
||||
<div class="offline-overlay-card" role="alertdialog" aria-labelledby="offlineOverlayTitle" aria-describedby="offlineOverlayBody">
|
||||
<div class="offline-overlay-icon" aria-hidden="true">
|
||||
<svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 1l22 22"/>
|
||||
<path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/>
|
||||
<path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/>
|
||||
<path d="M10.71 5.05A16 16 0 0 1 22.58 9"/>
|
||||
<path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/>
|
||||
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
|
||||
<line x1="12" y1="20" x2="12.01" y2="20"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="offline-overlay-title" id="offlineOverlayTitle">Can't reach the Codeman server</h2>
|
||||
<p class="offline-overlay-body" id="offlineOverlayBody"></p>
|
||||
<div class="offline-overlay-host" id="offlineOverlayHost"></div>
|
||||
<ul class="offline-overlay-hints">
|
||||
<li>Check Wi-Fi or mobile data</li>
|
||||
<li>Check your VPN / Tailscale is connected</li>
|
||||
<li>Check the Codeman server is still running</li>
|
||||
</ul>
|
||||
<div class="offline-overlay-actions">
|
||||
<button class="offline-overlay-btn offline-overlay-btn--primary" id="offlineOverlayRetry" onclick="app.retryConnection()">Retry now</button>
|
||||
<button class="offline-overlay-btn" onclick="app.dismissOfflineOverlay()">Show cached view</button>
|
||||
</div>
|
||||
<div class="offline-overlay-status" id="offlineOverlayStatus">Retrying…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Approvals Inbox drawer (populated by approvals-ui.js; opened from the header bell) -->
|
||||
<div class="approvals-drawer" id="approvalsDrawer" role="complementary" aria-label="Approvals inbox">
|
||||
<div class="approvals-header">
|
||||
<div>
|
||||
<div class="approvals-title">Approvals</div>
|
||||
<div class="approvals-subtitle">Prompts waiting on you, across all sessions</div>
|
||||
</div>
|
||||
<button class="approvals-close" onclick="app.closeApprovalsInbox()" title="Close" aria-label="Close approvals inbox">✕</button>
|
||||
</div>
|
||||
<div class="approvals-list"></div>
|
||||
</div>
|
||||
|
||||
<script defer src="constants.js"></script>
|
||||
<script defer src="i18n.js"></script>
|
||||
<script defer src="mobile-handlers.js"></script>
|
||||
@@ -2743,10 +2815,12 @@
|
||||
<script defer src="settings-ui.js"></script>
|
||||
<script defer src="panels-ui.js"></script>
|
||||
<script defer src="ultracode-panel.js"></script>
|
||||
<script defer src="approvals-ui.js"></script>
|
||||
<script defer src="admin-ui.js"></script>
|
||||
<script defer src="session-ui.js"></script>
|
||||
<script defer src="webview-tabs.js"></script>
|
||||
<script defer src="mobile-overview.js"></script>
|
||||
<script defer src="home-sessions.js"></script>
|
||||
<script defer src="entrance-animations.js"></script>
|
||||
<script defer src="ralph-wizard.js"></script>
|
||||
<script defer src="api-client.js"></script>
|
||||
|
||||
@@ -4,10 +4,12 @@
|
||||
* Defines three exports:
|
||||
*
|
||||
* - KeyboardAccessoryBar (singleton object) — Quick action buttons shown above the virtual
|
||||
* keyboard on mobile: arrow up/down, /init, /clear, /compact, paste, Esc, and dismiss.
|
||||
* keyboard on mobile: arrow up/down, /init, Tab, paste, Esc, and dismiss (the extended
|
||||
* bar adds /clear, /compact, Shift+Tab and more). Tab flushes any locally-buffered
|
||||
* prompt text to the PTY before sending \t, so completion applies to what was typed.
|
||||
* The paste button opens a dialog that handles both text paste and image attach
|
||||
* (native picker + best-effort image paste, routed through app._uploadAndInsertImages).
|
||||
* Destructive actions (/clear, /compact) require double-tap confirmation (2s amber state).
|
||||
* Destructive actions (/clear, /compact, extended bar only) require double-tap confirmation (2s amber state).
|
||||
* Commands are sent as text + Enter separately for Ink compatibility.
|
||||
* Only initializes on touch devices (MobileDetection.isTouchDevice guard).
|
||||
* - PathPicker (singleton object) — Lazy server-side file/folder browser shared
|
||||
@@ -33,6 +35,12 @@
|
||||
// Shared Filesystem Path Picker
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
// Per-device, and deliberately its own key rather than a shared "show hidden"
|
||||
// preference with the File Viewer: that tree is confined to one workspace, while
|
||||
// the picker browses Home and every configured root, so wanting dotfiles in a
|
||||
// project does not imply wanting them in ~.
|
||||
const PATH_PICKER_SHOW_HIDDEN_KEY = 'codeman:pathPickerShowHidden';
|
||||
|
||||
const PathPicker = {
|
||||
overlay: null,
|
||||
_options: null,
|
||||
@@ -43,6 +51,7 @@ const PathPicker = {
|
||||
_previewOverlay: null,
|
||||
_previewRequestSequence: 0,
|
||||
_previewPreviousFocus: null,
|
||||
_showHidden: false,
|
||||
|
||||
/**
|
||||
* Open the lazy filesystem browser.
|
||||
@@ -53,6 +62,7 @@ const PathPicker = {
|
||||
this.close(false);
|
||||
this._options = options;
|
||||
this._selectedPath = '';
|
||||
this._showHidden = this._loadShowHidden();
|
||||
this._previousFocus = document.activeElement;
|
||||
this._previousFocus?.blur?.();
|
||||
|
||||
@@ -74,6 +84,7 @@ const PathPicker = {
|
||||
<div class="path-picker-nav">
|
||||
<button type="button" class="path-picker-up" title="Parent folder" aria-label="Parent folder">↑</button>
|
||||
<div class="path-picker-current" title="Current folder"></div>
|
||||
<button type="button" class="path-picker-hidden" title="Show hidden files and folders" aria-label="Show hidden files and folders" aria-pressed="false">.*</button>
|
||||
<button type="button" class="path-picker-refresh" title="Refresh" aria-label="Refresh">↻</button>
|
||||
</div>
|
||||
<div class="path-picker-status" aria-live="polite">Loading...</div>
|
||||
@@ -100,6 +111,8 @@ const PathPicker = {
|
||||
if (current) this.select(current);
|
||||
});
|
||||
overlay.querySelector('.path-picker-refresh').addEventListener('click', () => this.load());
|
||||
overlay.querySelector('.path-picker-hidden').addEventListener('click', () => this.toggleHidden());
|
||||
this._syncHiddenButton();
|
||||
overlay.querySelector('.path-picker-up').addEventListener('click', () => {
|
||||
const parent = overlay.querySelector('.path-picker-up').dataset.parent;
|
||||
if (parent) this.load(parent);
|
||||
@@ -120,6 +133,38 @@ const PathPicker = {
|
||||
this.load(options.initialPath || '');
|
||||
},
|
||||
|
||||
_loadShowHidden() {
|
||||
try {
|
||||
return localStorage.getItem(PATH_PICKER_SHOW_HIDDEN_KEY) === '1';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
_syncHiddenButton() {
|
||||
const btn = this.overlay?.querySelector('.path-picker-hidden');
|
||||
if (!btn) return;
|
||||
const label = this._showHidden ? 'Hide hidden files and folders' : 'Show hidden files and folders';
|
||||
btn.classList.toggle('active', this._showHidden);
|
||||
btn.setAttribute('aria-pressed', this._showHidden ? 'true' : 'false');
|
||||
btn.setAttribute('title', label);
|
||||
btn.setAttribute('aria-label', label);
|
||||
},
|
||||
|
||||
toggleHidden() {
|
||||
if (!this.overlay) return;
|
||||
this._showHidden = !this._showHidden;
|
||||
try {
|
||||
localStorage.setItem(PATH_PICKER_SHOW_HIDDEN_KEY, this._showHidden ? '1' : '0');
|
||||
} catch {}
|
||||
this._syncHiddenButton();
|
||||
// Reload where we are rather than resetting to the root. Turning the toggle
|
||||
// OFF inside a hidden folder makes the current path unbrowsable again; the
|
||||
// server answers 403 and load()'s catch falls back to the default root,
|
||||
// which is the only place left to stand.
|
||||
this.load(this.overlay.querySelector('.path-picker-current').textContent || '');
|
||||
},
|
||||
|
||||
async load(path) {
|
||||
if (!this.overlay || !this._options) return;
|
||||
const loadSequence = ++this._loadSequence;
|
||||
@@ -131,6 +176,7 @@ const PathPicker = {
|
||||
const params = new URLSearchParams();
|
||||
if (path) params.set('path', path);
|
||||
if (this._options.sessionId) params.set('sessionId', this._options.sessionId);
|
||||
if (this._showHidden) params.set('showHidden', 'true');
|
||||
try {
|
||||
const response = await fetch(`/api/filesystem/browse?${params.toString()}`);
|
||||
const result = await response.json();
|
||||
@@ -248,6 +294,9 @@ const PathPicker = {
|
||||
const requestSequence = ++this._previewRequestSequence;
|
||||
const params = new URLSearchParams({ path: entry.path });
|
||||
if (this._options?.sessionId) params.set('sessionId', this._options.sessionId);
|
||||
// A hidden file is only reachable while the toggle is on, and the preview
|
||||
// endpoint re-resolves the path independently, so it needs the flag too.
|
||||
if (this._showHidden) params.set('showHidden', 'true');
|
||||
const previewUrl = `/api/filesystem/preview?${params.toString()}`;
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
@@ -385,7 +434,7 @@ const KeyboardAccessoryBar = {
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn" data-action="init" title="/init">/init</button>
|
||||
<button class="accessory-btn" data-action="clear" title="/clear">/clear</button>
|
||||
<button class="accessory-btn" data-action="tab" title="Tab">Tab</button>
|
||||
<button class="accessory-btn" data-action="paste" title="Paste from clipboard">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
|
||||
@@ -515,9 +564,26 @@ const KeyboardAccessoryBar = {
|
||||
case 'opt-enter':
|
||||
this.sendKey('\x1b\r');
|
||||
break;
|
||||
case 'tab':
|
||||
this.sendKey('\t');
|
||||
case 'tab': {
|
||||
// Tab means "complete what I just typed", but with local echo the typed
|
||||
// text is still buffered in the overlay and has never reached the PTY —
|
||||
// a bare \t would ask the CLI to complete an empty composer. Flush the
|
||||
// pending text first (same steps as the Shift+Enter branch in
|
||||
// terminal-ui.js), then send \t after the sendCommand settle delay.
|
||||
const overlay = app._localEchoOverlay;
|
||||
const pending = (app._localEchoEnabled && overlay?.pendingText) || '';
|
||||
if (pending) {
|
||||
overlay.clear();
|
||||
overlay.suppressBufferDetection?.();
|
||||
app._flushedOffsets?.delete(app.activeSessionId);
|
||||
app._flushedTexts?.delete(app.activeSessionId);
|
||||
app.sendInput(pending);
|
||||
setTimeout(() => this.sendKey('\t'), 120);
|
||||
} else {
|
||||
this.sendKey('\t');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'shift-tab':
|
||||
this.sendKey('\x1b[Z');
|
||||
break;
|
||||
|
||||
@@ -639,9 +639,58 @@ Object.assign(CodemanApp.prototype, {
|
||||
chevron.textContent = '›';
|
||||
item.appendChild(chevron);
|
||||
|
||||
// Approvals Inbox: a pending dialog for this session gets an answer strip
|
||||
// BELOW the row (the row itself is a <button>, so actions cannot nest
|
||||
// inside it). Tapping the row still opens the session, unchanged.
|
||||
const approval = this._pendingApprovalForSession(row.id);
|
||||
if (approval) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'mobile-overview-row-wrap';
|
||||
wrap.appendChild(item);
|
||||
wrap.appendChild(this._buildMobileOverviewApprovalStrip(approval));
|
||||
return wrap;
|
||||
}
|
||||
|
||||
return item;
|
||||
},
|
||||
|
||||
/** The session's pending approval, when the strip should render (dialogs only). */
|
||||
_pendingApprovalForSession(sessionId) {
|
||||
if (!this.approvals || !this.approvalsInboxEnabled || !this.approvalsInboxEnabled()) return null;
|
||||
for (const item of this.approvals.values()) {
|
||||
if (item.sessionId === sessionId && item.kind !== 'idle') return item;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/** Compact answer buttons for a NEEDS YOU row: parsed options, else Approve/Deny. */
|
||||
_buildMobileOverviewApprovalStrip(approval) {
|
||||
const strip = document.createElement('div');
|
||||
strip.className = 'mobile-overview-approval-strip';
|
||||
strip.setAttribute('data-i18n-skip', '');
|
||||
const addBtn = (label, cls, onTap) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'mobile-overview-approval-btn' + (cls ? ' ' + cls : '');
|
||||
btn.textContent = label;
|
||||
btn.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
onTap();
|
||||
});
|
||||
strip.appendChild(btn);
|
||||
};
|
||||
if (approval.options && approval.options.length) {
|
||||
for (const o of approval.options) {
|
||||
const label = o.label.length > 24 ? o.label.slice(0, 24) + '…' : o.label;
|
||||
addBtn(`${o.n}. ${label}`, o.n === 1 ? 'primary' : '', () => this.answerApproval(approval.id, 'option', o.n));
|
||||
}
|
||||
} else {
|
||||
addBtn('Approve', 'primary', () => this.answerApproval(approval.id, 'approve'));
|
||||
addBtn('Deny', 'danger', () => this.answerApproval(approval.id, 'deny'));
|
||||
}
|
||||
return strip;
|
||||
},
|
||||
|
||||
/** A past conversation. Tapping it resumes, which creates a fresh session. */
|
||||
_buildMobileOverviewPastRow(row) {
|
||||
const item = document.createElement('button');
|
||||
|
||||
+232
-11
@@ -350,16 +350,53 @@ html.mobile-init .file-browser-panel {
|
||||
Phone Breakpoint (<430px)
|
||||
============================================================================ */
|
||||
@media (max-width: 430px) {
|
||||
/* Phones get a 44px header, up from 36px. Every header control is a touch
|
||||
target and 44px is the floor for one; the brand "C" that gets you home is
|
||||
the one that matters most. Redefined as the TOKEN rather than a literal so
|
||||
the panels positioned off `var(--header-height)` (file browser, insights,
|
||||
plan overlays in styles.css) follow it instead of drifting 8px under the
|
||||
header. Costs 8px of terminal height on a phone. */
|
||||
:root {
|
||||
--header-height: 44px;
|
||||
}
|
||||
|
||||
/* Phone brand collapses to a single "C" home button: hide the wordmark,
|
||||
keep the tap target */
|
||||
.header-brand {
|
||||
padding-right: 0.25rem;
|
||||
margin-right: 0.2rem;
|
||||
padding-right: 0;
|
||||
margin-right: 0.1rem;
|
||||
border-right: none;
|
||||
/* styles.css sizes this to the FULL header height, which is taller than the
|
||||
header's padding box; centred by the header's `align-items: center` above,
|
||||
that overflow is symmetric and the button lands flush with both edges.
|
||||
Do not "fix" it with `height: 100%`: the header sets min/max-height and no
|
||||
height, so the percentage has no definite containing block to resolve
|
||||
against and silently falls back to auto. */
|
||||
}
|
||||
|
||||
/* The "C" was a 0.85rem inline span — about a 12x13px hit area, far under the
|
||||
44px minimum, on the one control that gets you back to the home screen.
|
||||
It is now a real 44x44 button: 44px wide, and the full height of the phone
|
||||
header, which is itself 44px for exactly this reason. The negative margin
|
||||
spends the header's OWN left padding on the target instead of pushing the
|
||||
tab strip right. */
|
||||
.header-brand .logo {
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
/* Taller than its parent on purpose: centred in the padded brand box, this
|
||||
makes the button fill all 36 header pixels edge to edge. */
|
||||
height: var(--header-height);
|
||||
margin-left: -0.3rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.header-brand .logo:active {
|
||||
background: rgba(96, 165, 250, 0.16);
|
||||
}
|
||||
|
||||
.header-brand .logo .logo-text {
|
||||
@@ -404,8 +441,12 @@ html.mobile-init .file-browser-panel {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 36px;
|
||||
max-height: 36px;
|
||||
min-height: var(--header-height);
|
||||
max-height: var(--header-height);
|
||||
/* styles.css top-aligns header children. That read as centred while the bar
|
||||
was 36px and its contents ~31px; in a 44px bar it leaves a visible gap
|
||||
under everything. */
|
||||
align-items: center;
|
||||
padding: 0.15rem 0.3rem;
|
||||
padding-left: calc(0.3rem + var(--safe-area-left));
|
||||
padding-right: calc(0.3rem + var(--safe-area-right));
|
||||
@@ -420,8 +461,8 @@ html.mobile-init .file-browser-panel {
|
||||
/* iOS safe area adjustment for fixed header - header extends into notch area */
|
||||
.ios-device .header {
|
||||
padding-top: calc(0.15rem + var(--safe-area-top));
|
||||
min-height: calc(36px + var(--safe-area-top));
|
||||
max-height: calc(36px + var(--safe-area-top));
|
||||
min-height: calc(var(--header-height) + var(--safe-area-top));
|
||||
max-height: calc(var(--header-height) + var(--safe-area-top));
|
||||
}
|
||||
|
||||
/* Push ALL content below fixed header (not just .main) so banners
|
||||
@@ -431,11 +472,13 @@ html.mobile-init .file-browser-panel {
|
||||
when keyboard is visible, and resetLayout() clears the inline
|
||||
style to re-expose this CSS value. */
|
||||
.app {
|
||||
padding-top: 42px;
|
||||
/* Header height plus its 1px border and a little slack. Derived from the
|
||||
token so the offset cannot fall out of step with the bar it clears. */
|
||||
padding-top: calc(var(--header-height) + 6px);
|
||||
}
|
||||
|
||||
.ios-device .app {
|
||||
padding-top: calc(42px + var(--safe-area-top));
|
||||
padding-top: calc(var(--header-height) + 6px + var(--safe-area-top));
|
||||
}
|
||||
|
||||
.main {
|
||||
@@ -479,7 +522,11 @@ html.mobile-init .file-browser-panel {
|
||||
.btn-icon-header.btn-lifecycle-log,
|
||||
.btn-icon-header.btn-away-digest,
|
||||
.btn-icon-header.btn-session-manager,
|
||||
.btn-icon-header.btn-file-viewer {
|
||||
.btn-icon-header.btn-file-viewer,
|
||||
/* Approvals bell: phones answer from the overview's NEEDS YOU rows instead
|
||||
(inline approve/deny in mobile-overview.js); the bell would only crowd the
|
||||
header it was designed to stay out of. */
|
||||
.btn-icon-header.btn-approvals {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -617,6 +664,16 @@ html.mobile-init .file-browser-panel {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* The working dot is the one glance-state a phone needs: keep idle tiny, but
|
||||
let the pulsing green "working" dot read from arm's length. !important on
|
||||
the glow because the skin block's no-halo rule (styles.css, nested under
|
||||
html:not([data-skin="og"])) outranks any plain class rule here. */
|
||||
.session-tab .tab-status.busy {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
|
||||
}
|
||||
|
||||
/* Truncate tab names more aggressively on mobile */
|
||||
.session-tab .tab-name {
|
||||
max-width: 50px;
|
||||
@@ -2503,6 +2560,41 @@ html.mobile-init .file-browser-panel {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Approvals Inbox answer strip: sits under a NEEDS YOU row (sibling of the
|
||||
row <button>, see _buildMobileOverviewApprovalStrip). Buttons inherit no
|
||||
toolbar styling on purpose; they are one-tap dialog answers, not runs. */
|
||||
.mobile-overview-row-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
.mobile-overview-approval-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.2rem 0.1rem;
|
||||
}
|
||||
.mobile-overview-approval-btn {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.72rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mobile-overview-approval-btn.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
.mobile-overview-approval-btn.danger {
|
||||
border-color: var(--error);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* Attention states mirror the session tabs exactly: red blink when the agent
|
||||
asked something (permission / question), yellow blink when it is waiting for
|
||||
a prompt. Same hues and same cadence as tab-blink-red / tab-blink-yellow in
|
||||
@@ -2522,6 +2614,51 @@ html.mobile-init .file-browser-panel {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
/* Working is not an alert, so it gets a calm green breathing edge rather than a
|
||||
blink: at a glance the row reads "this one is moving", without competing with
|
||||
the two states that actually want you. Slower than both of them on purpose. */
|
||||
.mobile-overview-row--working {
|
||||
border-color: var(--green);
|
||||
animation: mobile-overview-breathe-green 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes mobile-overview-breathe-green {
|
||||
0%,
|
||||
100% {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--border);
|
||||
}
|
||||
50% {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: var(--green);
|
||||
}
|
||||
}
|
||||
|
||||
/* The pill picks up a three-dot ellipsis that fills in and empties, so the row
|
||||
still reads as active on a skin where the border tint is subtle. */
|
||||
.mobile-overview-pill--working::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.75em;
|
||||
text-align: left;
|
||||
animation: mobile-overview-pill-dots 1.5s steps(1, end) infinite;
|
||||
}
|
||||
|
||||
@keyframes mobile-overview-pill-dots {
|
||||
0% {
|
||||
content: '';
|
||||
}
|
||||
25% {
|
||||
content: '.';
|
||||
}
|
||||
50% {
|
||||
content: '..';
|
||||
}
|
||||
75% {
|
||||
content: '...';
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mobile-overview-blink-red {
|
||||
0%,
|
||||
100% {
|
||||
@@ -2596,13 +2733,35 @@ html.mobile-init .file-browser-panel {
|
||||
}
|
||||
|
||||
/* Same as .session-tab .tab-status: green when the session is fine, and the
|
||||
shared `pulse` keyframes while it is working. */
|
||||
shared `pulse` keyframes while it is working. The halo matches the busy tab
|
||||
dot and the desktop home column (.home-sessions-dot--working, styles.css):
|
||||
working reads identically on every surface or it reads as three features. */
|
||||
.mobile-overview-dot--working {
|
||||
background: var(--green);
|
||||
animation: pulse 1.5s infinite;
|
||||
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
/* Ring the pulsing dot with the SAME spinner a tab shows while it loads: same
|
||||
2px ring, same bright leading edge, same `tab-load-spin` keyframes from
|
||||
styles.css (reused, not re-declared, so the two can never drift). Green
|
||||
rather than the tab's blue because here it means "running", not "loading":
|
||||
the motion is the shared part, the color still belongs to the state. */
|
||||
.mobile-overview-dot {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-overview-dot--working::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border: 2px solid rgba(34, 197, 94, 0.25);
|
||||
border-top-color: var(--green);
|
||||
border-radius: 50%;
|
||||
animation: tab-load-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.mobile-overview-dot--idle {
|
||||
background: var(--green);
|
||||
}
|
||||
@@ -2713,6 +2872,24 @@ html.mobile-init .file-browser-panel {
|
||||
.mobile-overview-dot--working {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* The ring stays as a static full circle: it still marks the row, it just
|
||||
stops turning. */
|
||||
.mobile-overview-dot--working::after {
|
||||
border-color: var(--green);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Working is only informational, so it drops to a static green edge and a
|
||||
static ellipsis rather than holding a tint the way the alerts do. */
|
||||
.mobile-overview-row--working {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.mobile-overview-pill--working::after {
|
||||
content: '...';
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Light-skin compatibility for mobile-only chrome. These components predate
|
||||
@@ -2872,3 +3049,47 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
padding: 4px 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Connection loss: phone sizing
|
||||
The banner sits in normal flow directly under the fixed header (the container
|
||||
already reserves that space), so it needs the same safe-area padding as the
|
||||
other banners. The overlay is fixed and handles its own insets.
|
||||
============================================================================ */
|
||||
@media (max-width: 430px) {
|
||||
.offline-banner {
|
||||
padding: 0.4rem 0.5rem;
|
||||
padding-left: calc(0.5rem + var(--safe-area-left));
|
||||
padding-right: calc(0.5rem + var(--safe-area-right));
|
||||
font-size: 0.7rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
/* The countdown is the first thing to go when the bar gets tight. The
|
||||
wording plus the Retry button carry the message on their own. */
|
||||
.offline-banner-detail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offline-banner-retry {
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.offline-overlay-card {
|
||||
padding: 22px 18px 18px;
|
||||
}
|
||||
|
||||
.offline-overlay-title {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.offline-overlay-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.offline-overlay-btn {
|
||||
width: 100%;
|
||||
padding: 0.65rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
*/
|
||||
|
||||
const AWAY_DIGEST_LAST_VIEWED_KEY = 'codeman-away-digest-last-viewed';
|
||||
const FILE_BROWSER_SHOW_HIDDEN_KEY = 'codeman:fileBrowserShowHidden';
|
||||
const AWAY_DIGEST_SECTIONS = [
|
||||
['needsAttention', 'Needs Attention'],
|
||||
['completed', 'Completed'],
|
||||
@@ -2944,18 +2945,56 @@ Object.assign(CodemanApp.prototype, {
|
||||
// File Browser Panel
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
// Hidden files/folders (dot-prefixed) are filtered SERVER-side by
|
||||
// GET /api/sessions/:id/files, so the toggle re-fetches rather than
|
||||
// re-rendering the cached tree (issue #221). The flag is per-device and lives
|
||||
// in its own localStorage key instead of the app-settings object: that object
|
||||
// is rebuilt from the settings-modal DOM on every save, so a key toggled from
|
||||
// outside the modal would be dropped the next time settings are saved.
|
||||
_loadFileBrowserShowHidden() {
|
||||
try {
|
||||
return localStorage.getItem(FILE_BROWSER_SHOW_HIDDEN_KEY) === '1';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
_syncFileBrowserHiddenBtn() {
|
||||
const btn = this.$('fileBrowserHiddenBtn');
|
||||
if (!btn) return;
|
||||
const on = this.fileBrowserShowHidden === true;
|
||||
btn.classList.toggle('active', on);
|
||||
btn.setAttribute('aria-pressed', String(on));
|
||||
const label = on ? 'Hide hidden files and folders' : 'Show hidden files and folders';
|
||||
btn.setAttribute('title', label);
|
||||
btn.setAttribute('aria-label', label);
|
||||
},
|
||||
|
||||
async toggleFileBrowserHidden() {
|
||||
this.fileBrowserShowHidden = !this.fileBrowserShowHidden;
|
||||
try {
|
||||
localStorage.setItem(FILE_BROWSER_SHOW_HIDDEN_KEY, this.fileBrowserShowHidden ? '1' : '0');
|
||||
} catch {}
|
||||
this._syncFileBrowserHiddenBtn();
|
||||
// Expanded-directory state is deliberately preserved so toggling does not
|
||||
// collapse the tree the user just navigated.
|
||||
if (this.activeSessionId) await this.loadFileBrowser(this.activeSessionId);
|
||||
},
|
||||
|
||||
async loadFileBrowser(sessionId) {
|
||||
if (!sessionId) return;
|
||||
|
||||
const treeEl = this.$('fileBrowserTree');
|
||||
const statusEl = this.$('fileBrowserStatus');
|
||||
this._syncFileBrowserHiddenBtn();
|
||||
if (!treeEl) return;
|
||||
|
||||
// Show loading state
|
||||
treeEl.innerHTML = '<div class="file-browser-loading">Loading files...</div>';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/sessions/${sessionId}/files?depth=5&showHidden=false`);
|
||||
const showHidden = this.fileBrowserShowHidden === true;
|
||||
const res = await fetch(`/api/sessions/${sessionId}/files?depth=5&showHidden=${showHidden}`);
|
||||
if (!res.ok) throw new Error('Failed to load files');
|
||||
|
||||
const result = await res.json();
|
||||
@@ -2967,7 +3006,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
// Update status
|
||||
if (statusEl) {
|
||||
const { totalFiles, totalDirectories, truncated } = result.data;
|
||||
statusEl.textContent = `${totalFiles} files, ${totalDirectories} dirs${truncated ? ' (truncated)' : ''}`;
|
||||
statusEl.textContent = `${totalFiles} files, ${totalDirectories} dirs${truncated ? ' (truncated)' : ''}${showHidden ? ' · hidden shown' : ''}`;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load file browser:', err);
|
||||
|
||||
@@ -38,6 +38,18 @@ Object.assign(CodemanApp.prototype, {
|
||||
this._notifySession(data.sessionId, 'critical', 'hook-elicitation', 'Question Asked', data.question || 'Claude is asking a question and waiting for your answer');
|
||||
},
|
||||
|
||||
_onHookElicitationComplete(data) {
|
||||
// Question answered in the terminal: clear the action alert without
|
||||
// waiting for `stop` (the turn may keep running for a long time).
|
||||
if (data.sessionId) {
|
||||
this.clearPendingHooks(data.sessionId, 'elicitation_dialog');
|
||||
}
|
||||
},
|
||||
|
||||
_onHookElicitationResponse(data) {
|
||||
this._onHookElicitationComplete(data);
|
||||
},
|
||||
|
||||
_onHookStop(data) {
|
||||
// Clear all pending hooks when Claude finishes responding
|
||||
if (data.sessionId) {
|
||||
@@ -158,8 +170,12 @@ Object.assign(CodemanApp.prototype, {
|
||||
// Listen for messages from service worker (notification clicks)
|
||||
navigator.serviceWorker.addEventListener('message', (event) => {
|
||||
if (event.data?.type === 'notification-click') {
|
||||
const { sessionId } = event.data;
|
||||
if (sessionId && this.sessions.has(sessionId)) {
|
||||
const { sessionId, action, approvalId } = event.data;
|
||||
if (action) {
|
||||
// Approve/Deny action buttons on a push: answer via the
|
||||
// Approvals Inbox instead of just focusing the session.
|
||||
this.handleNotificationAction?.(action, approvalId, sessionId);
|
||||
} else if (sessionId && this.sessions.has(sessionId)) {
|
||||
this.selectSession(sessionId);
|
||||
}
|
||||
window.focus();
|
||||
@@ -326,6 +342,8 @@ Object.assign(CodemanApp.prototype, {
|
||||
document.getElementById('appSettingsShowFileBrowser').checked = settings.showFileBrowser ?? defaults.showFileBrowser ?? false;
|
||||
document.getElementById('appSettingsShowSubagents').checked = settings.showSubagents ?? defaults.showSubagents ?? false;
|
||||
document.getElementById('appSettingsShowUltracodeAgents').checked = settings.showUltracodeAgents ?? defaults.showUltracodeAgents ?? false;
|
||||
// Approvals Inbox: synced, default OFF (opt-in; only an explicit true enables).
|
||||
document.getElementById('appSettingsApprovalsInbox').checked = settings.approvalsInboxEnabled === true;
|
||||
document.getElementById('appSettingsUltracodeFloatingWindows').checked =
|
||||
settings.ultracodeFloatingWindows ?? defaults.ultracodeFloatingWindows ?? false;
|
||||
document.getElementById('appSettingsShowMultiMonitorButton').checked = settings.showMultiMonitorButton ?? defaults.showMultiMonitorButton ?? false;
|
||||
@@ -1525,6 +1543,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
showFileBrowser: document.getElementById('appSettingsShowFileBrowser').checked,
|
||||
showSubagents: document.getElementById('appSettingsShowSubagents').checked,
|
||||
showUltracodeAgents: document.getElementById('appSettingsShowUltracodeAgents').checked,
|
||||
approvalsInboxEnabled: document.getElementById('appSettingsApprovalsInbox').checked,
|
||||
ultracodeFloatingWindows: document.getElementById('appSettingsUltracodeFloatingWindows').checked,
|
||||
showMultiMonitorButton: document.getElementById('appSettingsShowMultiMonitorButton').checked,
|
||||
showPlanUsageLimits: document.getElementById('appSettingsShowPlanUsageLimits').checked,
|
||||
@@ -1690,6 +1709,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
this.applyTabWrapSettings();
|
||||
this._updateTokensImmediate(); // Re-render token display (picks up showCost change)
|
||||
this.applyMonitorVisibility();
|
||||
this.renderApprovals?.(); // Approvals Inbox toggle (hide/show bell + drawer)
|
||||
this.renderProjectInsightsPanel(); // Re-render to apply visibility setting
|
||||
this.updateSubagentWindowVisibility(); // Apply subagent window visibility setting
|
||||
|
||||
|
||||
+739
-1
@@ -9208,6 +9208,20 @@ kbd {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* Show-hidden toggle: a literal `.*` glyph rather than an icon, so its meaning
|
||||
* (dot-prefixed files and folders) survives every skin and font stack. */
|
||||
.btn-file-browser-hidden {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.btn-file-browser-hidden.active {
|
||||
color: var(--accent);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.file-browser-search {
|
||||
padding: 0.4rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
@@ -10659,6 +10673,222 @@ kbd {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* "Approvals" header bell: appears ONLY while prompts are pending (JS toggles
|
||||
the marker class on count changes), so it ships hidden and stays out of the
|
||||
default header. Same marker pattern as the attachments button. */
|
||||
.btn-approvals {
|
||||
display: inline-flex !important;
|
||||
position: relative;
|
||||
}
|
||||
.btn-approvals.btn-approvals--hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.approvals-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 1px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
background: var(--error, #e5484d);
|
||||
color: #fff;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Approvals Inbox drawer: same shell as the attachment history drawer. */
|
||||
.approvals-drawer {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
right: 0;
|
||||
width: 420px;
|
||||
max-width: calc(100vw - 24px);
|
||||
height: calc(100vh - var(--header-height) - var(--toolbar-height));
|
||||
height: calc(100dvh - var(--header-height) - var(--toolbar-height));
|
||||
background: var(--floating-bg);
|
||||
border-left: 1px solid var(--border);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.18s ease;
|
||||
box-shadow: -10px 0 28px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
.approvals-drawer.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.approvals-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.approvals-title {
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
.approvals-subtitle {
|
||||
margin-top: 2px;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
.approvals-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.approvals-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
.approvals-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
.approvals-empty {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.78rem;
|
||||
text-align: center;
|
||||
padding: 24px 8px;
|
||||
}
|
||||
|
||||
.approval-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
|
||||
}
|
||||
.approval-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.approval-kind-badge {
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
.approval-kind-question .approval-kind-badge {
|
||||
background: #d97706;
|
||||
}
|
||||
.approval-kind-idle .approval-kind-badge {
|
||||
background: #6b7280;
|
||||
}
|
||||
.approval-session {
|
||||
color: var(--text);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.approval-age {
|
||||
margin-left: auto;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
.approval-summary {
|
||||
color: var(--text);
|
||||
font-size: 0.76rem;
|
||||
margin-bottom: 6px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.approval-context {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.66rem;
|
||||
line-height: 1.35;
|
||||
color: var(--text-dim);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
margin: 0 0 8px;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.approval-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.approval-btn {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
|
||||
color: var(--text);
|
||||
font-size: 0.72rem;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.approval-btn:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.approval-btn-primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
.approval-btn-danger {
|
||||
border-color: var(--error, #e5484d);
|
||||
color: var(--error, #e5484d);
|
||||
}
|
||||
.approval-text-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
.approval-text-input {
|
||||
flex: 1;
|
||||
background: var(--bg, rgba(0, 0, 0, 0.3));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 0.74rem;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.approval-meta-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.approval-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.68rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.approval-link:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* "Attachments" header button — opt-in (App Settings → Display), hidden by
|
||||
default. Same pattern as the response viewer: a base inline-flex !important so
|
||||
an inline style can't override it, and a more-specific marker rule to hide. */
|
||||
@@ -11996,7 +12226,8 @@ body.touch-device.cjk-input-visible .main {
|
||||
}
|
||||
|
||||
.path-picker-up,
|
||||
.path-picker-refresh {
|
||||
.path-picker-refresh,
|
||||
.path-picker-hidden {
|
||||
flex: 0 0 38px;
|
||||
height: 38px;
|
||||
color: var(--text);
|
||||
@@ -12006,6 +12237,20 @@ body.touch-device.cjk-input-visible .main {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Show-hidden toggle: a literal `.*` glyph rather than an icon, so its meaning
|
||||
* (dot-prefixed files and folders) survives every skin and font stack. */
|
||||
.path-picker-hidden {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.path-picker-hidden.active {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.path-picker-up:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
@@ -13496,3 +13741,496 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
|
||||
/* Delete sits apart from Cancel/Save so it is not fat-fingered on the way to Save. */
|
||||
.webview-modal-actions { justify-content: space-between; }
|
||||
.webview-modal-actions .btn-danger { margin-right: auto; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Connection loss: banner + full-screen overlay
|
||||
═══════════════════════════════════════════════════════════════
|
||||
The service worker serves the cached shell, so an unreachable server used to
|
||||
render as an empty-but-normal dashboard with only an 8px red dot in the
|
||||
header. Both surfaces below are deliberately skin-independent (literal
|
||||
colors, not tokens): "you are disconnected" must read identically on every
|
||||
skin, including the light ones. Visibility is driven by the `hidden`
|
||||
attribute, so the display rules need !important to lose to it. */
|
||||
|
||||
.offline-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.45rem 1rem;
|
||||
background: linear-gradient(90deg, #b91c1c, #991b1b);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
flex-shrink: 0;
|
||||
z-index: 1250;
|
||||
}
|
||||
|
||||
.offline-banner[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.offline-banner-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
animation: offline-banner-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes offline-banner-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
.offline-banner-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.offline-banner-detail {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.offline-banner-retry {
|
||||
flex-shrink: 0;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #fff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.offline-banner-retry:hover {
|
||||
background: rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
/* Above the mobile fixed header (1200) and modals (1300): this is a blocking
|
||||
"nothing works right now" state, and it only appears before any session
|
||||
state has loaded, so there is no modal underneath to bury. Stays below the
|
||||
image popup layer (3000). */
|
||||
.offline-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
padding-top: calc(20px + var(--safe-area-top));
|
||||
padding-bottom: calc(20px + var(--safe-area-bottom));
|
||||
background: rgba(6, 8, 12, 0.93);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offline-overlay[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.offline-overlay-card {
|
||||
width: min(420px, 100%);
|
||||
box-sizing: border-box;
|
||||
padding: 26px 24px 22px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(239, 68, 68, 0.45);
|
||||
background: #16181d;
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
|
||||
color: #f3f6fa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.offline-overlay-icon {
|
||||
color: #ef4444;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.offline-overlay-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.offline-overlay-body {
|
||||
margin: 0 0 14px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45;
|
||||
color: #b9c0cc;
|
||||
}
|
||||
|
||||
.offline-overlay-host {
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #8b93a1;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.offline-overlay-hints {
|
||||
margin: 0 0 18px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.7;
|
||||
color: #a7aebb;
|
||||
}
|
||||
|
||||
.offline-overlay-hints li::before {
|
||||
content: '›';
|
||||
color: #ef4444;
|
||||
font-weight: 700;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.offline-overlay-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.offline-overlay-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 7px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e7ebf2;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.offline-overlay-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.offline-overlay-btn--primary {
|
||||
background: #dc2626;
|
||||
border-color: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.offline-overlay-btn--primary:hover {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.offline-overlay-status {
|
||||
margin-top: 14px;
|
||||
font-size: 0.75rem;
|
||||
color: #8b93a1;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
Home screen: open tabs in the left gutter (home-sessions.js)
|
||||
|
||||
The welcome content is 560px wide and centered, so this column lives in dead
|
||||
space. It is `position: absolute` precisely so that stays true: the centered
|
||||
content does not move by a pixel whether the column renders or not. That in
|
||||
turn is why the width gate below has to exist — in a narrow window there is
|
||||
no gutter to sit in, and an absolute box would simply overlap the search
|
||||
panel. JS gates on the same 1180px so the two can never disagree.
|
||||
|
||||
The working dot is the phone's, exactly: pulsing green ringed by the very
|
||||
same `tab-load-spin` a tab shows while it loads (reused from above, never
|
||||
re-declared), plus a green halo. One signal, one motion, both home screens.
|
||||
══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.home-sessions {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 256px;
|
||||
max-height: calc(100% - 3rem);
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* `hidden` has to be re-asserted over the display above, or the module's only
|
||||
lever (el.hidden) does nothing. */
|
||||
.home-sessions[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Belt and braces with shouldShowHomeSessions(): a resize that outruns the
|
||||
matchMedia listener must never leave the column overlapping the content. */
|
||||
@media (max-width: 1179px) {
|
||||
.home-sessions {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.home-sessions-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.home-sessions-title {
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.home-sessions-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 16px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.home-sessions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 2px 2px 6px;
|
||||
}
|
||||
|
||||
.home-sessions-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.home-sessions-list::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.home-sessions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 7px 9px;
|
||||
border-radius: 9px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
font-family: inherit;
|
||||
font-size: 0.76rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth);
|
||||
}
|
||||
|
||||
.home-sessions-row:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: rgba(34, 197, 94, 0.35);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.home-sessions-row:active {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
}
|
||||
|
||||
.home-sessions-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 3px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.58rem;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.home-sessions-dot {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
.home-sessions-dot--needs,
|
||||
.home-sessions-dot--error {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.home-sessions-dot--waiting {
|
||||
background: var(--yellow);
|
||||
}
|
||||
|
||||
.home-sessions-dot--idle {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.home-sessions-dot--done {
|
||||
background: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.home-sessions-dot--web {
|
||||
background: #60a5fa;
|
||||
}
|
||||
|
||||
.home-sessions-dot--working {
|
||||
background: var(--green);
|
||||
animation: pulse 1.5s infinite;
|
||||
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.home-sessions-dot--working::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border: 2px solid color-mix(in srgb, var(--green) 25%, transparent);
|
||||
border-top-color: var(--green);
|
||||
border-radius: 50%;
|
||||
animation: tab-load-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.home-sessions-row-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home-sessions-row-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-sessions-row-title .session-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-sessions-row-sub {
|
||||
font-size: 0.66rem;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-sessions-mode {
|
||||
flex-shrink: 0;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.55rem;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.home-sessions-pill {
|
||||
flex-shrink: 0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.58rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-sessions-pill--needs,
|
||||
.home-sessions-pill--error {
|
||||
background: color-mix(in srgb, var(--red) 18%, transparent);
|
||||
border-color: color-mix(in srgb, var(--red) 45%, transparent);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.home-sessions-pill--waiting {
|
||||
background: color-mix(in srgb, var(--yellow) 18%, transparent);
|
||||
border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.home-sessions-pill--working,
|
||||
.home-sessions-pill--idle {
|
||||
background: color-mix(in srgb, var(--green) 15%, transparent);
|
||||
border-color: color-mix(in srgb, var(--green) 40%, transparent);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* Row accents: same language as the session tabs and the phone overview — red
|
||||
means a question is pending, yellow means it wants input, green means work is
|
||||
happening. Nothing else on this screen may reuse these colors. */
|
||||
.home-sessions-row--needs,
|
||||
.home-sessions-row--error {
|
||||
border-color: color-mix(in srgb, var(--red) 50%, transparent);
|
||||
animation: home-sessions-blink-red 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.home-sessions-row--waiting {
|
||||
border-color: color-mix(in srgb, var(--yellow) 50%, transparent);
|
||||
animation: home-sessions-blink-yellow 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.home-sessions-row--working {
|
||||
border-color: color-mix(in srgb, var(--green) 35%, transparent);
|
||||
}
|
||||
|
||||
@keyframes home-sessions-blink-red {
|
||||
0%, 100% { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
|
||||
50% { border-color: color-mix(in srgb, var(--red) 95%, transparent); }
|
||||
}
|
||||
|
||||
@keyframes home-sessions-blink-yellow {
|
||||
0%, 100% { border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
|
||||
50% { border-color: color-mix(in srgb, var(--yellow) 90%, transparent); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.home-sessions-row,
|
||||
.home-sessions-dot,
|
||||
.home-sessions-dot::after {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
+44
-20
@@ -111,14 +111,14 @@ self.addEventListener('push', (event) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const { title, hostTitle, body, tag, sessionId, urgency, actions } = payload;
|
||||
const { title, hostTitle, body, tag, sessionId, approvalId, urgency, actions } = payload;
|
||||
|
||||
const options = {
|
||||
body: body || '',
|
||||
tag: tag || 'codeman-default',
|
||||
icon: '/icon-192.png',
|
||||
badge: '/icon-192.png',
|
||||
data: { sessionId, url: sessionId ? `/?session=${sessionId}` : '/' },
|
||||
data: { sessionId, approvalId, url: sessionId ? `/?session=${sessionId}` : '/' },
|
||||
renotify: true,
|
||||
requireInteraction: urgency === 'critical',
|
||||
};
|
||||
@@ -142,24 +142,48 @@ self.addEventListener('push', (event) => {
|
||||
self.addEventListener('notificationclick', (event) => {
|
||||
event.notification.close();
|
||||
|
||||
const { sessionId, url } = event.notification.data || {};
|
||||
const { sessionId, approvalId, url } = event.notification.data || {};
|
||||
const targetUrl = url || '/';
|
||||
const action = event.action || null;
|
||||
|
||||
event.waitUntil(
|
||||
self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
|
||||
// Try to find an existing Codeman tab
|
||||
for (const client of clients) {
|
||||
if (client.url.includes(self.location.origin)) {
|
||||
client.postMessage({
|
||||
type: 'notification-click',
|
||||
sessionId,
|
||||
action: event.action || null,
|
||||
});
|
||||
return client.focus();
|
||||
}
|
||||
}
|
||||
// No existing tab -- open a new one
|
||||
return self.clients.openWindow(targetUrl);
|
||||
})
|
||||
);
|
||||
// Approve/Deny action buttons answer the Approvals Inbox item directly from
|
||||
// the worker, so they work with NO Codeman tab open (lock-screen approvals).
|
||||
// Same-origin POST with cookie credentials; the CSRF Origin check passes
|
||||
// because a service worker fetch carries the worker's own (same) origin.
|
||||
if ((action === 'approve' || action === 'deny') && approvalId) {
|
||||
event.waitUntil(
|
||||
fetch(`/api/approvals/${encodeURIComponent(approvalId)}/answer`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action }),
|
||||
}).then((res) => {
|
||||
if (res && res.ok) return undefined;
|
||||
// 401/404/409: let the human see the state by falling back to a tab.
|
||||
return openOrFocus(sessionId, action, approvalId, targetUrl);
|
||||
}).catch(() => openOrFocus(sessionId, action, approvalId, targetUrl))
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
event.waitUntil(openOrFocus(sessionId, action, approvalId, targetUrl));
|
||||
});
|
||||
|
||||
function openOrFocus(sessionId, action, approvalId, targetUrl) {
|
||||
return self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
|
||||
// Try to find an existing Codeman tab
|
||||
for (const client of clients) {
|
||||
if (client.url.includes(self.location.origin)) {
|
||||
client.postMessage({
|
||||
type: 'notification-click',
|
||||
sessionId,
|
||||
approvalId,
|
||||
action,
|
||||
});
|
||||
return client.focus();
|
||||
}
|
||||
}
|
||||
// No existing tab -- open a new one
|
||||
return self.clients.openWindow(targetUrl);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1427,6 +1427,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
if (this.shouldUseMobileOverview?.()) {
|
||||
const overlay = document.getElementById('welcomeOverlay');
|
||||
if (overlay) overlay.classList.remove('visible');
|
||||
this.hideHomeSessions?.();
|
||||
this.showMobileOverview();
|
||||
this._updateCjkInputState?.();
|
||||
return;
|
||||
@@ -1439,6 +1440,9 @@ Object.assign(CodemanApp.prototype, {
|
||||
this.applyWelcomeCliVisibility();
|
||||
this.loadHistorySessions();
|
||||
this.initSearchPanel();
|
||||
// Open tabs down the left gutter. Self-gating: a window too narrow to hold
|
||||
// the column without overlapping the content leaves it hidden.
|
||||
this.showHomeSessions?.();
|
||||
}
|
||||
// Home screen has no input target — hide the CJK textarea (activeSessionId
|
||||
// is null by the time we get here). Guarded: defined on the app object.
|
||||
@@ -1447,6 +1451,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
|
||||
hideWelcome() {
|
||||
this.hideMobileOverview?.();
|
||||
this.hideHomeSessions?.();
|
||||
const overlay = document.getElementById('welcomeOverlay');
|
||||
if (overlay) {
|
||||
overlay.classList.remove('visible');
|
||||
|
||||
Reference in New Issue
Block a user