@andorra-labs/code 0.0.0-stage → 0.1.4

package/dist/src/browser-ui/style.css

@@ -0,0 +1,243 @@
+/* The desktop app's theme (desktop/src/styles/tokens.css), simplified for the browser workspace, with its own
+   light/dark/system switch. Its light values are the desktop's earlier cool light register, not yet the
+   website palette the desktop's light appearance now uses. */
+:root{color-scheme:light;
+  --font-ui:"Geist Sans","Geist",-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;--font-mono:"Geist Mono","SF Mono",Menlo,Consolas,ui-monospace,monospace;
+  --chrome-height:36px;--row-height:28px;--row-radius:6px;--control-height:28px;--btn-height:32px;--btn-radius:8px;--input-radius:8px;--card-radius:12px;--reading-measure:720px;
+  --bg-app:#f3f3f4;--bg-surface:#fafafa;--bg-card:#ededf0;--bg-input:#fff;--border:#e2e2e6;--border-strong:#d3d3d9;--bg-hover:#e4e4e8;
+  --text:#17171a;--text-2:#5f5f66;--text-3:#808088;--accent:#17171a;--accent-soft:#e2e2e6;--on-accent:#fff;--accent-hover:#2e2e33;--accent-ring:rgba(23,23,26,.18);
+  --ok:#2f9e6a;--err:#d64545;--warn:#d99a2b;--ok-text:#1f7a3f;--err-text:#b3261e;--overlay:rgba(20,20,30,.32);
+  --bg-rail:#e8e8ec;--rail-wash:rgba(23,23,26,.06);--glow-1:rgba(255,255,255,1);--glow-2:rgba(255,255,255,.7);--glow-size:480px 420px;
+  --lift-2:0 1px 2px rgba(20,20,30,.05),0 12px 26px -10px rgba(20,20,30,.16);--lift-3:0 1px 2px rgba(20,20,30,.06),0 16px 34px -10px rgba(20,20,30,.22);--shadow-panel:0 8px 28px rgba(20,20,30,.12);
+  --dur-1:120ms;--dur-2:180ms;--ease-standard:cubic-bezier(.2,.8,.2,1)}
+html[data-theme=dark]{color-scheme:dark;
+  --bg-app:#151517;--bg-surface:#1b1b1e;--bg-card:#232327;--bg-input:#202024;--border:#2a2a30;--border-strong:#414149;--bg-hover:#2c2c31;
+  --text:#ececee;--text-2:#b4b4bc;--text-3:#9a9aa4;--accent:#dedee3;--accent-soft:#36363d;--on-accent:#151517;--accent-hover:#fff;--accent-ring:rgba(222,222,227,.22);
+  --ok-text:#7cc79a;--err-text:#f2a9a3;--overlay:rgba(0,0,0,.5);
+  --bg-rail:#131315;--rail-wash:rgba(255,255,255,.075);--glow-1:rgba(255,255,255,.11);--glow-2:rgba(255,255,255,.05);--glow-size:440px 380px;
+  --lift-2:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.28),0 14px 30px -10px rgba(0,0,0,.55);--lift-3:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.3),0 18px 38px -10px rgba(0,0,0,.7);--shadow-panel:0 8px 28px rgba(0,0,0,.4)}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg-surface);color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;height:100dvh;display:flex;overflow:hidden}
+button,input,textarea,select{font:inherit;color:inherit}
+input,textarea{caret-color:var(--accent)}
+::selection{background:var(--accent-soft)}
+::-webkit-scrollbar{width:8px;height:8px}
+::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
+::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
+::-webkit-scrollbar-track{background:transparent}
+
+/* Buttons: one rounded rectangle, the kind carried by the fill. Secondary is the card fill, primary the accent. */
+button{height:var(--btn-height);padding:0 12px;border:1px solid transparent;border-radius:var(--btn-radius);background:var(--bg-card);font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
+button:hover{background:var(--bg-hover)}
+button:active:not(:disabled){transform:scale(.99)}
+button:disabled{color:var(--text-3);opacity:.6;cursor:default}
+button:disabled:hover{background:var(--bg-card)}
+.primary{background:var(--accent);color:var(--on-accent)}
+.primary:hover{background:var(--accent-hover)}
+.primary:disabled,.primary:disabled:hover{background:var(--accent);color:var(--on-accent);opacity:.4}
+:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+input,textarea,select{width:100%;min-width:0;min-height:var(--btn-height);padding:4px 12px;border:1px solid var(--border-strong);border-radius:var(--input-radius);background:var(--bg-input);transition:border-color var(--dur-1) var(--ease-standard),box-shadow var(--dur-1) var(--ease-standard)}
+input:hover,select:hover{border-color:var(--text-3)}
+input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
+textarea{resize:none;line-height:1.6}
+.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+[hidden]{display:none!important}
+
+/* The rail: its own ground with two static glows, and rows that fill with a wash. */
+.sidebar{position:relative;isolation:isolate;overflow:hidden;width:232px;flex-shrink:0;background:var(--bg-rail);border-right:1px solid var(--border);display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
+.sidebar>*{position:relative;z-index:1}
+.sidebar::before{content:'';position:absolute;inset:-60px;z-index:0;pointer-events:none;background:radial-gradient(var(--glow-size) at 22% 10%,var(--glow-1),transparent 68%),radial-gradient(520px 520px at 95% 100%,var(--glow-2),transparent 70%)}
+.brand{height:var(--chrome-height);flex:none;display:flex;gap:8px;align-items:center;padding:0 16px;font-size:12px;font-weight:500;color:var(--text-2)}
+.brand-mark{width:18px;height:18px;object-fit:contain}
+.brand small{font-size:12px;font-weight:400;color:var(--text-3);margin-left:6px}
+.new-session{margin:8px 8px 4px;height:var(--row-height);padding:0 8px;justify-content:flex-start;border-radius:var(--row-radius);background:transparent;color:var(--text)}
+.new-session:hover{background:var(--rail-wash)}
+.search{margin:0 8px 12px}
+.search input{min-height:var(--control-height);padding:2px 10px;font-size:12px;border-color:var(--border);background:var(--bg-input)}
+.section-label{padding:0 20px 4px;color:var(--text-3);font-size:12px;line-height:16px;display:flex;justify-content:space-between}
+#projects{overflow:auto;flex:1;padding:4px 8px 16px}
+.project{margin-bottom:12px}
+.project-header{min-height:var(--row-height);padding:0 4px 0 12px;color:var(--text-2);font-size:12px;display:flex;justify-content:space-between;gap:8px;align-items:center}
+.project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.project-header button{height:22px;width:22px;padding:0;background:transparent;color:var(--text-3);font-size:16px;font-weight:400;border-radius:var(--row-radius)}
+.project-header button:hover{background:var(--rail-wash);color:var(--text)}
+.session-row{width:100%;min-height:var(--row-height);height:auto;padding:0 8px;margin:1px 0;border-radius:var(--row-radius);background:transparent;justify-content:flex-start;gap:8px;text-align:left;font-weight:400}
+.session-row:hover{background:var(--rail-wash)}
+.session-row.active{background:var(--rail-wash);box-shadow:inset 2px 0 0 var(--accent)}
+.session-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
+.session-row time{color:var(--text-3);font-size:12px;flex-shrink:0;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums;opacity:.7}
+.session-row:hover time,.session-row.active time{opacity:1}
+.dot{width:7px;height:7px;margin:0 3px;border-radius:50%;background:var(--border-strong);flex-shrink:0}
+.dot.running{width:10px;height:10px;margin:0 1.5px;background:transparent;border:1.5px solid var(--border-strong);border-top-color:var(--accent);animation:spin .9s linear infinite}
+.dot.waiting{background:var(--err);animation:flash 1.1s ease-in-out infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+@keyframes flash{50%{opacity:.35}}
+.empty-projects{padding:8px 12px;color:var(--text-3);font-size:12px;line-height:1.6}
+.sidebar-footer{border-top:1px solid var(--border);padding:8px 8px 8px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
+.sidebar-footer button{height:var(--control-height);padding:0 8px;background:transparent;color:var(--text-2);font-size:12px}
+.sidebar-footer button:hover{background:var(--rail-wash);color:var(--text)}
+
+/* The title strip over the work area. */
+main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-surface)}
+.topbar{min-height:44px;flex-shrink:0;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;padding:4px 16px}
+.session-heading{flex:1;min-width:0}
+.session-heading strong{font-size:15px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.session-heading span{display:block;font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.session-heading span:empty{display:none}
+.topbar button{height:var(--control-height);font-size:12px;background:transparent;color:var(--text-2)}
+.topbar button:hover{background:var(--bg-card);color:var(--text)}
+.topbar button[aria-expanded=true]{background:var(--bg-card);color:var(--text)}
+.badge{height:22px;padding:0 8px;border-radius:11px;background:var(--bg-card);color:var(--text-2);font-size:12px;line-height:22px;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+/* The transcript and its composer share one reading measure. */
+.work-area{display:flex;flex:1;min-height:0}
+.chat{flex:1;min-width:0;display:flex;flex-direction:column}
+.conversation{flex:1;overflow:auto;padding:24px max(24px,calc((100% - var(--reading-measure))/2))}
+.welcome{height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;color:var(--text-2)}
+.welcome h1{font-size:20px;font-weight:500;color:var(--text);margin:16px 0 4px}
+.welcome p{color:var(--text-3);margin:0;line-height:1.6}
+.welcome-mark{width:40px;height:40px;object-fit:contain}
+.message{line-height:1.65;margin-bottom:24px;overflow-wrap:anywhere}
+.message .body{white-space:pre-wrap}
+.message.user{margin-left:auto;width:fit-content;max-width:min(100%,620px);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--card-radius);box-shadow:var(--lift-2);padding:8px 12px}
+.message-label{font-size:12px;color:var(--text-3);margin-bottom:4px}
+.tool-event{margin:4px 0;color:var(--text-2);font-size:12px}
+.tool-event summary,.run-activity>summary{list-style:none;cursor:pointer;padding:2px 2px;border-radius:var(--row-radius);overflow-wrap:anywhere}
+.tool-event summary::-webkit-details-marker,.run-activity>summary::-webkit-details-marker{display:none}
+.tool-event summary::before,.run-activity>summary::before{content:'▸';display:inline-block;width:14px;color:var(--text-3)}
+.tool-event[open]>summary::before,.run-activity[open]>summary::before{content:'▾'}
+.tool-event summary:hover,.run-activity>summary:hover{color:var(--text)}
+.tool-event pre{margin:4px 0 8px 14px;padding:8px 12px;background:var(--bg-card);border-radius:var(--btn-radius);white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;color:var(--text-2);font:12px/1.55 var(--font-mono)}
+.tool-event.failed,.tool-event.failed summary{color:var(--err-text)}
+.event-note{font-size:12px;color:var(--text-3);margin:12px 0;white-space:pre-wrap}
+.run-activity{margin:16px 0}
+.run-activity>summary{color:var(--text-3);font-size:12px}
+.activity-body{padding:4px 0 0 12px;border-left:1px solid var(--border);margin:8px 0 8px 6px}
+.activity-body .message{margin:12px 0}
+.activity-body .message-label{display:none}
+.composer-wrap{padding:12px max(24px,calc((100% - var(--reading-measure))/2)) 16px}
+.composer{background:var(--bg-input);border:1px solid var(--border);border-radius:14px;box-shadow:var(--lift-2);transition:border-color var(--dur-1) var(--ease-standard),box-shadow var(--dur-1) var(--ease-standard)}
+.composer:focus-within{border-color:var(--border-strong);box-shadow:var(--lift-3)}
+.composer textarea{border:0;background:transparent;padding:12px 14px 4px;min-height:72px;max-height:220px;box-shadow:none;cursor:text}
+.composer textarea:focus{outline:none;box-shadow:none}
+.composer-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 8px 8px 14px}
+.composer-footer span{color:var(--text-3);font-size:12px}
+.composer-footer>div{display:flex;gap:4px}
+.composer-footer button{height:var(--control-height);font-size:12px}
+#cancel{background:transparent;color:var(--err-text)}
+#cancel:hover{background:rgba(214,69,69,.1)}
+
+/* Progress: the desktop plan widget, as a side column. */
+.progress-panel{width:248px;flex-shrink:0;border-left:1px solid var(--border);padding:12px 16px;overflow:auto;background:var(--bg-surface)}
+.progress-panel header{display:flex;justify-content:space-between;align-items:center;min-height:var(--control-height);margin-bottom:8px}
+.progress-panel strong{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
+.progress-panel header span{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
+#todos{margin:0;padding:8px 12px;list-style:none;background:var(--bg-card);border-radius:10px;display:flex;flex-direction:column;gap:8px}
+#todos:empty{display:none}
+#todos li{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:1.5;color:var(--text-2)}
+#todos li.in_progress{color:var(--text)}
+#todos li.completed{color:var(--text-3);text-decoration:line-through}
+.todo-marker{color:var(--accent);width:1ch;flex-shrink:0}
+.completed .todo-marker{color:var(--ok)}
+.muted{color:var(--text-3);font-size:12px;line-height:1.6}
+.run-details{border-top:1px solid var(--border);padding-top:12px;margin-top:16px;color:var(--text-3);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
+.run-details:empty{display:none}
+
+/* A question or approval the run stopped on: a lifted card above the composer. */
+.pending{margin:0 max(24px,calc((100% - var(--reading-measure))/2));padding:12px 16px;background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--card-radius);box-shadow:var(--lift-2)}
+.pending h3{font-size:13px;font-weight:500;margin:0 0 8px}
+.pending p{white-space:pre-wrap;line-height:1.6;color:var(--text-2)}
+.pending form{display:flex;gap:8px;flex-wrap:wrap}
+.pending form input{flex:1;min-width:150px}
+.approval-details{white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;font:12px/1.55 var(--font-mono);padding:8px 12px;background:var(--bg-card);border-radius:var(--btn-radius);color:var(--text-2)}
+.error{font-size:12px;color:var(--err-text);padding:8px 4px;white-space:pre-wrap}
+
+dialog{border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-input);color:var(--text);box-shadow:var(--shadow-panel);width:min(480px,92vw);padding:16px}
+dialog[open]{animation:dialog-in var(--dur-2) var(--ease-standard)}
+dialog::backdrop{background:var(--overlay);backdrop-filter:blur(6px) saturate(120%)}
+@keyframes dialog-in{from{opacity:0;transform:scale(.97) translateY(4px)}}
+dialog header{display:flex;justify-content:space-between;align-items:center;gap:16px}
+dialog h2{font-weight:500;font-size:15px;margin:0}
+dialog header button{width:var(--control-height);height:var(--control-height);padding:0;background:transparent;color:var(--text-3);font-size:18px;font-weight:400}
+dialog header button:hover{background:var(--bg-card);color:var(--text)}
+dialog p{font-size:12px;color:var(--text-3);line-height:1.6}
+dialog label{display:block;margin-top:16px;font-size:13px;color:var(--text-2)}
+dialog input,dialog select{margin:8px 0 4px}
+dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
+
+/* Session actions: the right-click menu, the archived group, and the confirmations they open. */
+.danger{background:transparent;color:var(--err-text)}
+.danger:hover{background:rgba(214,69,69,.1)}
+dialog footer .danger{background:var(--err);color:#fff}
+dialog footer .danger:hover{background:#c13b3b}
+.context-menu{position:fixed;z-index:20;min-width:184px;padding:4px;background:var(--bg-input);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-panel);display:flex;flex-direction:column;animation:menu-in var(--dur-1) var(--ease-standard)}
+@keyframes menu-in{from{opacity:0;transform:translateY(-2px)}}
+.menu-item{height:var(--row-height);padding:0 10px;justify-content:flex-start;border-radius:var(--row-radius);background:transparent;font-weight:400}
+.menu-item:hover,.menu-item:focus-visible{background:var(--bg-card);outline:none}
+.menu-item.danger{color:var(--err-text)}
+.menu-item.danger:hover,.menu-item.danger:focus-visible{background:rgba(214,69,69,.1)}
+.menu-item:disabled:hover{background:transparent}
+.menu-separator{height:1px;margin:4px 6px;background:var(--border)}
+.archived-group{margin-top:2px}
+.archived-group>summary{list-style:none;cursor:pointer;min-height:var(--row-height);display:flex;align-items:center;padding:0 8px;border-radius:var(--row-radius);color:var(--text-3);font-size:12px}
+.archived-group>summary::-webkit-details-marker{display:none}
+.archived-group>summary::before{content:'▸';width:14px}
+.archived-group[open]>summary::before{content:'▾'}
+.archived-group>summary:hover{background:var(--rail-wash);color:var(--text-2)}
+.archived-group .session-row .name{color:var(--text-2);font-style:italic}
+.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;padding:8px 14px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:12px;box-shadow:var(--shadow-panel);animation:toast-in var(--dur-2) var(--ease-standard)}
+@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}
+.trajectory-dialog{width:min(920px,94vw);height:min(80vh,760px);padding:0;flex-direction:column}
+.trajectory-dialog[open]{display:flex}
+.trajectory-dialog>header{padding:12px 12px 12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
+.trajectory-heading{min-width:0;flex:1}
+.trajectory-heading h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#trajectory-meta{display:block;color:var(--text-3);font-size:12px;margin-top:2px}
+.trajectory-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+#trajectory-sources{display:flex;gap:2px;padding:2px;background:var(--bg-card);border-radius:var(--btn-radius)}
+#trajectory-sources button{height:24px;padding:0 8px;font-size:12px;background:transparent;color:var(--text-2);border-radius:6px}
+#trajectory-sources button[aria-pressed=true]{background:var(--bg-input);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12)}
+#trajectory-download{width:auto;height:var(--control-height);padding:0 10px;font-size:12px;font-weight:500;background:var(--bg-card);color:var(--text)}
+#trajectory-download:hover{background:var(--bg-hover)}
+.trajectory-records{flex:1;min-height:0;overflow:auto;margin:0;padding:8px 8px 8px 12px;list-style:none;font-size:12px}
+.trajectory-records summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:baseline;min-height:26px;padding:3px 6px;border-radius:var(--row-radius)}
+.trajectory-records summary::-webkit-details-marker{display:none}
+.trajectory-records summary:hover{background:var(--bg-card)}
+.trajectory-records time{flex:none;width:84px;color:var(--text-3);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
+.record-kind{flex:none;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);color:var(--text)}
+.record-detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
+.trajectory-records pre{margin:2px 0 8px 100px;padding:8px 12px;background:var(--bg-card);border-radius:var(--btn-radius);white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;color:var(--text-2);font:12px/1.55 var(--font-mono)}
+.trajectory-dialog>p,.trajectory-dialog>.error{margin:0;padding:12px 16px}
+.trajectory-dialog>footer{margin:0;padding:8px 16px 12px;justify-content:center}
+.trajectory-dialog>footer:has(#trajectory-more[hidden]){display:none}
+@media(max-width:1150px){.progress-panel{width:220px}
+.sidebar{width:220px}}
+@media(max-width:900px){.work-area{position:relative}
+.progress-panel{position:absolute;right:0;top:0;bottom:0;z-index:1;box-shadow:var(--shadow-panel)}
+.sidebar{width:200px}
+.composer-footer span{max-width:160px}}
+@media(max-width:600px){.sidebar{width:160px}
+.brand{padding:0 12px}
+.brand small{display:none}
+.search{margin:0 6px 10px}
+.new-session{margin:6px 6px 4px;font-size:12px}
+#projects{padding:4px 4px 12px}
+.section-label{padding:0 14px 4px}
+.session-row{font-size:12px}
+.session-row time{display:none}
+.topbar{gap:6px;padding:4px 12px}
+.topbar #toggle-progress{display:none}
+.conversation{padding:20px 14px}
+.composer-wrap{padding:12px}
+.composer-footer span{display:none}
+.composer-footer{justify-content:flex-end}
+.sidebar-footer{flex-wrap:wrap}
+.pending{margin:0 12px}
+.badge{max-width:80px}
+.trajectory-records time{display:none}
+.trajectory-records pre{margin-left:0}
+.record-kind{max-width:140px}}
+@media(prefers-reduced-motion:reduce){.dot.running{animation-duration:2.4s}
+.dot.waiting{animation:none}
+dialog[open],.context-menu,.toast{animation:none}
+button{transition:none}}

package/dist/src/browser-view.d.ts

@@ -0,0 +1,348 @@
+/**
+ * Interactive session-owned browser pages for the desktop panel.
+ *
+ * The panel deliberately renders *chrome*, not Chromium: page pixels arrive as CDP
+ * screencast frames from an engine-launched isolated browser, and input travels
+ * back as CDP input events. That keeps the page's origin and DOM inside a browser
+ * the agent's CDP connection can reach, which an iframe or a webview embed would
+ * not — the panel therefore never substitutes either.
+ */
+export type BrowserViewChannel = 'chromium' | 'msedge' | 'chrome';
+export type BrowserRuntimeState = 'checking' | 'missing' | 'installing' | 'ready' | 'failed';
+export interface BrowserRuntimeStatus {
+    state: BrowserRuntimeState;
+    channel?: BrowserViewChannel;
+    detail?: string;
+}
+export interface BrowserViewTab {
+    id: string;
+    url: string;
+    title: string;
+    loading: boolean;
+}
+export declare const VIEW_TAB_LIMIT = 6;
+export declare const VIEW_SESSION_LIMIT = 4;
+export declare const VIEW_IDLE_CLOSE_MS: number;
+/** The pacing window between emitted frames: one per display refresh, with the coalescer holding the newest. */
+export declare const VIEW_FRAME_MIN_INTERVAL_MS = 16;
+export declare const VIEW_GOTO_TIMEOUT_MS = 30000;
+/** The viewport Mobile mode simulates, in CSS pixels: an iPhone-class layout. */
+export declare const VIEW_MOBILE_VIEWPORT: {
+    readonly width: 390;
+    readonly height: 844;
+};
+/** The JPEG quality stream frames use; agent screenshots keep their own setting. */
+export declare const VIEW_STREAM_QUALITY = 75;
+/**
+ * The mobile Chrome UA Mobile mode presents. A Chromium engine claiming to be
+ * iOS Safari confuses sites that branch on it, so the UA names the platform the
+ * page actually renders with.
+ */
+export declare const VIEW_MOBILE_USER_AGENT = "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36";
+/** The dependency panel browsing needs: an HTTP(S) page an isolated browser can open. */ export declare function browserViewUrl(value: string): string;
+export declare function clampViewport(width: unknown, height: unknown): {
+    width: number;
+    height: number;
+};
+/**
+ * JPEG dimensions straight from the SOF markers, without decoding pixels.
+ *
+ * Screencast frames carry no size fields; the panel sends input in image pixels
+ * and the engine must translate to page CSS pixels, so the real image size is
+ * load-bearing, not decorative.
+ */
+export declare function jpegSize(bytes: Uint8Array): {
+    width: number;
+    height: number;
+} | undefined;
+/**
+ * One panel key event as the CDP input domain needs it.
+ *
+ * A key is always a keyboard event, with the character a key-down inserts in
+ * `text`: an ordinary letter is inserted that way, and Enter carries Chromium's
+ * carriage return so a textarea or a content-editable field gets its newline.
+ * Keeping the gesture as a key event is what lets the page run its own keydown
+ * handling — Space activating a focused button, a page's printable-key shortcut —
+ * which text insertion alone would never trigger. A Ctrl, Alt or Meta held over a
+ * key drops the text (Ctrl+C must be a key event, never the character "c"), with
+ * one exception: AltGr is reported as Ctrl+Alt, and the character it produced —
+ * "@" on a German layout, "€" on many others — must survive.
+ */
+export declare function keyDescriptor(key: string, code: string | undefined, modifiers?: number): {
+    key: string;
+    code: string;
+    windowsVirtualKeyCode: number;
+    nativeKeyCodes: number[];
+    text?: string;
+};
+export declare const MODIFIER_BITS: Record<string, number>;
+export declare function modifierMask(modifiers: unknown): number;
+/**
+ * The native editing commands a macOS page performs for a key-down.
+ *
+ * On macOS, gestures like Cmd+A, Cmd+Z, or Option+Arrow are not synthesized from
+ * key events: Chromium runs the named command instead, and nothing happens when
+ * none is sent — the panel suppresses the local default, so the page would be
+ * left without either. These are the mappings Playwright itself derives for the
+ * same CDP call (its macEditingCommands table), limited to the gestures a pane
+ * can forward.
+ */
+export declare function macEditingCommands(key: string, modifiers: number): string[];
+/**
+ * The launch options for the panel browser. Playwright mutes Chromium by default
+ * (`--mute-audio`), which silences every page the user browses in the panel; the
+ * screencast carries pixels only, so the page's own audio output on the engine's
+ * machine is the only sound the panel has.
+ */
+export declare function viewLaunchOptions(channel: BrowserViewChannel, executablePath: string): Record<string, unknown>;
+/** Whether a frame arriving at `now` may be emitted, given the last emitted frame time. */
+export declare function frameGate(now: number, lastEmittedAt: number | undefined, minIntervalMs: number): boolean;
+/**
+ * The file whose existence proves a channel is installed. The bundled Chromium's
+ * path comes from playwright-core itself; system channels have per-platform
+ * locations. The probe reads the filesystem and never launches anything.
+ */
+export declare function channelCandidate(channel: BrowserViewChannel, platform: NodeJS.Platform, chromiumExecutable: () => string): string | undefined;
+export type BrowserViewEmit = (event: string, data: Record<string, unknown>) => void;
+/**
+ * One engine's panel browsers: a browser per session, a page per tab, and a CDP
+ * screencast relay per active tab. Everything is keyed by the saved session id —
+ * exactly the identity the desktop's browser pane already owns.
+ */
+export declare class BrowserViewManager {
+    private readonly emit;
+    private readonly launchBrowser?;
+    private readonly sessions;
+    /**
+     * The pane's standing stream request per session, kept before a browser exists.
+     *
+     * A panel mounts and asks for frames before its first tab is opened, so the
+     * request has to outlive the absence of a session: the open that follows
+     * adopts this along with its viewport, and a later re-open after an idle reap
+     * resumes streaming without another round trip.
+     */
+    private readonly desired;
+    /** Launches in flight per session, so concurrent opens share one browser. */
+    private readonly launching;
+    private runtime;
+    private runtimeProbe?;
+    private installTask?;
+    /**
+     * The running installer, held here rather than in the closure that started it:
+     * shutdown has to terminate the download and settle the request waiting on it,
+     * or the child outlives the engine that is being closed.
+     */
+    private installer?;
+    /**
+     * Sessions released while their first launch was still in flight. The launch
+     * that arrives afterwards closes its browser instead of registering one the
+     * deleted session can never reach, or else it would hold a slot for good.
+     */
+    private readonly released;
+    private closed;
+    constructor(emit: BrowserViewEmit, launchBrowser?: (() => Promise<any>) | undefined);
+    private publishRuntime;
+    /**
+     * Probe the same executables `launch` will use, without launching anything;
+     * the answer is cached.
+     */
+    runtimeStatus(force?: boolean): Promise<BrowserRuntimeStatus>;
+    /**
+     * Download the bundled Chromium through playwright-core's own installer.
+     *
+     * A machine with Edge or Chrome installed never reaches this: the probe is
+     * satisfied by the system browser and the download is skipped.
+     */
+    install(): Promise<BrowserRuntimeStatus>;
+    private launch;
+    private summary;
+    private publishTabs;
+    private scheduleIdleClose;
+    private stopScreencast;
+    /**
+     * Show one tab: the pane's current size, then its stream.
+     *
+     * Every path that makes a tab the visible one goes through here — an explicit
+     * activation, an open that completed while it still owned the selection, and
+     * the fallback chosen when the active tab closes — because a pane resized
+     * while the tab was inactive only sized the active page, and a page laid out
+     * at a stale size puts every translated click in the wrong place.
+     */
+    private showTab;
+    /**
+     * Put one page into the session's viewport mode.
+     *
+     * Desktop sizes the page to the pane. Mobile is full emulation: the fixed
+     * phone's device metrics — `mobile: true` is what makes the meta viewport
+     * respected, with a phone's pixel density — a mobile Chrome user agent, and
+     * touch events, so the sites the pane shows answer with their mobile layouts
+     * and hover-dependent UIs behave like they do on a phone. Leaving Mobile
+     * clears the metrics and resets the user agent with an empty override —
+     * Chromium answers that with the page's own browser UA (verified live), so
+     * nothing about the page before the switch needs remembering. A switch
+     * changes the page's size, so the caller restarts the screencast for the new
+     * capture scale.
+     *
+     * Calls for one tab are serialized by `queueViewportMode`: each applies
+     * whatever the session's mode is at its turn, so a rapid toggle cannot leave
+     * a page emulated under a session that has already moved on.
+     */
+    private applyViewportMode;
+    /** The per-tab serialization `applyViewportMode` relies on; see its note. */
+    private queueViewportMode;
+    private emitFrame;
+    private startScreencast;
+    private wireTab;
+    /**
+     * A frame straight from the page, for a stream that is already running.
+     *
+     * A pane that reattaches (a renderer reload) has no image of its own, and a
+     * static page produces no new screencast frames, so the screencast's own
+     * stream cannot supply one. A screenshot is bounded and always reflects the
+     * page as it is now.
+     */
+    private captureFrame;
+    /**
+     * A page the browser opened on its own, adopted as a tab of the session.
+     *
+     * The page is already live, so it only needs a CDP session and its pane
+     * geometry. Past the tab cap the popup is closed rather than left running as an
+     * invisible page: the cap states one bound for everything the browser holds.
+     */
+    private adoptPage;
+    private ensureSession;
+    /**
+     * The session's browser context, created once.
+     *
+     * One context per session is what makes the tabs one browser: cookies, local
+     * storage and cache are shared across the session's pages, and sessions stay
+     * isolated from each other.
+     */
+    private contextFor;
+    openTab(sessionId: string, url: string, signal?: AbortSignal): Promise<{
+        tabId: string;
+    }>;
+    /**
+     * Remove one tab an open created and did not finish.
+     *
+     * The page itself is closed too — a discarded page still runs and still counts
+     * against the browser, and the tab cap only counts pages it holds. Only the
+     * unfinished tab goes: the rest of the shared browser, which the user may be
+     * watching, is left as it is.
+     */
+    private discardTab;
+    private activeOrNamed;
+    navigate(sessionId: string, url: string, tabId?: string): Promise<void>;
+    activateTab(sessionId: string, tabId: string): Promise<void>;
+    closeTab(sessionId: string, tabId?: string): Promise<void>;
+    /**
+     * Panel geometry: the page viewport and the streamed frame target follow the
+     * pane, or Mobile mode's fixed phone viewport with its emulation.
+     *
+     * The request is remembered even when the session has no browser yet: a panel
+     * mounts and asks for frames before its first tab is opened, and the open
+     * adopts the remembered request. Disabling forgets it, so a collapsed panel
+     * that is later reopened makes a fresh, explicitly desired request.
+     */
+    configureStream(sessionId: string, options: {
+        enabled: boolean;
+        viewportWidth?: unknown;
+        viewportHeight?: unknown;
+        quality?: unknown;
+        mode?: unknown;
+    }): Promise<void>;
+    /**
+     * Panel input, translated from image pixels to page CSS pixels and forwarded
+     * as CDP input events. The panel never holds a CDP connection of its own.
+     */
+    input(sessionId: string, payload: Record<string, unknown>): Promise<void>;
+    /**
+     * The cursor shape the page would show at a pane point, in image pixels.
+     *
+     * The pane draws frames and forwards input, so the page's own pointer is never
+     * visible: a link must still read as a link. The answer is the page's computed
+     * `cursor` at that point, bounded and lower-cased for the panel to draw.
+     */
+    cursorAt(sessionId: string, x: unknown, y: unknown, tabId?: string): Promise<string>;
+    /**
+     * The text a copy or cut would take from the page, for the viewer's clipboard.
+     *
+     * Copy and cut travel to the page as key events, so the text they produce stays
+     * in the browser that owns the page. The viewer reads it back here and writes
+     * it to its own clipboard, which is what makes a copy on a paired machine land
+     * on the machine the user is sitting at. The viewer reads before it forwards
+     * the key: a cut collapses the selection it just removed.
+     */
+    selectionText(sessionId: string, tabId?: string): Promise<string>;
+    /**
+     * The focused document's selection, including one made inside a frame.
+     *
+     * The top document is asked first, and it says when focus is inside a frame:
+     * there the iframe element is the active element and the top selection is
+     * empty, so each frame is asked in turn. Playwright evaluates inside a
+     * cross-origin frame as well, because the evaluation runs over CDP rather than
+     * through the page's own script context.
+     */
+    private selectionInPage;
+    /**
+     * Agent operations on the session's panel browser.
+     *
+     * The panel browser belongs to the user as much as to the agent: an operation
+     * that fails, stalls or is cancelled ends only that call — never the browser —
+     * and tab-affecting operations publish tabs so the pane follows along.
+     */
+    private boundedAgentOperation;
+    private agentTarget;
+    /** The session's tabs as the agent sees them; a panel with no browser yet is simply empty. */
+    agentTabs(sessionId: string): {
+        tabs: BrowserViewTab[];
+        activeTabId?: string;
+    };
+    /** Step a tab through its history or reload it, for the agent and the panel's toolbar alike. */
+    go(sessionId: string, kind: 'back' | 'forward' | 'refresh', tabId?: string): Promise<void>;
+    agentSnapshot(sessionId: string, tabId: string | undefined, signal: AbortSignal): Promise<string>;
+    agentClick(sessionId: string, options: {
+        selector: string;
+        button: 'left' | 'right' | 'middle';
+        tabId?: string;
+    }, signal: AbortSignal): Promise<void>;
+    agentFill(sessionId: string, options: {
+        selector: string;
+        value: string;
+        tabId?: string;
+    }, signal: AbortSignal): Promise<void>;
+    agentPress(sessionId: string, options: {
+        key: string;
+        selector?: string;
+        tabId?: string;
+    }, signal: AbortSignal): Promise<void>;
+    agentScroll(sessionId: string, options: {
+        deltaY: number;
+        tabId?: string;
+    }, signal: AbortSignal): Promise<void>;
+    agentWait(sessionId: string, options: {
+        selector: string;
+        tabId?: string;
+    }, signal: AbortSignal): Promise<void>;
+    agentScreenshot(sessionId: string, tabId: string | undefined, signal: AbortSignal): Promise<{
+        tabId: string;
+        data: Buffer;
+        width: number;
+        height: number;
+    }>;
+    private closeSession;
+    sessionSummaries(): Record<string, {
+        tabs: BrowserViewTab[];
+        activeTabId?: string;
+    }>;
+    /**
+     * Release one session's panel browser now.
+     *
+     * A deleted session will never stream again, so waiting for its idle timeout
+     * would keep a whole browser, and one of the four session slots, alive for ten
+     * minutes for a pane nobody can open.
+     */
+    release(sessionId: string, reason?: string): Promise<void>;
+    /** Engine shutdown: no panel browser outlives the process. */
+    close(): Promise<void>;
+}