- The window has no system decoration: a local title bar webview (agent state, a native menu with the tray's items, window buttons) above the content webview, which stays remote with no IPC. Laid out on resize, with a frame to resize by unless maximized. - Icons from the transparent pixel leaf, not the server's tiled icon. - productName llembas-desktop: package, .desktop file and the window's app id now match (KWin showed a generic icon); the visible name stays LLeMbas through a desktop template. Replaces the 0.1.0 package l-le-mbas. - The bundled CLI is a resource in the app's own directory, not /usr/bin/lembas. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
22 files changed
+514
-132
No files matched your search
+1
-52
@@ -1,55 +1,4 @@
|
||||
/* The first-run page: the LLeMbas look (Moria dark, Shire light), no build step. */
|
||||
:root {
|
||||
--font-ui: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
||||
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--text-sm: 0.8125rem;
|
||||
--text-base: 0.9375rem;
|
||||
--text-xl: 1.5rem;
|
||||
--sp-2: 0.5rem;
|
||||
--sp-3: 0.75rem;
|
||||
--sp-4: 1rem;
|
||||
--sp-6: 1.5rem;
|
||||
--sp-8: 2rem;
|
||||
--radius: 2px;
|
||||
--press: 2px;
|
||||
--control-h: 2.5rem;
|
||||
--card-max: 34rem;
|
||||
|
||||
color-scheme: dark;
|
||||
--bg: #0B0D10;
|
||||
--surface: #11151A;
|
||||
--surface-hover: #1D232B;
|
||||
--border: #26303A;
|
||||
--border-strong: #5C6976;
|
||||
--ink: #E2E8EC;
|
||||
--ink-muted: #A6B2BC;
|
||||
--accent: #8FD8E8;
|
||||
--accent-hover: #B4E6F1;
|
||||
--accent-ink: #061418;
|
||||
--leaf: #7EE081;
|
||||
--warning: #F0A840;
|
||||
--shadow-card: 4px 4px 0 rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #F1EAD6;
|
||||
--surface: #F8F3E5;
|
||||
--surface-hover: #ECE4CF;
|
||||
--border: #CBBF9D;
|
||||
--border-strong: #2A2E22;
|
||||
--ink: #1F2418;
|
||||
--ink-muted: #474D3B;
|
||||
--accent: #285F3C;
|
||||
--accent-hover: #1F4D30;
|
||||
--accent-ink: #F8F3E5;
|
||||
--leaf: #3D6B1C;
|
||||
--warning: #7E5200;
|
||||
--shadow-card: 4px 4px 0 var(--border-strong);
|
||||
}
|
||||
}
|
||||
|
||||
/* The first-run page. Tokens in tokens.css. */
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body { margin: 0; min-height: 100%; }
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>LLeMbas</title>
|
||||
<link rel="stylesheet" href="tokens.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<script src="app.js" defer></script>
|
||||
</head>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
/* The title bar: one row, fixed height, every slot a fixed or shared track so nothing in it
|
||||
moves when the host name or the agent's state changes length. */
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: var(--titlebar-h);
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: grid;
|
||||
/* leaf · name · host (takes the rest, and is the drag area) · agent · menu · sep · 3 controls */
|
||||
grid-template-columns: var(--titlebar-h) auto minmax(0, 1fr) auto var(--titlebar-h) 1px repeat(3, 2.875rem);
|
||||
align-items: center;
|
||||
height: var(--titlebar-h);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font: 600 var(--text-sm) / 1 var(--font-ui);
|
||||
}
|
||||
|
||||
.bar__leaf { justify-self: center; width: 18px; height: 18px; image-rendering: pixelated; }
|
||||
.bar__name b { color: var(--leaf); font-weight: 700; }
|
||||
.bar__host {
|
||||
padding: 0 var(--sp-3);
|
||||
color: var(--ink-muted);
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
height: var(--titlebar-h);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: var(--ink-muted);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover { color: var(--ink); background: var(--surface-hover); }
|
||||
button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
|
||||
.bar__agent {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5rem auto;
|
||||
gap: var(--sp-2);
|
||||
align-items: center;
|
||||
padding: 0 var(--sp-3);
|
||||
font-weight: 400;
|
||||
}
|
||||
.dot { width: 0.5rem; height: 0.5rem; background: var(--ink-muted); }
|
||||
.bar__agent[data-state="running"] .dot,
|
||||
.bar__agent[data-state="elsewhere"] .dot { background: var(--leaf); }
|
||||
.bar__agent[data-state="starting"] .dot { background: var(--accent); }
|
||||
.bar__agent[data-state="failed"] .dot,
|
||||
.bar__agent[data-state="not_linked"] .dot { background: var(--warning); }
|
||||
|
||||
.bar__sep { width: 1px; height: 1.25rem; background: var(--border); }
|
||||
|
||||
.bar__btn { display: grid; place-items: center; }
|
||||
.bar__btn svg { width: 16px; height: 16px; }
|
||||
.bar__btn--close:hover { color: #fff; background: var(--danger); }
|
||||
|
||||
#maximize .i-restore { display: none; }
|
||||
#maximize[data-maximized] .i-max { display: none; }
|
||||
#maximize[data-maximized] .i-restore { display: block; }
|
||||
|
||||
/* Narrow windows: the host goes first, then the agent's words (its dot stays). */
|
||||
@media (max-width: 34rem) {
|
||||
.bar__host { visibility: hidden; }
|
||||
#agent-text { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>LLeMbas</title>
|
||||
<link rel="stylesheet" href="tokens.css">
|
||||
<link rel="stylesheet" href="titlebar.css">
|
||||
<script src="titlebar.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="bar" data-tauri-drag-region>
|
||||
<img class="bar__leaf" src="logo-mark.svg" alt="" width="18" height="18" data-tauri-drag-region>
|
||||
<span class="bar__name" data-tauri-drag-region><b>LL</b>e<b>M</b>bas</span>
|
||||
<span class="bar__host" id="host" data-tauri-drag-region></span>
|
||||
|
||||
<button class="bar__agent" id="agent" type="button" title="Agent">
|
||||
<span class="dot" aria-hidden="true"></span><span id="agent-text">agent off</span>
|
||||
</button>
|
||||
<button class="bar__btn" id="menu" type="button" aria-label="Menu" title="Menu">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><g fill="currentColor"><rect x="3" y="4" width="10" height="1.5"/><rect x="3" y="7.25" width="10" height="1.5"/><rect x="3" y="10.5" width="10" height="1.5"/></g></svg>
|
||||
</button>
|
||||
<span class="bar__sep" aria-hidden="true"></span>
|
||||
<button class="bar__btn" id="minimize" type="button" aria-label="Minimise" title="Minimise">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="10" width="8" height="1.5" fill="currentColor"/></svg>
|
||||
</button>
|
||||
<button class="bar__btn" id="maximize" type="button" aria-label="Maximise" title="Maximise">
|
||||
<svg class="i-max" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.75 4.75h6.5v6.5h-6.5z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
<svg class="i-restore" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.75 6.25h6v6h-6z M6.25 6.25v-2.5h6v6h-2.5" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
<button class="bar__btn bar__btn--close" id="close" type="button" aria-label="Close" title="Close (LLeMbas stays in the tray)">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
// The title bar. Moving and double-click maximising come from `data-tauri-drag-region`; the
|
||||
// buttons call the window directly; the menu and the agent pill open the app's native menu (the
|
||||
// tray's items), which can reach past this 36-pixel-high page.
|
||||
"use strict"
|
||||
|
||||
const { invoke } = window.__TAURI__.core
|
||||
const { listen } = window.__TAURI__.event
|
||||
const win = window.__TAURI__.window.getCurrentWindow()
|
||||
|
||||
const $ = (id) => document.getElementById(id)
|
||||
|
||||
const WORDS = {
|
||||
off: "agent off",
|
||||
not_linked: "not linked",
|
||||
starting: "agent starting…",
|
||||
running: "agent running",
|
||||
elsewhere: "agent running (service)",
|
||||
failed: "agent stopped",
|
||||
}
|
||||
|
||||
function render(s) {
|
||||
let host = ""
|
||||
try {
|
||||
host = s.server ? new URL(s.server).host : ""
|
||||
} catch {}
|
||||
$("host").textContent = host
|
||||
$("host").title = s.server || ""
|
||||
const state = s.agent.state
|
||||
$("agent").dataset.state = state
|
||||
$("agent-text").textContent = WORDS[state] ?? state
|
||||
$("agent").title = state === "failed" ? `Agent stopped: ${s.agent.detail}` : "Agent"
|
||||
}
|
||||
|
||||
function maximized(on) {
|
||||
const b = $("maximize")
|
||||
b.toggleAttribute("data-maximized", on)
|
||||
b.setAttribute("aria-label", on ? "Restore" : "Maximise")
|
||||
b.title = on ? "Restore" : "Maximise"
|
||||
}
|
||||
|
||||
$("minimize").addEventListener("click", () => win.minimize())
|
||||
$("maximize").addEventListener("click", () => win.toggleMaximize())
|
||||
$("close").addEventListener("click", () => win.close())
|
||||
$("menu").addEventListener("click", () => invoke("titlebar_menu"))
|
||||
$("agent").addEventListener("click", () => invoke("titlebar_menu"))
|
||||
|
||||
listen("status", (e) => render(e.payload))
|
||||
listen("maximized", (e) => maximized(!!e.payload))
|
||||
invoke("get_status").then(render)
|
||||
win.isMaximized().then(maximized)
|
||||
@@ -0,0 +1,54 @@
|
||||
/* LLeMbas Desktop's own pages: one set of tokens (Moria dark, Shire light), as on llembas.eu. */
|
||||
:root {
|
||||
--font-ui: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
||||
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--text-sm: 0.8125rem;
|
||||
--text-base: 0.9375rem;
|
||||
--text-xl: 1.5rem;
|
||||
--sp-2: 0.5rem;
|
||||
--sp-3: 0.75rem;
|
||||
--sp-4: 1rem;
|
||||
--sp-6: 1.5rem;
|
||||
--sp-8: 2rem;
|
||||
--radius: 2px;
|
||||
--press: 2px;
|
||||
--control-h: 2.5rem;
|
||||
--card-max: 34rem;
|
||||
|
||||
color-scheme: dark;
|
||||
--bg: #0B0D10;
|
||||
--surface: #11151A;
|
||||
--surface-hover: #1D232B;
|
||||
--border: #26303A;
|
||||
--border-strong: #5C6976;
|
||||
--ink: #E2E8EC;
|
||||
--ink-muted: #A6B2BC;
|
||||
--accent: #8FD8E8;
|
||||
--accent-hover: #B4E6F1;
|
||||
--accent-ink: #061418;
|
||||
--leaf: #7EE081;
|
||||
--warning: #F0A840;
|
||||
--shadow-card: 4px 4px 0 rgba(0, 0, 0, 0.55);
|
||||
--danger: #E5534B;
|
||||
--titlebar-h: 36px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #F1EAD6;
|
||||
--surface: #F8F3E5;
|
||||
--surface-hover: #ECE4CF;
|
||||
--border: #CBBF9D;
|
||||
--border-strong: #2A2E22;
|
||||
--ink: #1F2418;
|
||||
--ink-muted: #474D3B;
|
||||
--accent: #285F3C;
|
||||
--accent-hover: #1F4D30;
|
||||
--accent-ink: #F8F3E5;
|
||||
--leaf: #3D6B1C;
|
||||
--warning: #7E5200;
|
||||
--shadow-card: 4px 4px 0 var(--border-strong);
|
||||
--danger: #B3261E;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user