@oharness/server 0.8.0 → 0.9.0

package/dist/page/style.js

@@ -33,8 +33,25 @@ code,pre,.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
 /* sidebar */
 aside{
   width:236px;flex:0 0 236px;background:var(--panel);
-  display:flex;flex-direction:column;overflow:hidden;
+  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
 }
+/* Folded away on a desktop. Zero width rather than display:none, for the
+   slide, and so nothing inside has to be rebuilt when it comes back. */
+body.nav-collapsed>aside{width:0;flex-basis:0}
+#nav-collapse,#nav-expand{
+  width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dim);
+  cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto;-webkit-app-region:no-drag;
+}
+#nav-collapse{margin-left:auto}
+#nav-collapse:hover,#nav-expand:hover{background:var(--hover);color:var(--fg)}
+#nav-collapse svg,#nav-expand svg{width:16px;height:16px;display:block;shape-rendering:geometricPrecision}
+#nav-expand{display:none;position:absolute;z-index:5;top:7px;left:8px}
+body.nav-collapsed #nav-expand{display:grid}
+body.nav-collapsed #tabs{padding-left:44px}
+/* The traffic lights sit where the sidebar's corner was; step past them. */
+body.inset-titlebar.nav-collapsed #nav-expand{left:80px}
+body.inset-titlebar.nav-collapsed #tabs{padding-left:116px;-webkit-app-region:drag}
+body.inset-titlebar.nav-collapsed #tabs>*{-webkit-app-region:no-drag}
 aside header{padding:15px 14px 8px;display:flex;gap:8px;align-items:center}
 /* The desktop shell hides the title bar, so on macOS the traffic lights float
  * over this corner. The wordmark moves below them, and the strip they sit in
@@ -531,8 +548,14 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
 .tab .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
 .tab .x{
   width:18px;height:18px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;
-  display:grid;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
-}
+  display:none;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
+}
+/* A tab's controls take no room until the pointer or focus is on it: an idle
+   tab spends its width on its title, and a hovered one gives some back to its
+   buttons, where the title then ends in an ellipsis. Hidden rather than only
+   transparent — a transparent button still holds its space. A running
+   browser keeps its button, because its dot is what says so. */
+.tab:hover .x,.tab:focus-within .x{display:grid}
 /* The tab's browser button's size. Much smaller and the 1.5px strokes thin
    below a pixel and blur; the full 16px outweighs the tab's own text. */
 .tab .x svg{width:14px;height:14px}
@@ -543,6 +566,8 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   display:grid;place-items:center;background:transparent;color:inherit;cursor:pointer;
   opacity:0;flex:0 0 auto;
 }
+.tab .tab-browser{display:none}
+.tab:hover .tab-browser,.tab:focus-within .tab-browser,.tab .tab-browser.running{display:grid}
 .tab:hover .tab-browser,.tab.on .tab-browser,.tab-browser.running{opacity:.62}
 .tab-browser:hover,.tab-browser.on{opacity:1;background:var(--sel)}
 .tab-browser svg{width:14px;height:14px}
@@ -799,6 +824,140 @@ body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:n
 #diff pre.diff{padding:8px 0}
 .d-add,.d-del,.d-same{padding:0 12px}
 .hunk{color:var(--dim);background:var(--field);padding:3px 12px;font-size:11px}
+/*
+ * The files pane: the same column as #review, a little wider because it holds
+ * two — the tree, and the file picked from it.
+ */
+#explorer{
+  width:0;flex:0 0 0;background:var(--panel);
+  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
+  /* Above the transcript column, whose composer bar can spill sideways when
+     the window is narrow enough to squeeze it. */
+  position:relative;z-index:2;
+}
+#explorer.open{width:var(--explorer-width,min(52vw,860px));flex:0 0 var(--explorer-width,min(52vw,860px));overflow:clip;overflow-clip-margin:6px}
+#explorer-head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 16px;font-size:12.5px}
+#explorer-title{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#explorer-actions{display:flex;gap:2px}
+#explorer-actions button{
+  width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dim);
+  cursor:pointer;padding:0;display:grid;place-items:center;
+}
+#explorer-actions button:hover{background:var(--hover);color:var(--fg)}
+#explorer-actions svg{width:15px;height:15px}
+#explorer-body{flex:1;display:flex;min-height:0}
+#explorer-tree{width:var(--explorer-tree-width,min(40%,260px));flex:0 0 auto;overflow:auto;padding:2px 6px 12px}
+/* The line between the tree and the file, and the handle that moves it: a
+   gap wide enough to grab, drawn only while it is being pointed at. */
+#explorer-split{flex:0 0 7px;margin:0 -3px;position:relative;z-index:1;cursor:col-resize;touch-action:none;outline:0}
+#explorer-split::before{
+  content:"";position:absolute;left:2px;top:50%;width:3px;height:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateY(-50%) scaleY(.65);transition:opacity .12s,transform .16s;
+}
+.explorer-row{
+  display:flex;align-items:center;gap:5px;width:100%;border:0;background:transparent;color:var(--fg);
+  font:inherit;font-size:12.5px;text-align:left;padding:4px 8px;border-radius:6px;cursor:pointer;
+  white-space:nowrap;
+}
+.explorer-row:hover{background:var(--hover)}
+.explorer-row.on{background:var(--sel)}
+.explorer-row svg{width:14px;height:14px;flex:0 0 auto;color:var(--dim)}
+.explorer-caret{width:12px;flex:0 0 12px;display:grid;place-items:center}
+.explorer-caret svg{width:11px;height:11px}
+.explorer-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
+#explorer-view{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
+.explorer-hint{padding:16px;font-size:12.5px;margin:0}
+.explorer-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px}
+.explorer-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
+.explorer-size{color:var(--dim);font-size:11px;flex:0 0 auto}
+.explorer-btn{
+  border:0;background:var(--field);color:var(--fg);border-radius:6px;padding:3px 9px;
+  font:inherit;font-size:11.5px;cursor:pointer;flex:0 0 auto;
+}
+.explorer-btn:hover{background:var(--sel)}
+.explorer-content{flex:1;overflow:auto;min-height:0}
+.explorer-code{display:flex;align-items:flex-start;min-width:max-content}
+.explorer-code pre{margin:0;font-size:12.5px;line-height:1.55;padding:8px 12px 16px}
+.explorer-gutter{color:var(--dim);text-align:right;user-select:none;opacity:.7;padding-right:10px!important;position:sticky;left:0;background:var(--bg)}
+.explorer-src{overflow:visible!important;padding-left:4px!important}
+.explorer-md{padding:12px 20px 24px;max-width:780px}
+.explorer-img{display:block;max-width:calc(100% - 32px);margin:16px;image-rendering:auto}
+.explorer-video{display:block;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:16px;background:#000;border-radius:8px}
+.explorer-audio{display:block;width:calc(100% - 32px);margin:16px}
+.explorer-content.explorer-fill{overflow:hidden;display:flex}
+.explorer-pdf{flex:1;width:100%;height:100%;border:0;background:var(--bg)}
+/* Resize handles: an invisible strip on an edge, with a short pill drawn on
+   hover or while dragging — the same look as the browser pane's handle. */
+.resizer-col{position:absolute;z-index:4;left:-6px;top:0;bottom:0;width:15px;cursor:col-resize;outline:0;touch-action:none}
+.resizer-col::before{
+  content:"";position:absolute;left:6px;top:50%;width:3px;height:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateY(-50%) scaleY(.65);transition:opacity .12s,transform .16s;
+}
+.resizer-row{position:absolute;z-index:4;left:0;right:0;top:-6px;height:13px;cursor:row-resize;outline:0;touch-action:none}
+.resizer-row::before{
+  content:"";position:absolute;top:5px;left:50%;height:3px;width:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateX(-50%) scaleX(.65);transition:opacity .12s,transform .16s;
+}
+.resizer-col:hover::before,.resizer-col:focus-visible::before,
+#explorer-split:hover::before,#explorer-split:focus-visible::before,body.dragging-x #explorer-split::before{
+  opacity:.55;transform:translateY(-50%) scaleY(1);
+}
+.resizer-row:hover::before,.resizer-row:focus-visible::before,body.dragging-y .resizer-row::before{
+  opacity:.55;transform:translateX(-50%) scaleX(1);
+}
+body.dragging{user-select:none;-webkit-user-select:none}
+body.dragging-x{cursor:col-resize}
+body.dragging-y{cursor:row-resize}
+body.dragging #explorer{transition:none}
+body.dragging iframe{pointer-events:none}
+/*
+ * The terminal, under the composer and as wide as the conversation. Its
+ * height is whatever it was last dragged to.
+ */
+#terminal{
+  flex:0 0 var(--terminal-height,clamp(180px,34vh,420px));min-height:120px;position:relative;
+  display:flex;flex-direction:column;background:var(--panel);
+}
+#terminal[hidden]{display:none}
+#terminal-head{display:flex;align-items:center;gap:4px;padding:5px 8px 3px 8px;font-size:12px;flex:0 0 auto;min-width:0}
+#terminal-tabs{display:flex;gap:2px;overflow-x:auto;min-width:0;flex:0 1 auto;scrollbar-width:none}
+#terminal-tabs::-webkit-scrollbar{display:none}
+.terminal-tab{
+  display:flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 8px;border-radius:6px;
+  color:var(--dim);cursor:pointer;flex:0 0 auto;max-width:180px;user-select:none;
+}
+.terminal-tab:hover{background:var(--hover);color:var(--fg)}
+.terminal-tab.on{background:var(--bg);color:var(--fg)}
+.terminal-tab>svg{width:13px;height:13px;flex:0 0 auto}
+.terminal-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.terminal-tab-x{
+  width:18px;height:18px;border:0;border-radius:4px;background:transparent;color:inherit;padding:0;
+  display:grid;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
+}
+.terminal-tab:hover .terminal-tab-x,.terminal-tab.on .terminal-tab-x{opacity:.6}
+.terminal-tab-x:hover{opacity:1;background:var(--sel)}
+.terminal-tab-x svg{width:12px;height:12px}
+#terminal-where{flex:1;min-width:0;text-align:right;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
+#terminal-new,#terminal-hide{
+  width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--dim);
+  cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto;
+}
+#terminal-new:hover,#terminal-hide:hover{background:var(--hover);color:var(--fg)}
+#terminal-new svg,#terminal-hide svg{width:14px;height:14px}
+#terminal-body{flex:1;min-height:0;position:relative;background:var(--bg)}
+.terminal-host{position:absolute;inset:4px 0 6px 12px}
+.terminal-host[hidden]{display:none}
+.terminal-host .xterm{height:100%}
+.terminal-host .xterm-viewport{background:transparent!important}
+.tab-tool{
+  width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:inherit;
+  display:grid;place-items:center;padding:0;cursor:pointer;flex:0 0 auto;opacity:0;
+}
+.tab .tab-tool{display:none}
+.tab:hover .tab-tool,.tab:focus-within .tab-tool{display:grid}
+.tab:hover .tab-tool,.tab.on .tab-tool{opacity:.62}
+.tab-tool:hover,.tab-tool.on{opacity:1;background:var(--sel)}
+.tab-tool svg{width:14px;height:14px}
 #changes-btn{
   border:0;background:var(--panel);color:var(--fg);border-radius:7px;
   padding:5px 11px;font:inherit;font-size:12px;cursor:pointer;
@@ -2152,6 +2311,40 @@ pre.diff{margin:0;font-size:12px;line-height:1.5;overflow-x:auto}
  * between two paragraphs — and the box is kept for what opens under it. The
  * chevron trails the words, where it points at what a click will show. */
 details.work{margin:0 0 12px}
+/* What a media tool made, under the steps that made it. No frame: the image is
+   its own edge, and a border would only box it in. */
+.media-strip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:0 0 14px}
+.media-item{margin:0;display:flex;flex-direction:column;gap:5px;max-width:100%}
+/* Sized by the picture itself, so the corners are the picture's corners: a
+   box of fixed proportions around it showed as a panel-coloured frame
+   wherever the two shapes differed. */
+.media-item img,.media-item video{display:block;width:auto;height:auto;max-width:min(360px,100%);max-height:440px;border-radius:12px;cursor:zoom-in}
+.media-item video{max-width:min(480px,100%);cursor:auto}
+/* A clip, drawn by the page: a filled card, no outline, like everything else
+   that sits on the conversation. */
+.media-item.audio{width:min(360px,100%)}
+.media-item audio{display:none}
+.audio-card{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--panel)}
+.audio-play{
+  width:36px;height:36px;flex:0 0 auto;border:0;border-radius:50%;padding:0;
+  display:grid;place-items:center;background:var(--fg);color:var(--bg);cursor:pointer;
+}
+.audio-play:hover{opacity:.85}
+.audio-play svg{width:14px;height:14px}
+.audio-play svg path{fill:currentColor}
+.audio-card.playing .audio-play svg path{fill:none;stroke-width:2.2}
+.audio-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
+.audio-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
+.audio-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);cursor:pointer}
+.audio-name:hover{text-decoration:underline;text-underline-offset:2px}
+.audio-time{flex:0 0 auto;color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums}
+/* Thin to look at, tall to hit: the pseudo-element widens the target. */
+.audio-track{position:relative;height:4px;border-radius:2px;background:var(--hover);cursor:pointer}
+.audio-track::before{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
+.audio-track:focus-visible{outline:none;background:var(--sel)}
+.audio-fill{height:100%;width:0;border-radius:2px;background:var(--fg);pointer-events:none}
+.media-item figcaption{max-width:360px;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
+.media-item figcaption:hover{color:var(--fg)}
 details.work>summary{
   padding:3px 0;cursor:pointer;font-size:13.5px;color:var(--dim);list-style:none;
   display:flex;gap:6px;align-items:center;width:max-content;max-width:100%;
@@ -2684,6 +2877,9 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
   body.nav-open #scrim{display:block}
   #nav-close{display:grid}
+  #nav-collapse,body.nav-collapsed #nav-expand{display:none}
+  body.nav-collapsed>aside{width:min(280px,84vw);flex-basis:auto}
+  body.nav-collapsed #tabs{padding-left:12px}
   #burger{display:grid}
   #top{padding:6px 10px}
   #top:has(#changes-btn:not([hidden])){padding:6px 10px}
@@ -2695,6 +2891,31 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   }
   #review-head{padding:10px 10px 8px 16px}
   #review-close{display:grid}
+  #explorer.open{position:fixed;inset:0;z-index:50;width:100%;height:100%;flex:none;transition:none}
+  #explorer-head{padding-top:max(10px,env(safe-area-inset-top))}
+  #explorer-body{flex-direction:column}
+  #explorer-resizer{display:none}
+  #explorer-tree{width:auto;height:var(--explorer-tree-height,38%);max-height:none}
+  /* Stacked, so the handle between them drags up and down — and is a strip
+     a thumb can find rather than a hairline. */
+  #explorer-split{flex:0 0 18px;margin:0;cursor:row-resize}
+  #explorer-split::before{left:50%;top:7px;width:34px;height:4px;opacity:.4;transform:translateX(-50%)}
+  body.dragging-y #explorer-split::before{opacity:.7;transform:translateX(-50%)}
+  .explorer-row{padding-top:8px;padding-bottom:8px}
+  #explorer-actions button{width:34px;height:34px}
+  /* A phone has room for the conversation or a shell, and the shell needs the
+     keyboard: while it is open the composer steps aside, and the handle on
+     top is a visible grip. */
+  body.terminal-open #composer,body.terminal-open #jump{display:none}
+  #terminal{flex-basis:var(--terminal-height,55%);padding-bottom:env(safe-area-inset-bottom)}
+  #terminal-resizer{top:0;height:18px}
+  #terminal-resizer::before{top:6px;opacity:.4;transform:translateX(-50%)}
+  #terminal-head{padding-top:14px}
+  #terminal-new,#terminal-hide{width:34px;height:34px}
+  .terminal-tab{height:32px}
+  .terminal-tab-x{opacity:.6;width:24px;height:24px}
+  #terminal-where{display:none}
+  .terminal-host{inset:4px 0 6px 6px}
   #files{max-height:40%}
   #shelf-bar{flex-wrap:wrap;row-gap:4px}
 
@@ -2767,6 +2988,8 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   .turn{margin-bottom:14px}
   .act{padding:6px 10px}
   .tab .x{opacity:.55;width:24px;height:24px}
+  /* No hover to reveal them on a touch screen. */
+  .tab .x,.tab .tab-tool,.tab .tab-browser{display:grid}
   #tab-add{width:32px;height:32px}
   .tab{height:34px}
   .nav-item,.session,.fold,.project{height:38px}

package/dist/page/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;EAC7B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAouFV,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;EAC7B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAm8FV,CAAC"}

package/dist/page.js

@@ -55,6 +55,7 @@ ${ANALYTICS_STUB}
       </svg>
     </span>
     <b class="wordmark">OHarness</b>
+    <button id="nav-collapse" type="button" data-t-title="nav.collapse" data-t-aria-label="nav.collapse"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.25" y="3.25" width="11.5" height="9.5" rx="2.5"/><path d="M6.25 3.25v9.5"/></svg></button>
     <button id="nav-close" type="button" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
   </header>
   <button id="project" class="project" type="button">
@@ -103,6 +104,8 @@ ${ANALYTICS_STUB}
 
   <div id="split">
     <div id="main">
+    <!-- Shown only while the sidebar is folded away: the way back to it. -->
+    <button id="nav-expand" type="button" data-t-title="nav.expand" data-t-aria-label="nav.expand"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.25" y="3.25" width="11.5" height="9.5" rx="2.5"/><path d="M6.25 3.25v9.5"/></svg></button>
     <div id="tabs"></div>
     <div id="log">
       <div id="empty">
@@ -199,6 +202,19 @@ ${ANALYTICS_STUB}
       <span id="ctxtext"></span>
     </div>
   </form>
+    <!-- The embedded terminal: under the conversation, as tall as it is
+         dragged. The shell belongs to the project, not to this panel, so
+         hiding the panel leaves it running. -->
+    <div id="terminal" hidden>
+      <div id="terminal-resizer" class="resizer-row" role="separator" aria-orientation="horizontal" tabindex="0" data-t-aria-label="terminal.resize"></div>
+      <div id="terminal-head">
+        <div id="terminal-tabs" role="tablist"></div>
+        <button id="terminal-new" type="button" data-t-title="terminal.new" data-t-aria-label="terminal.new"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M8 3.5v9M3.5 8h9"/></svg></button>
+        <span id="terminal-where"></span>
+        <button id="terminal-hide" type="button" data-t-title="terminal.hide" data-t-aria-label="terminal.hide"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg></button>
+      </div>
+      <div id="terminal-body"></div>
+    </div>
     </div>
     <div id="review">
       <div id="review-head">
@@ -209,6 +225,24 @@ ${ANALYTICS_STUB}
       <div id="files"></div>
       <div id="diff"></div>
     </div>
+    <!-- A project's own files: the tree on one side, the file on the other.
+         Shaped and placed like #review, which is the same kind of column. -->
+    <div id="explorer">
+      <div id="explorer-resizer" class="resizer-col" role="separator" aria-orientation="vertical" tabindex="0" data-t-aria-label="files.resize"></div>
+      <div id="explorer-head">
+        <span id="explorer-title"></span>
+        <span id="explorer-actions">
+          <button id="explorer-terminal" type="button" data-t-title="files.terminal" data-t-aria-label="files.terminal"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5.5 6.5 8 4 10.5"/><path d="M8.5 10.5H12"/></svg></button>
+          <button id="explorer-refresh" type="button" data-t-title="files.refresh" data-t-aria-label="files.refresh"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.2 5.4A5.6 5.6 0 1 0 13.5 10"/><path d="M13.2 2.5v2.9h-2.9"/></svg></button>
+          <button id="explorer-close" type="button" data-t-title="files.close" data-t-aria-label="files.close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg></button>
+        </span>
+      </div>
+      <div id="explorer-body">
+        <div id="explorer-tree" role="tree"></div>
+        <div id="explorer-split" role="separator" tabindex="0" data-t-aria-label="files.resize"></div>
+        <div id="explorer-view"></div>
+      </div>
+    </div>
     <!-- The agent's browser, beside the transcript rather than over it.
          A sibling of #main for the same reason #review is one: the split is a
          row of columns, and a pane nested inside #main would stack under the
@@ -221,7 +255,7 @@ ${ANALYTICS_STUB}
       <div id="browser-head">
         <div id="browser-context">
           <div id="browser-name-line">
-            <span id="browser-mark" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="1.75" y="2.5" width="12.5" height="11" rx="2"/><path d="M1.75 6h12.5"/><circle cx="4.25" cy="4.25" r=".55" fill="currentColor" stroke="none"/></svg></span>
+            <span id="browser-mark" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="1.75" y="2.75" width="12.5" height="10.5" rx="2"/><path d="M1.75 6h12.5"/><path d="M4.1 4.4h.01M5.9 4.4h.01"/></svg></span>
             <span id="browser-title" data-t="nav.browser"></span>
             <span id="browser-status" hidden><i></i><span data-t="browser.live"></span></span>
           </div>

package/dist/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AAGH;;;;;;;GAOG;AACH,MAAM,OAAO,GAAG;;;;;yCAKyB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;4CAOwB,kBAAkB,CAAC,OAAO,CAAC;SAC9D,KAAK;EACZ,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAwWK,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;qBACvB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;EAC1C,aAAa;EACb,UAAU;EACV,gBAAgB;;;QAGV,CAAC"}
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AAGH;;;;;;;GAOG;AACH,MAAM,OAAO,GAAG;;;;;yCAKyB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;4CAOwB,kBAAkB,CAAC,OAAO,CAAC;SAC9D,KAAK;EACZ,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0YK,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;qBACvB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;EAC1C,aAAa;EACb,UAAU;EACV,gBAAgB;;;QAGV,CAAC"}

package/dist/server.js

@@ -1,5 +1,6 @@
 import { createServer } from "node:http";
 import { randomUUID, timingSafeEqual } from "node:crypto";
+import { createReadStream } from "node:fs";
 import { readFile, stat } from "node:fs/promises";
 import path from "node:path";
 import { homedir } from "node:os";
@@ -28,7 +29,8 @@ import { readPrefs, writePrefs } from "./prefs.js";
 import { sortModelsForDisplay } from "./model-order.js";
 import { loadModelsDev, releaseDateOf, releaseDates } from "@oharness/engine/providers/models-dev.ts";
 import { listDirectories, pickDirectory, pickFiles, revealDirectory } from "./pick.js";
-import { browseFiles, searchFiles, within } from "./files.js";
+import { TerminalHub, terminalAsset } from "./terminal.js";
+import { PREVIEW_MEDIA, browseFiles, previewFile, resolveFile, searchFiles, within } from "./files.js";
 import { analyticsState } from "./analytics.js";
 import { PAGE } from "./page.js";
 import { browserState, parseInputEvent, streamFrames } from "./browser-pane.js";
@@ -433,6 +435,7 @@ export async function startWebServer(opts) {
         broadcast(announce(entry));
         notify(entry);
     });
+    const terminals = new TerminalHub();
     const server = createServer((req, res) => {
         void handle(req, res).catch((err) => {
             send(res, 500, { error: errorMessage(err) });
@@ -1069,6 +1072,137 @@ export async function startWebServer(opts) {
                 const result = await revealDirectory(dir);
                 return send(res, "error" in result ? 500 : 200, result);
             }
+            /*
+             * The files pane: a project's tree one folder at a time, one file's
+             * contents, and an image's bytes. Addressed by the project's folder
+             * rather than a session, because the pane opens from the sidebar's
+             * project menu too, where there may be no session in that tree at all.
+             */
+            // The embedded terminal. One shell per project folder; see terminal.ts.
+            case "POST /term/open": {
+                const body = await readJson(req);
+                const root = await projectRoot(typeof body.cwd === "string" ? body.cwd : null);
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                const replace = typeof body.replace === "string" ? body.replace : undefined;
+                const result = await terminals.open(root, { cols: body.cols, rows: body.rows }, replace);
+                return send(res, "error" in result ? 500 : 200, result);
+            }
+            case "GET /term/list": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                return send(res, 200, { terminals: terminals.list(root) });
+            }
+            case "GET /term/stream": {
+                if (!terminals.stream(url.searchParams.get("id") ?? "", res)) {
+                    return send(res, 404, { error: "no such terminal" });
+                }
+                return;
+            }
+            case "POST /term/input": {
+                const body = await readJson(req);
+                const ok = terminals.input(String(body.id ?? ""), body.data);
+                return send(res, ok ? 200 : 404, ok ? { ok } : { error: "no such terminal" });
+            }
+            case "POST /term/resize": {
+                const body = await readJson(req);
+                const ok = terminals.resize(String(body.id ?? ""), body.cols, body.rows);
+                return send(res, ok ? 200 : 404, ok ? { ok } : { error: "no such terminal" });
+            }
+            case "POST /term/close": {
+                const body = await readJson(req);
+                terminals.close(String(body.id ?? ""));
+                return send(res, 200, { ok: true });
+            }
+            case "GET /vendor/xterm.js":
+            case "GET /vendor/xterm.css":
+            case "GET /vendor/xterm-fit.js": {
+                const file = terminalAsset(url.pathname);
+                if (!file)
+                    return send(res, 404, { error: "terminal assets are not installed" });
+                const data = await readFile(file);
+                res.writeHead(200, {
+                    "content-type": url.pathname.endsWith(".css") ? "text/css; charset=utf-8" : "text/javascript; charset=utf-8",
+                    "content-length": data.byteLength,
+                    "cache-control": "private, max-age=3600",
+                });
+                res.end(data);
+                return;
+            }
+            case "GET /files/tree": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                return send(res, 200, await browseFiles(root, url.searchParams.get("dir") ?? "", { all: true }));
+            }
+            case "GET /files/read": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                const result = await previewFile(root, url.searchParams.get("path") ?? "");
+                return send(res, "error" in result ? 404 : 200, result);
+            }
+            case "GET /files/raw": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                const full = root && resolveFile(root, url.searchParams.get("path") ?? "");
+                const media = full && PREVIEW_MEDIA[path.extname(full).toLowerCase()];
+                if (!full || !media)
+                    return send(res, 415, { error: "not previewable" });
+                let size;
+                try {
+                    const info = await stat(full);
+                    if (!info.isFile())
+                        return send(res, 404, { error: "not a file" });
+                    size = info.size;
+                }
+                catch {
+                    return send(res, 404, { error: "no such file" });
+                }
+                // A video is seeked by asking for the bytes at the new position, and
+                // one too long to buffer whole would not play at all without this.
+                const range = /^bytes=(\d*)-(\d*)$/.exec(req.headers.range ?? "");
+                let first = 0;
+                let last = size - 1;
+                if (range && (range[1] || range[2])) {
+                    if (range[1]) {
+                        first = Number(range[1]);
+                        if (range[2])
+                            last = Math.min(Number(range[2]), size - 1);
+                    }
+                    else {
+                        first = Math.max(0, size - Number(range[2]));
+                    }
+                    if (first > last || first >= size) {
+                        res.writeHead(416, { "content-range": `bytes */${size}` });
+                        res.end();
+                        return;
+                    }
+                }
+                const partial = Boolean(range && (range[1] || range[2]));
+                res.writeHead(partial ? 206 : 200, {
+                    "content-type": media.type,
+                    "content-length": last - first + 1,
+                    "accept-ranges": "bytes",
+                    ...(partial ? { "content-range": `bytes ${first}-${last}/${size}` } : {}),
+                    "x-content-type-options": "nosniff",
+                    // Served inert: this is same-origin to a page that holds the session
+                    // token, and an SVG is a document that can script. A PDF is left
+                    // unsandboxed, because the browser's viewer will not open inside a
+                    // sandbox; the viewer runs in its own process, apart from the page.
+                    ...(media.kind === "pdf"
+                        ? {}
+                        : { "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; sandbox" }),
+                    "cache-control": "private, no-store",
+                });
+                if (req.method === "HEAD" || size === 0)
+                    return void res.end();
+                const stream = createReadStream(full, { start: first, end: last });
+                stream.on("error", () => res.destroy());
+                res.on("close", () => stream.destroy());
+                stream.pipe(res);
+                return;
+            }
             case "POST /pick": {
                 const body = await readJson(req);
                 // The dialog opens on this machine's desktop, which is the same
@@ -3603,6 +3737,7 @@ export async function startWebServer(opts) {
                 unsubscribe();
             for (const harness of harnesses.values())
                 harness.cloudConnectors.close();
+            terminals.closeAll();
             for (const client of clients)
                 client.end();
             clients.clear();
@@ -3946,6 +4081,13 @@ async function readBody(req, limit) {
  * shape. Anything else is inlined as text under its filename — a base64 blob
  * of a zip would burn context and tell the model nothing.
  */
+/** A project folder named by the page, resolved, or undefined if it is not one. */
+async function projectRoot(dir) {
+    if (!dir)
+        return undefined;
+    const full = path.resolve(dir);
+    return (await isDirectory(full)) ? full : undefined;
+}
 /** Whether a chosen path is a folder; anything unreadable is treated as a file. */
 async function isDirectory(target) {
     try {