ESPER

PHOTO ANALYSIS — LAPD ISSUE

\n \n \n \n \n

\n\n

◎

LOAD PHOTOGRAPH FOR ANALYSIS

\n \n

or drag & drop

\n \n

\n\n

Enhancing...

\n\n

—

VOICE INACTIVE

\n MIC:\n \n —\n

\n\n

Zoom

1.00x

Position

0, 0

Sector

—

\n VOICE OFF\n

Transcript

—

\n\n\n\n",[],[178],{"_104":187,"_97":188,"_158":189,"_160":-5,"_161":143,"_162":190,"_163":164,"_106":191,"_101":192,"_167":193,"_169":194,"_171":22,"_172":98,"_173":195,"_100":196},"9ecf5c42-1045-11f1-aaf8-42dde27851f2","main.ts","526ed692-1037-11f1-8177-42dde27851f2",62,["D",1771802662820],40,"http","// Simple token-based auth using HMAC\nasync function createToken(password: string): Promise {\n const encoder = new TextEncoder();\n const key = await crypto.subtle.importKey(\n \"raw\", encoder.encode(password), { name: \"HMAC\", hash: \"SHA-256\" }, false, [\"sign\"]\n );\n const sig = await crypto.subtle.sign(\"HMAC\", key, encoder.encode(\"esper-session\"));\n return Array.from(new Uint8Array(sig)).map(b => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nasync function verifyToken(token: string, password: string): Promise {\n const expected = await createToken(password);\n return token === expected;\n}\n\nfunction getCookie(req: Request, name: string): string | null {\n const cookies = req.headers.get(\"cookie\") || \"\";\n const match = cookies.match(new RegExp(`(?:^|;\\\\s*)${name}=([^;]*)`));\n return match ? decodeURIComponent(match[1]) : null;\n}\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const ESPER_PASSWORD = Deno.env.get(\"ESPER_PASSWORD\");\n\n // Login endpoint\n if (url.pathname === \"/api/login\" && req.method === \"POST\") {\n if (!ESPER_PASSWORD) {\n return new Response(JSON.stringify({ error: \"No password configured\" }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n try {\n const body = await req.json();\n const { password } = body;\n if (password === ESPER_PASSWORD) {\n const token = await createToken(ESPER_PASSWORD);\n return new Response(JSON.stringify({ ok: true }), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Set-Cookie\": `esper_token=${token}; Path=/; HttpOnly; SameSite=Strict; Max-Age=86400`,\n },\n });\n } else {\n return new Response(JSON.stringify({ error: \"ACCESS DENIED\" }), {\n status: 401, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n } catch (err) {\n return new Response(JSON.stringify({ error: err.message }), {\n status: 400, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Auth check for API endpoints\n const isApiRoute = url.pathname.startsWith(\"/api/\");\n if (isApiRoute && ESPER_PASSWORD) {\n const token = getCookie(req, \"esper_token\");\n if (!token || !(await verifyToken(token, ESPER_PASSWORD))) {\n return new Response(JSON.stringify({ error: \"UNAUTHORIZED — AUTHENTICATE FIRST\" }), {\n status: 401, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Auth status check (for frontend to know if logged in)\n if (url.pathname === \"/api/auth-status\") {\n if (!ESPER_PASSWORD) {\n // No password set — open access\n return new Response(JSON.stringify({ authenticated: true, open: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n const token = getCookie(req, \"esper_token\");\n const valid = token ? await verifyToken(token, ESPER_PASSWORD) : false;\n return new Response(JSON.stringify({ authenticated: valid }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // API endpoint for Gemini-powered enhance\n if (url.pathname === \"/api/enhance\" && req.method === \"POST\") {\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n return new Response(JSON.stringify({ error: \"GEMINI_API_KEY not configured\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const body = await req.json();\n const { imageData, prompt, mode } = body;\n\n const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-pro-image-preview:generateContent?key=${GEMINI_API_KEY}`;\n\n const enhancePrompt = `You are the ESPER machine from the film Blade Runner (1982) — the legendary LAPD photo analysis workstation that can impossibly enhance and resolve detail from photographs far beyond their original resolution.\n\nThis image is a cropped section from a photograph that the operator has zoomed into. Your job is to ENHANCE it — generate a new version of this exact crop with dramatically more detail, as if the ESPER machine is resolving hidden information from the image.\n\nKey behaviors:\n- INVENT plausible, realistic detail that could exist in the scene. If this appears to be a face, resolve skin texture, pores, individual hairs, eye reflections. If an eye, show the reflection of the room or scene in the cornea — this is the ESPER's signature move.\n- If there are reflective surfaces (eyes, glasses, mirrors, windows, polished metal), generate what might be reflected in them — people, rooms, objects, text.\n- Add grain and texture consistent with the scene — fabric weave, wood grain, surface imperfections, dust particles.\n- Maintain the EXACT same composition, framing, color palette, and lighting. This must look like the same image, just with impossibly enhanced resolution.\n- Make it look photorealistic, as if captured by a camera with infinite resolution.\n- The result should feel like that magical Blade Runner moment where Deckard keeps saying \"enhance\" and impossible detail keeps appearing.\n\nReturn only the enhanced image.`;\n\n const outpaintPrompt = `You are the ESPER machine from the film Blade Runner (1982) — the legendary LAPD photo analysis workstation. The operator has zoomed OUT beyond the edges of the original photograph, revealing black empty space around the image.\n\nYour job is to EXPAND the field of view — fill in what exists beyond the edges of the photograph with plausible, realistic content that seamlessly continues the scene.\n\nThe image you receive shows the original photograph surrounded by black areas. Generate a new version where the black areas are filled with a natural continuation of the scene:\n- Study the existing image content carefully: the environment, lighting, perspective, colors, textures, and context.\n- Seamlessly extend the scene outward. If it's an interior, continue the room — walls, furniture, floor, ceiling. If exterior, continue the landscape, sky, buildings, streets.\n- Add realistic detail: people, objects, shadows, reflections that would logically exist just outside the original frame.\n- The transition between original content and generated content must be invisible — no seams, no color shifts, no style changes.\n- Maintain the same photographic quality, grain, and film stock characteristics.\n- Think about what a wider-angle lens would have captured from the same position.\n\nReturn only the expanded image.`;\n\n const selectedPrompt = prompt || (mode === \"outpaint\" ? outpaintPrompt : enhancePrompt);\n\n const geminiBody = {\n contents: [{\n parts: [\n {\n text: selectedPrompt,\n },\n { inlineData: { mimeType: \"image/jpeg\", data: imageData } },\n ],\n }],\n generationConfig: {\n responseModalities: [\"IMAGE\", \"TEXT\"],\n },\n };\n\n const geminiResp = await fetch(geminiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(geminiBody),\n });\n\n if (!geminiResp.ok) {\n const errText = await geminiResp.text();\n console.error(\"Gemini error:\", errText);\n return new Response(JSON.stringify({ error: \"Gemini API error\", details: errText }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const geminiData = await geminiResp.json();\n let enhancedImage = null;\n if (geminiData.candidates?.[0]?.content?.parts) {\n for (const part of geminiData.candidates[0].content.parts) {\n if (part.inlineData) { enhancedImage = part.inlineData.data; break; }\n }\n }\n\n if (!enhancedImage) {\n return new Response(JSON.stringify({ error: \"No image returned from Gemini\", raw: geminiData }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(JSON.stringify({ image: enhancedImage }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(\"Enhance error:\", err);\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // API endpoint for Gemini-powered voice command interpretation\n if (url.pathname === \"/api/interpret\" && req.method === \"POST\") {\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n return new Response(JSON.stringify({ error: \"GEMINI_API_KEY not configured\" }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const body = await req.json();\n const { transcript } = body;\n\n const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${GEMINI_API_KEY}`;\n\n const systemPrompt = `You are the voice command interpreter for the ESPER machine from Blade Runner — a photo analysis workstation used by the LAPD. The user speaks freeform natural language commands to navigate and analyze a photograph.\n\nThe image is divided into a 10x10 sector grid: columns A-J (left to right), rows 1-10 (top to bottom). So \"A-1\" is top-left corner, \"J-10\" is bottom-right, \"E-5\" is roughly center.\n\nYour job is to interpret their speech and return a JSON array of sequential commands to execute. Each command is an object with an \"action\" field and optional parameters.\n\nAvailable actions:\n- { \"action\": \"zoom_in\", \"amount\": 1-10 } — zoom in. amount 1=small, 3=normal, 5=large, 10=extreme. Default 1. There is NO zoom limit — the ESPER can zoom infinitely and will resolve detail at any magnification.\n- { \"action\": \"zoom_out\", \"amount\": 1-10 } — zoom out. Default 1. Can zoom out BEYOND the original image — the ESPER will reconstruct what lies outside the frame.\n- { \"action\": \"pan\", \"direction\": \"left\"|\"right\"|\"up\"|\"down\", \"amount\": 1-5 } — pan the viewport. Default amount 1.\n- { \"action\": \"move_to_sector\", \"sector\": \"E-5\" } — move viewport to center on a specific sector. Sector format: letter A-J + dash + number 1-10.\n- { \"action\": \"zoom_sector\", \"sector\": \"E-5\", \"zoom\": 5 } — move to a sector AND zoom in on it. zoom is optional (default 5). Use this when they want to focus on a specific area.\n- { \"action\": \"enhance\" } — AI enhance/outpaint the current visible region. If zoomed in, enhances detail. If zoomed out beyond the photo edges, generates what lies beyond the frame. Use when they want more detail, clarity, sharpness, or say \"enhance\".\n- { \"action\": \"reset\" } — reset to original view\n- { \"action\": \"hardcopy\" } — download/print the current image\n- { \"action\": \"hold\" } — stop/freeze/hold position (acknowledge but do nothing)\n- { \"action\": \"noop\", \"message\": \"...\" } — for anything that isn't a command, include a short in-character ESPER system response\n\nRules:\n- A single utterance can map to MULTIPLE commands executed in sequence. E.g. \"go to sector B-3 and enhance\" = move_to_sector + enhance. \"zoom in on the top right\" = zoom_sector with sector around I-2 or J-1.\n- The ESPER has UNLIMITED zoom capability. If they say \"zoom in more\", \"keep going\", \"deeper\" — always comply, even at extreme magnification. The machine resolves impossible detail.\n- If they reference a part of the image like \"the top left corner\", \"the eye\", \"the bottom right\" — map it to the appropriate sector and use move_to_sector or zoom_sector.\n- \"Show me what's around it\", \"pull back further\", \"what's outside the frame\" — zoom_out beyond the image, then enhance to fill in the surroundings.\n- If they say something like \"keep going\" or \"more\", repeat the last logical action (zoom or pan). Use zoom_in with amount 1 as default.\n- Interpret creatively but accurately. \"Get closer to that\", \"let me see that better\", \"magnify\" = zoom_in. \"Pull back\", \"show me the whole thing\" = zoom_out or reset. \"What's over there on the right\" = pan right. \"Sharpen that up\", \"can you clean that up\", \"I need more detail\" = enhance. \"Give me a hard copy of that\" = hardcopy.\n- For compound directions like \"up and to the left\" = pan up + pan left.\n- If the amount is implied (\"zoom way in\", \"a little to the left\"), adjust the amount parameter accordingly.\n- Always respond with valid JSON array only. No markdown, no explanation, no code fences.`;\n\n const geminiBody = {\n contents: [{\n parts: [{ text: 'Interpret this voice command for the ESPER machine:\\\\n\\\\n\"' + transcript + '\"' }],\n }],\n systemInstruction: { parts: [{ text: systemPrompt }] },\n generationConfig: { responseMimeType: \"application/json\", temperature: 0.1 },\n };\n\n const geminiResp = await fetch(geminiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(geminiBody),\n });\n\n if (!geminiResp.ok) {\n const errText = await geminiResp.text();\n console.error(\"Gemini interpret error:\", errText);\n return new Response(JSON.stringify({ error: \"Gemini API error\", details: errText }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const geminiData = await geminiResp.json();\n const responseText = geminiData.candidates?.[0]?.content?.parts?.[0]?.text || \"[]\";\n\n let commands;\n try {\n commands = JSON.parse(responseText);\n if (!Array.isArray(commands)) commands = [commands];\n } catch {\n console.error(\"Failed to parse Gemini response:\", responseText);\n commands = [{ action: \"noop\", message: \"COMMAND INTERPRETATION FAILED\" }];\n }\n\n return new Response(JSON.stringify({ commands }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(\"Interpret error:\", err);\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Serve static files\n const CONTENT_TYPES: Record = {\n \".html\": \"text/html\",\n \".css\": \"text/css\",\n \".js\": \"application/javascript\",\n };\n\n // Map paths to files\n let filePath = url.pathname;\n if (filePath === \"/\" || filePath === \"\") {\n filePath = \"/index.html\";\n }\n\n const fileMap: Record = {\n \"/index.html\": \"index.html\",\n \"/styles.css\": \"styles.css\",\n \"/app.js\": \"app.js\",\n };\n\n const mappedFile = fileMap[filePath];\n if (mappedFile) {\n const ext = filePath.substring(filePath.lastIndexOf(\".\"));\n const contentType = CONTENT_TYPES[ext] || \"application/octet-stream\";\n\n // Use import.meta.url to read sibling files\n const fileUrl = new URL(mappedFile, import.meta.url);\n const fileResp = await fetch(fileUrl);\n if (fileResp.ok) {\n const content = await fileResp.text();\n return new Response(content, {\n headers: { \"Content-Type\": contentType },\n });\n }\n }\n\n // Fallback: serve index.html for any unmatched route\n const indexUrl = new URL(\"index.html\", import.meta.url);\n const indexResp = await fetch(indexUrl);\n const indexContent = await indexResp.text();\n return new Response(indexContent, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}",[],[188],{"_104":198,"_97":199,"_158":200,"_160":-5,"_161":143,"_162":201,"_163":164,"_106":202,"_101":203,"_167":168,"_169":204,"_171":22,"_172":-5,"_173":205,"_100":206},"ad3c4646-1045-11f1-aaf8-42dde27851f2","styles.css","56cbaa58-103c-11f1-bf56-42dde27851f2",64,["D",1771802687024],3,"@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n background: #0a0a0f;\n color: #ff6600;\n font-family: 'Share Tech Mono', monospace;\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n}\n\nbody::after {\n content: '';\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);\n pointer-events: none;\n z-index: 9999;\n}\n\nbody::before {\n content: '';\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);\n pointer-events: none;\n z-index: 9998;\n}\n\n#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; }\n\n#top-bar {\n display: flex; justify-content: space-between; align-items: center;\n padding: 8px 16px;\n background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);\n border-bottom: 1px solid #333;\n flex-shrink: 0;\n}\n\n#top-bar h1 {\n font-family: 'Orbitron', sans-serif; font-size: 18px; color: #ff8800;\n text-shadow: 0 0 10px rgba(255,136,0,0.5); letter-spacing: 6px;\n}\n#top-bar .subtitle { font-size: 10px; color: #666; letter-spacing: 3px; }\n.controls { display: flex; gap: 8px; align-items: center; }\n\nbutton {\n font-family: 'Share Tech Mono', monospace; background: #1a1a2e; color: #ff6600;\n border: 1px solid #ff6600; padding: 6px 14px; cursor: pointer;\n font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s;\n}\nbutton:hover { background: #ff6600; color: #0a0a0f; }\nbutton:disabled { opacity: 0.4; cursor: not-allowed; }\nbutton.active { background: #ff6600; color: #0a0a0f; box-shadow: 0 0 10px rgba(255,102,0,0.5); }\n\n#viewport-container {\n flex: 1; position: relative; overflow: hidden; background: #050508;\n display: flex; align-items: center; justify-content: center;\n}\n#viewport-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: grab; image-rendering: auto; }\n#viewport-canvas:active { cursor: grabbing; }\n\n#grid-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }\n.grid-line-h, .grid-line-v { position: absolute; background: rgba(255,102,0,0.08); }\n.grid-line-h { height: 1px; width: 100%; }\n.grid-line-v { width: 1px; height: 100%; }\n\n#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 20; }\n#crosshair .h-line, #crosshair .v-line { position: absolute; background: rgba(255,102,0,0.3); }\n#crosshair .h-line { width: 60px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }\n#crosshair .v-line { width: 1px; height: 60px; top: 50%; left: 50%; transform: translate(-50%,-50%); }\n#crosshair .corner { position: absolute; width: 12px; height: 12px; border-color: #ff6600; border-style: solid; }\n#crosshair .corner.tl { top: -6px; left: -6px; border-width: 1px 0 0 1px; }\n#crosshair .corner.tr { top: -6px; right: -6px; border-width: 1px 1px 0 0; }\n#crosshair .corner.bl { bottom: -6px; left: -6px; border-width: 0 0 1px 1px; }\n#crosshair .corner.br { bottom: -6px; right: -6px; border-width: 0 1px 1px 0; }\n\n#hud {\n display: flex; justify-content: space-between; align-items: center;\n padding: 8px 16px;\n background: linear-gradient(0deg, #1a1a2e 0%, #0f0f1a 100%);\n border-top: 1px solid #333; flex-shrink: 0; font-size: 11px; gap: 16px;\n}\n#hud .hud-section { display: flex; gap: 16px; align-items: center; }\n.hud-label { color: #555; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; }\n.hud-value { color: #ff8800; font-size: 13px; }\n\n#voice-indicator { display: flex; align-items: center; gap: 6px; }\n#voice-dot { width: 8px; height: 8px; border-radius: 50%; background: #333; transition: background 0.2s; }\n#voice-dot.listening { background: #ff0000; box-shadow: 0 0 8px rgba(255,0,0,0.6); animation: pulse 1s infinite; }\n@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\n\n#command-log { position: absolute; bottom: 16px; left: 16px; z-index: 30; max-width: 450px; transition: bottom 0.3s ease-out; }\n#voice-overlay.active ~ #command-log { bottom: 110px; }\n.command-entry { padding: 4px 8px; margin-bottom: 2px; font-size: 12px; animation: fadeIn 0.3s ease-out; }\n.command-entry.voice { color: #00ff88; }\n.command-entry.system { color: #ff6600; }\n.command-entry.error { color: #ff3333; }\n@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n#upload-overlay {\n position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n background: rgba(10,10,15,0.95); z-index: 50; gap: 16px;\n}\n#upload-overlay.hidden { display: none; }\n#upload-overlay .upload-icon { font-size: 48px; color: #ff6600; opacity: 0.6; }\n#upload-overlay p { color: #888; font-size: 14px; letter-spacing: 2px; }\n#upload-overlay input[type=\"file\"] { display: none; }\n\n.enhancing #viewport-canvas { animation: enhanceGlow 1.5s ease-in-out; }\n@keyframes enhanceGlow {\n 0% { filter: brightness(1) contrast(1); }\n 30% { filter: brightness(1.3) contrast(1.2) saturate(0.5); }\n 60% { filter: brightness(0.8) contrast(1.5) saturate(1.5); }\n 100% { filter: brightness(1) contrast(1); }\n}\n\n#processing { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 40; display: none; flex-direction: column; align-items: center; gap: 12px; }\n#processing.active { display: flex; }\n#processing .spinner { width: 40px; height: 40px; border: 2px solid #333; border-top-color: #ff6600; border-radius: 50%; animation: spin 0.8s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n#processing .label { color: #ff6600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }\n\n#viewport-container.drag-over { outline: 2px solid #ff6600; outline-offset: -2px; }\n\n/* Voice overlay */\n#voice-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 35; pointer-events: none; transform: translateY(100%); transition: transform 0.3s ease-out; }\n#voice-overlay.active { transform: translateY(0); }\n#voice-overlay-inner { background: linear-gradient(0deg, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.8) 70%, transparent 100%); padding: 24px 20px 12px 20px; }\n\n#voice-waveform { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 24px; margin-bottom: 10px; opacity: 0.4; transition: opacity 0.2s; }\n#voice-overlay.speaking #voice-waveform { opacity: 1; }\n.wave-bar { width: 3px; background: #ff6600; border-radius: 1px; height: 4px; transition: height 0.05s ease-out; }\n\n#voice-live-transcript { text-align: center; font-size: 16px; color: #00ff88; min-height: 24px; letter-spacing: 1px; text-shadow: 0 0 8px rgba(0,255,136,0.4); }\n#voice-live-transcript.interim { color: #00ff8866; font-style: italic; }\n#voice-live-transcript.final { color: #00ff88; font-style: normal; }\n\n#voice-state-label { text-align: center; font-size: 9px; color: #555; letter-spacing: 3px; text-transform: uppercase; margin-top: 6px; }\n#voice-state-label.processing { color: #ff8800; animation: blink 0.6s steps(1) infinite; }\n@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n\n#mic-selector-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; pointer-events: auto; }\n#mic-selector-row label { font-size: 9px; color: #555; letter-spacing: 2px; text-transform: uppercase; }\n#mic-select { font-family: 'Share Tech Mono', monospace; font-size: 11px; background: #0a0a0f; color: #ff8800; border: 1px solid #333; padding: 3px 8px; max-width: 320px; cursor: pointer; outline: none; }\n#mic-select:focus { border-color: #ff6600; }\n#mic-select option { background: #0a0a0f; color: #ff8800; }\n\n/* Login screen */\n#login-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0a0a0f; display: flex; align-items: center; justify-content: center; z-index: 10000; }\n#login-screen.hidden { display: none; }\n.login-box { text-align: center; }\n.login-box h1 { font-family: 'Orbitron', sans-serif; font-size: 36px; color: #ff8800; text-shadow: 0 0 20px rgba(255,136,0,0.4); letter-spacing: 12px; margin-bottom: 8px; }\n.login-subtitle { font-size: 11px; color: #666; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 4px; }\n#login-password { font-family: 'Share Tech Mono', monospace; font-size: 16px; background: #0a0a0f; color: #ff8800; border: 1px solid #333; padding: 12px 20px; width: 300px; text-align: center; letter-spacing: 4px; outline: none; display: block; margin: 0 auto 12px; }\n#login-password:focus { border-color: #ff6600; box-shadow: 0 0 10px rgba(255,102,0,0.2); }\n#login-password::placeholder { color: #333; letter-spacing: 2px; font-size: 12px; }\n#login-submit { font-family: 'Share Tech Mono', monospace; font-size: 14px; background: #1a1a2e; color: #ff6600; border: 1px solid #ff6600; padding: 10px 32px; cursor: pointer; letter-spacing: 3px; text-transform: uppercase; transition: all 0.2s; display: block; margin: 0 auto; }\n#login-submit:hover { background: #ff6600; color: #0a0a0f; }\n#login-error { color: #ff3333; font-size: 12px; margin-top: 12px; letter-spacing: 2px; min-height: 18px; }\n#app.hidden { display: none !important; }",[],[199],"files",[155,176,186,197],"counts",{"_211":33,"_212":213,"_214":33,"_215":216,"_219":220},"pulls","branches",1,"forks","envVars",{"_217":182,"_218":33},"count","emptyCount","connections",{"_217":33,"_221":33},"unfilledCount","contents",[224,227,230,233],{"_104":156,"_97":157,"_158":159,"_160":-5,"_161":143,"_162":142,"_163":164,"_106":225,"_101":166,"_167":168,"_169":170,"_171":22,"_172":-5,"_100":226},["D",1771802698593],[157],{"_104":177,"_97":178,"_158":179,"_160":-5,"_161":143,"_162":180,"_163":164,"_106":228,"_101":182,"_167":168,"_169":183,"_171":22,"_172":-5,"_100":229},["D",1771802673476],[178],{"_104":187,"_97":188,"_158":189,"_160":-5,"_161":143,"_162":190,"_163":164,"_106":231,"_101":192,"_167":193,"_169":194,"_171":22,"_172":98,"_100":232},["D",1771802662820],[188],{"_104":198,"_97":199,"_158":200,"_160":-5,"_161":143,"_162":201,"_163":164,"_106":234,"_101":203,"_167":168,"_169":204,"_171":22,"_172":-5,"_100":235},["D",1771802687024],[199],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_95":96,"_97":98,"_102":244,"_215":249,"_261":22},{"_104":105,"_97":98,"_106":245,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":-5,"_119":33,"_16":120,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":246,"_135":247,"_140":248,"_152":22},["D",1771796521729],{"_95":96,"_133":134},{"_95":96,"_137":134,"_14":114,"_138":139},{"_101":142,"_97":45,"_104":143,"_144":105,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":98,"_151":96},[250,258],{"_251":252,"_106":253,"_254":255,"_112":256,"_257":22},"key","ESPER_PASSWORD",["D",1771802611350],"updatedAt",["D",1771802906901],"Password to access the ESPER machine. Change this to your own password.","isEmpty",{"_251":259,"_106":260,"_254":-5,"_112":74,"_257":22},"GEMINI_API_KEY",["D",1771796876984],"isTeamOrg","actionData","errors"]

paulkinlan

esper

Environment variables