WEFT_OS/infra/shell/system-ui.html
Marco Allegretti fdeb440766 feat(appd): include app_id in RunningApps response; update system UI
ipc.rs:
- Add SessionInfo { session_id: u64, app_id: String } struct.
- Change RunningApps { session_ids: Vec<u64> } to
  RunningApps { sessions: Vec<SessionInfo> } so callers can display
  meaningful app names without a follow-up QueryAppState round-trip.
- Add session_info_roundtrip test.

main.rs:
- Add SessionEntry { app_id: String, state: AppStateKind } to store
  app_id alongside state in SessionRegistry.
- launch() stores app_id in the entry.
- running_sessions() replaces running_ids(); returns Vec<SessionInfo>.
- state() reads from SessionEntry.state.
- set_state() writes to SessionEntry.state.
- QueryRunning dispatch uses running_sessions().
- Test registry_running_ids_reflects_live_sessions renamed to
  registry_running_sessions_reflects_live_sessions and updated to
  assert both session_id and app_id fields.
- dispatch_query_running test asserts app_id values are present.

system-ui.html:
- RUNNING_APPS handler uses msg.sessions[].{session_id,app_id}.
- ensureTaskbarEntry(sessionId, appId): shows the last component of the
  reverse-domain app ID as the taskbar label; sets data-app-id attribute;
  tooltip shows full app ID and session number.
- LAUNCH_ACK handler passes null for appId (session ID only available
  at launch time; app_id arrives in RUNNING_APPS on reconnect).
2026-03-11 10:42:40 +01:00

262 lines
7.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WEFT Desktop</title>
<style>
:root {
color-scheme: dark;
--surface-bg: rgba(255, 255, 255, 0.07);
--surface-border: rgba(255, 255, 255, 0.12);
--taskbar-height: 48px;
--text-primary: rgba(255, 255, 255, 0.92);
--text-secondary: rgba(255, 255, 255, 0.55);
--accent: #5b8af5;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background: #0f1117;
font-family: system-ui, -apple-system, sans-serif;
color: var(--text-primary);
height: 100dvh;
width: 100dvw;
}
weft-desktop {
display: grid;
grid-template-rows: 1fr var(--taskbar-height);
height: 100dvh;
width: 100dvw;
contain: layout;
}
weft-wallpaper {
display: block;
grid-row: 1;
background: linear-gradient(
145deg,
#0f1117 0%,
#161b2e 40%,
#0d2040 70%,
#0a1a30 100%
);
}
weft-taskbar {
display: flex;
align-items: center;
grid-row: 2;
height: var(--taskbar-height);
padding: 0 12px;
gap: 8px;
background: var(--surface-bg);
border-top: 1px solid var(--surface-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
weft-taskbar-launcher {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
background: transparent;
transition: background 0.15s;
}
weft-taskbar-launcher:hover {
background: var(--surface-border);
}
weft-taskbar-clock {
margin-left: auto;
font-size: 13px;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
weft-launcher {
display: none;
position: fixed;
inset: 0;
bottom: var(--taskbar-height);
background: rgba(10, 12, 20, 0.85);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
z-index: 100;
}
weft-launcher:not([hidden]) {
display: block;
}
weft-notification-center {
position: fixed;
top: 8px;
right: 8px;
width: 360px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 200;
pointer-events: none;
}
weft-window {
display: none;
}
</style>
</head>
<body>
<weft-desktop>
<weft-wallpaper></weft-wallpaper>
<weft-taskbar>
<weft-taskbar-launcher id="launcher-btn" title="Apps">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="1" y="1" width="6" height="6" rx="1.5"
fill="rgba(255,255,255,0.7)" />
<rect x="11" y="1" width="6" height="6" rx="1.5"
fill="rgba(255,255,255,0.7)" />
<rect x="1" y="11" width="6" height="6" rx="1.5"
fill="rgba(255,255,255,0.7)" />
<rect x="11" y="11" width="6" height="6" rx="1.5"
fill="rgba(255,255,255,0.7)" />
</svg>
</weft-taskbar-launcher>
<weft-taskbar-clock id="clock"></weft-taskbar-clock>
</weft-taskbar>
</weft-desktop>
<weft-launcher hidden id="launcher"></weft-launcher>
<weft-notification-center id="notifications"></weft-notification-center>
<script>
(function () {
var clockEl = document.getElementById('clock');
function updateClock() {
clockEl.textContent = new Date().toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
});
}
updateClock();
setInterval(updateClock, 10000);
document.getElementById('launcher-btn').addEventListener('click', function () {
var launcher = document.getElementById('launcher');
if (launcher.hasAttribute('hidden')) {
launcher.removeAttribute('hidden');
} else {
launcher.setAttribute('hidden', '');
}
});
var APPD_WS_PORT = window.WEFT_APPD_WS_PORT || 7410;
var ws = null;
var wsReconnectDelay = 1000;
function appdConnect() {
try {
ws = new WebSocket('ws://127.0.0.1:' + APPD_WS_PORT + '/appd');
} catch (e) {
scheduleReconnect();
return;
}
ws.addEventListener('open', function () {
wsReconnectDelay = 1000;
ws.send(JSON.stringify({ type: 'QUERY_RUNNING' }));
});
ws.addEventListener('message', function (ev) {
var msg;
try { msg = JSON.parse(ev.data); } catch (e) { return; }
handleAppdMessage(msg);
});
ws.addEventListener('close', function () {
ws = null;
scheduleReconnect();
});
ws.addEventListener('error', function () {
ws = null;
});
}
function scheduleReconnect() {
setTimeout(appdConnect, wsReconnectDelay);
wsReconnectDelay = Math.min(wsReconnectDelay * 2, 16000);
}
function handleAppdMessage(msg) {
if (msg.type === 'APP_READY') {
showNotification('App ready (session ' + msg.session_id + ')');
} else if (msg.type === 'APP_STATE') {
if (msg.state === 'stopped') {
removeTaskbarEntry(msg.session_id);
}
} else if (msg.type === 'RUNNING_APPS') {
msg.sessions.forEach(function (s) {
ensureTaskbarEntry(s.session_id, s.app_id);
});
} else if (msg.type === 'LAUNCH_ACK') {
ensureTaskbarEntry(msg.session_id, null);
}
}
function ensureTaskbarEntry(sessionId, appId) {
var id = 'task-' + sessionId;
if (document.getElementById(id)) { return; }
var label = appId ? appId.split('.').pop() : String(sessionId);
var el = document.createElement('weft-taskbar-app');
el.id = id;
el.dataset.sessionId = sessionId;
if (appId) { el.dataset.appId = appId; }
el.textContent = '● ' + label;
el.style.cssText = 'font-size:12px;color:var(--text-secondary);padding:0 6px;cursor:pointer;';
el.title = appId ? appId + ' (session ' + sessionId + ')' : 'Session ' + sessionId;
var taskbar = document.querySelector('weft-taskbar');
var clock = document.getElementById('clock');
taskbar.insertBefore(el, clock);
}
function removeTaskbarEntry(sessionId) {
var el = document.getElementById('task-' + sessionId);
if (el) { el.remove(); }
}
function showNotification(text) {
var center = document.getElementById('notifications');
var note = document.createElement('div');
note.textContent = text;
note.style.cssText = [
'background:var(--surface-bg)',
'border:1px solid var(--surface-border)',
'border-radius:8px',
'padding:10px 14px',
'font-size:13px',
'color:var(--text-primary)',
'pointer-events:auto',
'backdrop-filter:blur(20px)',
].join(';');
center.appendChild(note);
setTimeout(function () { note.remove(); }, 4000);
}
appdConnect();
}());
</script>
</body>
</html>