add grok bot flow
This commit is contained in:
王性驊
parent
93a1335462
commit
63c73fa03b
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
|
@ -0,0 +1,322 @@
|
||||||
|
const $ = (id) => document.getElementById(id);
|
||||||
|
const state = {
|
||||||
|
sessionId: localStorage.getItem("grokboy.session") || "",
|
||||||
|
sessions: [],
|
||||||
|
running: false,
|
||||||
|
source: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
function tokenHeaders() {
|
||||||
|
const token = localStorage.getItem("grokboy.token") || "";
|
||||||
|
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function api(path, opts = {}) {
|
||||||
|
const res = await fetch(path, {
|
||||||
|
...opts,
|
||||||
|
headers: {
|
||||||
|
"content-type": "application/json",
|
||||||
|
...tokenHeaders(),
|
||||||
|
...(opts.headers || {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const raw = await res.text();
|
||||||
|
let data = null;
|
||||||
|
try {
|
||||||
|
data = raw ? JSON.parse(raw) : null;
|
||||||
|
} catch {
|
||||||
|
data = null;
|
||||||
|
}
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error((data && data.error) || raw || String(res.status));
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(text) {
|
||||||
|
$("header-status").textContent = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSessions() {
|
||||||
|
const list = $("session-list");
|
||||||
|
list.innerHTML = "";
|
||||||
|
for (const s of state.sessions) {
|
||||||
|
const btn = document.createElement("button");
|
||||||
|
btn.className = "session-item" + (s.id === state.sessionId ? " active" : "");
|
||||||
|
btn.innerHTML = `<strong>${s.running ? "進行中" : "對話"}</strong><small>${escapeHtml(s.preview || s.id)}</small>`;
|
||||||
|
btn.onclick = () => openSession(s.id);
|
||||||
|
list.appendChild(btn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(s) {
|
||||||
|
return String(s)
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">");
|
||||||
|
}
|
||||||
|
|
||||||
|
function addBubble(role, content) {
|
||||||
|
const row = document.createElement("div");
|
||||||
|
row.className = `row ${role}`;
|
||||||
|
row.innerHTML = `<div class="bubble">${escapeHtml(content)}</div>`;
|
||||||
|
$("transcript").appendChild(row);
|
||||||
|
$("transcript").scrollTop = $("transcript").scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addActivity(text) {
|
||||||
|
const el = document.createElement("div");
|
||||||
|
el.className = "activity";
|
||||||
|
el.textContent = text;
|
||||||
|
$("transcript").appendChild(el);
|
||||||
|
$("transcript").scrollTop = $("transcript").scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showTyping(on) {
|
||||||
|
$("transcript").querySelector(".typing")?.remove();
|
||||||
|
if (!on) return;
|
||||||
|
const el = document.createElement("div");
|
||||||
|
el.className = "typing";
|
||||||
|
el.innerHTML = "<i></i><i></i><i></i>";
|
||||||
|
$("transcript").appendChild(el);
|
||||||
|
$("transcript").scrollTop = $("transcript").scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderQuestion(q) {
|
||||||
|
const card = $("question-card");
|
||||||
|
if (!q) {
|
||||||
|
card.classList.add("hidden");
|
||||||
|
card.innerHTML = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const prompt = q.question || q.reason || "需要你的回覆";
|
||||||
|
const options = (q.options || []).map((o) => (typeof o === "string" ? o : o.label || o.value)).filter(Boolean);
|
||||||
|
card.classList.remove("hidden");
|
||||||
|
card.innerHTML = `<p>${escapeHtml(prompt)}</p>` + (options.length
|
||||||
|
? `<div class="options">${options.map((o) => `<button type="button" data-answer="${escapeHtml(o)}">${escapeHtml(o)}</button>`).join("")}</div>`
|
||||||
|
: "");
|
||||||
|
card.querySelectorAll("button").forEach((b) => {
|
||||||
|
b.onclick = () => send(b.dataset.answer);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPlan(plan) {
|
||||||
|
if (!plan || !plan.length) return;
|
||||||
|
const el = document.createElement("div");
|
||||||
|
el.className = "plan";
|
||||||
|
el.innerHTML = "<strong>計畫</strong><ol>" + plan.map((step) => {
|
||||||
|
const text = step.step || step;
|
||||||
|
const status = step.status || "";
|
||||||
|
return `<li class="${status}">${escapeHtml(text)}</li>`;
|
||||||
|
}).join("") + "</ol>";
|
||||||
|
$("transcript").appendChild(el);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadSessions() {
|
||||||
|
const data = await api("/api/sessions");
|
||||||
|
state.sessions = data.sessions || [];
|
||||||
|
renderSessions();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openSession(id) {
|
||||||
|
state.sessionId = id;
|
||||||
|
localStorage.setItem("grokboy.session", id);
|
||||||
|
renderSessions();
|
||||||
|
closeSidebar();
|
||||||
|
const data = await api(`/api/sessions/${id}`);
|
||||||
|
$("transcript").innerHTML = "";
|
||||||
|
for (const item of data.transcript || []) addBubble(item.role, item.content);
|
||||||
|
renderPlan(data.plan);
|
||||||
|
renderQuestion(data.pending_question);
|
||||||
|
state.running = !!data.running;
|
||||||
|
$("stop-btn").classList.toggle("hidden", !state.running);
|
||||||
|
showTyping(state.running);
|
||||||
|
setStatus(state.running ? "工作中" : data.last_verdict || "準備好了");
|
||||||
|
listen(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function listen(id) {
|
||||||
|
state.source?.close();
|
||||||
|
clearInterval(state.poll);
|
||||||
|
const src = new EventSource(`/api/sessions/${id}/events`);
|
||||||
|
state.source = src;
|
||||||
|
src.onmessage = (ev) => {
|
||||||
|
let data;
|
||||||
|
try { data = JSON.parse(ev.data); } catch { return; }
|
||||||
|
handleEvent(data);
|
||||||
|
};
|
||||||
|
state.poll = setInterval(async () => {
|
||||||
|
if (!state.running) return;
|
||||||
|
try {
|
||||||
|
const data = await api(`/api/sessions/${id}`);
|
||||||
|
if (data.running !== state.running && !data.running) {
|
||||||
|
handleEvent({
|
||||||
|
type: "turn_ended",
|
||||||
|
verdict: data.last_verdict,
|
||||||
|
pending_question: data.pending_question,
|
||||||
|
plan: data.plan,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
/* keep polling */
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEvent(data) {
|
||||||
|
switch (data.type) {
|
||||||
|
case "user":
|
||||||
|
addBubble("user", data.content);
|
||||||
|
break;
|
||||||
|
case "message":
|
||||||
|
showTyping(false);
|
||||||
|
addBubble("assistant", data.content);
|
||||||
|
break;
|
||||||
|
case "status":
|
||||||
|
case "progress":
|
||||||
|
addActivity(data.message);
|
||||||
|
break;
|
||||||
|
case "tool_started":
|
||||||
|
addActivity(`〔開始〕${data.name}`);
|
||||||
|
showTyping(true);
|
||||||
|
break;
|
||||||
|
case "tool_finished":
|
||||||
|
addActivity(`〔${data.success ? "完成" : "失敗"}〕${data.name}`);
|
||||||
|
break;
|
||||||
|
case "waiting":
|
||||||
|
setStatus(data.stage || "等待中");
|
||||||
|
break;
|
||||||
|
case "question":
|
||||||
|
renderQuestion(data.question);
|
||||||
|
showTyping(false);
|
||||||
|
break;
|
||||||
|
case "plan_updated":
|
||||||
|
renderPlan(data.plan);
|
||||||
|
break;
|
||||||
|
case "turn_ended":
|
||||||
|
state.running = false;
|
||||||
|
$("stop-btn").classList.add("hidden");
|
||||||
|
showTyping(false);
|
||||||
|
renderQuestion(data.pending_question);
|
||||||
|
setStatus(data.verdict || "完成");
|
||||||
|
loadSessions();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function send(text) {
|
||||||
|
const value = (text ?? $("prompt").value).trim();
|
||||||
|
if (!value) return;
|
||||||
|
if (!state.sessionId) {
|
||||||
|
const created = await api("/api/sessions", { method: "POST", body: "{}" });
|
||||||
|
state.sessionId = created.id;
|
||||||
|
localStorage.setItem("grokboy.session", created.id);
|
||||||
|
await loadSessions();
|
||||||
|
listen(created.id);
|
||||||
|
}
|
||||||
|
$("prompt").value = "";
|
||||||
|
resizePrompt();
|
||||||
|
$("send-btn").disabled = true;
|
||||||
|
addBubble("user", value);
|
||||||
|
renderQuestion(null);
|
||||||
|
state.running = true;
|
||||||
|
$("stop-btn").classList.remove("hidden");
|
||||||
|
showTyping(true);
|
||||||
|
setStatus("工作中");
|
||||||
|
try {
|
||||||
|
await api(`/api/sessions/${state.sessionId}/messages`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ text: value }),
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
state.running = false;
|
||||||
|
$("stop-btn").classList.add("hidden");
|
||||||
|
showTyping(false);
|
||||||
|
setStatus(String(err.message || err));
|
||||||
|
addActivity("送出失敗：" + (err.message || err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function newChat() {
|
||||||
|
const created = await api("/api/sessions", { method: "POST", body: "{}" });
|
||||||
|
await loadSessions();
|
||||||
|
await openSession(created.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizePrompt() {
|
||||||
|
const el = $("prompt");
|
||||||
|
el.style.height = "auto";
|
||||||
|
el.style.height = Math.min(el.scrollHeight, window.innerHeight * 0.3) + "px";
|
||||||
|
$("send-btn").disabled = !el.value.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSidebar() {
|
||||||
|
$("sidebar").classList.add("open");
|
||||||
|
$("sidebar-backdrop").classList.remove("hidden");
|
||||||
|
}
|
||||||
|
function closeSidebar() {
|
||||||
|
$("sidebar").classList.remove("open");
|
||||||
|
$("sidebar-backdrop").classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openComputer() {
|
||||||
|
$("computer-pane").hidden = false;
|
||||||
|
$("tab-computer").classList.add("active");
|
||||||
|
$("tab-chat").classList.remove("active");
|
||||||
|
$("computer-status").textContent = "正在啟動我的電腦…";
|
||||||
|
try {
|
||||||
|
const data = await api("/api/computer", { method: "POST", body: "{}" });
|
||||||
|
$("computer-frame").src = data.viewer_url;
|
||||||
|
$("computer-status").textContent = data.ready ? "已連線同一台 Docker 桌面" : (data.error || "桌面啟動中");
|
||||||
|
} catch (err) {
|
||||||
|
$("computer-status").textContent = String(err.message || err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function closeComputer() {
|
||||||
|
$("computer-pane").hidden = true;
|
||||||
|
$("tab-chat").classList.add("active");
|
||||||
|
$("tab-computer").classList.remove("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
$("composer").addEventListener("submit", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
send();
|
||||||
|
});
|
||||||
|
$("prompt").addEventListener("input", resizePrompt);
|
||||||
|
$("prompt").addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey && window.matchMedia("(min-width: 861px)").matches) {
|
||||||
|
e.preventDefault();
|
||||||
|
send();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("new-chat").onclick = () => newChat();
|
||||||
|
$("menu-btn").onclick = openSidebar;
|
||||||
|
$("sidebar-backdrop").onclick = closeSidebar;
|
||||||
|
$("computer-btn").onclick = openComputer;
|
||||||
|
$("computer-close").onclick = closeComputer;
|
||||||
|
$("tab-chat").onclick = () => {
|
||||||
|
closeComputer();
|
||||||
|
closeSidebar();
|
||||||
|
};
|
||||||
|
$("tab-computer").onclick = openComputer;
|
||||||
|
$("stop-btn").onclick = async () => {
|
||||||
|
if (state.sessionId) await api(`/api/sessions/${state.sessionId}/stop`, { method: "POST", body: "{}" });
|
||||||
|
};
|
||||||
|
|
||||||
|
if ("serviceWorker" in navigator) {
|
||||||
|
navigator.serviceWorker.register("/sw.js").catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const health = await api("/api/health");
|
||||||
|
$("model-label").textContent = health.model || "grok-4.6";
|
||||||
|
await loadSessions();
|
||||||
|
if (state.sessionId) await openSession(state.sessionId);
|
||||||
|
else if (state.sessions[0]) await openSession(state.sessions[0].id);
|
||||||
|
} catch (err) {
|
||||||
|
setStatus("無法連線：" + err.message);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<rect width="64" height="64" rx="14" fill="#181818"/>
|
||||||
|
<rect x="8" y="8" width="48" height="48" rx="12" fill="#c7ec6b"/>
|
||||||
|
<text x="32" y="42" text-anchor="middle" font-family="-apple-system,system-ui,sans-serif" font-size="28" font-weight="700" fill="#141414">G</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 341 B |
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-Hant" data-theme="cursor-dark" style="color-scheme: dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" />
|
||||||
|
<meta name="theme-color" content="#141414" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="GrokBoy" />
|
||||||
|
<title>GrokBoy</title>
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest" />
|
||||||
|
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
||||||
|
<link rel="apple-touch-icon" href="/icon.svg" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "GrokBoy",
|
||||||
|
"short_name": "GrokBoy",
|
||||||
|
"description": "Local Grok Bot-style agent",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"background_color": "#141414",
|
||||||
|
"theme_color": "#141414",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icon.svg",
|
||||||
|
"sizes": "any",
|
||||||
|
"type": "image/svg+xml",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "grokboy-web",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc --noEmit && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"typescript": "^5.6.3",
|
||||||
|
"vite": "^5.4.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<rect width="64" height="64" rx="14" fill="#181818"/>
|
||||||
|
<rect x="8" y="8" width="48" height="48" rx="12" fill="#c7ec6b"/>
|
||||||
|
<text x="32" y="42" text-anchor="middle" font-family="-apple-system,system-ui,sans-serif" font-size="28" font-weight="700" fill="#141414">G</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 341 B |
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"name": "GrokBoy",
|
||||||
|
"short_name": "GrokBoy",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"background_color": "#141414",
|
||||||
|
"theme_color": "#141414",
|
||||||
|
"icons": [{ "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
const CACHE = "grokboy-web-v2";
|
||||||
|
self.addEventListener("install", () => self.skipWaiting());
|
||||||
|
self.addEventListener("activate", (event) => {
|
||||||
|
event.waitUntil(caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))));
|
||||||
|
self.clients.claim();
|
||||||
|
});
|
||||||
|
self.addEventListener("fetch", (event) => {
|
||||||
|
const url = new URL(event.request.url);
|
||||||
|
if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/novnc") || event.request.method !== "GET") return;
|
||||||
|
event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,455 @@
|
||||||
|
import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { api, type AgentDetail, type AgentRow, type TeamEvent, type TranscriptItem } from "./api";
|
||||||
|
import { SandButton, SandIcon, SandIconButton } from "./grok/sand-kit-primitives";
|
||||||
|
import { RUNTIME_THEME_CLASS } from "./grok/runtime-theme-token-installer";
|
||||||
|
|
||||||
|
const PROMPT_ATTACH_CLASS = "sand-prompt-attach sand-2lah0s sand-i07v4r sand-uo9n5k sand-1vhj7fz sand-4b2ntj sand-1dsx48b sand-1hc1fzr sand-1lfpgzf sand-1ypdohk";
|
||||||
|
const PROMPT_SEND_CLASS = "sand-prompt-send sand-2lah0s sand-mak4db sand-1tc92z3 sand-1hc1fzr sand-1p5hr7d sand-1lfpgzf sand-1ypdohk";
|
||||||
|
const COMPUTER_HEADER_CLASS = "sand-chat-header__computer";
|
||||||
|
const DETAILS_ID = "sand-conversation-details";
|
||||||
|
|
||||||
|
type Activity = { id: string; text: string };
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
const [agents, setAgents] = useState<AgentRow[]>([]);
|
||||||
|
const [activeId, setActiveId] = useState(localStorage.getItem("grokboy.agent") || "");
|
||||||
|
const [detail, setDetail] = useState<AgentDetail | null>(null);
|
||||||
|
const [transcript, setTranscript] = useState<TranscriptItem[]>([]);
|
||||||
|
const [activity, setActivity] = useState<Activity[]>([]);
|
||||||
|
const [question, setQuestion] = useState<{ prompt: string; options: string[] } | null>(null);
|
||||||
|
const [status, setStatus] = useState("Ready");
|
||||||
|
const [draft, setDraft] = useState("");
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
const [computerOpen, setComputerOpen] = useState(false);
|
||||||
|
const [computerUrl, setComputerUrl] = useState("");
|
||||||
|
const [computerStatus, setComputerStatus] = useState("");
|
||||||
|
const [typing, setTyping] = useState(false);
|
||||||
|
const [showCreate, setShowCreate] = useState(false);
|
||||||
|
const [newName, setNewName] = useState("");
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [searchOpen, setSearchOpen] = useState(false);
|
||||||
|
const searchRef = useRef<HTMLInputElement>(null);
|
||||||
|
const scroller = useRef<HTMLDivElement>(null);
|
||||||
|
const activeIdRef = useRef(activeId);
|
||||||
|
activeIdRef.current = activeId;
|
||||||
|
|
||||||
|
const active = useMemo(
|
||||||
|
() => agents.find((a) => a.id === activeId || a.name === activeId) || null,
|
||||||
|
[agents, activeId]
|
||||||
|
);
|
||||||
|
|
||||||
|
const visibleAgents = useMemo(() => {
|
||||||
|
const needle = query.trim().toLowerCase();
|
||||||
|
if (!needle) return agents;
|
||||||
|
return agents.filter(
|
||||||
|
(agent) =>
|
||||||
|
agent.name.toLowerCase().includes(needle) ||
|
||||||
|
(agent.preview || "").toLowerCase().includes(needle)
|
||||||
|
);
|
||||||
|
}, [agents, query]);
|
||||||
|
|
||||||
|
const loadAgents = useCallback(async () => {
|
||||||
|
const data = await api.agents();
|
||||||
|
setAgents(data.agents || []);
|
||||||
|
return data.agents || [];
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const openAgent = useCallback(async (id: string) => {
|
||||||
|
setActiveId(id);
|
||||||
|
localStorage.setItem("grokboy.agent", id);
|
||||||
|
setSidebarOpen(false);
|
||||||
|
setTyping(false);
|
||||||
|
setStatus("Loading");
|
||||||
|
try {
|
||||||
|
const data = await api.agent(id);
|
||||||
|
setDetail(data);
|
||||||
|
setTranscript(data.transcript || []);
|
||||||
|
setQuestion(null);
|
||||||
|
setActivity([]);
|
||||||
|
setStatus(data.running ? "Working" : "Ready");
|
||||||
|
} catch (err) {
|
||||||
|
setDetail(null);
|
||||||
|
setTranscript([]);
|
||||||
|
setStatus(err instanceof Error ? err.message : String(err));
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadAgents()
|
||||||
|
.then((list) => {
|
||||||
|
const remembered = localStorage.getItem("grokboy.agent");
|
||||||
|
const pick = list.find((a) => a.id === remembered || a.name === remembered) || list[0];
|
||||||
|
if (pick) return openAgent(pick.id);
|
||||||
|
})
|
||||||
|
.catch((err) => setStatus(String(err.message)));
|
||||||
|
}, [loadAgents, openAgent]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!activeId) return;
|
||||||
|
const sourceAgent = activeId;
|
||||||
|
const source = new EventSource(`/api/agents/${encodeURIComponent(sourceAgent)}/events`);
|
||||||
|
source.onmessage = (ev) => {
|
||||||
|
if (activeIdRef.current !== sourceAgent) return;
|
||||||
|
let payload: { events?: TeamEvent[] };
|
||||||
|
try {
|
||||||
|
payload = JSON.parse(ev.data);
|
||||||
|
} catch {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (const event of payload.events || []) handleEvent(event);
|
||||||
|
};
|
||||||
|
const poll = window.setInterval(() => {
|
||||||
|
loadAgents().catch(() => undefined);
|
||||||
|
}, 4000);
|
||||||
|
return () => {
|
||||||
|
source.close();
|
||||||
|
window.clearInterval(poll);
|
||||||
|
};
|
||||||
|
}, [activeId, loadAgents]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
scroller.current?.scrollTo(0, scroller.current.scrollHeight);
|
||||||
|
}, [transcript, activity, question, typing]);
|
||||||
|
|
||||||
|
function handleEvent(event: TeamEvent) {
|
||||||
|
const p = event.payload || {};
|
||||||
|
switch (event.kind) {
|
||||||
|
case "reply":
|
||||||
|
if (typeof p.message === "string" && p.message.trim()) {
|
||||||
|
setTranscript((cur) => [...cur, { role: "assistant", content: p.message as string }]);
|
||||||
|
}
|
||||||
|
setTyping(false);
|
||||||
|
setStatus(typeof p.verdict === "string" ? String(p.verdict) : "Ready");
|
||||||
|
setQuestion(null);
|
||||||
|
void loadAgents();
|
||||||
|
break;
|
||||||
|
case "runtime": {
|
||||||
|
const type = String(p.type || "");
|
||||||
|
if (type === "message" && typeof p.content === "string") {
|
||||||
|
const content = p.content;
|
||||||
|
setTranscript((cur) => [...cur, { role: "assistant", content }]);
|
||||||
|
} else if (type === "tool_started") {
|
||||||
|
setTyping(true);
|
||||||
|
pushActivity(`Started ${p.name}`);
|
||||||
|
} else if (type === "tool_finished") {
|
||||||
|
pushActivity(`${p.success ? "Done" : "Failed"} ${p.name}`);
|
||||||
|
} else if (type === "progress" || type === "status") {
|
||||||
|
pushActivity(String(p.message || type));
|
||||||
|
} else if (type === "question") {
|
||||||
|
const q = (p.question || {}) as { question?: string; reason?: string; options?: unknown[] };
|
||||||
|
setTyping(false);
|
||||||
|
setQuestion({
|
||||||
|
prompt: q.question || q.reason || "Needs a reply",
|
||||||
|
options: (q.options || [])
|
||||||
|
.map((o) =>
|
||||||
|
typeof o === "string"
|
||||||
|
? o
|
||||||
|
: String((o as { label?: string; value?: string }).label || (o as { value?: string }).value || "")
|
||||||
|
)
|
||||||
|
.filter(Boolean),
|
||||||
|
});
|
||||||
|
} else if (type === "waiting") {
|
||||||
|
setStatus(String(p.stage || "Waiting"));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "error":
|
||||||
|
setTyping(false);
|
||||||
|
pushActivity(String(p.message || JSON.stringify(p)));
|
||||||
|
setStatus("Failed");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function pushActivity(text: string) {
|
||||||
|
setActivity((cur) => [...cur.slice(-7), { id: `${Date.now()}-${text.slice(0, 16)}`, text }]);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onNewChat() {
|
||||||
|
setShowCreate(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOpenSearch() {
|
||||||
|
setSearchOpen(true);
|
||||||
|
queueMicrotask(() => searchRef.current?.focus());
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onCreate(ev?: FormEvent) {
|
||||||
|
ev?.preventDefault();
|
||||||
|
const name = newName.trim();
|
||||||
|
if (!name) return;
|
||||||
|
try {
|
||||||
|
const created = await api.createAgent(name);
|
||||||
|
setNewName("");
|
||||||
|
setShowCreate(false);
|
||||||
|
await loadAgents();
|
||||||
|
await openAgent(created.id || created.name);
|
||||||
|
} catch (err) {
|
||||||
|
setStatus(err instanceof Error ? err.message : String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSend(text?: string, ev?: FormEvent) {
|
||||||
|
ev?.preventDefault();
|
||||||
|
const value = (text ?? draft).trim();
|
||||||
|
if (!value) return;
|
||||||
|
let id = activeId;
|
||||||
|
if (!id) {
|
||||||
|
const created = await api.createAgent(`agent_${Date.now().toString(36)}`);
|
||||||
|
id = created.id;
|
||||||
|
await loadAgents();
|
||||||
|
setActiveId(id);
|
||||||
|
localStorage.setItem("grokboy.agent", id);
|
||||||
|
}
|
||||||
|
setDraft("");
|
||||||
|
setTranscript((cur) => [...cur, { role: "user", content: value }]);
|
||||||
|
setQuestion(null);
|
||||||
|
setTyping(true);
|
||||||
|
setStatus("Working");
|
||||||
|
try {
|
||||||
|
await api.send(id, value);
|
||||||
|
} catch (err) {
|
||||||
|
setTyping(false);
|
||||||
|
setStatus(err instanceof Error ? err.message : String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onStop() {
|
||||||
|
const id = activeId;
|
||||||
|
if (!id) return;
|
||||||
|
try {
|
||||||
|
await api.stop(id);
|
||||||
|
setTyping(false);
|
||||||
|
setStatus("Stopped");
|
||||||
|
setDetail((current) => (current ? { ...current, running: false } : current));
|
||||||
|
setAgents((current) => current.map((agent) => (agent.id === id ? { ...agent, running: false } : agent)));
|
||||||
|
} catch (err) {
|
||||||
|
setStatus(err instanceof Error ? err.message : String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onComputer() {
|
||||||
|
if (computerOpen) {
|
||||||
|
setComputerOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setComputerOpen(true);
|
||||||
|
setComputerStatus("Starting Grok Bot's Computer…");
|
||||||
|
try {
|
||||||
|
const data = await api.computer();
|
||||||
|
setComputerUrl(data.viewer_url);
|
||||||
|
setComputerStatus(data.ready ? "Grok Bot's Computer" : data.error || "Starting desktop…");
|
||||||
|
} catch (err) {
|
||||||
|
setComputerStatus(err instanceof Error ? err.message : String(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasPayload = draft.trim().length > 0;
|
||||||
|
const working = Boolean(typing || detail?.running || active?.running || status === "Working");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sand-shell" data-runtime="browser" data-theme={RUNTIME_THEME_CLASS.dark}>
|
||||||
|
<aside aria-label="Agents" className={`sand-agents-sidebar${sidebarOpen ? " is-open" : ""}`}>
|
||||||
|
<header className="sand-agents-sidebar__header">
|
||||||
|
<div className="sand-agents-sidebar__new-actions">
|
||||||
|
<SandIconButton aria-label="New" className="sand-agents-sidebar__new" icon="plus" label="New" onClick={() => void onNewChat()} size="sm" title="New chat" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<SandButton aria-label="Search" className="sand-agents-sidebar__search" onClick={onOpenSearch} size="md" variant="secondary">
|
||||||
|
<SandIcon name="search" size="md" />
|
||||||
|
Search
|
||||||
|
</SandButton>
|
||||||
|
{searchOpen ? (
|
||||||
|
<input
|
||||||
|
ref={searchRef}
|
||||||
|
className="sand-agents-search-field"
|
||||||
|
placeholder="Search agents"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
onBlur={() => {
|
||||||
|
if (!query.trim()) setSearchOpen(false);
|
||||||
|
}}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
setQuery("");
|
||||||
|
setSearchOpen(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{showCreate ? (
|
||||||
|
<form className="sand-agents-create" onSubmit={(e) => void onCreate(e)}>
|
||||||
|
<input autoFocus value={newName} placeholder="Agent name" onChange={(e) => setNewName(e.target.value)} />
|
||||||
|
</form>
|
||||||
|
) : null}
|
||||||
|
<nav aria-label="Agent list" className="sand-agents-list" role="region" tabIndex={0}>
|
||||||
|
<div className="sand-agents-section">
|
||||||
|
<button type="button" className="sand-agents-section__header" aria-expanded="true">
|
||||||
|
<span>Agents</span>
|
||||||
|
<span aria-hidden="true" data-icon-name="chevron-right" data-size="sm" />
|
||||||
|
</button>
|
||||||
|
<div className="sand-agents-section__rows sand-agents-list__rows">
|
||||||
|
{visibleAgents.length === 0 ? <span className="sand-agents-section__empty">{agents.length === 0 ? "No agents yet" : "No matching agents"}</span> : null}
|
||||||
|
{visibleAgents.map((agent) => (
|
||||||
|
<button
|
||||||
|
key={agent.id}
|
||||||
|
type="button"
|
||||||
|
aria-label={agent.name}
|
||||||
|
aria-current={agent.id === active?.id ? "page" : undefined}
|
||||||
|
className="sand-agent-item"
|
||||||
|
data-active={agent.id === active?.id || undefined}
|
||||||
|
onClick={() => void openAgent(agent.id)}
|
||||||
|
>
|
||||||
|
<span className="sand-agent-item__avatar">{agent.name.slice(0, 1).toUpperCase()}</span>
|
||||||
|
<span className="sand-agent-item__body">
|
||||||
|
<strong className="sand-agent-item__name">{agent.name}</strong>
|
||||||
|
<small className="sand-agent-item__preview">{agent.running ? "Working" : agent.preview || "New chat"}</small>
|
||||||
|
</span>
|
||||||
|
<span className="sand-agent-item__trailing">
|
||||||
|
<span className={`sand-kit-status-dot ${agent.running ? "sand-1rm5x0x" : ""}`} data-status={agent.running ? "working" : "idle"} />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div className="sand-agents-sidebar__footer">
|
||||||
|
<div className="sand-agents-sidebar__account">
|
||||||
|
<button type="button" aria-label="GrokBoy">
|
||||||
|
<span>G</span>
|
||||||
|
<span>
|
||||||
|
<strong>GrokBoy</strong>
|
||||||
|
<small>local</small>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main className="sand-chat-stage">
|
||||||
|
<div aria-labelledby="sand-conversation-heading" className="sand-chat-header" role="group">
|
||||||
|
<button className="sand-chat-header__menu" type="button" aria-label="Agents" onClick={() => setSidebarOpen(true)}>☰</button>
|
||||||
|
<div className="sand-chat-header__identity">
|
||||||
|
<span className="sand-chat-header__avatar">{(active?.name || "G").slice(0, 1).toUpperCase()}</span>
|
||||||
|
<span id="sand-conversation-heading">{active?.name || "Select an agent"}</span>
|
||||||
|
{detail?.running || status === "Working" ? <small>Working</small> : null}
|
||||||
|
</div>
|
||||||
|
<div className="sand-chat-header__controls">
|
||||||
|
{working ? (
|
||||||
|
<SandIconButton
|
||||||
|
aria-label="Stop"
|
||||||
|
className="sand-chat-header__stop"
|
||||||
|
icon="stop"
|
||||||
|
label="Stop"
|
||||||
|
onClick={() => void onStop()}
|
||||||
|
size="md"
|
||||||
|
title="Stop"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<SandIconButton
|
||||||
|
aria-controls={DETAILS_ID}
|
||||||
|
aria-expanded={computerOpen}
|
||||||
|
className={`${computerOpen ? "sand-1qfxjfa sand-11n3mlv sand-18ti0zn sand-hn7xur " : ""}${COMPUTER_HEADER_CLASS}`}
|
||||||
|
data-computer-active={computerOpen || undefined}
|
||||||
|
icon="computer"
|
||||||
|
label={computerOpen ? "Grok Bot's Computer, in use" : "Grok Bot's Computer"}
|
||||||
|
onClick={() => void onComputer()}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sand-virtual-transcript" ref={scroller}>
|
||||||
|
{transcript.map((item, i) => (
|
||||||
|
<div className={`sand-transcript-row${item.role === "user" ? " sand-transcript-row--user" : ""}`} key={`${item.role}-${i}`}>
|
||||||
|
<div className={`sand-message${item.role === "user" ? "" : " sand-1g0q52m"}`}>{item.content}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{activity.map((item) => (
|
||||||
|
<div className="sand-activity" key={item.id}>{item.text}</div>
|
||||||
|
))}
|
||||||
|
{typing ? <div className="sand-typing-indicator" aria-hidden="true"><span /><span /><span /></div> : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{question ? (
|
||||||
|
<div className="sand-question">
|
||||||
|
<p>{question.prompt}</p>
|
||||||
|
<div className="sand-question__options">
|
||||||
|
{question.options.map((option) => (
|
||||||
|
<button key={option} type="button" onClick={() => void onSend(option)}>{option}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="sand-chat-input-dock">
|
||||||
|
<form className="sand-prompt-form" onSubmit={(e) => void onSend(undefined, e)}>
|
||||||
|
<div className="sand-prompt-shell" data-expanded={hasPayload || undefined}>
|
||||||
|
<textarea
|
||||||
|
className="sand-prompt-field"
|
||||||
|
rows={1}
|
||||||
|
value={draft}
|
||||||
|
placeholder="Ask anything"
|
||||||
|
onChange={(e) => setDraft(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey && window.matchMedia("(min-width: 861px)").matches) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!working) void onSend();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="sand-prompt-actions-row">
|
||||||
|
<SandIconButton aria-label="Attach file" className={PROMPT_ATTACH_CLASS} disabled icon="plus" shape="circle" size="lg" type="button" variant="default" />
|
||||||
|
<span className="sand-prompt-actions-trailing sand-prompt-cta-cluster sand-78zum5 sand-6s0dn4 sand-2lah0s">
|
||||||
|
{working ? (
|
||||||
|
<button aria-label="Stop" className={PROMPT_SEND_CLASS} type="button" onClick={() => void onStop()}>
|
||||||
|
<span className="sand-1n2onr6 sand-1kky2od sand-lup9mm">
|
||||||
|
<SandIcon name="stop" size="sm" variant="filled" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
) : hasPayload ? (
|
||||||
|
<button aria-label="Send message" className={PROMPT_SEND_CLASS} disabled={!hasPayload} type="submit">
|
||||||
|
<span className="sand-1n2onr6 sand-1kky2od sand-lup9mm">
|
||||||
|
<SandIcon name="arrow-up" size="sm" variant="filled" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<SandIconButton aria-label="Start voice input" className="sand-prompt-mic sand-2lah0s sand-jbqb8w sand-uo9n5k sand-19aaqeu sand-1dsx48b sand-1hc1fzr sand-1lfpgzf sand-19991ni sand-13dflua sand-12w9bfk sand-b51amx" disabled icon="mic" shape="circle" size="lg" type="button" variant="default" />
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<aside
|
||||||
|
aria-hidden={!computerOpen || undefined}
|
||||||
|
aria-label="Conversation details"
|
||||||
|
className={`sand-info-pane sand--default-marker sand-1n2onr6 sand-1k3v4rp sand-1ms6mhf sand-5yr21d sand-2lwn1j sand-b3r6kr sand-lvsv26 sand-qwupev sand-9kvfbb${computerOpen ? " sand-9c3od3 sand-1uxagwj" : " sand-nalus7"}`}
|
||||||
|
data-open={computerOpen || undefined}
|
||||||
|
hidden={!computerOpen}
|
||||||
|
id={DETAILS_ID}
|
||||||
|
>
|
||||||
|
<div className="sand-info-pane__inner sand-78zum5 sand-dt5ytf sand-9c3od3 sand-1uxagwj sand-5yr21d sand-2lwn1j sand-1ua6jya sand-qwldcu sand-9kvfbb sand-1hc1fzr">
|
||||||
|
<header className="sand-info-pane__top sand-1n2onr6 sand-78zum5 sand-6s0dn4 sand-1qughib sand-167g77z sand-1c4vz4f sand-2lah0s sand-dl72j9 sand-lvsv26 sand-xlogw sand-14kp3v7 sand-exx8yu sand-j9b1aj sand-18d9i69 sand-f18ygs">
|
||||||
|
<span aria-hidden="true" />
|
||||||
|
<SandIconButton aria-label="Close details" icon="close" onClick={() => setComputerOpen(false)} size="md" variant="ghost" />
|
||||||
|
</header>
|
||||||
|
<div className="sand-info-pane__vnc">
|
||||||
|
{computerUrl ? <iframe title="Grok Bot's Computer" src={computerUrl} allow="clipboard-read; clipboard-write" /> : null}
|
||||||
|
<p className="sand-info-pane__status">{computerStatus}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<nav className="sand-tabbar" aria-label="Main">
|
||||||
|
<button type="button" aria-current={!computerOpen} onClick={() => { setComputerOpen(false); setSidebarOpen(true); }}>Chat</button>
|
||||||
|
<button type="button" aria-current={computerOpen} onClick={() => void onComputer()}>Computer</button>
|
||||||
|
</nav>
|
||||||
|
<div className="sand-backdrop" hidden={!sidebarOpen} onClick={() => setSidebarOpen(false)} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
export type AgentRow = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
expertise?: string;
|
||||||
|
preview?: string;
|
||||||
|
running?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TranscriptItem = { role: "user" | "assistant"; content: string };
|
||||||
|
|
||||||
|
export type AgentDetail = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
expertise: string;
|
||||||
|
preview: string;
|
||||||
|
transcript: TranscriptItem[];
|
||||||
|
running: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TeamEvent = {
|
||||||
|
id: number;
|
||||||
|
kind: string;
|
||||||
|
task_id?: string | null;
|
||||||
|
payload: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||||
|
const res = await fetch(path, {
|
||||||
|
...init,
|
||||||
|
headers: { "content-type": "application/json", ...(init?.headers || {}) },
|
||||||
|
});
|
||||||
|
const raw = await res.text();
|
||||||
|
let data: unknown = null;
|
||||||
|
try {
|
||||||
|
data = raw ? JSON.parse(raw) : null;
|
||||||
|
} catch {
|
||||||
|
data = raw;
|
||||||
|
}
|
||||||
|
if (!res.ok) {
|
||||||
|
const err = data as { error?: string } | null;
|
||||||
|
throw new Error(err?.error || raw || String(res.status));
|
||||||
|
}
|
||||||
|
return data as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const api = {
|
||||||
|
health: () => request<{ ok: boolean; service: boolean; model: string }>("/api/health"),
|
||||||
|
agents: async () => {
|
||||||
|
const data = await request<AgentRow[] | { agents?: AgentRow[] }>("/api/agents");
|
||||||
|
const agents = Array.isArray(data) ? data : data.agents || [];
|
||||||
|
return { agents };
|
||||||
|
},
|
||||||
|
createAgent: (name: string) => request<AgentRow>("/api/agents", { method: "POST", body: JSON.stringify({ name }) }),
|
||||||
|
agent: (id: string) => request<AgentDetail>(`/api/agents/${id}`),
|
||||||
|
send: (id: string, text: string) =>
|
||||||
|
request<{ queued?: string }>(`/api/agents/${id}/messages`, { method: "POST", body: JSON.stringify({ text }) }),
|
||||||
|
stop: (id: string) => request(`/api/agents/${id}/stop`, { method: "POST", body: "{}" }),
|
||||||
|
computer: () =>
|
||||||
|
request<{ ready: boolean; viewer_url: string; error?: string }>("/api/computer", {
|
||||||
|
method: "POST",
|
||||||
|
body: "{}",
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,346 @@
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=5279500 */
|
||||||
|
@import url("./pdf-viewer.css");
|
||||||
|
::highlight(sand-find-match) { background-color: color-mix(in srgb, var(--cursor-warn, #ffc000) 30%, transparent); }
|
||||||
|
::highlight(sand-find-current) { background-color: var(--cursor-warn, #ffc000); color: #1f1f1f; }
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#L499 */
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2603896 (r0n separator) */
|
||||||
|
.sand-agents-sidebar { position: relative; min-height: 0; width: 100%; background: var(--cursor-bg-chrome); border-right: 1px solid var(--cursor-stroke-tertiary); container-name: sand-sidebar; container-type: inline-size; }
|
||||||
|
.sand-agents-sidebar__header { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--cursor-stroke-tertiary); }
|
||||||
|
.sand-agents-sidebar__header strong { font-size: var(--cursor-font-size-lg); }
|
||||||
|
.sand-agents-sidebar__new-actions { display: flex; gap: 3px; }
|
||||||
|
.sand-agents-sidebar__rail-new { display: flex; justify-content: center; width: 100%; padding: 8px 0; }
|
||||||
|
.sand-agents-sidebar__new-actions button,
|
||||||
|
.sand-agents-sidebar__rail-new button { flex: 0 0 auto; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2597261 (Wpn list carrier) */
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2579998 (yQ.listContent: 4px / 12px / 24px insets) */
|
||||||
|
.sand-agents-list { display: grid; flex: 1 1 auto; gap: var(--cursor-spacing-0-75); min-height: 0; overflow: auto; padding: 4px 12px 24px; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2566867 (Zbe section-header owner) */
|
||||||
|
.sand-agents-section { min-width: 0; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2566867 (Zbe section-header owner) */
|
||||||
|
.sand-agents-section__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 8px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color .12s ease;
|
||||||
|
}
|
||||||
|
.sand-agents-section__header:hover,
|
||||||
|
.sand-agents-section__header:focus-visible { background: var(--sand-fill-ghost-hover); outline: none; }
|
||||||
|
.sand-agents-section__header > span:first-child { min-width: 0; overflow: hidden; flex: 1 1 auto; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sand-agents-section__header > span:nth-child(2) { flex: 0 0 auto; margin-left: 6px; color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); }
|
||||||
|
.sand-agents-section__header > span:last-child { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--cursor-text-tertiary); transform: rotate(90deg); transition: opacity .12s ease, width .12s ease; }
|
||||||
|
.sand-agents-section__header > span:last-child { opacity: 0; width: 0; overflow: hidden; }
|
||||||
|
.sand-agents-section__header:hover > span:last-child,
|
||||||
|
.sand-agents-section__header:focus-visible > span:last-child { opacity: 1; width: 16px; }
|
||||||
|
.sand-agents-section__rows { min-width: 0; }
|
||||||
|
.sand-agents-section__empty { display: flex; align-items: center; min-height: 30px; padding: 8px; color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); }
|
||||||
|
.sand-agent-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; min-height: 58px; padding: 8px; color: var(--cursor-text-primary); text-align: left; background: transparent; border: 0; border-radius: var(--cursor-radius-lg); cursor: pointer; }
|
||||||
|
.sand-agent-item:hover { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-agent-item__avatar, .sand-chat-header__avatar { display: grid; place-items: center; color: var(--cursor-base); background: transparent; border-radius: var(--cursor-radius-lg); }
|
||||||
|
.sand-agent-item__avatar { width: 34px; height: 34px; }
|
||||||
|
.sand-agent-item__avatar .sand-agent-avatar, .sand-chat-header__avatar .sand-agent-avatar { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.sand-grok-bot-mark { position: relative; display: block; overflow: visible; color: var(--fg, var(--cursor-text-primary)); flex: 0 0 auto; }
|
||||||
|
.sand-shared-room-avatar { display: grid; place-items: center; color: var(--cursor-text-secondary); background: var(--cursor-bg-secondary); border-radius: var(--cursor-radius-full); }
|
||||||
|
.sand-group-avatar { position: relative; display: block; overflow: hidden; border-radius: var(--cursor-radius-lg); }
|
||||||
|
.sand-agent-item__body { display: grid; gap: 4px; min-width: 0; }
|
||||||
|
.sand-agent-item__name, .sand-agent-item__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sand-agent-item__name { font-size: var(--cursor-font-size-base); }
|
||||||
|
.sand-agent-item__preview { color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); font-weight: 400; }
|
||||||
|
.sand-agent-item__trailing { display: grid; justify-items: end; gap: 8px; color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); }
|
||||||
|
.sand-agent-item__activity { color: var(--sand-fill-accent); }
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=422439,423828,526294,490692,378915,407990,408356,406334,407287,406856 (Mac SHA256 5a25f934b7d3b7a55483cb5f2a1a05e21209aad0a09c82d07d2add054a6b7856) */
|
||||||
|
/* @evidence recovered/frontend/app/assets/index-lCyB53CO.css#byteOffset=478765,480339,594613,554945,430030,462492,462890,460684,461725,461254 (Windows SHA256 bc44533bcf9109b5596d57dda428370d9bdc4fba8201cd6ed4cb0d4abd795ddc) */
|
||||||
|
/* d0e stylex root/state tokens are retained by the immutable renderer CSS. These scoped declarations keep the exact utility behavior when the clean sidebar is mounted without the opaque aggregate stylesheet. */
|
||||||
|
.sand-agents-sidebar .sand-agent-item__corner-dot {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: var(--cursor-radius-full);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar .sand-kit-status-dot.sand-1rm5x0x { background-color: var(--sand-fill-success); }
|
||||||
|
.sand-agents-sidebar .sand-kit-status-dot.sand-mab63l { background-color: var(--sand-fill-warning); }
|
||||||
|
.sand-agents-sidebar .sand-kit-status-dot.sand-3zn3jg { background-color: var(--sand-fill-neutral); }
|
||||||
|
.sand-agents-sidebar .sand-kit-status-dot.sand-18he5m { background-color: var(--sand-fill-danger); }
|
||||||
|
.sand-agents-sidebar .sand-kit-status-dot.sand-2uzfp6 { background-color: var(--sand-fill-accent); }
|
||||||
|
.sand-agents-sidebar .sand-agent-item__corner-dot.sand-1jq8d06 { animation-duration: .13s; }
|
||||||
|
.sand-agents-sidebar .sand-agent-item__corner-dot.sand-1lfcbla { animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-agents-sidebar .sand-agent-item__corner-dot.sand-1aquc0h { animation-name: none; }
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar .sand-kit-status-dot { position: static; top: auto; left: auto; z-index: auto; width: 8px; height: 8px; border: 0; border-radius: var(--cursor-radius-full); transform: none; }
|
||||||
|
.sand-agents-section__reveal { outline: 1px solid var(--cursor-stroke-focused); outline-offset: -1px; background: var(--sand-fill-accent-subtle); }
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2603896 */
|
||||||
|
/* r0n: absolute edge handle, transparent surface, app-region exclusion, col-resize cursor, and touch-action cleanup. */
|
||||||
|
.sand-sidebar-resize-handle { position: absolute; top: 0; right: -6px; bottom: 0; width: 12px; background: transparent; cursor: col-resize; -webkit-app-region: no-drag; touch-action: none; }
|
||||||
|
|
||||||
|
@container sand-sidebar (max-width: 130px) {
|
||||||
|
.sand-agents-sidebar__header { justify-content: center; padding: 0; }
|
||||||
|
.sand-agents-sidebar__new-actions button:not(:last-child) { display: none; }
|
||||||
|
.sand-agent-item { grid-template-columns: 34px; justify-content: center; min-height: 44px; padding: 5px; }
|
||||||
|
.sand-agent-item__body, .sand-agent-item__trailing { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-chat-stage { display: flex; flex: 1 1 0; flex-direction: column; width: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--cursor-bg-editor); }
|
||||||
|
.sand-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 51px; padding: 0 16px; border-bottom: 1px solid var(--cursor-stroke-tertiary); }
|
||||||
|
.sand-chat-header > button { color: var(--cursor-text-secondary); background: transparent; border: 0; border-radius: var(--cursor-radius-lg); cursor: pointer; }
|
||||||
|
.sand-chat-header__identity { display: flex; align-items: center; gap: 9px; padding: 5px 7px; }
|
||||||
|
.sand-chat-header__avatar { width: 28px; height: 28px; }
|
||||||
|
.sand-chat-header__identity small { color: var(--cursor-text-tertiary); }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=4886695 (aSn controls: inline-flex, aligned, gap 2) */
|
||||||
|
.sand-chat-header__controls { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
|
||||||
|
|
||||||
|
.sand-virtual-transcript { flex: 1 1 0; min-height: 0; overflow: auto; padding: 28px max(30px, calc((100% - 690px) / 2)); outline: none; }
|
||||||
|
.sand-chat-stage > .sand-chat-transcript-loading { flex: 1 1 0; min-height: 0; overflow: auto; }
|
||||||
|
.sand-transcript-row { margin: 0 0 22px; }
|
||||||
|
/*
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#sha256=5a25f934b7d3b7a55483cb5f2a1a05e21209aad0a09c82d07d2add054a6b7856#byteOffset=502781 (.sand-1q8iv8g: agent max-width)
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#sha256=5a25f934b7d3b7a55483cb5f2a1a05e21209aad0a09c82d07d2add054a6b7856#byteOffset=406415 (.sand-1g0q52m: agent bubble fill)
|
||||||
|
* @evidence recovered/frontend/app/assets/index-lCyB53CO.css#sha256=bc44533bcf9109b5596d57dda428370d9bdc4fba8201cd6ed4cb0d4abd795ddc#byteOffset=568410 (.sand-1q8iv8g: Windows agent max-width)
|
||||||
|
* @evidence recovered/frontend/app/assets/index-lCyB53CO.css#sha256=bc44533bcf9109b5596d57dda428370d9bdc4fba8201cd6ed4cb0d4abd795ddc#byteOffset=460773 (.sand-1g0q52m: Windows agent bubble fill)
|
||||||
|
* The semantic selectors below retain the immutable geometry while using the
|
||||||
|
* recovery theme tokens so light and dark shells share the same layout.
|
||||||
|
*/
|
||||||
|
.sand-message {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: min(88%, 640px, calc(100% - 82px));
|
||||||
|
padding: 8px 12px;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--sand-fill-bubble-agent, var(--cursor-bg-secondary));
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
.sand-message-action-anchor { position: relative; width: fit-content; max-width: 100%; }
|
||||||
|
.sand-message-hover-actions { position: absolute; right: 0; bottom: -30px; z-index: 2; display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
|
||||||
|
.sand-message-action-anchor:hover .sand-message-hover-actions,
|
||||||
|
.sand-message-action-anchor:focus-within .sand-message-hover-actions,
|
||||||
|
.sand-message-action-anchor--menu-open .sand-message-hover-actions { opacity: 1; pointer-events: auto; }
|
||||||
|
.sand-message-hover-actions__button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 8px; color: #a9afa3; background: #20231f; border: 1px solid #343832; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11px; }
|
||||||
|
.sand-message-hover-actions__button:hover,
|
||||||
|
.sand-message-hover-actions__button:focus-visible { color: #eef3e7; background: #292d26; outline: 1px solid #a9c85d; outline-offset: 1px; }
|
||||||
|
.sand-message-prose { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; color: var(--cursor-text-primary); font-size: var(--cursor-font-size-base, 14px); line-height: 20px; }
|
||||||
|
.sand-message-prose p { margin: 0; line-height: inherit; white-space: pre-wrap; }
|
||||||
|
.sand-message-prose a { color: #bfe86b; text-decoration: underline; text-underline-offset: 2px; }
|
||||||
|
.sand-code-figure { position: relative; margin: 10px 0; }
|
||||||
|
.sand-code-scroll { max-width: 100%; overflow-x: auto; }
|
||||||
|
.sand-code-block { margin: 0; padding: 11px 12px; color: #d9ded4; background: #1a1d19; border: 1px solid #343932; border-radius: 8px; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||||
|
.sand-code-block code { white-space: pre; }
|
||||||
|
.sand-code-fallback { white-space: pre; }
|
||||||
|
/*
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=341113
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=341216
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=341330
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=341452
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=341494
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=341583
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=359319
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=359379
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=359452
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=359518
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=359583
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=359646
|
||||||
|
* Font faces and the remaining generated vendor stylesheet are intentionally
|
||||||
|
* excluded; KaTeX font parity is a separate package-closure prerequisite.
|
||||||
|
*/
|
||||||
|
.sand-message-prose .katex { font: 1.21em KaTeX_Main, Times New Roman, serif; line-height: 1.2; text-indent: 0; text-rendering: auto; }
|
||||||
|
.sand-message-prose .katex * { -ms-high-contrast-adjust: none !important; border-color: currentColor; }
|
||||||
|
.sand-message-prose .katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }
|
||||||
|
.sand-message-prose .katex .katex-html>.newline { display: block; }
|
||||||
|
.sand-message-prose .katex .base { position: relative; display: inline-block; white-space: nowrap; width: min-content; }
|
||||||
|
.sand-message-prose .katex .strut { display: inline-block; }
|
||||||
|
.sand-message-prose .katex-display { display: block; margin: 1em 0; text-align: center; }
|
||||||
|
.sand-message-prose .katex-display>.katex { display: block; text-align: center; white-space: nowrap; }
|
||||||
|
.sand-message-prose .katex-display>.katex>.katex-html { display: block; position: relative; }
|
||||||
|
.sand-message-prose .katex-display>.katex>.katex-html>.tag { position: absolute; right: 0; }
|
||||||
|
.sand-message-prose .katex-display.leqno>.katex>.katex-html>.tag { left: 0; right: auto; }
|
||||||
|
.sand-message-prose .katex-display.fleqn>.katex { text-align: left; padding-left: 2em; }
|
||||||
|
.sand-message-prose .katex-error { color: #cc0000; }
|
||||||
|
.sand-message-prose .language-math { color: inherit; font: inherit; white-space: pre-wrap; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js */
|
||||||
|
.sand-mermaid-figure { position: relative; max-width: 100%; margin: 10px 0; }
|
||||||
|
.sand-mermaid { display: block; max-width: 100%; min-height: 24px; overflow: hidden; color: #d9ded4; cursor: pointer; }
|
||||||
|
.sand-mermaid > svg { display: block; max-width: 100%; height: auto; }
|
||||||
|
.sand-mermaid-expand { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #cbd2c5; background: #20231f; border: 1px solid #343832; border-radius: 7px; cursor: pointer; opacity: 0; }
|
||||||
|
.sand-mermaid-figure:hover .sand-mermaid-expand, .sand-mermaid:focus-visible + .sand-mermaid-expand { opacity: 1; }
|
||||||
|
.sand-mermaid-expand:hover, .sand-mermaid-expand:focus-visible, .sand-mermaid-viewer button:hover, .sand-mermaid-viewer button:focus-visible { color: #eef3e7; background: #292d26; outline: 1px solid #a9c85d; outline-offset: 1px; }
|
||||||
|
.sand-mermaid-error { margin: 8px 0 4px; color: #f0a7a7; font-size: 11px; }
|
||||||
|
.sand-mermaid-viewer { position: fixed; inset: 0; z-index: 4000; display: flex; overflow: hidden; background: rgba(13, 15, 12, .96); }
|
||||||
|
.sand-mermaid-viewer__content { position: absolute; inset: 0; overflow: hidden; }
|
||||||
|
.sand-mermaid-viewer__canvas { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; transform-origin: center; }
|
||||||
|
.sand-mermaid-viewer__canvas > svg { display: block; width: 100%; height: 100%; }
|
||||||
|
.sand-mermaid-viewer__close { position: absolute; top: 16px; right: 16px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #d9ded4; background: #20231f; border: 1px solid #343832; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; }
|
||||||
|
.sand-mermaid-viewer__toolbar { position: absolute; top: 16px; left: 50%; z-index: 1; display: flex; gap: 4px; padding: 4px; background: #20231f; border: 1px solid #343832; border-radius: 8px; transform: translateX(-50%); }
|
||||||
|
.sand-mermaid-viewer__toolbar button, .sand-mermaid-viewer__zoom-out, .sand-mermaid-viewer__zoom-in, .sand-mermaid-viewer__fit { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #d9ded4; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; }
|
||||||
|
.sand-message-content { margin: 0; }
|
||||||
|
.sand-message-typing { display: flex; gap: 4px; width: max-content; padding: 10px 12px; background: #20231f; border-radius: 14px; }
|
||||||
|
.sand-message-typing__dot { width: 5px; height: 5px; background: #9ba392; border-radius: 50%; }
|
||||||
|
.sand-queued-send-notice, .sand-failed-send-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #92998d; font-size: 11px; }
|
||||||
|
.sand-queued-send-notice button, .sand-failed-send-actions button { padding: 0; color: #c7ec6b; background: transparent; border: 0; cursor: pointer; font: inherit; }
|
||||||
|
.sand-failed-send-actions [role="status"] { color: #f0a7a7; }
|
||||||
|
.sand-transcript-time-separator { margin: 0 0 22px; color: #747b70; text-align: center; font-size: 11px; }
|
||||||
|
.sand-unread-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: #c7ec6b; font-size: 11px; }
|
||||||
|
.sand-unread-divider::before, .sand-unread-divider::after { content: ""; height: 1px; flex: 1; background: #53632f; }
|
||||||
|
.sand-message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
||||||
|
.sand-message-attachments__strip { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
/*
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=4911773 (wSn fixed panel)
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=4905208 (fSn outline rows)
|
||||||
|
* The recovered panel must remain a bounded overlay. Without this owner the
|
||||||
|
* rows participate in the transcript flow and cover the permission dock and
|
||||||
|
* composer instead of scrolling inside the outline surface.
|
||||||
|
*/
|
||||||
|
.sand-outline-panel {
|
||||||
|
position: fixed;
|
||||||
|
top: 56px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 200;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 360px;
|
||||||
|
max-width: calc(100vw - 32px);
|
||||||
|
max-height: min(70vh, 640px);
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-elevated);
|
||||||
|
border: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 24px 64px -24px #0009;
|
||||||
|
animation: sand-ef87bi-B .16s cubic-bezier(.16, 1, .3, 1);
|
||||||
|
}
|
||||||
|
.sand-outline-panel__header {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 10px 10px 12px;
|
||||||
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
cursor: grab;
|
||||||
|
touch-action: none;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
}
|
||||||
|
.sand-outline-panel__title { display: flex; min-width: 0; align-items: center; gap: 8px; }
|
||||||
|
.sand-outline-panel__title-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; overflow: hidden; }
|
||||||
|
.sand-outline-panel__title-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sand-outline-panel__title-text > span:last-child { color: var(--cursor-text-secondary); font-size: var(--cursor-font-size-xs); }
|
||||||
|
.sand-outline-panel__header > button { flex: 0 0 auto; }
|
||||||
|
.sand-outline-panel__tabs { display: flex; flex: 0 0 auto; gap: 4px; overflow-x: auto; padding: 6px 10px; border-bottom: 1px solid var(--cursor-stroke-tertiary); }
|
||||||
|
.sand-outline-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 4px 8px; color: var(--cursor-text-secondary); background: transparent; border: 0; border-radius: var(--cursor-radius-sm); cursor: pointer; font: inherit; font-size: var(--cursor-font-size-xs); }
|
||||||
|
.sand-outline-tab[aria-selected="true"] { color: var(--cursor-text-primary); background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-outline-tab:focus-visible { outline: 1px solid var(--cursor-stroke-focused); outline-offset: 1px; }
|
||||||
|
.sand-outline-tab__status { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--cursor-text-tertiary); }
|
||||||
|
.sand-outline-tab__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sand-outline-panel__list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 10px; }
|
||||||
|
.sand-outline-empty { padding: 12px; color: var(--cursor-text-tertiary); text-align: center; font-size: var(--cursor-font-size-sm); }
|
||||||
|
.sand-outline-item { margin: 0 0 10px; border: 1px solid var(--cursor-stroke-tertiary); border-radius: 9px; background: var(--cursor-bg-elevated); }
|
||||||
|
.sand-outline-item__row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 7px 9px; color: var(--cursor-text-primary); text-align: left; background: transparent; border: 0; border-radius: 9px; cursor: pointer; font: inherit; }
|
||||||
|
.sand-outline-item__row:hover { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-outline-item__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--cursor-icon-tertiary); font-size: 14px; line-height: 1; }
|
||||||
|
.sand-outline-item__icon.sand-kbann2 { color: var(--cursor-text-accent); }
|
||||||
|
.sand-outline-item__icon.sand-pmgbkh { color: var(--cursor-text-red-primary, #ff5f57); }
|
||||||
|
@keyframes sand-outline-item-spin { to { transform: rotate(360deg); } }
|
||||||
|
.sand-outline-item__label { flex: 0 0 auto; font-size: 11px; font-weight: 600; }
|
||||||
|
.sand-outline-item__preview { min-width: 0; overflow: hidden; color: var(--cursor-text-tertiary); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
|
||||||
|
.sand-outline-item__chevron { flex: 0 0 auto; width: 6px; height: 6px; margin-left: auto; border-right: 1px solid var(--cursor-text-secondary); border-bottom: 1px solid var(--cursor-text-secondary); transform: rotate(-45deg); }
|
||||||
|
.sand-outline-item__detail { padding: 0 10px 10px 25px; color: var(--cursor-text-secondary); font-size: 10px; }
|
||||||
|
.sand-outline-item__detail-section { display: grid; gap: 4px; }
|
||||||
|
.sand-outline-item__detail-label { color: var(--cursor-text-tertiary); font-size: 9px; font-weight: 600; text-transform: uppercase; }
|
||||||
|
.sand-outline-item__detail-text { max-height: 220px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
|
||||||
|
.sand-attachment { display: grid; max-width: min(560px, 100%); overflow: hidden; border-radius: 10px; }
|
||||||
|
.sand-attachment__image { display: block; max-width: 100%; max-height: 320px; object-fit: contain; }
|
||||||
|
.sand-attachment__video { display: block; max-width: 100%; max-height: 320px; }
|
||||||
|
.sand-attachment audio { max-width: 280px; }
|
||||||
|
.sand-file-attachment-chip { display: flex; align-items: center; gap: 8px; }
|
||||||
|
.sand-message-attachment { display: flex; align-items: center; gap: 8px; min-width: 180px; padding: 8px 10px; background: #20231f; border: 1px solid #343832; border-radius: 9px; }
|
||||||
|
.sand-message-attachment > span:last-child { display: grid; min-width: 0; }
|
||||||
|
.sand-message-attachment strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
|
||||||
|
.sand-message-attachment small { color: #798076; font-size: 10px; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js */
|
||||||
|
.sand-media-viewer { position: fixed; inset: 0; z-index: 4000; display: flex; overflow: hidden; background: rgba(13, 15, 12, .96); }
|
||||||
|
.sand-media-viewer__top-bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: flex-end; padding: 12px 16px; pointer-events: none; }
|
||||||
|
.sand-media-viewer__close { width: 34px; height: 34px; color: #d9ded4; background: #20231f; border: 1px solid #343832; border-radius: 8px; cursor: pointer; font-size: 22px; line-height: 1; pointer-events: auto; }
|
||||||
|
.sand-media-viewer__close:hover, .sand-media-viewer__close:focus-visible, .sand-media-viewer__nav:hover, .sand-media-viewer__nav:focus-visible, .sand-media-viewer__thumb:hover, .sand-media-viewer__thumb:focus-visible { color: #eef3e7; background: #292d26; outline: 1px solid #a9c85d; outline-offset: 1px; }
|
||||||
|
.sand-media-viewer__column { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
|
||||||
|
.sand-media-viewer__media-cell { position: relative; display: grid; flex: 1; place-items: center; min-height: 0; overflow: hidden; }
|
||||||
|
.sand-media-viewer__image { display: block; max-width: 92vw; max-height: calc(100vh - 145px); object-fit: contain; transform-origin: center; user-select: none; }
|
||||||
|
.sand-media-viewer__state { color: #c5cbc0; font-size: 13px; }
|
||||||
|
.sand-media-viewer__state[role="alert"] { color: #f0a7a7; }
|
||||||
|
.sand-media-viewer__nav { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; color: #d9ded4; background: #20231f; border: 1px solid #343832; border-radius: 50%; cursor: pointer; font-size: 28px; line-height: 1; transform: translateY(-50%); }
|
||||||
|
.sand-media-viewer__caption { flex: 0 0 auto; padding: 8px 18px; overflow: hidden; color: #c5cbc0; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
|
||||||
|
.sand-media-viewer__filmstrip { display: flex; flex: 0 0 auto; max-width: 100%; padding: 8px 18px 14px; overflow-x: auto; justify-content: center; }
|
||||||
|
.sand-media-viewer__filmstrip-track { display: flex; gap: 6px; }
|
||||||
|
.sand-media-viewer__thumb { display: grid; place-items: center; width: 42px; height: 32px; flex: 0 0 auto; padding: 0; color: #c5cbc0; background: #20231f; border: 1px solid #343832; border-radius: 6px; cursor: pointer; overflow: hidden; }
|
||||||
|
.sand-media-viewer__thumb-image, .sand-media-viewer__thumb-video { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.sand-media-viewer__thumb-fallback { width: 100%; height: 100%; background: #20231f; }
|
||||||
|
.sand-media-viewer__thumb[aria-current="true"] { color: #171914; background: #d8fa78; border-color: #d8fa78; }
|
||||||
|
.sand-typing-indicator { display: flex; gap: 4px; width: max-content; padding: 10px 12px; background: #20231f; border-radius: 14px; }
|
||||||
|
.sand-typing-indicator span { width: 5px; height: 5px; background: #9ba392; border-radius: 50%; }
|
||||||
|
|
||||||
|
.sand-chat-input-dock { display: flex; flex: 0 0 auto; flex-direction: column; position: relative; z-index: 3; width: 100%; min-width: 0; padding: 8px max(24px, calc((100% - 700px) / 2)) 18px; }
|
||||||
|
.sand-prompt-form { width: 100%; }
|
||||||
|
/*
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#sha256=5a25f934b7d3b7a55483cb5f2a1a05e21209aad0a09c82d07d2add054a6b7856#byteOffset=10377,17213,19235,23344,24913
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#sha256=5a25f934b7d3b7a55483cb5f2a1a05e21209aad0a09c82d07d2add054a6b7856#byteOffset=365349,365644,366247,366340,366775,366876
|
||||||
|
* @evidence recovered/frontend/app/assets/index-lCyB53CO.css#sha256=bc44533bcf9109b5596d57dda428370d9bdc4fba8201cd6ed4cb0d4abd795ddc#byteOffset=12434,19561,21670,25989,27654
|
||||||
|
* @evidence recovered/frontend/app/assets/index-lCyB53CO.css#sha256=bc44533bcf9109b5596d57dda428370d9bdc4fba8201cd6ed4cb0d4abd795ddc#byteOffset=414869,415191,415842,415944,416415,416525
|
||||||
|
* Immutable cursor/Sand tokens above are the light/dark computed-style contract
|
||||||
|
* for the prompt surface; keep this owner palette token-based.
|
||||||
|
*/
|
||||||
|
.sand-prompt-shell { position: relative; padding: 9px; background: var(--cursor-bg-input-surface); border: 1px solid var(--cursor-stroke-secondary); border-radius: 16px; box-shadow: var(--cursor-box-shadow-sm); }
|
||||||
|
/*
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=384243
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=470278
|
||||||
|
* Exact ComposerReplyPill utility behavior; the window chrome has an equivalent
|
||||||
|
* local owner and must not be changed here.
|
||||||
|
*/
|
||||||
|
.sand-1ge13bo:not(#\#):not(#\#){transition:background-color.12s ease,color.12s ease}
|
||||||
|
.sand-7gh5u8:hover:not(#\#):not(#\#):not(#\#){color:var(--cursor-text-primary)}
|
||||||
|
.sand-chat-drop-overlay { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; border: 2px dashed var(--sand-border-accent); border-radius: 16px; background: var(--cursor-bg-input-surface); }
|
||||||
|
.sand-chat-drop-overlay__badge { padding: 8px 12px; color: var(--sand-text-on-color); background: var(--sand-fill-primary); border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||||
|
.sand-prompt-attachment-notice { margin: 2px 6px 8px; color: var(--cursor-text-tertiary); font-size: 10px; }
|
||||||
|
.sand-prompt-field { display: block; box-sizing: border-box; width: 100%; min-height: 48px; resize: none; color: var(--cursor-text-primary); background: transparent; border: 0; outline: none; line-height: 1.4; }
|
||||||
|
.sand-prompt-field::placeholder { color: var(--cursor-input-placeholder-foreground); }
|
||||||
|
.sand-prompt-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
|
||||||
|
.sand-prompt-attachment { display: flex; align-items: center; gap: 8px; max-width: 210px; padding: 6px 7px 6px 9px; background: var(--cursor-bg-tertiary); border: 1px solid var(--cursor-stroke-secondary); border-radius: 8px; }
|
||||||
|
.sand-prompt-attachment > span { display: grid; min-width: 0; }
|
||||||
|
.sand-prompt-attachment strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
|
||||||
|
.sand-prompt-attachment small { color: var(--cursor-text-tertiary); font-size: 9px; }
|
||||||
|
.sand-prompt-actions-row { display: flex; align-items: center; justify-content: space-between; }
|
||||||
|
.sand-prompt-actions-row > .sand-kit-icon-button.sand-prompt-attach { width: 30px; height: 30px; color: var(--cursor-icon-secondary); background: var(--sand-fill-secondary); border-radius: 50%; }
|
||||||
|
.sand-prompt-actions-row > .sand-prompt-mic,
|
||||||
|
.sand-prompt-actions-row > .sand-prompt-send { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--cursor-icon-secondary); background: var(--sand-fill-secondary); border: 0; border-radius: 50%; cursor: pointer; }
|
||||||
|
.sand-prompt-actions-row > .sand-prompt-send { color: var(--sand-text-on-color); background: var(--sand-fill-primary); }
|
||||||
|
.sand-prompt-actions-row > .sand-prompt-mic:focus-visible,
|
||||||
|
.sand-prompt-actions-row > .sand-prompt-send:focus-visible { outline: 1px solid var(--sand-border-accent); outline-offset: 1px; }
|
||||||
|
.sand-prompt-actions-row button:disabled { cursor: not-allowed; opacity: .4; }
|
||||||
|
.sand-prompt-actions-trailing { display: flex; gap: 6px; }
|
||||||
|
.sand-prompt-voice-error { margin: 8px 6px 0; color: var(--sand-text-danger); font-size: 10px; }
|
||||||
|
.sand-prompt-voice-status { display: block; margin: 2px 6px 8px; color: var(--cursor-text-secondary); font-size: 10px; }
|
||||||
|
.sand-prompt-voice-processing { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; color: var(--cursor-text-secondary); background: var(--sand-fill-secondary); border-radius: 999px; font-size: 10px; }
|
||||||
|
.sand-recording-chip { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; min-width: 116px; padding: 0 10px !important; color: var(--sand-text-primary) !important; background: var(--sand-fill-secondary) !important; border: 1px solid var(--sand-border-default) !important; border-radius: 999px !important; }
|
||||||
|
/* Immutable i6n recording-chip geometry/colors: stop 10px neutral mark, 18x13 spectrum, tokenized light/dark foregrounds. */
|
||||||
|
.sand-recording-chip__stop { width: 10px; height: 10px; background: var(--cursor-text-primary); border-radius: var(--cursor-radius-xs); }
|
||||||
|
.sand-recording-chip__timer { color: var(--cursor-text-primary); font-variant-numeric: tabular-nums; font-size: var(--cursor-font-size-lg); line-height: var(--cursor-line-height-lg); letter-spacing: var(--cursor-letter-spacing-lg); }
|
||||||
|
.sand-recording-chip__waveform { display: inline-flex; width: 18px; height: 13px; color: var(--cursor-text-secondary); }
|
||||||
|
.sand-prompt-file-input { display: none; }
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.sand-agents-sidebar__header > strong, .sand-agent-item__body, .sand-agent-item__trailing { display: none; }
|
||||||
|
.sand-agents-sidebar__header { justify-content: center; padding: 0; }
|
||||||
|
.sand-agents-sidebar__new-actions button:not(:last-child) { display: none; }
|
||||||
|
.sand-agent-item { grid-template-columns: 1fr; justify-items: center; }
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,186 @@
|
||||||
|
/* Host layout on top of copied grok CSS. Theme tokens come from the runtime installer. */
|
||||||
|
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
|
||||||
|
html { color-scheme: dark; background: var(--cursor-bg-editor, #141414); }
|
||||||
|
|
||||||
|
.sand-shell {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--sand-sidebar-width, 280px) minmax(0, 1fr) auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 100dvh;
|
||||||
|
min-height: 0;
|
||||||
|
--sand-sidebar-width: 280px;
|
||||||
|
--sand-info-pane-width: min(52vw, 720px);
|
||||||
|
--sand-chat-min-width: 424px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-agents-sidebar {
|
||||||
|
grid-column: 1;
|
||||||
|
width: var(--sand-sidebar-width, 280px);
|
||||||
|
max-width: var(--sand-sidebar-width, 280px);
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-chat-stage {
|
||||||
|
grid-column: 2;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-agent-item[aria-current="true"],
|
||||||
|
.sand-agent-item[data-active="true"] {
|
||||||
|
background: var(--cursor-bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-agent-item__avatar,
|
||||||
|
.sand-chat-header__avatar {
|
||||||
|
background: var(--sand-fill-accent);
|
||||||
|
color: var(--sand-text-on-color);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-transcript-row--user { display: flex; justify-content: flex-end; }
|
||||||
|
.sand-transcript-row--user .sand-message {
|
||||||
|
background: var(--sand-fill-bubble-user);
|
||||||
|
color: var(--sand-text-on-color);
|
||||||
|
}
|
||||||
|
.sand-message { white-space: pre-wrap; }
|
||||||
|
|
||||||
|
.sand-info-pane iframe {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
border: 0;
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
.sand-info-pane__vnc {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.sand-info-pane__status {
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--cursor-text-tertiary);
|
||||||
|
font-size: var(--cursor-font-size-xs);
|
||||||
|
}
|
||||||
|
.sand-info-pane[hidden] { display: none !important; }
|
||||||
|
|
||||||
|
.sand-agents-create {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 4px 12px 8px;
|
||||||
|
}
|
||||||
|
.sand-agents-create input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-input-surface);
|
||||||
|
border: 1px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: var(--cursor-radius-base);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-agents-search-field {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 0 12px 8px;
|
||||||
|
min-height: 32px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-input-surface);
|
||||||
|
border: 1px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: var(--cursor-radius-base);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.sand-shell { display: block; }
|
||||||
|
.sand-agents-sidebar {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9;
|
||||||
|
inset: 0 auto 0 0;
|
||||||
|
width: min(86vw, 320px);
|
||||||
|
max-width: min(86vw, 320px);
|
||||||
|
transform: translateX(-105%);
|
||||||
|
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar.is-open { transform: none; }
|
||||||
|
.sand-agents-sidebar .sand-agent-item {
|
||||||
|
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||||
|
justify-content: start;
|
||||||
|
justify-items: stretch;
|
||||||
|
min-height: 58px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar .sand-agent-item__body,
|
||||||
|
.sand-agents-sidebar .sand-agent-item__trailing { display: grid; }
|
||||||
|
.sand-agents-sidebar .sand-agent-item__body { gap: 4px; min-width: 0; }
|
||||||
|
.sand-agents-sidebar__header { justify-content: space-between; padding: 0 12px 0 16px; }
|
||||||
|
.sand-chat-stage { height: 100dvh; }
|
||||||
|
.sand-info-pane,
|
||||||
|
.sand-info-pane .sand-info-pane__inner {
|
||||||
|
position: fixed !important;
|
||||||
|
inset: 0 0 51px 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: none !important;
|
||||||
|
z-index: 15;
|
||||||
|
background: var(--cursor-bg-editor);
|
||||||
|
}
|
||||||
|
.sand-tabbar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
position: fixed;
|
||||||
|
left: 0; right: 0; bottom: 0;
|
||||||
|
z-index: 16;
|
||||||
|
padding: 6px 8px env(safe-area-inset-bottom, 0px);
|
||||||
|
background: var(--cursor-bg-chrome);
|
||||||
|
border-top: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-tabbar button {
|
||||||
|
min-height: 44px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--cursor-text-tertiary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.sand-tabbar button[aria-current="true"] {
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-secondary);
|
||||||
|
}
|
||||||
|
.sand-chat-input-dock { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
|
||||||
|
.sand-backdrop {
|
||||||
|
position: fixed; inset: 0; z-index: 8; background: #0008;
|
||||||
|
}
|
||||||
|
.sand-backdrop[hidden] { display: none !important; }
|
||||||
|
.sand-chat-header__menu { display: inline-flex !important; }
|
||||||
|
}
|
||||||
|
.sand-tabbar { display: none; }
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.sand-tabbar { display: grid; }
|
||||||
|
}
|
||||||
|
.sand-chat-header__menu {
|
||||||
|
display: none;
|
||||||
|
width: 32px; height: 32px; padding: 0;
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
background: transparent; border: 0; border-radius: 8px;
|
||||||
|
}
|
||||||
|
.sand-question {
|
||||||
|
margin: 0 max(30px, calc((100% - 690px) / 2)) 8px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
.sand-question__options { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
.sand-question__options button {
|
||||||
|
min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px;
|
||||||
|
background: var(--cursor-text-primary); color: var(--cursor-bg-editor); font-weight: 600;
|
||||||
|
}
|
||||||
|
.sand-activity { margin: 0 0 10px; color: var(--cursor-text-tertiary); font-size: 11px; }
|
||||||
|
.sand-chat-header__stop { color: var(--cursor-text-primary); }
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/* pdf viewer not in this slice */
|
||||||
|
|
@ -0,0 +1,332 @@
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#L1 */
|
||||||
|
/* Exact immutable icon-font dependency used by every recovered data-icon-name and
|
||||||
|
* cursor-icons glyph. The binary is hash-pinned in computer-shell-evidence.json. */
|
||||||
|
@font-face {
|
||||||
|
font-family: "cursor-icons";
|
||||||
|
font-display: block;
|
||||||
|
src: url("./cursor-icons-16-f_W_ogc-.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
font-family: var(--cursor-font-family-sans);
|
||||||
|
font-synthesis: none;
|
||||||
|
background: var(--cursor-bg-editor);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
|
||||||
|
button, textarea, input { font: inherit; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=5563488 (root shell consumer) */
|
||||||
|
.sand-shell {
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-editor);
|
||||||
|
font-family: var(--cursor-font-family-sans);
|
||||||
|
}
|
||||||
|
.sand-shell button { cursor: pointer; }
|
||||||
|
.sand-shell button:disabled { cursor: not-allowed; }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2983995-2986100 */
|
||||||
|
/* The shipped root uses a flex sidebar column and a footer-profile slot. Keep
|
||||||
|
* the recovered shell's native grid host intact while restoring that ownership
|
||||||
|
* boundary for the account trigger/menu. */
|
||||||
|
.sand-agents-sidebar {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--cursor-bg-chrome);
|
||||||
|
border-right: .5px solid var(--sand-border-weak);
|
||||||
|
container-name: sand-sidebar;
|
||||||
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__plugins {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 38px;
|
||||||
|
padding: 0 12px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-agents-sidebar__plugins:hover { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-agents-sidebar__plugins-entry { padding: 4px 8px; }
|
||||||
|
.sand-agents-sidebar__plugins { justify-content: flex-start; border-radius: var(--cursor-radius-lg); }
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2983995-2986100 */
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=0 (immutable menu surface tokens) */
|
||||||
|
.sand-agents-sidebar__account {
|
||||||
|
position: relative;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__account > button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--cursor-radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__account > button:hover,
|
||||||
|
.sand-agents-sidebar__account > button[aria-expanded="true"] { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-agents-sidebar__account > button > span:first-child {
|
||||||
|
display: grid;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
place-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--cursor-base);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: var(--sand-fill-accent);
|
||||||
|
border-radius: var(--cursor-radius-lg);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__account > button > span:first-child img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.sand-agents-sidebar__account > button > span:last-child { display: grid; min-width: 0; gap: 2px; }
|
||||||
|
.sand-agents-sidebar__account > button > span:last-child strong,
|
||||||
|
.sand-agents-sidebar__account > button > span:last-child small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sand-agents-sidebar__account > button > span:last-child strong { font-size: var(--cursor-font-size-base); font-weight: 600; }
|
||||||
|
.sand-agents-sidebar__account > button > span:last-child small { color: var(--cursor-text-secondary); font-size: var(--cursor-font-size-xs); }
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=424809 (LegacyMenu.Content account-menu surface) */
|
||||||
|
[aria-label="Account"].ui-menu__content {
|
||||||
|
display: grid;
|
||||||
|
gap: 2px;
|
||||||
|
min-width: 228px;
|
||||||
|
max-width: min(360px, calc(100vw - 16px));
|
||||||
|
padding: 6px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
font-size: var(--cursor-font-size-base);
|
||||||
|
line-height: var(--cursor-line-height-base);
|
||||||
|
letter-spacing: 0;
|
||||||
|
background: var(--cursor-bg-elevated);
|
||||||
|
border: 1px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: var(--cursor-radius-xl);
|
||||||
|
box-shadow: var(--cursor-box-shadow-md);
|
||||||
|
}
|
||||||
|
[aria-label="Account"].ui-menu__content [role="menuitem"] {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 4px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--cursor-radius-base);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
[aria-label="Account"].ui-menu__content [role="menuitem"]:hover:not([aria-disabled="true"]),
|
||||||
|
[aria-label="Account"].ui-menu__content [role="menuitem"]:focus-visible:not([aria-disabled="true"]) { color: var(--cursor-text-primary); background: var(--cursor-bg-secondary); }
|
||||||
|
[aria-label="Account"].ui-menu__content [role="menuitem"][aria-disabled="true"] { color: var(--sand-text-disabled); cursor: default; }
|
||||||
|
[aria-label="Account"].ui-menu__content hr { width: calc(100% - 16px); height: 1px; margin: 4px 8px; background: var(--cursor-stroke-secondary); border: 0; }
|
||||||
|
.sand-agents-sidebar__account-name,
|
||||||
|
.sand-agents-sidebar__account-name-input { min-width: 0; margin: 0 8px 2px; }
|
||||||
|
.sand-agents-sidebar__account-name { display: inline-flex; align-items: center; color: var(--cursor-text-secondary); background: transparent; border: 0; cursor: pointer; font-size: var(--cursor-font-size-base); }
|
||||||
|
.sand-agents-sidebar__account-name-input { width: calc(100% - 16px); padding: 4px 6px; color: var(--cursor-text-primary); background: var(--cursor-bg-input); border: 1px solid var(--cursor-stroke-secondary); border-radius: var(--cursor-radius-base); outline: none; }
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2983995 (Rct footer root) */
|
||||||
|
.sand-agents-sidebar__footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 2px 12px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2605212 (a0n search control) */
|
||||||
|
.sand-agents-sidebar__search {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 4px 12px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-shadow: inset 0 0 0 .5px var(--sand-border-weak);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__search > span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--cursor-spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@container sand-sidebar (max-width: 130px) {
|
||||||
|
.sand-agents-sidebar__footer { padding: 0 8px 8px; }
|
||||||
|
.sand-agents-sidebar__search { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-chat-header__identity { display: flex; align-items: center; gap: 9px; }
|
||||||
|
|
||||||
|
.sand-onboarding {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
grid-template-rows: minmax(0, 1fr);
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--sand-text-primary);
|
||||||
|
background-color: var(--cursor-bg-editor);
|
||||||
|
font-family: var(--cursor-font-family-sans);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-onboarding__landing {
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
width: min(520px, 100%);
|
||||||
|
text-align: center;
|
||||||
|
place-self: center;
|
||||||
|
}
|
||||||
|
.sand-onboarding__landing h1,
|
||||||
|
.sand-onboarding__landing p { margin: 0; }
|
||||||
|
.sand-onboarding__landing > p { color: var(--cursor-text-secondary); }
|
||||||
|
.sand-onboarding__landing button {
|
||||||
|
padding: 9px 18px;
|
||||||
|
color: var(--sand-text-on-color);
|
||||||
|
background: var(--cursor-bg-accent);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
.sand-onboarding__landing-wait { display: grid; gap: 10px; }
|
||||||
|
.sand-onboarding__landing-wait > span { display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||||
|
.sand-onboarding__landing-wait button { padding: 0; color: var(--cursor-text-accent); background: transparent; }
|
||||||
|
|
||||||
|
.sand-about-dialog,
|
||||||
|
.sand-feedback-dialog,
|
||||||
|
.sand-alert-dialog,
|
||||||
|
.sand-deep-link-info {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-elevated);
|
||||||
|
border: 1px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: var(--cursor-box-shadow-xl);
|
||||||
|
}
|
||||||
|
.sand-about-dialog { width: 360px; }
|
||||||
|
.sand-feedback-dialog { width: min(460px, 100%); }
|
||||||
|
.sand-alert-dialog { width: min(380px, 100%); padding: 20px; }
|
||||||
|
.sand-deep-link-info { width: min(360px, 100%); }
|
||||||
|
.sand-about-dialog > button { position: absolute; top: 8px; right: 10px; color: var(--cursor-text-secondary); background: transparent; border: 0; font-size: 20px; }
|
||||||
|
.sand-about-dialog > div { display: grid; justify-items: center; gap: 8px; padding: 42px 24px 28px; text-align: center; }
|
||||||
|
.sand-about-dialog > div h2, .sand-about-dialog > div p { margin: 0; }
|
||||||
|
.sand-about-dialog > div small { margin-top: 20px; color: var(--cursor-text-tertiary); }
|
||||||
|
.sand-about-dialog footer,
|
||||||
|
.sand-feedback-dialog footer,
|
||||||
|
.sand-alert-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cursor-stroke-secondary); }
|
||||||
|
.sand-about-dialog footer button,
|
||||||
|
.sand-feedback-dialog footer button,
|
||||||
|
.sand-alert-dialog footer button { padding: 8px 12px; color: var(--cursor-text-primary); background: var(--cursor-bg-secondary); border: 0; border-radius: 7px; }
|
||||||
|
.sand-feedback-dialog footer button:last-child,
|
||||||
|
.sand-alert-dialog footer button:last-child { color: var(--cursor-text-on-color); background: var(--cursor-bg-accent); }
|
||||||
|
.sand-feedback-dialog header { padding: 18px 20px 0; }
|
||||||
|
.sand-feedback-dialog header h2 { margin: 0; }
|
||||||
|
.sand-feedback-dialog > div { display: grid; gap: 14px; padding: 16px 20px 20px; }
|
||||||
|
.sand-feedback-dialog > div p { margin: 0; color: var(--cursor-text-secondary); }
|
||||||
|
.sand-feedback-dialog textarea { min-height: 140px; padding: 10px; resize: vertical; color: var(--cursor-text-primary); background: var(--cursor-bg-input); border: 1px solid var(--cursor-stroke-secondary); border-radius: 8px; }
|
||||||
|
.sand-feedback-dialog label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
|
||||||
|
.sand-alert-dialog h2, .sand-alert-dialog p { margin: 0 0 12px; }
|
||||||
|
.sand-alert-dialog p { color: var(--cursor-text-secondary); }
|
||||||
|
.sand-alert-dialog footer { margin: 20px -20px -20px; }
|
||||||
|
.sand-deep-link-info header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 0; }
|
||||||
|
.sand-deep-link-info header h2, .sand-deep-link-info header p { margin: 0; }
|
||||||
|
.sand-deep-link-info header p, .sand-deep-link-info > div p { color: var(--cursor-text-secondary); }
|
||||||
|
.sand-deep-link-info header button { color: var(--cursor-text-secondary); background: transparent; border: 0; font-size: 20px; }
|
||||||
|
.sand-deep-link-info > div { display: grid; gap: 14px; padding: 16px 20px 20px; }
|
||||||
|
.sand-deep-link-info > div > div { display: grid; gap: 5px; }
|
||||||
|
.sand-deep-link-info > div p { margin: 0; font-size: 12px; }
|
||||||
|
.sand-deep-link-info code { overflow-wrap: anywhere; color: var(--cursor-text-primary); }
|
||||||
|
.sand-deep-link-info footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cursor-stroke-secondary); }
|
||||||
|
.sand-deep-link-info footer button { padding: 8px 12px; color: var(--cursor-text-on-color); background: var(--cursor-bg-accent); border: 0; border-radius: 7px; }
|
||||||
|
|
||||||
|
/* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#L523 */
|
||||||
|
.sand-command-palette {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 3000;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 560px;
|
||||||
|
max-width: 92vw;
|
||||||
|
max-height: calc(100vh - (2 * max(16px, var(--sand-window-controls-block, 0px))));
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background-color: var(--cursor-bg-elevated);
|
||||||
|
border: .5px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: var(--cursor-radius-2xl);
|
||||||
|
box-shadow: var(--cursor-box-shadow-lg);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.sand-command-palette > input {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-width: 0;
|
||||||
|
padding: var(--cursor-spacing-3-5) var(--cursor-spacing-2-5) var(--cursor-spacing-3-5) var(--cursor-spacing-3-5);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: .5px solid var(--cursor-stroke-tertiary);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.sand-command-palette > [role="tablist"] {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--cursor-spacing-0-5);
|
||||||
|
padding: var(--cursor-spacing-2) var(--cursor-spacing-2) calc(var(--cursor-spacing-2) + 1px);
|
||||||
|
margin-bottom: -1px;
|
||||||
|
background-color: var(--sand-bg-elevated);
|
||||||
|
}
|
||||||
|
.sand-command-palette [role="tab"],
|
||||||
|
.sand-command-palette [role="option"] {
|
||||||
|
color: inherit;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.sand-command-palette > [role="listbox"] {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: var(--cursor-spacing-0-5);
|
||||||
|
height: 360px;
|
||||||
|
padding: var(--cursor-spacing-2);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.sand-command-palette [role="option"] {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--cursor-spacing-2);
|
||||||
|
height: 49px;
|
||||||
|
padding: var(--cursor-spacing-2);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.sand-command-palette [role="option"] > small:first-of-type { margin-left: auto; }
|
||||||
|
.sand-command-palette [aria-selected="true"] { background: var(--cursor-bg-secondary); }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=539920
|
||||||
|
* The immutable global focus ring is scoped to these two mounted menu surfaces
|
||||||
|
* so the production root and unrelated recovered controls remain disjoint.
|
||||||
|
*/
|
||||||
|
.sand-command-palette :is(button, input, [role="tab"], [role="option"]):focus-visible,
|
||||||
|
.sand-agents-sidebar__account :is(button, input, [role="menuitem"]):focus-visible {
|
||||||
|
outline: 2px solid var(--cursor-stroke-focused);
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,196 @@
|
||||||
|
/*
|
||||||
|
* This file is intentionally limited to the shared kit primitive selectors.
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2173060
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2193087
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2174833
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=54293
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css#byteOffset=68389
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sand-kit-button,
|
||||||
|
.sand-kit-icon-button,
|
||||||
|
.sand-inserted-chip {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: inherit;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-button {
|
||||||
|
align-items: center;
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--cursor-radius-base);
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: var(--cursor-spacing-1);
|
||||||
|
justify-content: center;
|
||||||
|
min-height: var(--cursor-height-base);
|
||||||
|
padding: 0 var(--cursor-spacing-2);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
font-size: var(--cursor-font-size-base);
|
||||||
|
line-height: var(--cursor-line-height-base);
|
||||||
|
transition: background-color var(--cursor-duration-fast), border-color var(--cursor-duration-fast), color var(--cursor-duration-fast), opacity var(--cursor-duration-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1iorvi4 {
|
||||||
|
min-height: var(--cursor-height-sm);
|
||||||
|
padding-inline: var(--cursor-spacing-2);
|
||||||
|
font-size: var(--cursor-font-size-sm);
|
||||||
|
line-height: var(--cursor-line-height-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1yrsyyn {
|
||||||
|
min-height: var(--cursor-height-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-163pfp {
|
||||||
|
border-radius: var(--cursor-radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1wclgxm {
|
||||||
|
background: var(--cursor-accent);
|
||||||
|
color: var(--cursor-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1tiofj7 {
|
||||||
|
background: var(--cursor-button-secondary-background);
|
||||||
|
color: var(--cursor-button-secondary-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-18he5m,
|
||||||
|
.sand-6y9aml {
|
||||||
|
background: var(--cursor-danger);
|
||||||
|
color: var(--cursor-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-button:hover:not(:disabled),
|
||||||
|
.sand-kit-button:focus-visible:not(:disabled) {
|
||||||
|
background: var(--cursor-button-secondary-hover-background);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1wclgxm:hover:not(:disabled),
|
||||||
|
.sand-1wclgxm:focus-visible:not(:disabled),
|
||||||
|
.sand-2uzfp6:hover:not(:disabled),
|
||||||
|
.sand-2uzfp6:focus-visible:not(:disabled),
|
||||||
|
.sand-18he5m:hover:not(:disabled),
|
||||||
|
.sand-18he5m:focus-visible:not(:disabled),
|
||||||
|
.sand-6y9aml:hover:not(:disabled),
|
||||||
|
.sand-6y9aml:focus-visible:not(:disabled) {
|
||||||
|
filter: brightness(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-button:focus-visible,
|
||||||
|
.sand-kit-icon-button:focus-visible {
|
||||||
|
outline: 1px solid var(--cursor-stroke-focused);
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-button:active:not(:disabled),
|
||||||
|
.sand-kit-icon-button:active:not(:disabled) {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-ri19xs {
|
||||||
|
background: var(--cursor-bg-selected);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-button:disabled,
|
||||||
|
.sand-kit-icon-button:disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-icon-button {
|
||||||
|
align-items: center;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--cursor-radius-base);
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
height: var(--cursor-height-base);
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
width: var(--cursor-height-base);
|
||||||
|
transition: background-color var(--cursor-duration-fast), color var(--cursor-duration-fast), opacity var(--cursor-duration-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-vy4d1p {
|
||||||
|
height: var(--cursor-height-sm);
|
||||||
|
width: var(--cursor-height-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-exx8yu {
|
||||||
|
height: var(--cursor-height-lg);
|
||||||
|
width: var(--cursor-height-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-149ho13 {
|
||||||
|
border-radius: var(--cursor-radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-jbqb8w {
|
||||||
|
background: var(--cursor-bg-tertiary);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-kit-icon-button:hover:not(:disabled),
|
||||||
|
.sand-kit-icon-button:focus-visible:not(:disabled) {
|
||||||
|
background: var(--cursor-bg-secondary);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-inserted-chip {
|
||||||
|
align-items: center;
|
||||||
|
background: var(--cursor-bg-tertiary);
|
||||||
|
border: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
border-radius: var(--cursor-radius-full);
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: var(--cursor-font-size-sm);
|
||||||
|
gap: var(--cursor-spacing-1);
|
||||||
|
line-height: var(--cursor-line-height-sm);
|
||||||
|
min-height: var(--cursor-height-sm);
|
||||||
|
padding-inline: var(--cursor-spacing-2);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1yrsyyn.sand-inserted-chip {
|
||||||
|
min-height: var(--cursor-height-base);
|
||||||
|
font-size: var(--cursor-font-size-base);
|
||||||
|
line-height: var(--cursor-line-height-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-luhinc {
|
||||||
|
background: var(--cursor-bg-accent-secondary);
|
||||||
|
border-color: var(--cursor-stroke-accent);
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-1r8pydn {
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-2uzfp6.sand-inserted-chip {
|
||||||
|
background: var(--cursor-bg-green-secondary);
|
||||||
|
border-color: var(--cursor-stroke-green-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-6y9aml.sand-inserted-chip {
|
||||||
|
background: var(--cursor-bg-yellow-secondary);
|
||||||
|
border-color: var(--cursor-stroke-yellow-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-18he5m.sand-inserted-chip {
|
||||||
|
background: var(--cursor-bg-red-secondary);
|
||||||
|
border-color: var(--cursor-stroke-red-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-kit-button,
|
||||||
|
.sand-kit-icon-button {
|
||||||
|
transition-duration: 0ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
|
||||||
|
|
||||||
|
import "./sand-kit-primitives.css";
|
||||||
|
import { sandIconGlyph, sandIconStyle } from "./sand-icon-registry";
|
||||||
|
import type { SandIconColor, SandIconName, SandIconPlatform, SandIconSize, SandIconVariant } from "./sand-icon-registry";
|
||||||
|
|
||||||
|
export { SAND_ICON_OUTLINE_CODE_POINTS as SAND_ICON_CODE_POINTS } from "./sand-icon-registry";
|
||||||
|
export type { SandIconColor, SandIconName, SandIconPlatform, SandIconSize, SandIconVariant } from "./sand-icon-registry";
|
||||||
|
|
||||||
|
// Immutable Mac renderer: index-UbX-y3il.js, SHA-256
|
||||||
|
// ef4e9831b65d39633f09c9ad0c083b98b7ebf52e3bb558182aee5bde31f876fa.
|
||||||
|
// @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2173060 (sand-kit-icon-button contract)
|
||||||
|
// @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2193087 (sand-kit-button contract)
|
||||||
|
// @evidence src/app/dist/renderer/assets/index-UbX-y3il.js#byteOffset=2174833 (pill/chip contract)
|
||||||
|
// Windows equivalents: 2763354, 2788460, and 2765629 in recovered/frontend/app/assets/index-UbX-y3il.js.
|
||||||
|
|
||||||
|
const KIT_BUTTON_BASE = "sand-kit-button sand-3nfvp2 sand-6s0dn4 sand-l56j7k sand-1jnr06f sand-2lah0s sand-9f619 sand-c342km sand-ng3xce sand-jbqb8w sand-uxw1ft sand-1ypdohk sand-tgyt42 sand-s2xxs2 sand-gdialr sand-9lcvmn sand-1k57tk5 sand-784prv sand-1t137rt sand-9v5kkp sand-4sht9k sand-1y3gkto";
|
||||||
|
const KIT_BUTTON_SM = "sand-fifm61 sand-1d3mw78 sand-12oo3zp sand-1iorvi4 sand-1ug7bdz sand-jkvuk6 sand-11iknt3 sand-1kogg8i";
|
||||||
|
const ICON_BUTTON_BASE = "sand-kit-icon-button sand-1n2onr6 sand-3nfvp2 sand-6s0dn4 sand-l56j7k sand-2lah0s sand-9f619 sand-exx8yu sand-1xpa7k sand-18d9i69 sand-1uhho1l sand-c342km sand-ng3xce sand-jbqb8w sand-1ypdohk sand-tgyt42 sand-s2xxs2 sand-gdialr sand-9lcvmn sand-1k57tk5 sand-784prv sand-1t137rt sand-9v5kkp sand-4sht9k sand-1y3gkto sand-vy4d1p sand-xk0z11 sand-1kogg8i sand-1r8pydn sand-1o0liin sand-1fx2joi sand-7n8uir sand-99e291 sand-1v0sr2s";
|
||||||
|
const INSERTED_CHIP = "sand-inserted-chip";
|
||||||
|
const PILL_LABEL = "sand-1lliihq sand-b3r6kr sand-uxw1ft sand-3d5spo sand-1kpknzs sand-18qloa2 sand-pzgpc2 sand-gdialr sand-9lcvmn";
|
||||||
|
const BUTTON_SIZE_CLASSES = { sm: "sand-1iorvi4", md: "sand-1yrsyyn" } as const;
|
||||||
|
const BUTTON_SHAPE_CLASSES = { rectangular: undefined, pill: "sand-163pfp" } as const;
|
||||||
|
const BUTTON_SENTIMENT_CLASSES = {
|
||||||
|
neutral: {
|
||||||
|
primary: "sand-1wclgxm sand-1e15362 sand-1gzh0bn sand-xcaa6e sand-g7klql",
|
||||||
|
secondary: "sand-1tiofj7 sand-ex9vrg sand-wj1584 sand-tyxrsu sand-g7klql",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
primary: "sand-2uzfp6 sand-1p9r4uo sand-vygott sand-18ti0zn sand-1ksgq55",
|
||||||
|
secondary: "sand-ctg3rd sand-dpopdx sand-1fuijle sand-n3e42v sand-1ksgq55",
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
primary: "sand-18he5m sand-io7yh0 sand-1kjf8sd sand-18ti0zn sand-1ww89vb",
|
||||||
|
secondary: "sand-6y9aml sand-tly4hf sand-1yeru7p sand-6rl5ky sand-1ww89vb",
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
const ICON_SIZE_CLASSES = { sm: "sand-vy4d1p sand-xk0z11", md: "sand-gd8bvy", lg: "sand-exx8yu sand-18d9i69" } as const;
|
||||||
|
const ICON_SHAPE_CLASSES = { square: "sand-1kogg8i", circle: "sand-149ho13" } as const;
|
||||||
|
const ICON_VARIANT_CLASSES = { default: "sand-jbqb8w", ghost: "sand-jbqb8w sand-1r8pydn sand-7n8uir" } as const;
|
||||||
|
const SELECTED_CLASSES = "sand-ri19xs sand-eazifr";
|
||||||
|
const CHIP_VARIANT_CLASSES = { primary: "sand-luhinc sand-1q6ojev", secondary: undefined, ghost: "sand-1r8pydn" } as const;
|
||||||
|
const CHIP_SENTIMENT_CLASSES = { neutral: undefined, accent: "sand-2uzfp6", danger: "sand-18he5m" } as const;
|
||||||
|
|
||||||
|
export type SandButtonVariant = "primary" | "secondary";
|
||||||
|
export type SandButtonSize = "sm" | "md";
|
||||||
|
export type SandButtonShape = "rectangular" | "pill";
|
||||||
|
export type SandSentiment = "neutral" | "accent" | "danger";
|
||||||
|
export type SandIconButtonVariant = "default" | "ghost";
|
||||||
|
export type SandIconButtonSize = "sm" | "md" | "lg";
|
||||||
|
export type SandIconButtonShape = "square" | "circle";
|
||||||
|
export type SandPrimitiveVariant = "primary" | "secondary" | "ghost";
|
||||||
|
|
||||||
|
export interface SandIconProps {
|
||||||
|
readonly name: SandIconName;
|
||||||
|
readonly color?: SandIconColor;
|
||||||
|
readonly className?: string;
|
||||||
|
readonly platform?: SandIconPlatform;
|
||||||
|
readonly size?: SandIconSize;
|
||||||
|
readonly style?: CSSProperties;
|
||||||
|
readonly title?: string;
|
||||||
|
readonly variant?: SandIconVariant;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SandIcon({ className, color, name, platform, size = "sm", style, title, variant = "outline" }: SandIconProps): ReactNode {
|
||||||
|
return <span
|
||||||
|
aria-hidden={title == null ? "true" : undefined}
|
||||||
|
className={joinClasses("ui-icon", className)}
|
||||||
|
data-color={color}
|
||||||
|
data-icon-name={name}
|
||||||
|
data-size={typeof size === "number" ? undefined : size}
|
||||||
|
data-variant={variant}
|
||||||
|
style={{ ...sandIconStyle(size, color), ...style }}
|
||||||
|
title={title}
|
||||||
|
>{sandIconGlyph(name, variant, platform)}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function joinClasses(...classes: readonly (string | undefined)[]): string {
|
||||||
|
return classes.filter((value): value is string => value != null && value.length > 0).join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
|
||||||
|
readonly children?: ReactNode;
|
||||||
|
readonly pending?: boolean;
|
||||||
|
readonly leadingIcon?: SandIconName;
|
||||||
|
readonly trailingIcon?: SandIconName;
|
||||||
|
readonly variant?: SandButtonVariant;
|
||||||
|
readonly size?: SandButtonSize;
|
||||||
|
readonly shape?: SandButtonShape;
|
||||||
|
readonly sentiment?: SandSentiment;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SandButton = forwardRef<HTMLButtonElement, SandButtonProps>(function SandButton({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
disabled = false,
|
||||||
|
leadingIcon,
|
||||||
|
pending = false,
|
||||||
|
shape = "rectangular",
|
||||||
|
size = "md",
|
||||||
|
sentiment = "neutral",
|
||||||
|
trailingIcon,
|
||||||
|
variant = "primary",
|
||||||
|
type = "button",
|
||||||
|
...buttonProps
|
||||||
|
}, ref): ReactNode {
|
||||||
|
return <button
|
||||||
|
{...buttonProps}
|
||||||
|
aria-busy={pending || buttonProps["aria-busy"] || undefined}
|
||||||
|
className={joinClasses(KIT_BUTTON_BASE, size === "sm" ? KIT_BUTTON_SM : undefined, BUTTON_SIZE_CLASSES[size], BUTTON_SHAPE_CLASSES[shape], BUTTON_SENTIMENT_CLASSES[sentiment][variant], buttonProps["aria-pressed"] === true ? SELECTED_CLASSES : undefined, className)}
|
||||||
|
data-sentiment={sentiment}
|
||||||
|
data-shape={shape}
|
||||||
|
data-size={size}
|
||||||
|
data-variant={variant}
|
||||||
|
disabled={disabled || pending}
|
||||||
|
ref={ref}
|
||||||
|
type={type}
|
||||||
|
>
|
||||||
|
{leadingIcon == null ? null : <SandIcon name={leadingIcon} />}
|
||||||
|
<span className="sand-euugli sand-b3r6kr sand-lyipyv">{children}</span>
|
||||||
|
{trailingIcon == null ? null : <SandIcon name={trailingIcon} />}
|
||||||
|
</button>;
|
||||||
|
});
|
||||||
|
|
||||||
|
export interface SandIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "children"> {
|
||||||
|
readonly icon: SandIconName;
|
||||||
|
readonly label?: string;
|
||||||
|
readonly pending?: boolean;
|
||||||
|
readonly platform?: SandIconPlatform;
|
||||||
|
readonly selected?: boolean;
|
||||||
|
readonly size?: SandIconButtonSize;
|
||||||
|
readonly shape?: SandIconButtonShape;
|
||||||
|
readonly variant?: SandIconButtonVariant;
|
||||||
|
readonly sentiment?: SandSentiment;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SandIconButton = forwardRef<HTMLButtonElement, SandIconButtonProps>(function SandIconButton({
|
||||||
|
className,
|
||||||
|
disabled = false,
|
||||||
|
icon,
|
||||||
|
label,
|
||||||
|
pending = false,
|
||||||
|
platform,
|
||||||
|
selected = false,
|
||||||
|
sentiment = "neutral",
|
||||||
|
shape = "square",
|
||||||
|
size = "md",
|
||||||
|
title,
|
||||||
|
type = "button",
|
||||||
|
variant = "ghost",
|
||||||
|
...buttonProps
|
||||||
|
}, ref): ReactNode {
|
||||||
|
const resolvedLabel = label ?? buttonProps["aria-label"] ?? "";
|
||||||
|
return <button
|
||||||
|
{...buttonProps}
|
||||||
|
aria-busy={pending || buttonProps["aria-busy"] || undefined}
|
||||||
|
aria-label={resolvedLabel}
|
||||||
|
aria-pressed={selected || buttonProps["aria-pressed"] || undefined}
|
||||||
|
className={joinClasses(ICON_BUTTON_BASE, ICON_SIZE_CLASSES[size], ICON_SHAPE_CLASSES[shape], ICON_VARIANT_CLASSES[variant], selected || buttonProps["aria-pressed"] === true ? SELECTED_CLASSES : undefined, className)}
|
||||||
|
data-sentiment={sentiment}
|
||||||
|
data-shape={shape}
|
||||||
|
data-size={size}
|
||||||
|
data-variant={variant}
|
||||||
|
disabled={disabled || pending}
|
||||||
|
ref={ref}
|
||||||
|
title={title ?? resolvedLabel}
|
||||||
|
type={type}
|
||||||
|
>
|
||||||
|
<SandIcon name={icon} platform={platform} size={size} />
|
||||||
|
</button>;
|
||||||
|
});
|
||||||
|
|
||||||
|
export interface SandTagProps extends HTMLAttributes<HTMLSpanElement> {
|
||||||
|
readonly children?: ReactNode;
|
||||||
|
readonly size?: SandButtonSize;
|
||||||
|
readonly shape?: SandButtonShape;
|
||||||
|
readonly variant?: SandPrimitiveVariant;
|
||||||
|
readonly sentiment?: SandSentiment;
|
||||||
|
readonly selected?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SandTag({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
selected = false,
|
||||||
|
shape = "pill",
|
||||||
|
size = "sm",
|
||||||
|
sentiment = "neutral",
|
||||||
|
variant = "secondary",
|
||||||
|
...props
|
||||||
|
}: SandTagProps): ReactNode {
|
||||||
|
return <span
|
||||||
|
{...props}
|
||||||
|
aria-pressed={selected || undefined}
|
||||||
|
className={joinClasses(INSERTED_CHIP, CHIP_VARIANT_CLASSES[variant], CHIP_SENTIMENT_CLASSES[sentiment], selected ? SELECTED_CLASSES : undefined, className)}
|
||||||
|
data-sentiment={sentiment}
|
||||||
|
data-shape={shape}
|
||||||
|
data-size={size}
|
||||||
|
data-variant={variant}
|
||||||
|
>{children}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SandBadgeProps extends SandTagProps {
|
||||||
|
readonly icon?: SandIconName;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SandBadge({ children, icon, ...props }: SandBadgeProps): ReactNode {
|
||||||
|
return <span className={PILL_LABEL}>
|
||||||
|
<SandTag {...props}>{icon == null ? null : <SandIcon name={icon} />}{children}</SandTag>
|
||||||
|
</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SandKeycapProps extends Omit<SandTagProps, "shape" | "size" | "variant"> {
|
||||||
|
readonly children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SandKeycap({ children, className, sentiment = "neutral", ...props }: SandKeycapProps): ReactNode {
|
||||||
|
return <span
|
||||||
|
{...props}
|
||||||
|
className={joinClasses(INSERTED_CHIP, className)}
|
||||||
|
data-sentiment={sentiment}
|
||||||
|
data-shape="rectangular"
|
||||||
|
data-size="sm"
|
||||||
|
data-variant="secondary"
|
||||||
|
>{children}</span>;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,371 @@
|
||||||
|
/*
|
||||||
|
* Exact first-party transcript utility rules extracted from the immutable renderer stylesheet.
|
||||||
|
* @evidence src/app/dist/renderer/assets/index-lCyB53CO.css
|
||||||
|
* Immutable CSS SHA-256: 5a25f934b7d3b7a55483cb5f2a1a05e21209aad0a09c82d07d2add054a6b7856
|
||||||
|
* Consumer: conversation/workspace/transcript.tsx utility classes; generated/editor/font blocks excluded.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sand-1qugcng:not(#\#):not(#\#) {
|
||||||
|
border-color: color-mix(in srgb, var(--cursor-base) 30%, transparent);
|
||||||
|
}
|
||||||
|
.sand-9r1u3d:not(#\#):not(#\#) {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
.sand-qz0629:not(#\#):not(#\#) {
|
||||||
|
border-color: var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-12oqio5:not(#\#):not(#\#) {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.sand-1e1y6u3:not(#\#):not(#\#) {
|
||||||
|
border-radius: var(--cursor-radius-sm);
|
||||||
|
}
|
||||||
|
.sand-t9pb60:not(#\#):not(#\#) {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.sand-1y0btm7:not(#\#):not(#\#) {
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.sand-mkeg23:not(#\#):not(#\#) {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
.sand-qjedn3:not(#\#):not(#\#) {
|
||||||
|
border-width: .5px;
|
||||||
|
}
|
||||||
|
.sand-11twubx:not(#\#):not(#\#) {
|
||||||
|
gap: var(--cursor-spacing-1);
|
||||||
|
}
|
||||||
|
.sand-rxpjvj:not(#\#):not(#\#) {
|
||||||
|
margin-inline: 0;
|
||||||
|
}
|
||||||
|
.sand-b3r6kr:not(#\#):not(#\#) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.sand-t970qd:not(#\#):not(#\#) {
|
||||||
|
padding-block: 0;
|
||||||
|
}
|
||||||
|
.sand-y3jwiz:not(#\#):not(#\#) {
|
||||||
|
padding-block: var(--cursor-spacing-1);
|
||||||
|
}
|
||||||
|
.sand-1bfovwe:not(#\#):not(#\#) {
|
||||||
|
padding-inline: var(--cursor-spacing-0-5);
|
||||||
|
}
|
||||||
|
.sand-13e3tqs:not(#\#):not(#\#) {
|
||||||
|
padding-inline: var(--cursor-spacing-2);
|
||||||
|
}
|
||||||
|
.sand-6s0dn4:not(#\#):not(#\#):not(#\#) {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.sand-pvyfi4:not(#\#):not(#\#):not(#\#) {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.sand-1hhjprl:not(#\#):not(#\#):not(#\#) {
|
||||||
|
background-color: color-mix(in srgb, var(--cursor-text-primary) 10%, transparent);
|
||||||
|
}
|
||||||
|
.sand-1ua6jya:not(#\#):not(#\#):not(#\#) {
|
||||||
|
background-color: var(--cursor-bg-editor);
|
||||||
|
}
|
||||||
|
.sand-1nyy9xd:not(#\#):not(#\#):not(#\#) {
|
||||||
|
background-color: var(--cursor-foreground);
|
||||||
|
}
|
||||||
|
.sand-1uspnb1:not(#\#):not(#\#):not(#\#) {
|
||||||
|
background-color: var(--sand-floating-control-surface);
|
||||||
|
}
|
||||||
|
.sand-18o3ruo:not(#\#):not(#\#):not(#\#) {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
.sand-1mwwwfo:not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.sand-4n2izg:not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-inline-start-color: var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-1t7ytsu:not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-inline-start-style: solid;
|
||||||
|
}
|
||||||
|
.sand-yumdvf:not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-inline-start-width: 2px;
|
||||||
|
}
|
||||||
|
.sand-12sv23o:not(#\#):not(#\#):not(#\#) {
|
||||||
|
box-shadow: 0 1px 3px 0 var(--sand-shadow-control);
|
||||||
|
}
|
||||||
|
.sand-9f619:not(#\#):not(#\#):not(#\#) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.sand-1heor9g:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.sand-1mh7f6w:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-icon-secondary);
|
||||||
|
}
|
||||||
|
.sand-kbann2:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-text-accent);
|
||||||
|
}
|
||||||
|
.sand-70xvah:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-text-invert);
|
||||||
|
}
|
||||||
|
.sand-l1v4ol:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-text-link);
|
||||||
|
}
|
||||||
|
.sand-pmgbkh:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-text-red-primary,#ff5f57);
|
||||||
|
}
|
||||||
|
.sand-19aaqeu:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
}
|
||||||
|
.sand-4b2ntj:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--cursor-text-tertiary);
|
||||||
|
}
|
||||||
|
.sand-6rl5ky:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--sand-text-danger);
|
||||||
|
}
|
||||||
|
.sand-1o0liin:not(#\#):not(#\#):not(#\#) {
|
||||||
|
color: var(--sand-text-secondary);
|
||||||
|
}
|
||||||
|
.sand-78zum5:not(#\#):not(#\#):not(#\#) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.sand-3nfvp2:not(#\#):not(#\#):not(#\#) {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.sand-2lah0s:not(#\#):not(#\#):not(#\#) {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.sand-1a02dak:not(#\#):not(#\#):not(#\#) {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.sand-67nlm8:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-family: var(--cursor-font-family-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace);
|
||||||
|
}
|
||||||
|
.sand-eb7xqv:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
.sand-140imcn:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-size: 1.06em;
|
||||||
|
}
|
||||||
|
.sand-1b5m78i:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-size: 1.12em;
|
||||||
|
}
|
||||||
|
.sand-10siri3:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
.sand-1wm8ruf:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-size: var(--cursor-font-size-sm);
|
||||||
|
}
|
||||||
|
.sand-y5h43f:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-size: var(--cursor-font-size-xs);
|
||||||
|
}
|
||||||
|
.sand-1rhlpx6:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-weight: var(--sand-font-weight-medium);
|
||||||
|
}
|
||||||
|
.sand-xzm5a7:not(#\#):not(#\#):not(#\#) {
|
||||||
|
font-weight: var(--sand-font-weight-semibold);
|
||||||
|
}
|
||||||
|
.sand-l56j7k:not(#\#):not(#\#):not(#\#) {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.sand-13a6bvl:not(#\#):not(#\#):not(#\#) {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.sand-1ja60sm:not(#\#):not(#\#):not(#\#) {
|
||||||
|
line-height: var(--cursor-line-height-base);
|
||||||
|
}
|
||||||
|
.sand-19ji09o:not(#\#):not(#\#):not(#\#) {
|
||||||
|
line-height: var(--cursor-line-height-xs);
|
||||||
|
}
|
||||||
|
.sand-43c9pm:not(#\#):not(#\#):not(#\#) {
|
||||||
|
list-style-position: outside;
|
||||||
|
}
|
||||||
|
.sand-3yw8vx:not(#\#):not(#\#):not(#\#) {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
.sand-taz4m5:not(#\#):not(#\#):not(#\#) {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
.sand-wbqysy:not(#\#):not(#\#):not(#\#) {
|
||||||
|
margin-inline-end: var(--cursor-spacing-1-5);
|
||||||
|
}
|
||||||
|
.sand-1hc1fzr:not(#\#):not(#\#):not(#\#) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.sand-8fiw5y:not(#\#):not(#\#):not(#\#) {
|
||||||
|
padding-inline-start: var(--cursor-spacing-3);
|
||||||
|
}
|
||||||
|
.sand-92arao:not(#\#):not(#\#):not(#\#) {
|
||||||
|
padding-inline-start: var(--cursor-spacing-5);
|
||||||
|
}
|
||||||
|
.sand-67bb7w:not(#\#):not(#\#):not(#\#) {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.sand-10l6tqk:not(#\#):not(#\#):not(#\#) {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.sand-dpxx8g:not(#\#):not(#\#):not(#\#) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.sand-krqix3:not(#\#):not(#\#):not(#\#) {
|
||||||
|
text-decoration-line: none;
|
||||||
|
}
|
||||||
|
.sand-ltd7ks:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-delay:
|
||||||
|
0s,
|
||||||
|
.15s,
|
||||||
|
.15s;
|
||||||
|
}
|
||||||
|
.sand-s9c323:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-duration:
|
||||||
|
.15s,
|
||||||
|
.2s,
|
||||||
|
.2s;
|
||||||
|
}
|
||||||
|
.sand-fe0yzn:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-duration:
|
||||||
|
var(--cursor-duration-fast),
|
||||||
|
var(--cursor-duration-fast),
|
||||||
|
var(--cursor-duration-instant),
|
||||||
|
var(--cursor-duration-normal);
|
||||||
|
}
|
||||||
|
.sand-cdv909:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-property:
|
||||||
|
color,
|
||||||
|
background-color,
|
||||||
|
transform,
|
||||||
|
opacity;
|
||||||
|
}
|
||||||
|
.sand-8m7ss9:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-property:
|
||||||
|
opacity,
|
||||||
|
max-height,
|
||||||
|
margin-top;
|
||||||
|
}
|
||||||
|
.sand-16ges1v:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-timing-function:
|
||||||
|
ease-out,
|
||||||
|
cubic-bezier(.77, 0, .175, 1),
|
||||||
|
cubic-bezier(.77, 0, .175, 1);
|
||||||
|
}
|
||||||
|
.sand-523cq2:not(#\#):not(#\#):not(#\#) {
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
.sand-16dsc37:not(#\#):not(#\#):not(#\#) {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.sand-eaf4i8:not(#\#):not(#\#):not(#\#) {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.sand-1ifrsg7:hover:not(#\#):not(#\#):not(#\#) {
|
||||||
|
background-image: linear-gradient(var(--cursor-bg-quaternary), var(--cursor-bg-quaternary));
|
||||||
|
}
|
||||||
|
.sand-1sur9pj:hover:not(#\#):not(#\#):not(#\#) {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.sand-m072we.sand-m072we:not(#\#):not(#\#):not(#\#) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.sand-14ux7ur.sand-14ux7ur:not(#\#):not(#\#):not(#\#) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-hj7x8a.sand-hj7x8a:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-sagj69.sand-sagj69:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-duration: .01ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-oddwdg.sand-oddwdg:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-duration: .15s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-1ympp8d.sand-1ympp8d:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-property: opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sand-1rrsdy6.sand-1rrsdy6:not(#\#):not(#\#):not(#\#) {
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.sand-1yas17b.sand-1yas17b:focus-visible:not(#\#):not(#\#):not(#\#) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.sand-o8ljoj.sand-o8ljoj.sand-o8ljoj:where(.sand--default-marker:is(.sand-code-figure:hover) *):not(#\#):not(#\#):not(#\#) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.sand-1nn4xpi.sand-1nn4xpi.sand-1nn4xpi:where(.sand--default-marker:is(.sand-code-figure:hover) *):not(#\#):not(#\#):not(#\#) {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.sand-q1nbte.sand-q1nbte:focus-visible:not(#\#):not(#\#):not(#\#) {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sand-17fyfba:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-bottom-color: var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-1sy0etr:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-bottom-style: none;
|
||||||
|
}
|
||||||
|
.sand-1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
.sand-so031l:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
.sand-1b16gh4:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-left-style: none;
|
||||||
|
}
|
||||||
|
.sand-11pwa6s:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-right-style: none;
|
||||||
|
}
|
||||||
|
.sand-1aeic0j:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-top-color: var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-13fuv20:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-top-style: solid;
|
||||||
|
}
|
||||||
|
.sand-178xt8z:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
.sand-lup9mm:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.sand-at24cr:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.sand-dj266r:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.sand-1om1abp:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
margin-top: var(--cursor-spacing-1);
|
||||||
|
}
|
||||||
|
.sand-h4j8nf:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
max-height: 32px;
|
||||||
|
}
|
||||||
|
.sand-1s3hisn:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
right: var(--cursor-spacing-1-5);
|
||||||
|
}
|
||||||
|
.sand-1jgjl8u:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
top: var(--cursor-spacing-1-5);
|
||||||
|
}
|
||||||
|
.sand-1kky2od:not(#\#):not(#\#):not(#\#):not(#\#) {
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
.sand-kwbhjd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::marker {
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import { App } from "./App";
|
||||||
|
import "./grok/shell.css";
|
||||||
|
import "./grok/production.css";
|
||||||
|
import "./grok/conversation.css";
|
||||||
|
import "./grok/transcript-utility-parity.css";
|
||||||
|
import "./grok/host.css";
|
||||||
|
import { createRuntimeThemeInstaller, type ThemeDocument } from "./grok/runtime-theme-token-installer";
|
||||||
|
|
||||||
|
createRuntimeThemeInstaller(document as unknown as ThemeDocument, "dark");
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
||||||
|
if ("serviceWorker" in navigator) {
|
||||||
|
navigator.serviceWorker.register("/sw.js").catch(() => undefined);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,299 @@
|
||||||
|
/* Grok Bot 0.18 shell tokens (dark) + conversation/computer layout. */
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--cursor-accent: #599CE7;
|
||||||
|
--cursor-base: #F0F0F0;
|
||||||
|
--cursor-chrome: #141414;
|
||||||
|
--cursor-editor: #181818;
|
||||||
|
--cursor-added: #70B489;
|
||||||
|
--cursor-danger: #fc6b83;
|
||||||
|
--cursor-bg-editor: var(--cursor-editor);
|
||||||
|
--cursor-bg-chrome: var(--cursor-chrome);
|
||||||
|
--cursor-bg-secondary: color-mix(in srgb, var(--cursor-base) 8%, transparent);
|
||||||
|
--cursor-bg-tertiary: color-mix(in srgb, var(--cursor-base) 10%, transparent);
|
||||||
|
--cursor-bg-quaternary: color-mix(in srgb, var(--cursor-base) 6%, transparent);
|
||||||
|
--cursor-bg-input-surface: var(--cursor-bg-quaternary);
|
||||||
|
--cursor-text-primary: var(--cursor-base);
|
||||||
|
--cursor-text-secondary: color-mix(in srgb, var(--cursor-base) 74%, transparent);
|
||||||
|
--cursor-text-tertiary: color-mix(in srgb, var(--cursor-base) 60%, transparent);
|
||||||
|
--cursor-text-quaternary: color-mix(in srgb, var(--cursor-base) 44%, transparent);
|
||||||
|
--cursor-input-placeholder-foreground: var(--cursor-text-quaternary);
|
||||||
|
--cursor-stroke-tertiary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
|
||||||
|
--cursor-stroke-secondary: color-mix(in srgb, var(--cursor-base) 16%, transparent);
|
||||||
|
--cursor-stroke-focused: #a9c85d;
|
||||||
|
--cursor-radius-base: 6px;
|
||||||
|
--cursor-radius-lg: 8px;
|
||||||
|
--cursor-radius-full: 999px;
|
||||||
|
--cursor-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
--cursor-font-size-lg: 14px;
|
||||||
|
--cursor-font-size-base: 13px;
|
||||||
|
--cursor-font-size-xs: 11px;
|
||||||
|
--cursor-spacing-0-75: 6px;
|
||||||
|
--cursor-box-shadow-sm: 0 2px 8px #0006;
|
||||||
|
--sand-fill-primary: #d8fa78;
|
||||||
|
--sand-fill-secondary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
|
||||||
|
--sand-fill-accent: #c7ec6b;
|
||||||
|
--sand-fill-success: #70B489;
|
||||||
|
--sand-fill-bubble-agent: #20231f;
|
||||||
|
--sand-fill-bubble-user: #2a2d27;
|
||||||
|
--sand-text-on-color: #171914;
|
||||||
|
--sand-border-weak: var(--cursor-stroke-tertiary);
|
||||||
|
--safe-top: env(safe-area-inset-top, 0px);
|
||||||
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
|
||||||
|
button, textarea, input { font: inherit; color: inherit; }
|
||||||
|
button { cursor: pointer; }
|
||||||
|
textarea, input { font-size: 16px; }
|
||||||
|
.sand-shell {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px minmax(0, 1fr);
|
||||||
|
width: 100%;
|
||||||
|
height: 100dvh;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-editor);
|
||||||
|
font-family: var(--cursor-font-family-sans);
|
||||||
|
}
|
||||||
|
.sand-shell button:disabled { cursor: not-allowed; }
|
||||||
|
|
||||||
|
.sand-agents-sidebar {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
background: var(--cursor-bg-chrome);
|
||||||
|
border-right: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
padding-top: var(--safe-top);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 12px 0 16px;
|
||||||
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__header strong { font-size: var(--cursor-font-size-lg); }
|
||||||
|
.sand-agents-sidebar__new {
|
||||||
|
width: 28px; height: 28px; padding: 0;
|
||||||
|
color: var(--cursor-text-secondary);
|
||||||
|
background: transparent; border: 0; border-radius: var(--cursor-radius-lg);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__new:hover { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-agents-create {
|
||||||
|
display: flex; gap: 6px; padding: 8px 12px;
|
||||||
|
}
|
||||||
|
.sand-agents-create input {
|
||||||
|
flex: 1; min-width: 0; min-height: 32px; padding: 6px 8px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--cursor-bg-input-surface);
|
||||||
|
border: 1px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: var(--cursor-radius-base);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.sand-agents-create button {
|
||||||
|
padding: 0 10px; min-height: 32px;
|
||||||
|
color: var(--sand-text-on-color);
|
||||||
|
background: var(--sand-fill-primary);
|
||||||
|
border: 0; border-radius: var(--cursor-radius-base);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.sand-agents-list {
|
||||||
|
display: grid;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
gap: var(--cursor-spacing-0-75);
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 4px 12px 24px;
|
||||||
|
}
|
||||||
|
.sand-agents-section__empty {
|
||||||
|
display: flex; align-items: center; min-height: 30px; padding: 8px;
|
||||||
|
color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs);
|
||||||
|
}
|
||||||
|
.sand-agent-item {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||||
|
gap: 9px;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 58px;
|
||||||
|
padding: 8px;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--cursor-radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
.sand-agent-item:hover, .sand-agent-item[aria-current="true"] { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-agent-item__avatar {
|
||||||
|
display: grid; place-items: center; width: 34px; height: 34px;
|
||||||
|
color: var(--sand-text-on-color); background: var(--sand-fill-accent);
|
||||||
|
border-radius: var(--cursor-radius-lg); font-weight: 700;
|
||||||
|
}
|
||||||
|
.sand-agent-item__body { display: grid; gap: 4px; min-width: 0; }
|
||||||
|
.sand-agent-item__name, .sand-agent-item__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sand-agent-item__name { font-size: var(--cursor-font-size-base); }
|
||||||
|
.sand-agent-item__preview { color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); font-weight: 400; }
|
||||||
|
.sand-kit-status-dot {
|
||||||
|
width: 8px; height: 8px; border-radius: var(--cursor-radius-full); background: #3a3a3a;
|
||||||
|
}
|
||||||
|
.sand-kit-status-dot[data-status="working"] { background: var(--sand-fill-success); }
|
||||||
|
.sand-agents-sidebar__footer {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
padding: 10px 12px calc(10px + var(--safe-bottom));
|
||||||
|
border-top: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar__footer small { display: block; color: var(--cursor-text-tertiary); }
|
||||||
|
|
||||||
|
.sand-chat-stage {
|
||||||
|
position: relative; z-index: 1;
|
||||||
|
display: flex; flex: 1 1 0; flex-direction: column;
|
||||||
|
width: 100%; min-width: 0; min-height: 0; overflow: hidden;
|
||||||
|
background: var(--cursor-bg-editor);
|
||||||
|
}
|
||||||
|
.sand-chat-header {
|
||||||
|
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||||||
|
min-width: 0; min-height: calc(51px + var(--safe-top));
|
||||||
|
padding: var(--safe-top) 16px 0;
|
||||||
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-chat-header__menu {
|
||||||
|
display: none; width: 32px; height: 32px; padding: 0;
|
||||||
|
color: var(--cursor-text-secondary); background: transparent; border: 0; border-radius: var(--cursor-radius-lg);
|
||||||
|
}
|
||||||
|
.sand-chat-header__identity { display: flex; align-items: center; gap: 9px; padding: 5px 7px; min-width: 0; }
|
||||||
|
.sand-chat-header__avatar {
|
||||||
|
display: grid; place-items: center; width: 28px; height: 28px;
|
||||||
|
color: var(--sand-text-on-color); background: var(--sand-fill-accent);
|
||||||
|
border-radius: var(--cursor-radius-lg); font-weight: 700;
|
||||||
|
}
|
||||||
|
.sand-chat-header__identity small { display: block; color: var(--cursor-text-tertiary); }
|
||||||
|
.sand-chat-header__controls { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
|
||||||
|
.sand-chat-header__controls button {
|
||||||
|
min-height: 32px; padding: 4px 8px;
|
||||||
|
color: var(--cursor-text-secondary); background: transparent;
|
||||||
|
border: 0; border-radius: var(--cursor-radius-lg);
|
||||||
|
}
|
||||||
|
.sand-chat-header__controls button:hover { background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-chat-header__controls .danger { color: var(--cursor-danger); }
|
||||||
|
|
||||||
|
.sand-virtual-transcript {
|
||||||
|
flex: 1 1 0; min-height: 0; overflow: auto;
|
||||||
|
padding: 28px max(30px, calc((100% - 690px) / 2));
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.sand-transcript-row { margin: 0 0 22px; }
|
||||||
|
.sand-transcript-row--user { display: flex; justify-content: flex-end; }
|
||||||
|
.sand-message {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: min(88%, 640px, calc(100% - 82px));
|
||||||
|
padding: 8px 12px;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
color: var(--cursor-text-primary);
|
||||||
|
background: var(--sand-fill-bubble-agent);
|
||||||
|
border-radius: 18px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 1.45;
|
||||||
|
font-size: var(--cursor-font-size-base);
|
||||||
|
}
|
||||||
|
.sand-transcript-row--user .sand-message { background: var(--sand-fill-bubble-user); }
|
||||||
|
.sand-activity { margin: 0 0 10px; color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); }
|
||||||
|
.sand-typing-indicator { display: flex; gap: 4px; width: max-content; padding: 10px 12px; background: #20231f; border-radius: 14px; }
|
||||||
|
.sand-typing-indicator span { width: 5px; height: 5px; background: #9ba392; border-radius: 50%; }
|
||||||
|
.sand-question {
|
||||||
|
margin: 0 max(30px, calc((100% - 690px) / 2)) 8px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
border-radius: 14px;
|
||||||
|
background: color-mix(in srgb, var(--sand-fill-accent) 8%, var(--cursor-bg-editor));
|
||||||
|
}
|
||||||
|
.sand-question p { margin: 0 0 8px; }
|
||||||
|
.sand-question__options { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
.sand-question__options button {
|
||||||
|
min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px;
|
||||||
|
background: var(--sand-fill-primary); color: var(--sand-text-on-color); font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-chat-input-dock {
|
||||||
|
display: flex; flex: 0 0 auto; flex-direction: column;
|
||||||
|
width: 100%; min-width: 0;
|
||||||
|
padding: 8px max(24px, calc((100% - 700px) / 2)) calc(18px + var(--safe-bottom));
|
||||||
|
}
|
||||||
|
.sand-prompt-shell {
|
||||||
|
position: relative; padding: 9px;
|
||||||
|
background: var(--cursor-bg-input-surface);
|
||||||
|
border: 1px solid var(--cursor-stroke-secondary);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: var(--cursor-box-shadow-sm);
|
||||||
|
}
|
||||||
|
.sand-prompt-field {
|
||||||
|
display: block; box-sizing: border-box; width: 100%; min-height: 48px; resize: none;
|
||||||
|
color: var(--cursor-text-primary); background: transparent; border: 0; outline: none; line-height: 1.4;
|
||||||
|
}
|
||||||
|
.sand-prompt-field::placeholder { color: var(--cursor-input-placeholder-foreground); }
|
||||||
|
.sand-prompt-actions-row { display: flex; align-items: center; justify-content: flex-end; }
|
||||||
|
.sand-prompt-send {
|
||||||
|
display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
|
||||||
|
color: var(--sand-text-on-color); background: var(--sand-fill-primary);
|
||||||
|
border: 0; border-radius: 50%;
|
||||||
|
}
|
||||||
|
.sand-prompt-send:disabled { cursor: not-allowed; opacity: .4; }
|
||||||
|
|
||||||
|
.sand-computer-pane {
|
||||||
|
position: fixed; inset: 0 0 0 auto; z-index: 20;
|
||||||
|
display: flex; flex-direction: column; width: min(52vw, 720px);
|
||||||
|
background: #0d0f0c; border-left: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
padding-top: var(--safe-top);
|
||||||
|
}
|
||||||
|
.sand-computer-pane[hidden] { display: none !important; }
|
||||||
|
.sand-computer-pane__top {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
min-height: 51px; padding: 0 12px;
|
||||||
|
background: var(--cursor-bg-chrome);
|
||||||
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-computer-pane iframe { flex: 1; width: 100%; border: 0; background: #111; }
|
||||||
|
.sand-computer-pane__status {
|
||||||
|
margin: 0; padding: 8px 12px calc(8px + var(--safe-bottom));
|
||||||
|
color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs);
|
||||||
|
background: var(--cursor-bg-chrome);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sand-tabbar { display: none; }
|
||||||
|
.sand-backdrop { display: none; }
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.sand-shell { grid-template-columns: 1fr; }
|
||||||
|
.sand-agents-sidebar {
|
||||||
|
position: fixed; z-index: 9; inset: 0 auto 0 0; width: min(86vw, 320px);
|
||||||
|
transform: translateX(-105%);
|
||||||
|
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
|
||||||
|
}
|
||||||
|
.sand-agents-sidebar.is-open { transform: none; }
|
||||||
|
.sand-chat-header__menu { display: inline-flex; }
|
||||||
|
.sand-computer-pane { inset: 0; width: 100%; }
|
||||||
|
.sand-tabbar {
|
||||||
|
display: grid; grid-template-columns: 1fr 1fr;
|
||||||
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
|
||||||
|
padding: 6px 8px calc(6px + var(--safe-bottom));
|
||||||
|
background: color-mix(in srgb, var(--cursor-bg-chrome) 92%, transparent);
|
||||||
|
border-top: 1px solid var(--cursor-stroke-tertiary);
|
||||||
|
}
|
||||||
|
.sand-tabbar button {
|
||||||
|
min-height: 44px; border: 0; border-radius: 12px;
|
||||||
|
background: transparent; color: var(--cursor-text-tertiary); font-weight: 600;
|
||||||
|
}
|
||||||
|
.sand-tabbar button[aria-current="true"] { color: var(--cursor-text-primary); background: var(--cursor-bg-secondary); }
|
||||||
|
.sand-chat-input-dock { padding-bottom: calc(64px + var(--safe-bottom)); }
|
||||||
|
.sand-backdrop {
|
||||||
|
display: block; position: fixed; inset: 0; z-index: 8; background: #0008;
|
||||||
|
}
|
||||||
|
.sand-backdrop[hidden] { display: none !important; }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -0,0 +1,255 @@
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bg: #181818;
|
||||||
|
--chrome: #141414;
|
||||||
|
--text: #f0f0f0;
|
||||||
|
--text-2: color-mix(in srgb, #f0f0f0 74%, transparent);
|
||||||
|
--text-3: color-mix(in srgb, #f0f0f0 60%, transparent);
|
||||||
|
--stroke: color-mix(in srgb, #f0f0f0 12%, transparent);
|
||||||
|
--fill: color-mix(in srgb, #f0f0f0 14%, transparent);
|
||||||
|
--bubble: #222;
|
||||||
|
--user: #2c2c2c;
|
||||||
|
--accent: #c7ec6b;
|
||||||
|
--danger: #fc6b83;
|
||||||
|
--radius: 18px;
|
||||||
|
--safe-top: env(safe-area-inset-top, 0px);
|
||||||
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
|
||||||
|
button, textarea { font: inherit; color: inherit; }
|
||||||
|
button { cursor: pointer; }
|
||||||
|
textarea { font-size: 16px; } /* iOS: avoid zoom */
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px minmax(0, 1fr);
|
||||||
|
height: 100dvh;
|
||||||
|
height: 100svh;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
background: var(--chrome);
|
||||||
|
border-right: 1px solid var(--stroke);
|
||||||
|
padding-top: var(--safe-top);
|
||||||
|
}
|
||||||
|
.sidebar-header, .chat-header, .computer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 51px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-bottom: 1px solid var(--stroke);
|
||||||
|
}
|
||||||
|
.session-list { flex: 1; overflow: auto; padding: 8px; }
|
||||||
|
.session-item {
|
||||||
|
display: grid;
|
||||||
|
gap: 4px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 58px;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.session-item:hover, .session-item.active { background: var(--fill); }
|
||||||
|
.session-item small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.sidebar-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 12px calc(10px + var(--safe-bottom));
|
||||||
|
border-top: 1px solid var(--stroke);
|
||||||
|
}
|
||||||
|
.sidebar-footer small, .identity small, #header-status { color: var(--text-3); display: block; }
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--accent);
|
||||||
|
color: #141414;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.avatar.sm { width: 28px; height: 28px; font-size: 13px; }
|
||||||
|
|
||||||
|
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||||
|
.chat-header { padding-top: var(--safe-top); min-height: calc(51px + var(--safe-top)); }
|
||||||
|
.identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
||||||
|
.header-actions { display: flex; gap: 4px; }
|
||||||
|
|
||||||
|
.transcript {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 24px max(16px, calc((100% - 690px) / 2)) 12px;
|
||||||
|
outline: none;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
.row { display: flex; margin: 0 0 18px; }
|
||||||
|
.row.user { justify-content: flex-end; }
|
||||||
|
.bubble {
|
||||||
|
max-width: min(88%, 640px);
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--bubble);
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.row.user .bubble { background: var(--user); }
|
||||||
|
.activity {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
color: var(--text-3);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.plan {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid var(--stroke);
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.plan li { margin: 4px 0; }
|
||||||
|
.plan .done { color: var(--text-3); text-decoration: line-through; }
|
||||||
|
.typing { display: flex; gap: 4px; padding: 10px 12px; width: max-content; background: var(--bubble); border-radius: 14px; }
|
||||||
|
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #9ba392; animation: blink 1s infinite; }
|
||||||
|
.typing i:nth-child(2) { animation-delay: .15s; }
|
||||||
|
.typing i:nth-child(3) { animation-delay: .3s; }
|
||||||
|
@keyframes blink { 50% { opacity: .35; } }
|
||||||
|
|
||||||
|
.question-card {
|
||||||
|
margin: 0 max(16px, calc((100% - 690px) / 2)) 8px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--stroke);
|
||||||
|
border-radius: 14px;
|
||||||
|
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
|
||||||
|
}
|
||||||
|
.question-card p { margin: 0 0 8px; }
|
||||||
|
.options { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
.options button {
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--accent);
|
||||||
|
color: #141414;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer {
|
||||||
|
padding: 8px max(16px, calc((100% - 700px) / 2)) calc(12px + var(--safe-bottom));
|
||||||
|
}
|
||||||
|
.prompt-shell {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 9px;
|
||||||
|
background: color-mix(in srgb, #f0f0f0 6%, var(--bg));
|
||||||
|
border: 1px solid var(--stroke);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
#prompt {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 44px;
|
||||||
|
max-height: 30vh;
|
||||||
|
resize: none;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
#prompt::placeholder { color: var(--text-3); }
|
||||||
|
.send-btn {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--text);
|
||||||
|
color: var(--bg);
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.send-btn:disabled { opacity: .35; }
|
||||||
|
|
||||||
|
.icon-btn, .text-btn {
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
.icon-btn:hover, .text-btn:hover { background: var(--fill); }
|
||||||
|
.text-btn.danger { color: var(--danger); }
|
||||||
|
.hidden { display: none !important; }
|
||||||
|
|
||||||
|
.computer-pane {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 20;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #000;
|
||||||
|
padding-top: var(--safe-top);
|
||||||
|
}
|
||||||
|
.computer-pane[hidden] { display: none !important; }
|
||||||
|
.computer-header { background: var(--chrome); }
|
||||||
|
.computer-pane iframe { flex: 1; width: 100%; border: 0; background: #111; }
|
||||||
|
.computer-status { margin: 0; padding: 8px 12px calc(8px + var(--safe-bottom)); color: var(--text-3); font-size: 12px; background: var(--chrome); }
|
||||||
|
|
||||||
|
.tabbar { display: none; }
|
||||||
|
.menu-btn { display: none; }
|
||||||
|
.backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 8;
|
||||||
|
background: #0008;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.shell { grid-template-columns: 1fr; }
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9;
|
||||||
|
inset: 0 auto 0 0;
|
||||||
|
width: min(86vw, 320px);
|
||||||
|
transform: translateX(-105%);
|
||||||
|
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
|
||||||
|
}
|
||||||
|
.sidebar.open { transform: none; }
|
||||||
|
.menu-btn { display: inline-flex; }
|
||||||
|
.tabbar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 6;
|
||||||
|
padding: 6px 8px calc(6px + var(--safe-bottom));
|
||||||
|
background: color-mix(in srgb, var(--chrome) 92%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
border-top: 1px solid var(--stroke);
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
min-height: 44px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.tab.active { color: var(--text); background: var(--fill); }
|
||||||
|
.composer { padding-bottom: calc(64px + var(--safe-bottom)); }
|
||||||
|
.header-actions #computer-btn { display: none; }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
const CACHE = "grokboy-web-v1";
|
||||||
|
const PRECACHE = ["/", "/styles.css", "/app.js", "/manifest.webmanifest", "/icon.svg"];
|
||||||
|
|
||||||
|
self.addEventListener("install", (event) => {
|
||||||
|
event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(PRECACHE)));
|
||||||
|
self.skipWaiting();
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener("activate", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys().then((keys) =>
|
||||||
|
Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
self.clients.claim();
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener("fetch", (event) => {
|
||||||
|
const url = new URL(event.request.url);
|
||||||
|
if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/novnc")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (event.request.method !== "GET") return;
|
||||||
|
event.respondWith(
|
||||||
|
fetch(event.request)
|
||||||
|
.then((response) => {
|
||||||
|
const copy = response.clone();
|
||||||
|
caches.open(CACHE).then((cache) => cache.put(event.request, copy));
|
||||||
|
return response;
|
||||||
|
})
|
||||||
|
.catch(() => caches.match(event.request))
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
"/api": "http://127.0.0.1:8787",
|
||||||
|
"/novnc": { target: "http://127.0.0.1:8787", ws: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
preview: {
|
||||||
|
port: 4173,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue