Gan, Jimmy
804 lines
31 KiB
Svelte
804 lines
31 KiB
Svelte
<script>
|
|
import { onMount, onDestroy } from "svelte";
|
|
import { VoiceSession } from "../lib/voice.js";
|
|
import { tryRefreshSession } from "../lib/api.js";
|
|
|
|
const PERSISTENCE_STATUS_PREFIX = "__DASHBOARD_PERSISTENCE__:";
|
|
const PERSISTENCE_STATUS_PREFIX_BYTES = new TextEncoder().encode(PERSISTENCE_STATUS_PREFIX);
|
|
|
|
const hosts = [
|
|
{ id: "nas", label: "NAS" },
|
|
{ id: "vps", label: "VPS" },
|
|
{ id: "caddy-vps", label: "Caddy VPS" },
|
|
{ id: "mac", label: "Mac" },
|
|
{ id: "claude-dev", label: "Claude Dev", persistent: true },
|
|
];
|
|
|
|
const DARK_THEME = {
|
|
background: "#0f172a", foreground: "#e2e8f0", cursor: "#6366f1",
|
|
cursorAccent: "#0f172a", selectionBackground: "#334155",
|
|
black: "#0f172a", red: "#f43f5e", green: "#10b981",
|
|
yellow: "#f59e0b", blue: "#3b82f6", magenta: "#a855f7",
|
|
cyan: "#06b6d4", white: "#e2e8f0",
|
|
};
|
|
|
|
const LIGHT_THEME = {
|
|
background: "#f8fafc", foreground: "#0f172a", cursor: "#4f46e5",
|
|
cursorAccent: "#f8fafc", selectionBackground: "#cbd5e1",
|
|
black: "#0f172a", red: "#e11d48", green: "#059669",
|
|
yellow: "#d97706", blue: "#2563eb", magenta: "#9333ea",
|
|
cyan: "#0891b2", white: "#334155",
|
|
};
|
|
|
|
let tabs = $state([]);
|
|
let activeTab = $state(null);
|
|
let showMenu = $state(false);
|
|
let voiceTick = $state(0);
|
|
let isDark = $state(false);
|
|
let isFullscreen = $state(false);
|
|
let showActionButtons = $state(false);
|
|
let tabCounter = 0;
|
|
const tabData = new Map();
|
|
|
|
function currentTheme() {
|
|
return isDark ? DARK_THEME : LIGHT_THEME;
|
|
}
|
|
|
|
function hostById(hostId) {
|
|
return hosts.find((h) => h.id === hostId);
|
|
}
|
|
|
|
function openFreshSession(tab) {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("page", "terminal");
|
|
url.searchParams.set("host", tab.hostId);
|
|
window.open(`${url.pathname}${url.search}${url.hash}`, "_blank", "noopener");
|
|
}
|
|
|
|
function persistenceLabel(status, reconnecting) {
|
|
if (status === "created") return "created new persistent session";
|
|
if (reconnecting) return "reattached to persistent session";
|
|
return "attached to persistent session";
|
|
}
|
|
|
|
function applyThemeToTerminals() {
|
|
const theme = currentTheme();
|
|
tabData.forEach((d) => {
|
|
d.term?.options && (d.term.options.theme = theme);
|
|
});
|
|
}
|
|
|
|
function syncTheme() {
|
|
isDark = document.documentElement.classList.contains("dark");
|
|
applyThemeToTerminals();
|
|
}
|
|
|
|
const themeObserver = new MutationObserver((mutations) => {
|
|
if (mutations.some((m) => m.attributeName === "class")) syncTheme();
|
|
});
|
|
onMount(() => {
|
|
syncTheme();
|
|
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
|
|
const requestedHost = new URLSearchParams(window.location.search).get("host");
|
|
if (requestedHost && !tabs.length && hostById(requestedHost)) addTab(requestedHost);
|
|
});
|
|
|
|
function cleanName(name) {
|
|
return (name || "image")
|
|
.replace(/[^a-zA-Z0-9._-]/g, "-")
|
|
.replace(/-+/g, "-")
|
|
.replace(/^-|-$/g, "") || "image";
|
|
}
|
|
|
|
function extensionFor(type) {
|
|
if (type === "image/png") return "png";
|
|
if (type === "image/jpeg") return "jpg";
|
|
if (type === "image/webp") return "webp";
|
|
if (type === "image/gif") return "gif";
|
|
return "bin";
|
|
}
|
|
|
|
async function fileToBase64(file) {
|
|
const buf = await file.arrayBuffer();
|
|
let binary = "";
|
|
const bytes = new Uint8Array(buf);
|
|
const chunkSize = 0x8000;
|
|
for (let i = 0; i < bytes.length; i += chunkSize) {
|
|
binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
|
|
}
|
|
return btoa(binary);
|
|
}
|
|
|
|
async function sendDroppedImage(term, ws, file) {
|
|
if (!file?.type?.startsWith("image/")) return;
|
|
if (ws.readyState !== 1) return;
|
|
|
|
const ext = extensionFor(file.type);
|
|
const baseName = cleanName(file.name).replace(/\.[a-zA-Z0-9]+$/, "");
|
|
const stamp = Date.now();
|
|
const imagePath = `/tmp/claude-images/${baseName || "image"}-${stamp}.${ext}`;
|
|
const b64 = await fileToBase64(file);
|
|
|
|
const cmd = [
|
|
"python3 - <<'PY'",
|
|
"import base64, pathlib",
|
|
`p = pathlib.Path(${JSON.stringify(imagePath)})`,
|
|
"p.parent.mkdir(parents=True, exist_ok=True)",
|
|
`p.write_bytes(base64.b64decode(${JSON.stringify(b64)}))`,
|
|
`print(f'saved image -> {p}')`,
|
|
"PY",
|
|
"",
|
|
].join("\n");
|
|
|
|
ws.send(new TextEncoder().encode(cmd));
|
|
term.write(`\r\n\x1b[90m[Uploaded image to ${imagePath}]\x1b[0m\r\n`);
|
|
}
|
|
|
|
function addTab(hostId) {
|
|
const id = ++tabCounter;
|
|
const host = hostById(hostId);
|
|
tabs = [...tabs, {
|
|
id,
|
|
hostId,
|
|
label: host.label,
|
|
connected: false,
|
|
error: "",
|
|
statusBanner: host.persistent ? "Connecting to persistent session..." : "",
|
|
persistent: !!host.persistent,
|
|
}];
|
|
activeTab = id;
|
|
showMenu = false;
|
|
}
|
|
|
|
function closeTab(id) {
|
|
const d = tabData.get(id);
|
|
if (d) {
|
|
d.closedManually = true;
|
|
if (d.reconnectTimer) clearTimeout(d.reconnectTimer);
|
|
d.voice?.destroy();
|
|
d.ro?.disconnect();
|
|
if (d.heartbeat) clearInterval(d.heartbeat);
|
|
d.term?.element?.removeEventListener("dragover", d.handleDragOver);
|
|
d.term?.element?.removeEventListener("drop", d.handleDrop);
|
|
d.term?.textarea?.removeEventListener("paste", d.handlePaste);
|
|
d.ws?.close();
|
|
d.term?.dispose();
|
|
tabData.delete(id);
|
|
}
|
|
tabs = tabs.filter((t) => t.id !== id);
|
|
if (activeTab === id) activeTab = tabs.length ? tabs[tabs.length - 1].id : null;
|
|
}
|
|
|
|
function updateTab(tabId, props) {
|
|
tabs = tabs.map((t) => (t.id === tabId ? { ...t, ...props } : t));
|
|
}
|
|
|
|
function initTerminal(el, tab) {
|
|
const tabId = tab.id;
|
|
(async () => {
|
|
const { Terminal } = await import("@xterm/xterm");
|
|
const { FitAddon } = await import("@xterm/addon-fit");
|
|
await import("@xterm/xterm/css/xterm.css");
|
|
const term = new Terminal({
|
|
cursorBlink: true, fontSize: 13,
|
|
fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace",
|
|
lineHeight: 1.4,
|
|
theme: currentTheme(),
|
|
});
|
|
const fit = new FitAddon();
|
|
term.loadAddon(fit);
|
|
term.open(el);
|
|
fit.fit();
|
|
|
|
const proto = location.protocol === "https:" ? "wss:" : "ws:";
|
|
let heartbeat = null;
|
|
let pongTimeout = null;
|
|
let reconnectTimer = null;
|
|
let closedManually = false;
|
|
let reconnecting = false;
|
|
let authRecoveryInFlight = false;
|
|
let reconnectAttempts = 0;
|
|
let consecutiveAuthFailures = 0;
|
|
const MAX_RECONNECT_DELAY = 30000;
|
|
const MAX_AUTH_FAILURES = 3;
|
|
const PING_INTERVAL = 30000; // 30s between pings
|
|
const PONG_TIMEOUT = 10000; // 10s to receive pong
|
|
|
|
function clearHeartbeat() {
|
|
if (heartbeat) {
|
|
clearInterval(heartbeat);
|
|
heartbeat = null;
|
|
}
|
|
if (pongTimeout) {
|
|
clearTimeout(pongTimeout);
|
|
pongTimeout = null;
|
|
}
|
|
}
|
|
|
|
function handleAuthExpired(reason = "Session expired — please log in again") {
|
|
clearHeartbeat();
|
|
if (reconnectTimer) {
|
|
clearTimeout(reconnectTimer);
|
|
reconnectTimer = null;
|
|
}
|
|
reconnecting = false;
|
|
updateTab(tabId, {
|
|
connected: false,
|
|
error: reason,
|
|
statusBanner: "",
|
|
});
|
|
term.write(`\r\n\x1b[90m[${reason}]\x1b[0m`);
|
|
const d = tabData.get(tabId);
|
|
if (d) {
|
|
d.ws = null;
|
|
d.heartbeat = heartbeat;
|
|
d.reconnectTimer = reconnectTimer;
|
|
d.closedManually = closedManually;
|
|
d.reconnecting = reconnecting;
|
|
}
|
|
}
|
|
|
|
function scheduleReconnect(reason) {
|
|
clearHeartbeat();
|
|
if (closedManually || reconnectTimer) return;
|
|
reconnecting = true;
|
|
reconnectAttempts++;
|
|
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts - 1), MAX_RECONNECT_DELAY);
|
|
updateTab(tabId, {
|
|
connected: false,
|
|
error: `${reason} — reconnecting in ${Math.round(delay / 1000)}s (attempt ${reconnectAttempts})...`,
|
|
statusBanner: tab.persistent ? "Reconnecting to persistent session..." : "",
|
|
});
|
|
term.write(`\r\n\x1b[90m[${reason} — reconnecting in ${Math.round(delay / 1000)}s...]\x1b[0m`);
|
|
reconnectTimer = setTimeout(() => {
|
|
reconnectTimer = null;
|
|
if (!tabData.has(tabId) || closedManually) return;
|
|
connect(true);
|
|
}, delay);
|
|
}
|
|
|
|
function sendSize(ws) {
|
|
if (ws.readyState === 1) {
|
|
const buf = new Uint8Array(5);
|
|
buf[0] = 0x01;
|
|
new DataView(buf.buffer).setUint16(1, term.cols);
|
|
new DataView(buf.buffer).setUint16(3, term.rows);
|
|
ws.send(buf);
|
|
}
|
|
}
|
|
|
|
async function connect(forceRefresh = false) {
|
|
let d = tabData.get(tabId);
|
|
|
|
if (forceRefresh) {
|
|
const refreshed = await tryRefreshSession();
|
|
if (!refreshed) {
|
|
handleAuthExpired();
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const ws = new WebSocket(
|
|
`${proto}//${location.host}/ws/terminal?host=${encodeURIComponent(tab.hostId)}`
|
|
);
|
|
ws.binaryType = "arraybuffer";
|
|
|
|
ws.onopen = () => {
|
|
reconnectAttempts = 0;
|
|
consecutiveAuthFailures = 0; // Reset auth failure counter on successful connection
|
|
updateTab(tabId, {
|
|
connected: true,
|
|
error: "",
|
|
statusBanner: tab.persistent ? "Connected. Waiting for persistent session status..." : "",
|
|
});
|
|
sendSize(ws);
|
|
clearHeartbeat();
|
|
heartbeat = setInterval(() => {
|
|
if (ws.readyState === 1) {
|
|
ws.send("__ping__");
|
|
// Set timeout to detect missing pong
|
|
pongTimeout = setTimeout(() => {
|
|
// Check if still the same WebSocket instance and still open
|
|
const currentTab = tabData.get(tabId);
|
|
if (currentTab?.ws === ws && ws.readyState === 1) {
|
|
ws.close(1000, "keepalive ping timeout");
|
|
}
|
|
}, PONG_TIMEOUT);
|
|
}
|
|
}, PING_INTERVAL);
|
|
const d = tabData.get(tabId);
|
|
if (d) {
|
|
d.ws = ws;
|
|
d.heartbeat = heartbeat;
|
|
d.reconnectTimer = reconnectTimer;
|
|
d.closedManually = closedManually;
|
|
d.reconnecting = reconnecting;
|
|
d.voice?.attach(term, ws);
|
|
}
|
|
};
|
|
ws.onmessage = (e) => {
|
|
// Check for text pong response
|
|
if (typeof e.data === 'string' && e.data === '__pong__') {
|
|
// Clear the pong timeout - connection is alive
|
|
if (pongTimeout) {
|
|
clearTimeout(pongTimeout);
|
|
pongTimeout = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
const data = new Uint8Array(e.data);
|
|
const isPersistenceMessage = tab.persistent
|
|
&& data.length >= PERSISTENCE_STATUS_PREFIX_BYTES.length
|
|
&& PERSISTENCE_STATUS_PREFIX_BYTES.every((byte, index) => data[index] === byte);
|
|
if (isPersistenceMessage) {
|
|
const status = new TextDecoder().decode(data.slice(PERSISTENCE_STATUS_PREFIX_BYTES.length)).trim();
|
|
updateTab(tabId, { statusBanner: persistenceLabel(status, reconnecting) });
|
|
reconnecting = false;
|
|
const d = tabData.get(tabId);
|
|
if (d) d.reconnecting = reconnecting;
|
|
return;
|
|
}
|
|
term.write(data);
|
|
};
|
|
ws.onclose = async (e) => {
|
|
const reason = e.reason || `Connection closed (code ${e.code})`;
|
|
const tabState = tabData.get(tabId);
|
|
if (tabState) tabState.ws = null;
|
|
|
|
// Handle auth failures (code 1008)
|
|
if (e.code === 1008) {
|
|
consecutiveAuthFailures++;
|
|
|
|
// Stop after MAX_AUTH_FAILURES consecutive auth failures
|
|
if (consecutiveAuthFailures >= MAX_AUTH_FAILURES) {
|
|
handleAuthExpired(`Session expired after ${MAX_AUTH_FAILURES} attempts — please refresh page`);
|
|
return;
|
|
}
|
|
|
|
// Try to refresh session
|
|
if (!closedManually && !authRecoveryInFlight) {
|
|
authRecoveryInFlight = true;
|
|
try {
|
|
const refreshed = await tryRefreshSession();
|
|
if (refreshed && !closedManually) {
|
|
reconnecting = true;
|
|
updateTab(tabId, {
|
|
connected: false,
|
|
error: `Refreshing session (attempt ${consecutiveAuthFailures}/${MAX_AUTH_FAILURES})...`,
|
|
statusBanner: tab.persistent ? "Reconnecting to persistent session..." : "",
|
|
});
|
|
term.write(`\r\n\x1b[90m[Refreshing session...]\x1b[0m`);
|
|
void connect(false);
|
|
return;
|
|
}
|
|
} catch (err) {
|
|
console.error("Session refresh failed:", err);
|
|
} finally {
|
|
authRecoveryInFlight = false;
|
|
}
|
|
}
|
|
handleAuthExpired("Session expired — please log in again");
|
|
return;
|
|
}
|
|
|
|
// Non-auth failures: continue with normal reconnection
|
|
if (!closedManually) scheduleReconnect(reason);
|
|
else {
|
|
clearHeartbeat();
|
|
updateTab(tabId, { connected: false, error: reason });
|
|
term.write(`\r\n\x1b[90m[${reason}]\x1b[0m`);
|
|
}
|
|
};
|
|
ws.onerror = () => {
|
|
const tabState = tabData.get(tabId);
|
|
if (tabState) tabState.ws = null;
|
|
if (!closedManually) scheduleReconnect("Connection failed");
|
|
else updateTab(tabId, { connected: false, error: "Connection failed" });
|
|
};
|
|
|
|
d = tabData.get(tabId);
|
|
if (d) {
|
|
d.ws = ws;
|
|
d.heartbeat = heartbeat;
|
|
d.reconnectTimer = reconnectTimer;
|
|
d.closedManually = closedManually;
|
|
d.reconnecting = reconnecting;
|
|
}
|
|
return ws;
|
|
}
|
|
|
|
let ws = null;
|
|
void connect().then((connectedWs) => {
|
|
ws = connectedWs;
|
|
if (connectedWs) voice.attach(term, connectedWs);
|
|
});
|
|
term.onData((data) => {
|
|
const currentWs = tabData.get(tabId)?.ws;
|
|
if (currentWs?.readyState === 1) currentWs.send(new TextEncoder().encode(data));
|
|
});
|
|
|
|
const handleDragOver = (e) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
const handleDrop = async (e) => {
|
|
e.preventDefault();
|
|
if (activeTab !== tabId) return;
|
|
const currentWs = tabData.get(tabId)?.ws;
|
|
const files = [...(e.dataTransfer?.files || [])].filter((f) => f.type?.startsWith("image/"));
|
|
for (const file of files) {
|
|
await sendDroppedImage(term, currentWs, file);
|
|
}
|
|
};
|
|
|
|
const handlePaste = async (e) => {
|
|
if (activeTab !== tabId) return;
|
|
const currentWs = tabData.get(tabId)?.ws;
|
|
const items = [...(e.clipboardData?.items || [])]
|
|
.filter((it) => it.kind === "file" && it.type?.startsWith("image/"));
|
|
for (const item of items) {
|
|
const file = item.getAsFile();
|
|
if (file) await sendDroppedImage(term, currentWs, file);
|
|
}
|
|
};
|
|
|
|
term.element?.addEventListener("dragover", handleDragOver);
|
|
term.element?.addEventListener("drop", handleDrop);
|
|
term.textarea?.addEventListener("paste", handlePaste);
|
|
|
|
const ro = new ResizeObserver(() => {
|
|
fit.fit();
|
|
const currentWs = tabData.get(tabId)?.ws;
|
|
if (currentWs) sendSize(currentWs);
|
|
});
|
|
ro.observe(el);
|
|
const voice = new VoiceSession(() => { voiceTick++; });
|
|
voice.attach(term, ws);
|
|
tabData.set(tabId, { ws, term, ro, el, voice, heartbeat, reconnectTimer, closedManually, reconnecting, handleDragOver, handleDrop, handlePaste });
|
|
})();
|
|
}
|
|
|
|
function activeVoice() { return voiceTick >= 0 && tabData.get(activeTab)?.voice; }
|
|
|
|
function toggleFullscreen() {
|
|
const elem = document.documentElement;
|
|
if (!document.fullscreenElement) {
|
|
elem.requestFullscreen().then(() => {
|
|
isFullscreen = true;
|
|
showActionButtons = true;
|
|
}).catch(err => {
|
|
console.error('Failed to enter fullscreen:', err);
|
|
});
|
|
} else {
|
|
document.exitFullscreen().then(() => {
|
|
isFullscreen = false;
|
|
showActionButtons = false;
|
|
}).catch(err => {
|
|
console.error('Failed to exit fullscreen:', err);
|
|
});
|
|
}
|
|
}
|
|
|
|
function sendKey(key) {
|
|
const currentWs = tabData.get(activeTab)?.ws;
|
|
if (currentWs?.readyState === 1) {
|
|
currentWs.send(new TextEncoder().encode(key));
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
syncTheme();
|
|
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
|
|
const requestedHost = new URLSearchParams(window.location.search).get("host");
|
|
if (requestedHost && !tabs.length && hostById(requestedHost)) addTab(requestedHost);
|
|
|
|
// Listen for fullscreen changes
|
|
document.addEventListener('fullscreenchange', () => {
|
|
isFullscreen = !!document.fullscreenElement;
|
|
showActionButtons = !!document.fullscreenElement;
|
|
});
|
|
});
|
|
|
|
onDestroy(() => {
|
|
themeObserver.disconnect();
|
|
tabData.forEach((d) => {
|
|
d.closedManually = true;
|
|
if (d.reconnectTimer) clearTimeout(d.reconnectTimer);
|
|
d.voice?.destroy();
|
|
d.ro?.disconnect();
|
|
if (d.heartbeat) clearInterval(d.heartbeat);
|
|
d.term?.element?.removeEventListener("dragover", d.handleDragOver);
|
|
d.term?.element?.removeEventListener("drop", d.handleDrop);
|
|
d.term?.textarea?.removeEventListener("paste", d.handlePaste);
|
|
d.ws?.close();
|
|
d.term?.dispose();
|
|
});
|
|
});
|
|
</script>
|
|
<div class={activeVoice()?.voiceMode ? 'flex flex-col h-[calc(100vh-4rem)] overflow-hidden gap-1' : 'space-y-2'}>
|
|
{#if !activeVoice()?.voiceMode}
|
|
<h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 tracking-tight">Terminal</h1>
|
|
{/if}
|
|
|
|
<!-- iPhone Landscape Action Buttons (only in fullscreen) -->
|
|
{#if showActionButtons && activeTab}
|
|
<!-- Top Left Pocket -->
|
|
<div class="actions-top-left">
|
|
<button class="action-btn" onclick={() => sendKey('\x1b')} title="ESC">ESC</button>
|
|
<button class="action-btn" onclick={() => sendKey('\t')} title="TAB">TAB</button>
|
|
</div>
|
|
|
|
<!-- Bottom Left Pocket -->
|
|
<div class="actions-bottom-left">
|
|
<button class="action-btn" onclick={() => sendKey('\x01')} title="CTRL+A">^A</button>
|
|
<button class="action-btn" onclick={() => sendKey('\x03')} title="CTRL+C">^C</button>
|
|
</div>
|
|
|
|
<!-- Top Right Pocket -->
|
|
<div class="actions-top-right">
|
|
<button class="action-btn" onclick={() => sendKey('\x0c')} title="CTRL+L">^L</button>
|
|
<button class="action-btn" onclick={() => sendKey('\x1a')} title="CTRL+Z">^Z</button>
|
|
</div>
|
|
|
|
<!-- Bottom Right Pocket -->
|
|
<div class="actions-bottom-right">
|
|
<button class="action-btn" onclick={() => sendKey('\x04')} title="CTRL+D">^D</button>
|
|
<button class="action-btn" onclick={() => sendKey('\x12')} title="CTRL+R">^R</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex items-center gap-1 border-b border-surface-300 dark:border-surface-700 pb-1 relative">
|
|
{#each tabs as tab (tab.id)}
|
|
<button
|
|
class="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-t-lg transition-colors {activeTab === tab.id ? 'bg-surface-200 dark:bg-surface-800 text-surface-900 dark:text-surface-100' : 'text-surface-600 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800/50'}"
|
|
onclick={() => activeTab = tab.id}
|
|
>
|
|
{#if tab.connected}
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
{:else if tab.error}
|
|
<span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
|
|
{:else}
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
|
|
{/if}
|
|
{tab.label}
|
|
{#if tab.persistent}
|
|
<span class="rounded bg-indigo-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300">tmux</span>
|
|
{/if}
|
|
<span
|
|
class="ml-1 text-surface-500 hover:text-sky-500 cursor-pointer"
|
|
role="button"
|
|
tabindex="0"
|
|
title="Open fresh session in new browser tab"
|
|
aria-label={`Open fresh ${tab.label} session in new browser tab`}
|
|
onclick={(e) => { e.stopPropagation(); openFreshSession(tab); }}
|
|
onkeydown={(e) => e.key === 'Enter' && openFreshSession(tab)}
|
|
>↗</span>
|
|
<span
|
|
class="ml-1 text-surface-500 hover:text-rose-400 cursor-pointer"
|
|
role="button"
|
|
tabindex="0"
|
|
onclick={(e) => { e.stopPropagation(); closeTab(tab.id); }}
|
|
onkeydown={(e) => e.key === 'Enter' && closeTab(tab.id)}
|
|
>×</span>
|
|
</button>
|
|
{/each}
|
|
<div class="relative">
|
|
<button
|
|
class="px-2 py-1 text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-200 dark:hover:bg-surface-800 rounded text-lg leading-none"
|
|
onclick={() => showMenu = !showMenu}
|
|
>+</button>
|
|
{#if showMenu}
|
|
<div class="absolute top-full left-0 mt-1 bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg shadow-xl z-10 py-1 min-w-[140px]">
|
|
{#each hosts as h}
|
|
<button
|
|
class="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm text-surface-800 dark:text-surface-200 hover:bg-surface-200 dark:hover:bg-surface-700"
|
|
onclick={() => addTab(h.id)}
|
|
>
|
|
<span>{h.label}</span>
|
|
{#if h.persistent}
|
|
<span class="rounded bg-indigo-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300">persistent</span>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
|
|
<div class="ml-auto flex items-center gap-1">
|
|
<button
|
|
class="px-2 py-1 rounded text-sm transition-colors text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300"
|
|
title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
|
|
onclick={toggleFullscreen}
|
|
>
|
|
{#if isFullscreen}
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/></svg>
|
|
{:else}
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
|
|
{/if}
|
|
</button>
|
|
{#if activeVoice()}
|
|
{@const v = activeVoice()}
|
|
<button
|
|
class="px-2 py-1 rounded text-sm transition-colors {v.voiceMode ? 'text-rose-400' : v.sttAvailable ? 'text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300' : 'text-surface-300 dark:text-surface-700 cursor-not-allowed'}"
|
|
title={!v.sttAvailable ? 'STT not supported' : v.voiceMode ? 'Voice mode on' : 'Enter voice mode'}
|
|
disabled={!v.sttAvailable}
|
|
onclick={() => { if (!v.voiceMode) v.enterVoiceMode(); else v.exitVoiceMode(); voiceTick++; }}
|
|
>
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<p class="text-xs text-surface-600 dark:text-surface-500">
|
|
Tip: drag & drop or paste images into the active terminal tab to upload them to <code class="text-surface-700 dark:text-surface-400">/tmp/claude-images</code>.
|
|
</p>
|
|
|
|
{#if activeTab && tabs.find(t => t.id === activeTab)?.statusBanner}
|
|
<div class="rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm text-indigo-800 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-200">
|
|
{tabs.find(t => t.id === activeTab)?.statusBanner}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !tabs.length}
|
|
<div class="flex items-center justify-center h-[calc(100vh-12rem)] text-surface-600 dark:text-surface-500 text-sm">
|
|
Click + to open a terminal
|
|
</div>
|
|
{/if}
|
|
|
|
{#each tabs as tab (tab.id)}
|
|
<div class="{activeTab === tab.id ? '' : 'hidden'} {activeVoice()?.voiceMode ? 'flex-1 min-h-0' : ''}">
|
|
<div
|
|
use:initTerminal={tab}
|
|
class="h-full rounded-xl overflow-hidden shadow-lg border border-surface-300 dark:border-surface-700 bg-surface-50 dark:bg-[#0f172a] transition-all duration-300"
|
|
style="{activeVoice()?.voiceMode ? '' : 'height: calc(100vh - 10rem);'}"
|
|
></div>
|
|
</div>
|
|
{/each}
|
|
|
|
{#if activeVoice()?.voiceMode}
|
|
{@const v = activeVoice()}
|
|
<div class="mt-1 shrink-0 rounded-xl bg-surface-100/95 dark:bg-surface-800/95 border border-surface-300 dark:border-surface-700 shadow-xl overflow-hidden animate-slide-up">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between px-3 py-1.5 border-b border-surface-300/50 dark:border-surface-700/50">
|
|
<span class="text-xs font-medium text-surface-700 dark:text-surface-300">Voice Mode</span>
|
|
<div class="flex items-center gap-2">
|
|
<select
|
|
class="bg-surface-200 dark:bg-surface-700 text-surface-800 dark:text-surface-300 text-xs rounded px-1 py-0.5 outline-none max-w-[120px]"
|
|
onchange={(e) => { v.setVoice(+e.target.value); voiceTick++; }}
|
|
>
|
|
{#each v.voices as voice, i}
|
|
<option value={i} selected={i === v.voiceIdx}>{voice.name}</option>
|
|
{/each}
|
|
</select>
|
|
<button
|
|
class="px-1.5 py-0.5 rounded text-xs font-medium text-surface-600 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 hover:bg-surface-200 dark:hover:bg-surface-700"
|
|
onclick={() => { v.cycleLang(); voiceTick++; }}
|
|
>{v.langLabel}</button>
|
|
<button
|
|
class="px-1.5 py-0.5 rounded text-xs font-medium text-surface-600 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 hover:bg-surface-200 dark:hover:bg-surface-700"
|
|
onclick={() => { v.cycleTalkMode(); voiceTick++; }}
|
|
>{v.modeLabel}</button>
|
|
<button
|
|
class="px-1.5 py-0.5 rounded text-xs text-surface-500 hover:text-rose-400"
|
|
onclick={() => { v.exitVoiceMode(); voiceTick++; }}
|
|
>×</button>
|
|
</div>
|
|
</div>
|
|
<!-- Transcript + Mic -->
|
|
<div class="flex items-center gap-3 px-3 py-2">
|
|
{#if v.talkMode === "hold"}
|
|
<button
|
|
aria-label="Hold to talk"
|
|
class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-200 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-300 dark:hover:bg-surface-600'}"
|
|
onpointerdown={() => { v.startHold(); voiceTick++; }}
|
|
onpointerup={() => { v.releaseHold(); voiceTick++; }}
|
|
onpointerleave={() => { if (v.listening) { v.releaseHold(); voiceTick++; } }}
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|
</button>
|
|
{:else if v.talkMode === "tap"}
|
|
<button
|
|
aria-label="Tap to talk"
|
|
class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-200 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-300 dark:hover:bg-surface-600'}"
|
|
onclick={() => { v.tapMic(); voiceTick++; }}
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|
</button>
|
|
{:else}
|
|
<div class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center {v.listening ? 'bg-emerald-500/20 text-emerald-400 animate-pulse' : 'bg-surface-200 dark:bg-surface-700 text-surface-500'}">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|
</div>
|
|
{/if}
|
|
<div class="flex-1 min-w-0">
|
|
{#if v.transcript}
|
|
<p class="text-sm text-surface-600 dark:text-surface-400 italic truncate">"{v.transcript}"</p>
|
|
{:else}
|
|
<p class="text-xs text-surface-500 dark:text-surface-600">{v.speaking ? 'Speaking...' : v.listening ? 'Listening...' : 'Ready'}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes slide-up {
|
|
from { transform: translateY(100%); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
.animate-slide-up { animation: slide-up 0.25s ease-out; }
|
|
|
|
/* iPhone 17 Pro Landscape Action Button Zones */
|
|
.actions-top-left,
|
|
.actions-bottom-left,
|
|
.actions-top-right,
|
|
.actions-bottom-right {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.actions-top-left {
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 52px;
|
|
height: 125px;
|
|
}
|
|
|
|
.actions-bottom-left {
|
|
bottom: 26px;
|
|
left: 5px;
|
|
width: 52px;
|
|
height: 110px;
|
|
}
|
|
|
|
.actions-top-right {
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 52px;
|
|
height: 125px;
|
|
}
|
|
|
|
.actions-bottom-right {
|
|
bottom: 26px;
|
|
right: 5px;
|
|
width: 52px;
|
|
height: 110px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
background: rgba(99, 102, 241, 0.9);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-btn:active {
|
|
background: rgba(79, 70, 229, 1);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Terminal container respects safe areas */
|
|
.terminal-safe-container {
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|