freddie 0.0.76 → 0.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +8 -3
- package/CHANGELOG.md +23 -0
- package/README.md +2 -0
- package/package.json +3 -2
- package/plugins/gui-chat/plugin.js +10 -3
- package/plugins/gui-profiles-commands-health/plugin.js +26 -0
- package/src/agent/credential_sources.js +20 -4
- package/src/agent/llm_resolver.js +111 -9
- package/src/agent/machine.js +11 -2
- package/src/agent/model-sampler.js +13 -0
- package/src/config.js +3 -2
- package/src/sessions.js +11 -5
- package/src/web/app.js +53 -69
- package/src/web/index.html +4 -4
- package/src/web/routes.js +2 -0
- package/src/web/server.js +2 -7
- package/src/web/state.js +84 -0
- package/src/web/vendor/anentrypoint-design/desktop/freddie-dashboard.css +0 -32
- package/src/web/vendor/anentrypoint-design/desktop/freddie-dashboard.js +0 -405
- package/src/web/vendor/anentrypoint-design/desktop/icons.js +0 -17
- package/src/web/vendor/anentrypoint-design/desktop/index.js +0 -3
- package/src/web/vendor/anentrypoint-design/desktop/launcher.css +0 -44
- package/src/web/vendor/anentrypoint-design/desktop/shell.js +0 -187
- package/src/web/vendor/anentrypoint-design/desktop/theme.css +0 -409
- package/src/web/vendor/anentrypoint-design/desktop/validate.css +0 -19
- package/src/web/vendor/anentrypoint-design/desktop/wm.css +0 -115
- package/src/web/vendor/anentrypoint-design/dist/247420.app.js +0 -3
- package/src/web/vendor/anentrypoint-design/dist/247420.css +0 -2359
- package/src/web/vendor/anentrypoint-design/dist/247420.js +0 -184
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
import { icons } from './icons.js';
|
|
2
|
-
|
|
3
|
-
const THEME_CSS_URL = new URL('./theme.css', import.meta.url).href;
|
|
4
|
-
|
|
5
|
-
function ensureCss(href) {
|
|
6
|
-
if (document.querySelector('link[data-os-theme]')) return;
|
|
7
|
-
const l = document.createElement('link');
|
|
8
|
-
l.rel = 'stylesheet';
|
|
9
|
-
l.href = href || THEME_CSS_URL;
|
|
10
|
-
l.dataset.osTheme = '1';
|
|
11
|
-
document.head.appendChild(l);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function ic(svg) {
|
|
15
|
-
const s = document.createElement('span');
|
|
16
|
-
s.className = 'ic';
|
|
17
|
-
s.innerHTML = svg;
|
|
18
|
-
return s;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function makeBtn(svg, label, role) {
|
|
22
|
-
const b = document.createElement('button');
|
|
23
|
-
b.className = 'os-btn';
|
|
24
|
-
b.type = 'button';
|
|
25
|
-
if (role) b.dataset.role = role;
|
|
26
|
-
if (svg) b.append(ic(svg));
|
|
27
|
-
if (label) b.append(Object.assign(document.createElement('span'), { textContent: label }));
|
|
28
|
-
return b;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export function createDesktopShell({ root = document.body, wm, registry, brand = 'desktop', themeUrl, onNewInstance, autoBoot = false } = {}) {
|
|
32
|
-
if (!wm) throw new Error('createDesktopShell: wm is required');
|
|
33
|
-
if (!registry) throw new Error('createDesktopShell: registry is required');
|
|
34
|
-
ensureCss(themeUrl);
|
|
35
|
-
|
|
36
|
-
const osRoot = document.createElement('div');
|
|
37
|
-
osRoot.className = 'os-root';
|
|
38
|
-
root.appendChild(osRoot);
|
|
39
|
-
|
|
40
|
-
const menubar = document.createElement('div');
|
|
41
|
-
menubar.className = 'os-menubar';
|
|
42
|
-
|
|
43
|
-
const homeBtn = makeBtn(icons.home, '', 'home');
|
|
44
|
-
homeBtn.title = 'apps';
|
|
45
|
-
|
|
46
|
-
const brandEl = document.createElement('span');
|
|
47
|
-
brandEl.className = 'os-brand';
|
|
48
|
-
brandEl.textContent = brand;
|
|
49
|
-
|
|
50
|
-
const appsBtn = makeBtn(icons.apps, 'apps', 'apps');
|
|
51
|
-
const newInstBtn = onNewInstance ? makeBtn(icons.plus, 'instance', 'add') : null;
|
|
52
|
-
|
|
53
|
-
const instSwitch = document.createElement('div');
|
|
54
|
-
instSwitch.className = 'os-instances';
|
|
55
|
-
|
|
56
|
-
const spacer = document.createElement('div');
|
|
57
|
-
spacer.className = 'os-spacer';
|
|
58
|
-
|
|
59
|
-
const tray = document.createElement('div');
|
|
60
|
-
tray.className = 'os-tray';
|
|
61
|
-
const clock = document.createElement('span');
|
|
62
|
-
clock.className = 'os-clock';
|
|
63
|
-
tray.appendChild(clock);
|
|
64
|
-
|
|
65
|
-
menubar.append(homeBtn, brandEl, appsBtn);
|
|
66
|
-
if (newInstBtn) menubar.append(newInstBtn);
|
|
67
|
-
menubar.append(instSwitch, spacer, tray);
|
|
68
|
-
|
|
69
|
-
const appsMenu = document.createElement('div');
|
|
70
|
-
appsMenu.className = 'os-menu';
|
|
71
|
-
|
|
72
|
-
const sideRail = document.createElement('div');
|
|
73
|
-
sideRail.className = 'os-side-rail';
|
|
74
|
-
|
|
75
|
-
const drawer = document.createElement('div');
|
|
76
|
-
drawer.className = 'os-drawer';
|
|
77
|
-
drawer.setAttribute('aria-hidden', 'true');
|
|
78
|
-
const drawerHeader = document.createElement('div');
|
|
79
|
-
drawerHeader.className = 'os-drawer-head';
|
|
80
|
-
const drawerTitle = document.createElement('span');
|
|
81
|
-
drawerTitle.className = 'os-drawer-title';
|
|
82
|
-
drawerTitle.textContent = 'apps';
|
|
83
|
-
const drawerClose = document.createElement('button');
|
|
84
|
-
drawerClose.className = 'os-drawer-close';
|
|
85
|
-
drawerClose.type = 'button';
|
|
86
|
-
drawerClose.append(ic(icons.close));
|
|
87
|
-
drawerHeader.append(drawerTitle, drawerClose);
|
|
88
|
-
const drawerGrid = document.createElement('div');
|
|
89
|
-
drawerGrid.className = 'os-drawer-grid';
|
|
90
|
-
drawer.append(drawerHeader, drawerGrid);
|
|
91
|
-
|
|
92
|
-
const apps = typeof registry.list === 'function' ? registry.list() : [...registry.values()];
|
|
93
|
-
|
|
94
|
-
for (const app of apps) {
|
|
95
|
-
const iconSvg = app.icon || icons[app.id] || '';
|
|
96
|
-
const menuBtn = makeBtn(iconSvg, app.name);
|
|
97
|
-
menuBtn.addEventListener('click', () => { closeMenu(); openApp(app.id); });
|
|
98
|
-
appsMenu.appendChild(menuBtn);
|
|
99
|
-
|
|
100
|
-
const railBtn = document.createElement('button');
|
|
101
|
-
railBtn.className = 'os-rail-btn';
|
|
102
|
-
railBtn.type = 'button';
|
|
103
|
-
railBtn.title = app.name;
|
|
104
|
-
railBtn.append(ic(iconSvg));
|
|
105
|
-
railBtn.addEventListener('click', () => openApp(app.id));
|
|
106
|
-
sideRail.appendChild(railBtn);
|
|
107
|
-
|
|
108
|
-
const tile = document.createElement('button');
|
|
109
|
-
tile.className = 'os-drawer-tile';
|
|
110
|
-
tile.type = 'button';
|
|
111
|
-
tile.append(ic(iconSvg), Object.assign(document.createElement('span'), { className: 'lbl', textContent: app.name }));
|
|
112
|
-
tile.addEventListener('click', () => { closeDrawer(); openApp(app.id); });
|
|
113
|
-
drawerGrid.appendChild(tile);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
const taskbar = document.createElement('div');
|
|
117
|
-
taskbar.className = 'os-taskbar';
|
|
118
|
-
|
|
119
|
-
osRoot.append(menubar, appsMenu, taskbar);
|
|
120
|
-
document.body.append(sideRail, drawer);
|
|
121
|
-
|
|
122
|
-
function openMenu() { appsMenu.classList.add('open'); }
|
|
123
|
-
function closeMenu() { appsMenu.classList.remove('open'); }
|
|
124
|
-
function openDrawer() { drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); }
|
|
125
|
-
function closeDrawer() { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); }
|
|
126
|
-
|
|
127
|
-
appsBtn.addEventListener('click', e => { e.stopPropagation(); appsMenu.classList.toggle('open'); });
|
|
128
|
-
homeBtn.addEventListener('click', e => { e.stopPropagation(); drawer.classList.contains('open') ? closeDrawer() : openDrawer(); });
|
|
129
|
-
drawerClose.addEventListener('click', closeDrawer);
|
|
130
|
-
drawer.addEventListener('click', e => { if (e.target === drawer) closeDrawer(); });
|
|
131
|
-
document.addEventListener('click', e => {
|
|
132
|
-
if (!appsMenu.contains(e.target) && !appsBtn.contains(e.target)) closeMenu();
|
|
133
|
-
});
|
|
134
|
-
document.addEventListener('keydown', e => {
|
|
135
|
-
if (e.key === 'Escape') { closeMenu(); closeDrawer(); }
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
function tickClock() { clock.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }
|
|
139
|
-
tickClock();
|
|
140
|
-
const clockTimer = setInterval(tickClock, 30000);
|
|
141
|
-
|
|
142
|
-
let activeContext = null;
|
|
143
|
-
function setContext(ctx) { activeContext = ctx; }
|
|
144
|
-
|
|
145
|
-
function refreshTaskbar() {
|
|
146
|
-
taskbar.innerHTML = '';
|
|
147
|
-
for (const w of wm.list()) {
|
|
148
|
-
const t = document.createElement('button');
|
|
149
|
-
t.className = 'os-task' + (w.focused ? ' focused' : '');
|
|
150
|
-
t.type = 'button';
|
|
151
|
-
t.textContent = w.title;
|
|
152
|
-
t.dataset.winId = w.id;
|
|
153
|
-
t.addEventListener('click', () => wm.focus(w.id));
|
|
154
|
-
taskbar.appendChild(t);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
function openApp(appId) {
|
|
159
|
-
const app = (typeof registry.get === 'function') ? registry.get(appId) : registry[appId];
|
|
160
|
-
if (!app) throw new Error('unknown app: ' + appId);
|
|
161
|
-
const ctx = { ...(activeContext || {}), registry, openApp, wm };
|
|
162
|
-
const result = app.factory(ctx);
|
|
163
|
-
const finish = (r) => {
|
|
164
|
-
const sz = app.defaultSize || { w: 520, h: 360 };
|
|
165
|
-
const titlePrefix = (activeContext && activeContext.titlePrefix) ? activeContext.titlePrefix + ' · ' : '';
|
|
166
|
-
const win = wm.open({ title: titlePrefix + app.name, body: r.node, kind: appId, width: sz.w, height: sz.h, x: 100 + (wm.count * 28) % 240, y: 80 + (wm.count * 22) % 180 });
|
|
167
|
-
win._app = { id: appId, dispose: r.dispose };
|
|
168
|
-
refreshTaskbar();
|
|
169
|
-
return win;
|
|
170
|
-
};
|
|
171
|
-
return (result && typeof result.then === 'function') ? result.then(finish) : finish(result);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
if (newInstBtn) newInstBtn.addEventListener('click', () => onNewInstance && onNewInstance({ instSwitch, setContext, openApp }));
|
|
175
|
-
|
|
176
|
-
const taskTimer = setInterval(refreshTaskbar, 500);
|
|
177
|
-
|
|
178
|
-
const api = {
|
|
179
|
-
wm, registry, openApp, setContext, refreshTaskbar,
|
|
180
|
-
openDrawer, closeDrawer, openMenu, closeMenu,
|
|
181
|
-
elements: { osRoot, menubar, taskbar, appsMenu, sideRail, drawer, instSwitch, homeBtn, appsBtn },
|
|
182
|
-
dispose() { clearInterval(clockTimer); clearInterval(taskTimer); osRoot.remove(); sideRail.remove(); drawer.remove(); },
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
if (autoBoot && typeof autoBoot === 'string') openApp(autoBoot);
|
|
186
|
-
return api;
|
|
187
|
-
}
|
|
@@ -1,409 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--os-accent: var(--panel-accent, #3F8A4A);
|
|
3
|
-
--os-accent-2: var(--panel-accent-2, #2B6B36);
|
|
4
|
-
--os-accent-soft: var(--panel-select, #D8ECCB);
|
|
5
|
-
--os-bg-0: var(--panel-0, #F5F0E4);
|
|
6
|
-
--os-bg-1: var(--panel-1, #FBF6EB);
|
|
7
|
-
--os-bg-2: var(--panel-2, #F0E9DA);
|
|
8
|
-
--os-bg-3: var(--panel-3, #E3DAC7);
|
|
9
|
-
--os-fg: var(--panel-text, #1F1B16);
|
|
10
|
-
--os-fg-2: var(--panel-text-2, #5A5246);
|
|
11
|
-
--os-fg-3: var(--panel-text-3, #857B6C);
|
|
12
|
-
--os-red: var(--warn, #FF6B4A);
|
|
13
|
-
--os-amber: var(--sun, #FFD86B);
|
|
14
|
-
--os-green: var(--green, #3F8A4A);
|
|
15
|
-
--os-radius: var(--r-2, 10px);
|
|
16
|
-
--os-radius-sm: var(--r-1, 6px);
|
|
17
|
-
--os-bar-h: 44px;
|
|
18
|
-
--os-bar-h-mobile: 52px;
|
|
19
|
-
--os-rail-w: 64px;
|
|
20
|
-
--os-tap: 44px;
|
|
21
|
-
--os-font: var(--ff-ui, 'Nunito', sans-serif);
|
|
22
|
-
--os-display: var(--ff-display, 'Archivo Black', 'Archivo', sans-serif);
|
|
23
|
-
--os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
html, body {
|
|
27
|
-
background: var(--os-bg-0);
|
|
28
|
-
color: var(--os-fg);
|
|
29
|
-
font-family: var(--os-font);
|
|
30
|
-
-webkit-font-smoothing: antialiased;
|
|
31
|
-
text-rendering: optimizeLegibility;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.os-menubar, .os-taskbar {
|
|
35
|
-
background: var(--os-bg-2);
|
|
36
|
-
border: none;
|
|
37
|
-
color: var(--os-fg);
|
|
38
|
-
font: 13px var(--os-font);
|
|
39
|
-
height: var(--os-bar-h);
|
|
40
|
-
padding: 0 12px;
|
|
41
|
-
gap: 6px;
|
|
42
|
-
box-shadow: none;
|
|
43
|
-
display: flex;
|
|
44
|
-
align-items: center;
|
|
45
|
-
flex-wrap: nowrap;
|
|
46
|
-
min-width: 0;
|
|
47
|
-
}
|
|
48
|
-
.os-menubar > *, .os-taskbar > * { flex-shrink: 0; }
|
|
49
|
-
.os-menubar .os-spacer { flex: 1 1 auto; min-width: 0; }
|
|
50
|
-
.os-menubar .os-tray { margin-left: auto; }
|
|
51
|
-
|
|
52
|
-
.os-brand {
|
|
53
|
-
color: var(--os-fg);
|
|
54
|
-
font-family: var(--os-display);
|
|
55
|
-
font-weight: 700;
|
|
56
|
-
letter-spacing: -0.01em;
|
|
57
|
-
font-size: 15px;
|
|
58
|
-
margin-right: 14px;
|
|
59
|
-
display: inline-flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
gap: 8px;
|
|
62
|
-
text-transform: lowercase;
|
|
63
|
-
}
|
|
64
|
-
.os-brand::before {
|
|
65
|
-
content: '';
|
|
66
|
-
display: inline-block;
|
|
67
|
-
width: 8px; height: 8px;
|
|
68
|
-
border-radius: 50%;
|
|
69
|
-
background: var(--os-accent);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.os-btn {
|
|
73
|
-
background: transparent;
|
|
74
|
-
color: var(--os-fg-2);
|
|
75
|
-
border: none;
|
|
76
|
-
padding: 7px 14px;
|
|
77
|
-
cursor: pointer;
|
|
78
|
-
font: inherit;
|
|
79
|
-
font-family: var(--os-font);
|
|
80
|
-
font-size: 13px;
|
|
81
|
-
border-radius: 999px;
|
|
82
|
-
transition: background 80ms ease, color 80ms ease;
|
|
83
|
-
display: inline-flex;
|
|
84
|
-
align-items: center;
|
|
85
|
-
gap: 6px;
|
|
86
|
-
outline: none;
|
|
87
|
-
text-transform: lowercase;
|
|
88
|
-
}
|
|
89
|
-
.os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
90
|
-
.os-btn.active, .os-btn[aria-pressed="true"] { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); }
|
|
91
|
-
.os-btn:focus-visible { background: var(--panel-hover, var(--os-bg-2)); }
|
|
92
|
-
.os-btn .ic { color: var(--os-accent); display: inline-flex; width: 16px; height: 16px; }
|
|
93
|
-
.os-btn .ic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; }
|
|
94
|
-
|
|
95
|
-
.os-menu {
|
|
96
|
-
position: absolute;
|
|
97
|
-
background: var(--os-bg-1);
|
|
98
|
-
border: none;
|
|
99
|
-
border-radius: var(--r-3, 18px);
|
|
100
|
-
padding: 8px;
|
|
101
|
-
min-width: 220px;
|
|
102
|
-
top: calc(var(--os-bar-h) + 4px);
|
|
103
|
-
left: 8px;
|
|
104
|
-
z-index: 9500;
|
|
105
|
-
display: none;
|
|
106
|
-
flex-direction: column;
|
|
107
|
-
gap: 2px;
|
|
108
|
-
pointer-events: auto;
|
|
109
|
-
}
|
|
110
|
-
.os-menu.open { display: flex; }
|
|
111
|
-
.os-menu .os-btn {
|
|
112
|
-
width: 100%;
|
|
113
|
-
text-align: left;
|
|
114
|
-
border-radius: var(--os-radius-sm);
|
|
115
|
-
padding: 8px 10px;
|
|
116
|
-
color: var(--os-fg);
|
|
117
|
-
justify-content: flex-start;
|
|
118
|
-
}
|
|
119
|
-
.os-menu .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
120
|
-
|
|
121
|
-
.os-clock {
|
|
122
|
-
color: var(--os-fg-2);
|
|
123
|
-
font-variant-numeric: tabular-nums;
|
|
124
|
-
font-family: var(--os-mono);
|
|
125
|
-
padding: 0 10px;
|
|
126
|
-
font-size: 12px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.os-task {
|
|
130
|
-
border: none;
|
|
131
|
-
background: var(--os-bg-1);
|
|
132
|
-
color: var(--os-fg-2);
|
|
133
|
-
border-radius: 999px;
|
|
134
|
-
padding: 6px 14px;
|
|
135
|
-
font-size: 12px;
|
|
136
|
-
font-family: var(--os-font);
|
|
137
|
-
transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
|
|
138
|
-
max-width: 200px;
|
|
139
|
-
cursor: pointer;
|
|
140
|
-
outline: none;
|
|
141
|
-
white-space: nowrap;
|
|
142
|
-
overflow: hidden;
|
|
143
|
-
text-overflow: ellipsis;
|
|
144
|
-
text-transform: lowercase;
|
|
145
|
-
}
|
|
146
|
-
.os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
147
|
-
.os-task.focused {
|
|
148
|
-
background: var(--panel-select, var(--os-accent-soft));
|
|
149
|
-
color: var(--os-fg);
|
|
150
|
-
font-weight: 600;
|
|
151
|
-
box-shadow: inset 4px 0 0 var(--os-accent);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.wm-win {
|
|
155
|
-
background: var(--os-bg-1) !important;
|
|
156
|
-
border: none !important;
|
|
157
|
-
border-radius: var(--r-3, 18px) !important;
|
|
158
|
-
box-shadow: none !important;
|
|
159
|
-
overflow: hidden;
|
|
160
|
-
}
|
|
161
|
-
.wm-win.wm-focused {
|
|
162
|
-
border: none !important;
|
|
163
|
-
box-shadow: inset 4px 0 0 var(--os-accent) !important;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.wm-bar {
|
|
167
|
-
background: var(--os-bg-2) !important;
|
|
168
|
-
border: none !important;
|
|
169
|
-
padding: 8px 12px !important;
|
|
170
|
-
gap: 10px !important;
|
|
171
|
-
}
|
|
172
|
-
.wm-title {
|
|
173
|
-
font: 13px var(--os-font) !important;
|
|
174
|
-
color: var(--os-fg-2) !important;
|
|
175
|
-
letter-spacing: 0.005em;
|
|
176
|
-
text-align: center;
|
|
177
|
-
font-weight: 600;
|
|
178
|
-
text-transform: lowercase;
|
|
179
|
-
}
|
|
180
|
-
.wm-btns { gap: 6px !important; order: -1; }
|
|
181
|
-
.wm-btn {
|
|
182
|
-
width: 22px !important;
|
|
183
|
-
height: 22px !important;
|
|
184
|
-
border-radius: var(--r-1, 6px) !important;
|
|
185
|
-
border: none !important;
|
|
186
|
-
background: var(--os-bg-3) !important;
|
|
187
|
-
color: var(--os-fg-2) !important;
|
|
188
|
-
padding: 0 !important;
|
|
189
|
-
cursor: pointer;
|
|
190
|
-
font: 600 12px var(--os-mono) !important;
|
|
191
|
-
line-height: 1 !important;
|
|
192
|
-
display: inline-flex !important;
|
|
193
|
-
align-items: center;
|
|
194
|
-
justify-content: center;
|
|
195
|
-
transition: background 100ms ease, color 100ms ease;
|
|
196
|
-
}
|
|
197
|
-
.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)) !important; color: var(--os-fg) !important; }
|
|
198
|
-
|
|
199
|
-
.wm-resize {
|
|
200
|
-
background: transparent !important;
|
|
201
|
-
width: 14px !important;
|
|
202
|
-
height: 14px !important;
|
|
203
|
-
color: var(--os-fg-3);
|
|
204
|
-
opacity: 0.4;
|
|
205
|
-
font: 10px var(--os-mono);
|
|
206
|
-
display: flex;
|
|
207
|
-
align-items: flex-end;
|
|
208
|
-
justify-content: flex-end;
|
|
209
|
-
line-height: 1;
|
|
210
|
-
}
|
|
211
|
-
.wm-resize::after { content: '\25E2'; }
|
|
212
|
-
.wm-body { background: var(--os-bg-1) !important; }
|
|
213
|
-
|
|
214
|
-
.os-side-rail {
|
|
215
|
-
position: fixed;
|
|
216
|
-
left: 0; top: 0; bottom: 0;
|
|
217
|
-
width: var(--os-rail-w);
|
|
218
|
-
background: var(--os-bg-2);
|
|
219
|
-
border: none;
|
|
220
|
-
display: none;
|
|
221
|
-
flex-direction: column;
|
|
222
|
-
align-items: center;
|
|
223
|
-
padding: 12px 0;
|
|
224
|
-
gap: 6px;
|
|
225
|
-
z-index: 9100;
|
|
226
|
-
pointer-events: auto;
|
|
227
|
-
}
|
|
228
|
-
.os-rail-btn {
|
|
229
|
-
width: 48px; height: 48px;
|
|
230
|
-
border-radius: var(--os-radius-sm);
|
|
231
|
-
background: transparent;
|
|
232
|
-
border: none;
|
|
233
|
-
color: var(--os-fg);
|
|
234
|
-
cursor: pointer;
|
|
235
|
-
display: flex; align-items: center; justify-content: center;
|
|
236
|
-
transition: background 100ms ease;
|
|
237
|
-
padding: 0;
|
|
238
|
-
outline: none;
|
|
239
|
-
}
|
|
240
|
-
.os-rail-btn:hover { background: var(--panel-hover, var(--os-bg-1)); }
|
|
241
|
-
.os-rail-btn:active { background: var(--panel-select, var(--os-accent-soft)); }
|
|
242
|
-
.os-rail-btn .ic { color: var(--os-accent); display: inline-flex; }
|
|
243
|
-
.os-rail-btn .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
|
|
244
|
-
|
|
245
|
-
.os-drawer {
|
|
246
|
-
position: fixed;
|
|
247
|
-
inset: 0;
|
|
248
|
-
background: var(--os-bg-0);
|
|
249
|
-
z-index: 9700;
|
|
250
|
-
pointer-events: auto;
|
|
251
|
-
display: none;
|
|
252
|
-
flex-direction: column;
|
|
253
|
-
opacity: 0;
|
|
254
|
-
transform: translateY(8px);
|
|
255
|
-
transition: opacity 180ms ease, transform 180ms ease;
|
|
256
|
-
padding-top: env(safe-area-inset-top, 0);
|
|
257
|
-
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
258
|
-
}
|
|
259
|
-
.os-drawer.open { display: flex; opacity: 1; transform: translateY(0); }
|
|
260
|
-
.os-drawer-head {
|
|
261
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
262
|
-
padding: 12px 16px;
|
|
263
|
-
border: none;
|
|
264
|
-
height: 56px;
|
|
265
|
-
box-sizing: border-box;
|
|
266
|
-
background: var(--os-bg-2);
|
|
267
|
-
}
|
|
268
|
-
.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
|
|
269
|
-
.os-drawer-close {
|
|
270
|
-
width: 44px; height: 44px;
|
|
271
|
-
border: none; background: transparent;
|
|
272
|
-
color: var(--os-fg-2);
|
|
273
|
-
cursor: pointer;
|
|
274
|
-
display: flex; align-items: center; justify-content: center;
|
|
275
|
-
border-radius: var(--os-radius-sm);
|
|
276
|
-
outline: none;
|
|
277
|
-
}
|
|
278
|
-
.os-drawer-close:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
279
|
-
.os-drawer-close .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
|
|
280
|
-
.os-drawer-grid {
|
|
281
|
-
display: grid;
|
|
282
|
-
grid-template-columns: repeat(3, 1fr);
|
|
283
|
-
gap: 12px;
|
|
284
|
-
padding: 16px;
|
|
285
|
-
overflow-y: auto;
|
|
286
|
-
flex: 1;
|
|
287
|
-
align-content: start;
|
|
288
|
-
}
|
|
289
|
-
.os-drawer-tile {
|
|
290
|
-
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
|
|
291
|
-
padding: 18px 8px;
|
|
292
|
-
background: var(--os-bg-1);
|
|
293
|
-
border: none;
|
|
294
|
-
color: var(--os-fg);
|
|
295
|
-
font: 13px var(--os-font);
|
|
296
|
-
min-height: 100px;
|
|
297
|
-
cursor: pointer;
|
|
298
|
-
transition: background 80ms ease;
|
|
299
|
-
outline: none;
|
|
300
|
-
border-radius: var(--r-3, 18px);
|
|
301
|
-
text-transform: lowercase;
|
|
302
|
-
}
|
|
303
|
-
.os-drawer-tile:hover { background: var(--panel-hover, var(--os-bg-2)); }
|
|
304
|
-
.os-drawer-tile:active, .os-drawer-tile.active { background: var(--panel-select, var(--os-accent-soft)); }
|
|
305
|
-
.os-drawer-tile .ic { color: var(--os-accent); display: inline-flex; }
|
|
306
|
-
.os-drawer-tile .ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; }
|
|
307
|
-
.os-drawer-tile .lbl { color: var(--os-fg); font-weight: 600; }
|
|
308
|
-
|
|
309
|
-
.os-spacer { flex: 1 1 auto; }
|
|
310
|
-
.os-tray { display: flex; align-items: center; gap: 6px; }
|
|
311
|
-
.os-instances { display: flex; gap: 6px; margin-left: 8px; }
|
|
312
|
-
.os-menubar [data-role="home"] { display: none; }
|
|
313
|
-
.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 8000; }
|
|
314
|
-
.os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }
|
|
315
|
-
.os-taskbar { margin-top: auto; }
|
|
316
|
-
.wm-root { top: var(--os-bar-h) !important; bottom: var(--os-bar-h) !important; inset: var(--os-bar-h) 0 var(--os-bar-h) 0 !important; }
|
|
317
|
-
|
|
318
|
-
.app-pane { padding: 16px 18px; font: 14px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
|
|
319
|
-
.app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
|
|
320
|
-
.app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
|
|
321
|
-
.app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
|
|
322
|
-
.app-pane li { padding: 2px 0; }
|
|
323
|
-
.app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
|
|
324
|
-
.app-pane a { color: var(--os-accent); text-decoration: none; }
|
|
325
|
-
.app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
|
|
326
|
-
.app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
|
|
327
|
-
.app-pane.mono { font: 12.5px var(--os-mono); padding: 12px; background: var(--os-bg-1); }
|
|
328
|
-
.app-pane.mono .row { padding: 5px 8px; cursor: pointer; border-radius: var(--r-1, 6px); }
|
|
329
|
-
.app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
|
|
330
|
-
.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
|
|
331
|
-
.app-pane.mono pre { background: var(--os-bg-2); padding: 10px 12px; margin: 8px 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 11.5px var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
|
|
332
|
-
.app-shell-pane { margin: 0; padding: 8px; font: 12px var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
|
|
333
|
-
.app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
|
|
334
|
-
.app-canvas.x-display { background: #0b0d10; }
|
|
335
|
-
.app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
|
|
336
|
-
.app-iframe { width: 100%; height: 100%; border: 0; display: block; }
|
|
337
|
-
.app-iframe.web { background: #ffffff; }
|
|
338
|
-
.app-text-cursor { animation: app-cursor-blink 0.5s step-end infinite; }
|
|
339
|
-
@keyframes app-cursor-blink { 50% { opacity: 0; } }
|
|
340
|
-
@media (max-width: 1023px) and (min-width: 768px) {
|
|
341
|
-
.os-side-rail { display: flex; }
|
|
342
|
-
.wm-root { left: var(--os-rail-w) !important; }
|
|
343
|
-
.os-menubar { padding-left: calc(var(--os-rail-w) + 8px); }
|
|
344
|
-
.os-taskbar { padding-left: calc(var(--os-rail-w) + 8px); }
|
|
345
|
-
.os-menubar .os-instances { display: flex; }
|
|
346
|
-
.os-menu { left: calc(var(--os-rail-w) + 8px); }
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
@media (max-width: 767px) {
|
|
350
|
-
:root { --os-bar-h: var(--os-bar-h-mobile); }
|
|
351
|
-
body { overscroll-behavior: none; }
|
|
352
|
-
.os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 12px; }
|
|
353
|
-
.os-menubar [data-role="home"] .ic svg { width: 22px; height: 22px; }
|
|
354
|
-
.os-menubar { font-size: 14px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
|
|
355
|
-
.os-menubar [data-role="apps"] { display: none; }
|
|
356
|
-
.os-menubar .os-brand { font-size: 13px; margin-right: 6px; }
|
|
357
|
-
.os-menubar [data-role="add"] { display: none; }
|
|
358
|
-
.os-menubar .os-instances { display: none; }
|
|
359
|
-
.os-clock { display: none; }
|
|
360
|
-
.os-taskbar {
|
|
361
|
-
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
|
|
362
|
-
gap: 6px;
|
|
363
|
-
overflow-x: auto;
|
|
364
|
-
overflow-y: hidden;
|
|
365
|
-
flex-wrap: nowrap;
|
|
366
|
-
scroll-snap-type: x proximity;
|
|
367
|
-
height: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0));
|
|
368
|
-
align-items: center;
|
|
369
|
-
}
|
|
370
|
-
.os-taskbar::-webkit-scrollbar { display: none; }
|
|
371
|
-
.os-task {
|
|
372
|
-
flex: 0 0 auto;
|
|
373
|
-
min-width: 120px;
|
|
374
|
-
min-height: 44px;
|
|
375
|
-
max-width: none;
|
|
376
|
-
padding: 10px 14px;
|
|
377
|
-
scroll-snap-align: start;
|
|
378
|
-
font-size: 13px;
|
|
379
|
-
}
|
|
380
|
-
.os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
|
|
381
|
-
.os-side-rail { display: none !important; }
|
|
382
|
-
.os-menu { left: 8px; right: 8px; min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + 4px); }
|
|
383
|
-
.wm-root {
|
|
384
|
-
top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) !important;
|
|
385
|
-
bottom: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) !important;
|
|
386
|
-
inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) 0 calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) 0 !important;
|
|
387
|
-
}
|
|
388
|
-
.wm-win {
|
|
389
|
-
position: absolute !important;
|
|
390
|
-
left: 0 !important; top: 0 !important;
|
|
391
|
-
width: 100% !important; height: 100% !important;
|
|
392
|
-
border: none !important;
|
|
393
|
-
border-radius: 0 !important;
|
|
394
|
-
box-shadow: none !important;
|
|
395
|
-
}
|
|
396
|
-
.wm-bar {
|
|
397
|
-
padding: 6px 10px !important;
|
|
398
|
-
height: 36px !important;
|
|
399
|
-
gap: 6px !important;
|
|
400
|
-
cursor: default !important;
|
|
401
|
-
touch-action: pan-y !important;
|
|
402
|
-
pointer-events: none;
|
|
403
|
-
}
|
|
404
|
-
.wm-bar .wm-title { pointer-events: auto; font-size: 13px !important; }
|
|
405
|
-
.wm-bar .wm-btns { pointer-events: auto; }
|
|
406
|
-
.wm-btns .wm-btn:nth-child(1), .wm-btns .wm-btn:nth-child(2) { display: none !important; }
|
|
407
|
-
.wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: var(--r-1, 6px) !important; background: var(--os-bg-3) !important; color: var(--os-fg) !important; }
|
|
408
|
-
.wm-resize { display: none !important; }
|
|
409
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
body { margin: 0; padding: 24px; font-family: var(--os-font); background: var(--os-bg-0); color: var(--os-fg); }
|
|
2
|
-
h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
|
|
3
|
-
h3 { margin: 18px 0 6px 0; color: var(--os-fg-2); font-size: 13px; font-weight: 600; }
|
|
4
|
-
.sub { color: var(--os-fg-2); margin-bottom: 20px; }
|
|
5
|
-
table { border-collapse: collapse; width: 100%; max-width: 760px; }
|
|
6
|
-
td { padding: 6px 12px; border-bottom: 1px solid var(--os-bg-3); }
|
|
7
|
-
td.k { width: 280px; color: var(--os-fg-2); }
|
|
8
|
-
td.v { font-weight: 600; }
|
|
9
|
-
td.v.pass { color: var(--os-accent); }
|
|
10
|
-
td.v.fail { color: var(--os-red); }
|
|
11
|
-
td.v.pending { color: var(--os-amber); }
|
|
12
|
-
.all { margin-top: 16px; padding: 12px; background: var(--os-bg-1); max-width: 760px; border-radius: var(--os-radius-sm); }
|
|
13
|
-
.all.green { color: var(--os-accent); }
|
|
14
|
-
.all.red { color: var(--os-red); }
|
|
15
|
-
.err { color: var(--os-red); white-space: pre-wrap; margin-top: 12px; }
|
|
16
|
-
a { color: var(--os-accent); text-decoration: none; }
|
|
17
|
-
a:hover { color: var(--os-accent-2); }
|
|
18
|
-
iframe.osframe { position: absolute; left: -9999px; top: 0; width: 1280px; height: 900px; border: 0; }
|
|
19
|
-
iframe.osframe-phone { position: absolute; left: -9999px; top: 0; width: 414px; height: 720px; border: 0; }
|