feat: Electrobun Svelte+WGPU prototype (Dawn GPU confirmed on Linux)
- Svelte 5 frontend with Catppuccin Mocha theme, 2 project cards - Electrobun v1.16.0 with bundleWGPU: true (Dawn on Linux x64) - WebKitGTK webview + WGPU surface coexistence confirmed - CPU: 6.5% idle (CSS animation + WebKitGTK overhead) - Port 9760 for dev server (project convention)
This commit is contained in:
Hibryda
parent
1f20fc460e
commit
cfc135ffaf
29 changed files with 1106 additions and 1020 deletions
|
|
@ -1,526 +1,37 @@
|
|||
import { GpuWindow, Screen, WGPU, WGPUBridge } from "electrobun/bun";
|
||||
import { CString, ptr, toArrayBuffer } from "bun:ffi";
|
||||
import { BrowserWindow, Updater } from "electrobun/bun";
|
||||
|
||||
const WGPUNative = WGPU.native;
|
||||
const WGPU_STRLEN = 0xffffffffffffffffn;
|
||||
const WGPU_DEPTH_SLICE_UNDEFINED = 0xffffffff;
|
||||
const WGPUTextureUsage_RenderAttachment = 0x0000000000000010n;
|
||||
const WGPUBufferUsage_Vertex = 0x0000000000000020n;
|
||||
const WGPUBufferUsage_CopyDst = 0x0000000000000008n;
|
||||
const WGPUVertexFormat_Float32 = 0x0000001c;
|
||||
const WGPUVertexFormat_Float32x2 = 0x0000001d;
|
||||
const WGPUVertexFormat_Float32x4 = 0x0000001f;
|
||||
const WGPUVertexStepMode_Vertex = 0x00000001;
|
||||
const WGPUPrimitiveTopology_TriangleList = 0x00000004;
|
||||
const WGPUFrontFace_CCW = 0x00000001;
|
||||
const WGPUCullMode_None = 0x00000001;
|
||||
const WGPUPresentMode_Fifo = 0x00000001;
|
||||
const DEV_SERVER_PORT = 9760; // Project convention: 9700+ range
|
||||
const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`;
|
||||
|
||||
const KEEPALIVE: any[] = [];
|
||||
|
||||
function writePtr(view: DataView, offset: number, value: number | bigint | null) {
|
||||
view.setBigUint64(offset, BigInt(value ?? 0), true);
|
||||
// Check if Vite dev server is running for HMR
|
||||
async function getMainViewUrl(): Promise<string> {
|
||||
const channel = await Updater.localInfo.channel();
|
||||
if (channel === "dev") {
|
||||
try {
|
||||
await fetch(DEV_SERVER_URL, { method: "HEAD" });
|
||||
console.log(`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`);
|
||||
return DEV_SERVER_URL;
|
||||
} catch {
|
||||
console.log(
|
||||
"Vite dev server not running. Run 'bun run dev:hmr' for HMR support.",
|
||||
);
|
||||
}
|
||||
}
|
||||
return "views://mainview/index.html";
|
||||
}
|
||||
|
||||
function writeU32(view: DataView, offset: number, value: number) {
|
||||
view.setUint32(offset, value >>> 0, true);
|
||||
}
|
||||
// Create the main application window
|
||||
const url = await getMainViewUrl();
|
||||
|
||||
function writeU64(view: DataView, offset: number, value: bigint) {
|
||||
view.setBigUint64(offset, value, true);
|
||||
}
|
||||
|
||||
|
||||
function makeSurfaceConfiguration(
|
||||
devicePtr: number,
|
||||
width: number,
|
||||
height: number,
|
||||
format: number,
|
||||
) {
|
||||
const buffer = new ArrayBuffer(64);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, devicePtr);
|
||||
writeU32(view, 16, format);
|
||||
writeU32(view, 20, 0);
|
||||
writeU64(view, 24, WGPUTextureUsage_RenderAttachment);
|
||||
writeU32(view, 32, width);
|
||||
writeU32(view, 36, height);
|
||||
writeU64(view, 40, 0n);
|
||||
writePtr(view, 48, 0);
|
||||
writeU32(view, 56, 1);
|
||||
writeU32(view, 60, WGPUPresentMode_Fifo);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeShaderSourceWGSL(codePtr: number) {
|
||||
const buffer = new ArrayBuffer(32);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writeU32(view, 8, 0x00000002);
|
||||
writeU32(view, 12, 0);
|
||||
writePtr(view, 16, codePtr);
|
||||
writeU64(view, 24, WGPU_STRLEN);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeShaderModuleDescriptor(nextInChainPtr: number) {
|
||||
const buffer = new ArrayBuffer(24);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, nextInChainPtr);
|
||||
writePtr(view, 8, 0);
|
||||
writeU64(view, 16, 0n);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeVertexAttribute(offset: number, shaderLocation: number, format: number) {
|
||||
const buffer = new ArrayBuffer(32);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writeU32(view, 8, format);
|
||||
writeU32(view, 12, 0);
|
||||
writeU64(view, 16, BigInt(offset));
|
||||
writeU32(view, 24, shaderLocation);
|
||||
writeU32(view, 28, 0);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeVertexBufferLayout(
|
||||
attributePtr: number,
|
||||
attributeCount: number,
|
||||
stride: number,
|
||||
) {
|
||||
const buffer = new ArrayBuffer(40);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writeU32(view, 8, WGPUVertexStepMode_Vertex);
|
||||
writeU32(view, 12, 0);
|
||||
writeU64(view, 16, BigInt(stride));
|
||||
writeU64(view, 24, BigInt(attributeCount));
|
||||
writePtr(view, 32, attributePtr);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeColorTargetState(format: number) {
|
||||
const buffer = new ArrayBuffer(32);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writeU32(view, 8, format);
|
||||
writeU32(view, 12, 0);
|
||||
writePtr(view, 16, 0);
|
||||
writeU64(view, 24, 0x0fn);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeVertexState(
|
||||
modulePtr: number,
|
||||
entryPointPtr: number,
|
||||
bufferLayoutPtr: number,
|
||||
) {
|
||||
const buffer = new ArrayBuffer(64);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, modulePtr);
|
||||
writePtr(view, 16, entryPointPtr);
|
||||
writeU64(view, 24, WGPU_STRLEN);
|
||||
writeU64(view, 32, 0n);
|
||||
writePtr(view, 40, 0);
|
||||
writeU64(view, 48, 1n);
|
||||
writePtr(view, 56, bufferLayoutPtr);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeFragmentState(
|
||||
modulePtr: number,
|
||||
entryPointPtr: number,
|
||||
targetPtr: number,
|
||||
) {
|
||||
const buffer = new ArrayBuffer(64);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, modulePtr);
|
||||
writePtr(view, 16, entryPointPtr);
|
||||
writeU64(view, 24, WGPU_STRLEN);
|
||||
writeU64(view, 32, 0n);
|
||||
writePtr(view, 40, 0);
|
||||
writeU64(view, 48, 1n);
|
||||
writePtr(view, 56, targetPtr);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makePrimitiveState() {
|
||||
const buffer = new ArrayBuffer(32);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writeU32(view, 8, WGPUPrimitiveTopology_TriangleList);
|
||||
writeU32(view, 12, 0);
|
||||
writeU32(view, 16, WGPUFrontFace_CCW);
|
||||
writeU32(view, 20, WGPUCullMode_None);
|
||||
writeU32(view, 24, 0);
|
||||
writeU32(view, 28, 0);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeMultisampleState() {
|
||||
const buffer = new ArrayBuffer(24);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writeU32(view, 8, 1);
|
||||
writeU32(view, 12, 0xffffffff);
|
||||
writeU32(view, 16, 0);
|
||||
writeU32(view, 20, 0);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeRenderPipelineDescriptor(
|
||||
vertexStatePtr: number,
|
||||
primitiveStatePtr: number,
|
||||
multisampleStatePtr: number,
|
||||
fragmentStatePtr: number,
|
||||
) {
|
||||
const buffer = new ArrayBuffer(168);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, 0);
|
||||
writeU64(view, 16, 0n);
|
||||
writePtr(view, 24, 0);
|
||||
new Uint8Array(buffer, 32, 64).set(new Uint8Array(vertexStatePtr.buffer));
|
||||
new Uint8Array(buffer, 96, 32).set(new Uint8Array(primitiveStatePtr.buffer));
|
||||
writePtr(view, 128, 0);
|
||||
new Uint8Array(buffer, 136, 24).set(new Uint8Array(multisampleStatePtr.buffer));
|
||||
writePtr(view, 160, fragmentStatePtr.ptr as unknown as number);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeBufferDescriptor(size: number) {
|
||||
const buffer = new ArrayBuffer(48);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, 0);
|
||||
writeU64(view, 16, 0n);
|
||||
writeU64(view, 24, WGPUBufferUsage_Vertex | WGPUBufferUsage_CopyDst);
|
||||
writeU64(view, 32, BigInt(size));
|
||||
writeU32(view, 40, 0);
|
||||
writeU32(view, 44, 0);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeCommandEncoderDescriptor() {
|
||||
const buffer = new ArrayBuffer(24);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, 0);
|
||||
writeU64(view, 16, 0n);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeSurfaceTexture() {
|
||||
const buffer = new ArrayBuffer(24);
|
||||
return { buffer, view: new DataView(buffer), ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeRenderPassColorAttachment(viewPtr: number, clear: { r: number; g: number; b: number; a: number }) {
|
||||
const buffer = new ArrayBuffer(72);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, viewPtr);
|
||||
writeU32(view, 16, WGPU_DEPTH_SLICE_UNDEFINED);
|
||||
writeU32(view, 20, 0);
|
||||
writePtr(view, 24, 0);
|
||||
writeU32(view, 32, 2);
|
||||
writeU32(view, 36, 1);
|
||||
view.setFloat64(40, clear.r, true);
|
||||
view.setFloat64(48, clear.g, true);
|
||||
view.setFloat64(56, clear.b, true);
|
||||
view.setFloat64(64, clear.a, true);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeRenderPassDescriptor(colorAttachmentPtr: number) {
|
||||
const buffer = new ArrayBuffer(64);
|
||||
const view = new DataView(buffer);
|
||||
writePtr(view, 0, 0);
|
||||
writePtr(view, 8, 0);
|
||||
writeU64(view, 16, 0n);
|
||||
writeU64(view, 24, 1n);
|
||||
writePtr(view, 32, colorAttachmentPtr);
|
||||
writePtr(view, 40, 0);
|
||||
writePtr(view, 48, 0);
|
||||
writePtr(view, 56, 0);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
function makeCommandBufferArray(cmdPtr: number) {
|
||||
const buffer = new BigUint64Array([BigInt(cmdPtr)]);
|
||||
return { buffer, ptr: ptr(buffer) };
|
||||
}
|
||||
|
||||
const size = 640;
|
||||
const display = Screen.getPrimaryDisplay();
|
||||
const workArea = display.workArea;
|
||||
const x = workArea.x + Math.floor((workArea.width - size) / 2);
|
||||
const y = workArea.y + Math.floor((workArea.height - size) / 2);
|
||||
|
||||
const win = new GpuWindow({
|
||||
title: "WGPU Shader",
|
||||
frame: { width: size, height: size, x, y },
|
||||
titleBarStyle: "default",
|
||||
transparent: false,
|
||||
const mainWindow = new BrowserWindow({
|
||||
title: "Agent Orchestrator — Electrobun",
|
||||
url,
|
||||
frame: {
|
||||
width: 1400,
|
||||
height: 900,
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
});
|
||||
|
||||
if (!WGPUNative.available) {
|
||||
throw new Error("WGPU not available for wgpu");
|
||||
}
|
||||
|
||||
const instance = WGPUNative.symbols.wgpuCreateInstance(0);
|
||||
const surface = WGPUBridge.createSurfaceForView(
|
||||
instance as number,
|
||||
win.wgpuView.ptr as number,
|
||||
);
|
||||
|
||||
const adapterDevice = new BigUint64Array(2);
|
||||
WGPUBridge.createAdapterDeviceMainThread(
|
||||
instance as number,
|
||||
surface as number,
|
||||
ptr(adapterDevice),
|
||||
);
|
||||
const adapter = Number(adapterDevice[0]);
|
||||
const device = Number(adapterDevice[1]);
|
||||
if (!adapter || !device) {
|
||||
throw new Error("Failed to get WGPU adapter/device");
|
||||
}
|
||||
|
||||
const queue = WGPUNative.symbols.wgpuDeviceGetQueue(device);
|
||||
|
||||
// Query the surface capabilities to get a supported texture format
|
||||
const capsBuffer = new ArrayBuffer(64);
|
||||
const capsView = new DataView(capsBuffer);
|
||||
WGPUNative.symbols.wgpuSurfaceGetCapabilities(
|
||||
surface,
|
||||
adapter,
|
||||
ptr(capsBuffer),
|
||||
);
|
||||
const formatCount = Number(capsView.getBigUint64(16, true));
|
||||
const formatPtr = Number(capsView.getBigUint64(24, true));
|
||||
let surfaceFormat = 0x00000017; // BGRA8Unorm fallback
|
||||
if (formatCount && formatPtr) {
|
||||
const formats = new Uint32Array(toArrayBuffer(formatPtr, 0, formatCount * 4));
|
||||
if (formats.length) surfaceFormat = formats[0]!;
|
||||
}
|
||||
|
||||
const surfaceConfig = makeSurfaceConfiguration(
|
||||
device,
|
||||
size,
|
||||
size,
|
||||
surfaceFormat,
|
||||
);
|
||||
WGPUBridge.surfaceConfigure(surface as number, surfaceConfig.ptr as number);
|
||||
|
||||
const shaderText = `
|
||||
struct VSOut {
|
||||
@builtin(position) position : vec4<f32>,
|
||||
@location(0) uv : vec2<f32>,
|
||||
@location(1) time : f32,
|
||||
@location(2) resolution : vec2<f32>,
|
||||
@location(3) mouse : vec4<f32>,
|
||||
};
|
||||
|
||||
@vertex
|
||||
fn vs_main(
|
||||
@location(0) position: vec2<f32>,
|
||||
@location(1) time: f32,
|
||||
@location(2) resolution: vec2<f32>,
|
||||
@location(3) mouse: vec4<f32>
|
||||
) -> VSOut {
|
||||
var out: VSOut;
|
||||
out.position = vec4<f32>(position, 0.0, 1.0);
|
||||
out.uv = position;
|
||||
out.time = time;
|
||||
out.resolution = resolution;
|
||||
out.mouse = mouse;
|
||||
return out;
|
||||
}
|
||||
|
||||
@fragment
|
||||
fn fs_main(
|
||||
@location(0) uv: vec2<f32>,
|
||||
@location(1) time: f32,
|
||||
@location(2) resolution: vec2<f32>,
|
||||
@location(3) mouse: vec4<f32>
|
||||
) -> @location(0) vec4<f32> {
|
||||
let fragCoord = (uv * 0.5 + vec2<f32>(0.5)) * resolution;
|
||||
let m = (mouse.xy / max(resolution, vec2<f32>(1.0))) * 2.0 - vec2<f32>(1.0);
|
||||
let loopMax: i32 = select(32, 64, mouse.z > 0.5);
|
||||
var o = vec4<f32>(0.0);
|
||||
var i: f32 = 0.0;
|
||||
var d: f32 = 0.0;
|
||||
var c: f32 = 0.0;
|
||||
var s: f32 = 0.0;
|
||||
var q = vec3<f32>(0.0);
|
||||
var p = vec3<f32>(0.0);
|
||||
let r = vec3<f32>(resolution, 0.0);
|
||||
var dir = normalize(vec3<f32>((fragCoord + fragCoord - r.xy) / r.y, 1.0));
|
||||
dir.x = dir.x + m.x * 0.35;
|
||||
dir.y = dir.y + -m.y * 0.35;
|
||||
|
||||
for (var iter: i32 = 0; iter < loopMax; iter = iter + 1) {
|
||||
i = f32(iter + 1);
|
||||
p = dir * d;
|
||||
p.z = p.z + time * 4.0;
|
||||
q = p;
|
||||
s = 0.0;
|
||||
c = 20.0;
|
||||
loop {
|
||||
if (c <= 0.2) { break; }
|
||||
let m = mat2x2<f32>(
|
||||
vec2<f32>(cos(c / 30.0 + 0.0), cos(c / 30.0 + 33.0)),
|
||||
vec2<f32>(cos(c / 30.0 + 11.0), cos(c / 30.0 + 0.0))
|
||||
);
|
||||
let xz = m * vec2<f32>(p.x, p.z);
|
||||
p.x = xz.x;
|
||||
p.z = xz.y;
|
||||
p = abs(fract(p / c) * c - vec3<f32>(c * 0.5)) - vec3<f32>(c * 0.2);
|
||||
s = max(
|
||||
9.0 + 3.0 * sin(q.z * 0.05) - abs(q.x),
|
||||
max(s, min(p.x, min(p.y, p.z)))
|
||||
);
|
||||
p = q;
|
||||
c = c * 0.5;
|
||||
}
|
||||
let sinp = sin(p * 12.0);
|
||||
let dotv = dot(sinp, vec3<f32>(0.1, 0.1, 0.1));
|
||||
s = min(s, p.y + 8.0 + dotv);
|
||||
d = d + s;
|
||||
let add = i / max(s, 0.001);
|
||||
o = o + vec4<f32>(add, add, add, add);
|
||||
}
|
||||
|
||||
let denom = max(d, 0.000001);
|
||||
o = tanh(o / denom / 30000.0);
|
||||
return vec4<f32>(o.xyz, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const shaderBytes = new TextEncoder().encode(shaderText + "\0");
|
||||
const shaderBuf = new Uint8Array(shaderBytes);
|
||||
KEEPALIVE.push(shaderBuf);
|
||||
const shaderPtr = ptr(shaderBuf);
|
||||
const shaderSource = makeShaderSourceWGSL(shaderPtr);
|
||||
const shaderDesc = makeShaderModuleDescriptor(shaderSource.ptr as number);
|
||||
const shaderModule = WGPUNative.symbols.wgpuDeviceCreateShaderModule(device, shaderDesc.ptr as number);
|
||||
|
||||
const entryPoint = new CString("vs_main");
|
||||
const fragEntryPoint = new CString("fs_main");
|
||||
KEEPALIVE.push(entryPoint, fragEntryPoint);
|
||||
const posAttr = makeVertexAttribute(0, 0, WGPUVertexFormat_Float32x2);
|
||||
const timeAttr = makeVertexAttribute(8, 1, WGPUVertexFormat_Float32);
|
||||
const resAttr = makeVertexAttribute(12, 2, WGPUVertexFormat_Float32x2);
|
||||
const mouseAttr = makeVertexAttribute(20, 3, WGPUVertexFormat_Float32x4);
|
||||
const attrBuf = new ArrayBuffer(32 * 4);
|
||||
new Uint8Array(attrBuf, 0, 32).set(new Uint8Array(posAttr.buffer));
|
||||
new Uint8Array(attrBuf, 32, 32).set(new Uint8Array(timeAttr.buffer));
|
||||
new Uint8Array(attrBuf, 64, 32).set(new Uint8Array(resAttr.buffer));
|
||||
new Uint8Array(attrBuf, 96, 32).set(new Uint8Array(mouseAttr.buffer));
|
||||
const attrPtr = ptr(attrBuf);
|
||||
KEEPALIVE.push(attrBuf);
|
||||
const vertexLayout = makeVertexBufferLayout(attrPtr as number, 4, 36);
|
||||
const vertexState = makeVertexState(shaderModule, entryPoint.ptr, vertexLayout.ptr as number);
|
||||
const colorTarget = makeColorTargetState(surfaceFormat);
|
||||
const fragmentState = makeFragmentState(shaderModule, fragEntryPoint.ptr, colorTarget.ptr as number);
|
||||
const primitiveState = makePrimitiveState();
|
||||
const multisampleState = makeMultisampleState();
|
||||
const pipelineDesc = makeRenderPipelineDescriptor(
|
||||
vertexState,
|
||||
primitiveState,
|
||||
multisampleState,
|
||||
fragmentState,
|
||||
);
|
||||
const pipeline = WGPUNative.symbols.wgpuDeviceCreateRenderPipeline(device, pipelineDesc.ptr as number);
|
||||
|
||||
const vertexCount = 3;
|
||||
const bufferDesc = makeBufferDescriptor(vertexCount * 9 * 4);
|
||||
const vertexBuffer = WGPUNative.symbols.wgpuDeviceCreateBuffer(device, bufferDesc.ptr as number);
|
||||
const encoderDesc = makeCommandEncoderDescriptor();
|
||||
let lastLeftDown = false;
|
||||
let qualityBoost = false;
|
||||
let clickX = 0;
|
||||
let clickY = 0;
|
||||
|
||||
function renderFrame() {
|
||||
const sizeNow = win.getSize();
|
||||
const t = performance.now() * 0.001;
|
||||
const positions = [-1, -1, 3, -1, -1, 3];
|
||||
const frame = win.getFrame();
|
||||
const cursor = Screen.getCursorScreenPoint();
|
||||
const rawX = cursor.x - frame.x;
|
||||
const rawY = cursor.y - frame.y;
|
||||
const mx = Math.max(0, Math.min(frame.width, rawX));
|
||||
const my = Math.max(0, Math.min(frame.height, rawY));
|
||||
const buttons = Screen.getMouseButtons();
|
||||
const leftDown = (buttons & 1n) === 1n;
|
||||
if (leftDown && !lastLeftDown) {
|
||||
qualityBoost = !qualityBoost;
|
||||
clickX = mx;
|
||||
clickY = my;
|
||||
}
|
||||
lastLeftDown = leftDown;
|
||||
const packed = new Float32Array(vertexCount * 9);
|
||||
for (let i = 0; i < vertexCount; i += 1) {
|
||||
const idx = i * 9;
|
||||
packed[idx] = positions[i * 2]!;
|
||||
packed[idx + 1] = positions[i * 2 + 1]!;
|
||||
packed[idx + 2] = t;
|
||||
packed[idx + 3] = sizeNow.width;
|
||||
packed[idx + 4] = sizeNow.height;
|
||||
packed[idx + 5] = mx;
|
||||
packed[idx + 6] = my;
|
||||
packed[idx + 7] = qualityBoost ? clickX : 0;
|
||||
packed[idx + 8] = qualityBoost ? clickY : 0;
|
||||
}
|
||||
|
||||
WGPUNative.symbols.wgpuQueueWriteBuffer(
|
||||
queue,
|
||||
vertexBuffer,
|
||||
0,
|
||||
ptr(packed),
|
||||
packed.byteLength,
|
||||
);
|
||||
|
||||
WGPUNative.symbols.wgpuInstanceProcessEvents(instance);
|
||||
|
||||
const surfaceTexture = makeSurfaceTexture();
|
||||
WGPUBridge.surfaceGetCurrentTexture(surface as number, surfaceTexture.ptr as number);
|
||||
const status = surfaceTexture.view.getUint32(16, true);
|
||||
if (status !== 1 && status !== 2) return;
|
||||
const texPtr = Number(surfaceTexture.view.getBigUint64(8, true));
|
||||
if (!texPtr) return;
|
||||
|
||||
const textureView = WGPUNative.symbols.wgpuTextureCreateView(texPtr, 0);
|
||||
if (!textureView) return;
|
||||
|
||||
const colorAttachment = makeRenderPassColorAttachment(textureView, {
|
||||
r: 0.05,
|
||||
g: 0.05,
|
||||
b: 0.1,
|
||||
a: 1.0,
|
||||
});
|
||||
const renderPassDesc = makeRenderPassDescriptor(colorAttachment.ptr as number);
|
||||
const encoder = WGPUNative.symbols.wgpuDeviceCreateCommandEncoder(device, encoderDesc.ptr as number);
|
||||
const pass = WGPUNative.symbols.wgpuCommandEncoderBeginRenderPass(encoder, renderPassDesc.ptr as number);
|
||||
WGPUNative.symbols.wgpuRenderPassEncoderSetPipeline(pass, pipeline);
|
||||
WGPUNative.symbols.wgpuRenderPassEncoderSetVertexBuffer(pass, 0, vertexBuffer, 0, packed.byteLength);
|
||||
WGPUNative.symbols.wgpuRenderPassEncoderDraw(pass, vertexCount, 1, 0, 0);
|
||||
WGPUNative.symbols.wgpuRenderPassEncoderEnd(pass);
|
||||
|
||||
const commandBuffer = WGPUNative.symbols.wgpuCommandEncoderFinish(encoder, 0);
|
||||
const commandArray = makeCommandBufferArray(commandBuffer);
|
||||
WGPUNative.symbols.wgpuQueueSubmit(queue, 1, commandArray.ptr as number);
|
||||
WGPUBridge.surfacePresent(surface as number);
|
||||
|
||||
WGPUNative.symbols.wgpuTextureViewRelease(textureView);
|
||||
WGPUNative.symbols.wgpuTextureRelease(texPtr);
|
||||
WGPUNative.symbols.wgpuCommandBufferRelease(commandBuffer);
|
||||
WGPUNative.symbols.wgpuCommandEncoderRelease(encoder);
|
||||
}
|
||||
|
||||
setInterval(renderFrame, 16);
|
||||
console.log("Agent Orchestrator (Electrobun) started!");
|
||||
|
|
|
|||
239
ui-electrobun/src/mainview/App.svelte
Normal file
239
ui-electrobun/src/mainview/App.svelte
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<script lang="ts">
|
||||
// ── Types ────────────────────────────────────────────────────
|
||||
type AgentStatus = 'running' | 'idle' | 'stalled';
|
||||
type MsgRole = 'user' | 'assistant' | 'tool-call' | 'tool-result';
|
||||
type TabId = 'model' | 'docs' | 'files';
|
||||
|
||||
interface AgentMessage {
|
||||
id: number;
|
||||
role: MsgRole;
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
cwd: string;
|
||||
accent: string;
|
||||
status: AgentStatus;
|
||||
costUsd: number;
|
||||
tokens: number;
|
||||
messages: AgentMessage[];
|
||||
}
|
||||
|
||||
// ── Demo data ────────────────────────────────────────────────
|
||||
const PROJECTS: Project[] = [
|
||||
{
|
||||
id: 'p1',
|
||||
name: 'agent-orchestrator',
|
||||
cwd: '~/code/ai/agent-orchestrator',
|
||||
accent: 'var(--ctp-mauve)',
|
||||
status: 'running',
|
||||
costUsd: 0.034,
|
||||
tokens: 18420,
|
||||
messages: [
|
||||
{ id: 1, role: 'user', content: 'Add a wake scheduler for Manager agents that wakes them when review queue depth > 3.' },
|
||||
{ id: 2, role: 'assistant', content: 'Reading existing wake-scheduler.svelte.ts to understand the 3-strategy pattern...' },
|
||||
{ id: 3, role: 'tool-call', content: 'Read("src/lib/stores/wake-scheduler.svelte.ts")' },
|
||||
{ id: 4, role: 'tool-result', content: '// 312 lines\nexport type WakeStrategy = "persistent" | "on-demand" | "smart";\n...' },
|
||||
{ id: 5, role: 'assistant', content: 'Found the WakeSignal enum. I\'ll add ReviewBacklog(0.6) and hook into bttask polling. Writing wake-scorer.ts update now.' },
|
||||
{ id: 6, role: 'tool-call', content: 'Edit("src/lib/utils/wake-scorer.ts", old="// signals", new="// signals\n ReviewBacklog = 0.6,")' },
|
||||
{ id: 7, role: 'assistant', content: 'Done. ReviewBacklog signal added at priority 0.6 (between TaskQueuePressure 0.7 and PeriodicFloor 0.1). Run `npm test` to verify 24 scorer tests still pass.' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'p2',
|
||||
name: 'quanta-discord-bot',
|
||||
cwd: '~/code/quanta/discord-bot',
|
||||
accent: 'var(--ctp-sapphire)',
|
||||
status: 'idle',
|
||||
costUsd: 0.011,
|
||||
tokens: 6830,
|
||||
messages: [
|
||||
{ id: 1, role: 'user', content: 'Why is the QRAG MCP server returning 504s on large semantic search queries?' },
|
||||
{ id: 2, role: 'assistant', content: 'Checking the MCP HTTP handler timeout config and Qdrant query path...' },
|
||||
{ id: 3, role: 'tool-call', content: 'Read("src/mcp/server.ts", offset=120, limit=40)' },
|
||||
{ id: 4, role: 'tool-result', content: 'const QUERY_TIMEOUT_MS = 5000; // default\n...' },
|
||||
{ id: 5, role: 'assistant', content: 'Found it. The MCP handler has a hardcoded 5s timeout but Qdrant HNSW search on 500k vectors takes 6–9s at ef=256. Two options:\n1. Raise timeout to 15s (quick fix)\n2. Lower ef to 128 for faster approximate search (~3s, slight recall drop)\n\nRecommend option 2 for latency-sensitive bot responses.' },
|
||||
{ id: 6, role: 'user', content: 'Go with option 2.' },
|
||||
{ id: 7, role: 'assistant', content: 'Updated `ef_searching: 128` in qdrant-config.ts and raised timeout to 8s as safety margin. Restarted service on port 9320.' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ── Reactive state ───────────────────────────────────────────
|
||||
let activeTab = $state<Record<string, TabId>>({ p1: 'model', p2: 'model' });
|
||||
let settingsOpen = $state(false);
|
||||
|
||||
// ── Derived status bar aggregates ───────────────────────────
|
||||
let runningCount = $derived(PROJECTS.filter(p => p.status === 'running').length);
|
||||
let idleCount = $derived(PROJECTS.filter(p => p.status === 'idle').length);
|
||||
let totalCost = $derived(PROJECTS.reduce((s, p) => s + p.costUsd, 0));
|
||||
let totalTokens = $derived(PROJECTS.reduce((s, p) => s + p.tokens, 0));
|
||||
|
||||
function setTab(projectId: string, tab: TabId) {
|
||||
activeTab = { ...activeTab, [projectId]: tab };
|
||||
}
|
||||
|
||||
function fmtTokens(n: number): string {
|
||||
return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
|
||||
}
|
||||
|
||||
function fmtCost(n: number): string {
|
||||
return `$${n.toFixed(3)}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="app-shell">
|
||||
<!-- ── Sidebar icon rail ──────────────────────────────────── -->
|
||||
<aside class="sidebar" role="navigation" aria-label="Primary navigation">
|
||||
<div class="sidebar-spacer"></div>
|
||||
<button
|
||||
class="sidebar-icon"
|
||||
class:active={settingsOpen}
|
||||
onclick={() => settingsOpen = !settingsOpen}
|
||||
aria-label="Settings"
|
||||
title="Settings"
|
||||
>
|
||||
<!-- gear icon -->
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<!-- ── Main workspace ───────────────────────────────────────── -->
|
||||
<main class="workspace">
|
||||
<div class="project-grid">
|
||||
{#each PROJECTS as project (project.id)}
|
||||
<article
|
||||
class="project-card"
|
||||
style="--accent: {project.accent}"
|
||||
aria-label="Project: {project.name}"
|
||||
>
|
||||
<!-- Project header -->
|
||||
<header class="project-header">
|
||||
<!-- Status dot — wgpu surface placeholder -->
|
||||
<div class="status-dot-wrap" aria-label="Status: {project.status}">
|
||||
<!--
|
||||
Future: replace inner div with <electrobun-wgpu id="wgpu-surface-{project.id}">
|
||||
for GPU-rendered animation. CSS pulse is the WebView fallback.
|
||||
-->
|
||||
<div class="status-dot {project.status}" role="img" aria-label="{project.status}"></div>
|
||||
</div>
|
||||
|
||||
<span class="project-name">{project.name}</span>
|
||||
<span class="project-cwd" title={project.cwd}>{project.cwd}</span>
|
||||
</header>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div class="tab-bar" role="tablist" aria-label="{project.name} tabs">
|
||||
{#each (['model', 'docs', 'files'] as TabId[]) as tab}
|
||||
<button
|
||||
class="tab-btn"
|
||||
class:active={activeTab[project.id] === tab}
|
||||
role="tab"
|
||||
aria-selected={activeTab[project.id] === tab}
|
||||
aria-controls="tabpanel-{project.id}-{tab}"
|
||||
onclick={() => setTab(project.id, tab)}
|
||||
>
|
||||
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Tab content -->
|
||||
<div class="tab-content">
|
||||
<!-- Model tab: agent messages -->
|
||||
<div
|
||||
id="tabpanel-{project.id}-model"
|
||||
class="tab-pane"
|
||||
class:active={activeTab[project.id] === 'model'}
|
||||
role="tabpanel"
|
||||
aria-label="Model"
|
||||
>
|
||||
{#each project.messages as msg (msg.id)}
|
||||
<div class="msg">
|
||||
<span class="msg-role {msg.role.split('-')[0]}">{msg.role}</span>
|
||||
<div
|
||||
class="msg-body"
|
||||
class:tool-call={msg.role === 'tool-call'}
|
||||
class:tool-result={msg.role === 'tool-result'}
|
||||
>{msg.content}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Docs tab placeholder -->
|
||||
<div
|
||||
id="tabpanel-{project.id}-docs"
|
||||
class="tab-pane"
|
||||
class:active={activeTab[project.id] === 'docs'}
|
||||
role="tabpanel"
|
||||
aria-label="Docs"
|
||||
>
|
||||
<div class="placeholder-pane">No markdown files open</div>
|
||||
</div>
|
||||
|
||||
<!-- Files tab placeholder -->
|
||||
<div
|
||||
id="tabpanel-{project.id}-files"
|
||||
class="tab-pane"
|
||||
class:active={activeTab[project.id] === 'files'}
|
||||
role="tabpanel"
|
||||
aria-label="Files"
|
||||
>
|
||||
<div class="placeholder-pane">File browser — coming soon</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- ── Status bar ─────────────────────────────────────────────── -->
|
||||
<footer class="status-bar" role="status" aria-live="polite" aria-label="System status">
|
||||
{#if runningCount > 0}
|
||||
<span class="status-segment">
|
||||
<span class="status-dot-sm green" aria-hidden="true"></span>
|
||||
<span class="status-value">{runningCount}</span>
|
||||
<span>running</span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if idleCount > 0}
|
||||
<span class="status-segment">
|
||||
<span class="status-dot-sm gray" aria-hidden="true"></span>
|
||||
<span class="status-value">{idleCount}</span>
|
||||
<span>idle</span>
|
||||
</span>
|
||||
{/if}
|
||||
<span class="status-bar-spacer"></span>
|
||||
<span class="status-segment" title="Total tokens used">
|
||||
<span>tokens</span>
|
||||
<span class="status-value">{fmtTokens(totalTokens)}</span>
|
||||
</span>
|
||||
<span class="status-segment" title="Total session cost">
|
||||
<span>cost</span>
|
||||
<span class="status-value">{fmtCost(totalCost)}</span>
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
/* Component-scoped overrides only — base styles live in app.css */
|
||||
:global(body) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(#app) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
400
ui-electrobun/src/mainview/app.css
Normal file
400
ui-electrobun/src/mainview/app.css
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
/* Catppuccin Mocha palette — same --ctp-* vars as Tauri app */
|
||||
:root {
|
||||
--ctp-rosewater: #f5e0dc;
|
||||
--ctp-flamingo: #f2cdcd;
|
||||
--ctp-pink: #f5c2e7;
|
||||
--ctp-mauve: #cba6f7;
|
||||
--ctp-red: #f38ba8;
|
||||
--ctp-maroon: #eba0ac;
|
||||
--ctp-peach: #fab387;
|
||||
--ctp-yellow: #f9e2af;
|
||||
--ctp-green: #a6e3a1;
|
||||
--ctp-teal: #94e2d5;
|
||||
--ctp-sky: #89dceb;
|
||||
--ctp-sapphire: #74c7ec;
|
||||
--ctp-blue: #89b4fa;
|
||||
--ctp-lavender: #b4befe;
|
||||
--ctp-text: #cdd6f4;
|
||||
--ctp-subtext1: #bac2de;
|
||||
--ctp-subtext0: #a6adc8;
|
||||
--ctp-overlay2: #9399b2;
|
||||
--ctp-overlay1: #7f849c;
|
||||
--ctp-overlay0: #6c7086;
|
||||
--ctp-surface2: #585b70;
|
||||
--ctp-surface1: #45475a;
|
||||
--ctp-surface0: #313244;
|
||||
--ctp-base: #1e1e2e;
|
||||
--ctp-mantle: #181825;
|
||||
--ctp-crust: #11111b;
|
||||
|
||||
/* Typography */
|
||||
--ui-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
--ui-font-size: 0.875rem;
|
||||
--term-font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
|
||||
--term-font-size: 0.8125rem;
|
||||
|
||||
/* Layout */
|
||||
--sidebar-width: 2.75rem;
|
||||
--status-bar-height: 1.75rem;
|
||||
--tab-bar-height: 2rem;
|
||||
--header-height: 2.5rem;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--ctp-base);
|
||||
color: var(--ctp-text);
|
||||
font-family: var(--ui-font-family);
|
||||
font-size: var(--ui-font-size);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── App shell ─────────────────────────────────────────────── */
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Sidebar / icon rail ───────────────────────────────────── */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
background: var(--ctp-mantle);
|
||||
border-right: 1px solid var(--ctp-surface0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ctp-overlay1);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-icon:hover {
|
||||
background: var(--ctp-surface0);
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.sidebar-icon.active {
|
||||
background: var(--ctp-surface1);
|
||||
color: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.sidebar-icon svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── Project grid (main workspace) ────────────────────────── */
|
||||
.workspace {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--ctp-crust);
|
||||
}
|
||||
|
||||
/* ── Project card ──────────────────────────────────────────── */
|
||||
.project-card {
|
||||
background: var(--ctp-base);
|
||||
border: 1px solid var(--ctp-surface0);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Accent stripe on left edge */
|
||||
.project-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: var(--accent, var(--ctp-mauve));
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Project header ────────────────────────────────────────── */
|
||||
.project-header {
|
||||
height: var(--header-height);
|
||||
background: var(--ctp-mantle);
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.625rem 0 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* wgpu placeholder — same dimensions as the dot, GPU surface goes here */
|
||||
#wgpu-surface,
|
||||
.wgpu-surface {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: var(--dot-color, var(--ctp-overlay0));
|
||||
}
|
||||
|
||||
/* CSS fallback pulsing dot (compositor-driven, ~0% CPU) */
|
||||
.status-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: var(--dot-color, var(--ctp-overlay0));
|
||||
}
|
||||
|
||||
.status-dot.running {
|
||||
--dot-color: var(--ctp-green);
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-dot.idle {
|
||||
--dot-color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.status-dot.stalled {
|
||||
--dot-color: var(--ctp-peach);
|
||||
animation: pulse-dot 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.55; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-weight: 600;
|
||||
color: var(--ctp-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.project-cwd {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ctp-subtext0);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
direction: rtl;
|
||||
max-width: 10rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Tab bar ───────────────────────────────────────────────── */
|
||||
.tab-bar {
|
||||
height: var(--tab-bar-height);
|
||||
background: var(--ctp-mantle);
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.25rem;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0 0.75rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--ctp-subtext0);
|
||||
font-family: var(--ui-font-family);
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color 0.12s, border-color 0.12s;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--ctp-text);
|
||||
border-bottom-color: var(--accent, var(--ctp-mauve));
|
||||
}
|
||||
|
||||
/* ── Tab content area ──────────────────────────────────────── */
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0.625rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
/* scrollbar */
|
||||
.tab-pane::-webkit-scrollbar { width: 0.375rem; }
|
||||
.tab-pane::-webkit-scrollbar-track { background: transparent; }
|
||||
.tab-pane::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 0.25rem; }
|
||||
|
||||
/* ── Agent messages ────────────────────────────────────────── */
|
||||
.msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.msg-role {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.msg-role.user { color: var(--ctp-blue); }
|
||||
.msg-role.assistant { color: var(--ctp-mauve); }
|
||||
.msg-role.tool { color: var(--ctp-peach); }
|
||||
|
||||
.msg-body {
|
||||
background: var(--ctp-surface0);
|
||||
border-radius: 0.3125rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5;
|
||||
color: var(--ctp-text);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.msg-body.tool-call {
|
||||
background: color-mix(in srgb, var(--ctp-peach) 8%, var(--ctp-surface0));
|
||||
border-left: 2px solid var(--ctp-peach);
|
||||
font-family: var(--term-font-family);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.msg-body.tool-result {
|
||||
background: color-mix(in srgb, var(--ctp-teal) 6%, var(--ctp-surface0));
|
||||
border-left: 2px solid var(--ctp-teal);
|
||||
font-family: var(--term-font-family);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
/* ── Docs / Files placeholder ──────────────────────────────── */
|
||||
.placeholder-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ctp-overlay0);
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Status bar ────────────────────────────────────────────── */
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
background: var(--ctp-crust);
|
||||
border-top: 1px solid var(--ctp-surface0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0 0.75rem;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.status-segment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.status-dot-sm {
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot-sm.green { background: var(--ctp-green); }
|
||||
.status-dot-sm.gray { background: var(--ctp-overlay0); }
|
||||
.status-dot-sm.orange { background: var(--ctp-peach); }
|
||||
|
||||
.status-bar-spacer { flex: 1; }
|
||||
|
||||
.status-value {
|
||||
color: var(--ctp-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
12
ui-electrobun/src/mainview/index.html
Normal file
12
ui-electrobun/src/mainview/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Svelte App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
9
ui-electrobun/src/mainview/main.ts
Normal file
9
ui-electrobun/src/mainview/main.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import "./app.css";
|
||||
import App from "./App.svelte";
|
||||
import { mount } from "svelte";
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById("app")!,
|
||||
});
|
||||
|
||||
export default app;
|
||||
Loading…
Add table
Add a link
Reference in a new issue