@metricinsights/pp-dev 1.5.0-beta.3 → 1.5.0-beta.30

package/dist/client/request-inspector.css

@@ -0,0 +1,3 @@
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root,:root[data-pp-dev-theme=light]{--bg: #ffffff;--bg2: #f4f5f7;--bg3: #e9ebef;--bg4: #dbdee3;--border: #d7dae0;--border2: #c2c6cd;--text: #1a1a1e;--text2: #54566b;--text3: #8a8c9c;--accent: #4f46e5;--accent2: #7c3aed;--green: #16a34a;--red: #dc2626;--yellow: #a16207;--blue: #2563eb;--orange: #c2410c;--purple: #9333ea;--json-text: #24292f;--json-key: #0550ae;--json-str: #0a3069;--json-num: #953800;--json-bool: #cf222e;--btn-primary-fg: #ffffff;--font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace;--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif}:root[data-pp-dev-theme=dark]{--bg: #1a1a1e;--bg2: #222228;--bg3: #2a2a32;--bg4: #32323c;--border: #3a3a46;--border2: #4a4a58;--text: #e0e0f0;--text2: #a0a0b8;--text3: #606078;--accent: #6e8efb;--accent2: #a78bfa;--green: #4ade80;--red: #f87171;--yellow: #fbbf24;--blue: #60a5fa;--orange: #fb923c;--purple: #c084fc;--json-text: #c9d1d9;--json-key: #79b8ff;--json-str: #9ecbff;--json-num: #f8c555;--json-bool: #f97583;--btn-primary-fg: #0d0d10}@media(prefers-color-scheme: dark){:root{--bg: #1a1a1e;--bg2: #222228;--bg3: #2a2a32;--bg4: #32323c;--border: #3a3a46;--border2: #4a4a58;--text: #e0e0f0;--text2: #a0a0b8;--text3: #606078;--accent: #6e8efb;--accent2: #a78bfa;--green: #4ade80;--red: #f87171;--yellow: #fbbf24;--blue: #60a5fa;--orange: #fb923c;--purple: #c084fc;--json-text: #c9d1d9;--json-key: #79b8ff;--json-str: #9ecbff;--json-num: #f8c555;--json-bool: #f97583;--btn-primary-fg: #0d0d10}}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.5}.app{display:flex;flex-direction:column;height:100vh}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.toolbar-title{font-weight:600;font-size:14px;color:var(--text);margin-right:4px}.toolbar-badge{font-size:11px;padding:2px 7px;border-radius:10px;background:var(--bg4);color:var(--text2)}.toolbar-spacer{flex:1}.theme-switch{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:2px}.theme-switch button{padding:3px 8px;border:none;border-radius:3px;background:rgba(0,0,0,0);color:var(--text2);font-size:11px;cursor:pointer;font-family:var(--font-ui)}.theme-switch button.active{background:var(--accent);color:var(--btn-primary-fg)}.mem-bar-wrap{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2)}.mem-bar{width:80px;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}.mem-bar-fill{height:100%;background:var(--accent);transition:width .4s}.split{display:flex;flex:1;overflow:hidden}.pane-list{width:380px;min-width:200px;max-width:60%;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.pane-detail{flex:1;display:flex;flex-direction:column;overflow:hidden}.filter-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}.filter-input{flex:1 1 120px;min-width:0;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:12px;outline:none}.filter-input:focus{border-color:var(--accent)}.filter-selects{display:flex;gap:6px;flex-shrink:0}.filter-select{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-size:12px;outline:none;cursor:pointer;max-width:90px}.filter-select:focus{border-color:var(--accent)}.req-list{flex:1;overflow-y:auto;overflow-x:hidden}.req-list::-webkit-scrollbar{width:6px}.req-list::-webkit-scrollbar-track{background:var(--bg)}.req-list::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}.req-item{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 9px;border-bottom:1px solid var(--border);border-left:3px solid rgba(0,0,0,0);cursor:pointer;user-select:none;transition:background .1s,border-left-color .1s}.req-item:hover{background:var(--bg3)}.req-item.selected{background:var(--bg4);border-left-color:var(--accent) !important}.req-item.src-proxy{border-left-color:var(--accent2)}.req-item.src-proxy-cache{border-left-color:var(--yellow)}.req-item.src-local{border-left-color:rgba(0,0,0,0)}.method-badge{font-size:10px;font-weight:700;padding:2px 5px;border-radius:3px;min-width:38px;text-align:center;letter-spacing:.4px;flex-shrink:0}.m-GET{background:color-mix(in srgb, var(--green) 20%, var(--bg));color:var(--green)}.m-POST{background:color-mix(in srgb, var(--blue) 20%, var(--bg));color:var(--blue)}.m-PUT{background:color-mix(in srgb, var(--orange) 20%, var(--bg));color:var(--orange)}.m-PATCH{background:color-mix(in srgb, var(--yellow) 20%, var(--bg));color:var(--yellow)}.m-DELETE{background:color-mix(in srgb, var(--red) 20%, var(--bg));color:var(--red)}.m-HEAD,.m-OPTIONS{background:color-mix(in srgb, var(--purple) 20%, var(--bg));color:var(--purple)}.m-other{background:var(--bg4);color:var(--text2)}.req-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text)}.req-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;font-size:10px;color:var(--text3)}.req-status-row{display:flex;align-items:center;gap:4px}.source-letter{font-size:9px;font-weight:700;width:15px;height:15px;display:flex;align-items:center;justify-content:center;border-radius:2px;flex-shrink:0}.src-letter-proxy{background:color-mix(in srgb, var(--accent2) 20%, var(--bg));color:var(--accent2)}.src-letter-proxy-cache{background:color-mix(in srgb, var(--yellow) 20%, var(--bg));color:var(--yellow)}.src-letter-local{background:var(--bg4);color:var(--text3)}.status-badge{font-size:10px;font-weight:600;padding:1px 4px;border-radius:2px}.s-2xx{color:var(--green)}.s-3xx{color:var(--blue)}.s-4xx{color:var(--yellow)}.s-5xx{color:var(--red)}.s-pending{color:var(--text3)}.user-chip{font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px;flex-shrink:0;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:color-mix(in srgb, var(--purple) 20%, var(--bg));color:var(--purple)}.source-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:2px 7px;border-radius:10px}.src-local{background:color-mix(in srgb, var(--green) 20%, var(--bg));color:var(--green)}.src-proxy{background:color-mix(in srgb, var(--accent2) 20%, var(--bg));color:var(--accent2)}.src-proxy-cache{background:color-mix(in srgb, var(--yellow) 20%, var(--bg));color:var(--yellow)}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text3);gap:8px;padding:40px}.empty-icon{font-size:40px;opacity:.5}.detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text3);gap:8px}.detail-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0}.detail-scroll::-webkit-scrollbar{width:6px}.detail-scroll::-webkit-scrollbar-track{background:var(--bg)}.detail-scroll::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}.detail-section{border-bottom:1px solid var(--border)}.detail-section-hdr{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}.detail-section-hdr:hover{background:var(--bg3)}.detail-section-hdr .toggle{font-size:10px;color:var(--text3)}.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text2)}.section-badge{font-size:10px;padding:1px 5px;border-radius:8px;background:var(--bg4);color:var(--text3)}.section-actions{display:flex;gap:4px;margin-left:auto;align-items:center}.section-btn{font-size:10px;padding:1px 7px;border-radius:3px;border:1px solid var(--border);background:rgba(0,0,0,0);color:var(--text3);cursor:pointer;line-height:1.6;transition:all .1s;font-family:var(--font-ui)}.section-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}.detail-section-body{padding:8px 12px;font-family:var(--font-mono);font-size:12px}.detail-section-body.collapsed{display:none}.kv-table{width:100%;border-collapse:collapse}.kv-table tr:hover td{background:var(--bg3)}.kv-table td{padding:2px 0;vertical-align:top}.kv-table td:first-child{color:var(--text2);white-space:nowrap;padding-right:12px;min-width:140px;max-width:220px;overflow:hidden;text-overflow:ellipsis}.kv-table td:last-child{color:var(--text);word-break:break-all}.body-content{white-space:pre-wrap;word-break:break-all;color:var(--text);line-height:1.6;max-height:400px;overflow:auto}.body-content.json{color:var(--json-text)}.body-json-key{color:var(--json-key)}.body-json-str{color:var(--json-str)}.body-json-num{color:var(--json-num)}.body-json-bool{color:var(--json-bool)}.body-json-null{color:var(--json-bool);font-style:italic}.body-binary{color:var(--text3);font-style:italic;padding:8px 0}.body-image{max-width:100%;max-height:300px;object-fit:contain;margin-top:4px;border:1px solid var(--border);border-radius:4px}.truncated-note{font-size:11px;color:var(--yellow);margin-top:4px;font-family:var(--font-ui)}.detail-info-bar{display:flex;gap:16px;padding:10px 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.info-item{display:flex;flex-direction:column;gap:2px}.info-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:13px;font-weight:600;color:var(--text)}.info-url{display:flex;align-items:center;gap:8px;font-size:11px;font-family:var(--font-mono);color:var(--text2);padding:6px 12px;border-bottom:1px solid var(--border);background:var(--bg)}.info-url-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:12px;cursor:pointer;transition:background .1s}.btn:hover{background:var(--bg4);border-color:var(--border2)}.btn-danger:hover{background:color-mix(in srgb, var(--red) 15%, var(--bg));border-color:color-mix(in srgb, var(--red) 45%, var(--bg));color:var(--red)}.btn-sm{padding:2px 7px;font-size:11px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
+
+/*# sourceMappingURL=request-inspector.css.map */

package/dist/client/request-inspector.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["request-inspector.scss"],"names":[],"mappings":"AACA,qBAGE,sBACA,SACA,UAEF,qCAEE,cACA,eACA,eACA,eACA,kBACA,mBACA,gBACA,iBACA,iBACA,kBACA,mBACA,iBACA,eACA,kBACA,gBACA,kBACA,kBACA,qBACA,oBACA,oBACA,oBACA,qBACA,0BACA,iFACA,qEAEF,8BACE,cACA,eACA,eACA,eACA,kBACA,mBACA,gBACA,iBACA,iBACA,kBACA,mBACA,iBACA,eACA,kBACA,gBACA,kBACA,kBACA,qBACA,oBACA,oBACA,oBACA,qBACA,0BAEF,mCACE,MACE,cACA,eACA,eACA,eACA,kBACA,mBACA,gBACA,iBACA,iBACA,kBACA,mBACA,iBACA,eACA,kBACA,gBACA,kBACA,kBACA,qBACA,oBACA,oBACA,oBACA,qBACA,2BAGJ,UAEE,YACA,gBACA,qBACA,kBACA,2BACA,eACA,gBAIF,KACE,aACA,sBACA,aAEF,SACE,aACA,mBACA,QACA,iBACA,sBACA,sCACA,cACA,eAEF,eACE,gBACA,eACA,kBACA,iBAEF,eACE,eACA,gBACA,mBACA,sBACA,mBAEF,gBACE,OAEF,cACE,aACA,QACA,sBACA,+BACA,kBACA,YAEF,qBACE,gBACA,YACA,kBACA,yBACA,mBACA,eACA,eACA,2BAEF,4BACE,yBACA,4BAEF,cACE,aACA,mBACA,QACA,eACA,mBAEF,SACE,WACA,WACA,sBACA,kBACA,gBAEF,cACE,YACA,yBACA,qBAGF,OACE,aACA,OACA,gBAEF,WACE,YACA,gBACA,cACA,qCACA,aACA,sBACA,cAEF,aACE,OACA,aACA,sBACA,gBAIF,YACE,aACA,eACA,QACA,iBACA,sBACA,sCACA,cAEF,cACE,eACA,YACA,sBACA,+BACA,kBACA,gBACA,kBACA,eACA,aAEF,oBACE,2BAEF,gBACE,aACA,QACA,cAEF,eACE,sBACA,+BACA,kBACA,gBACA,kBACA,eACA,aACA,eACA,eAEF,qBACE,2BAIF,UACE,OACA,gBACA,kBAEF,6BACE,UAEF,mCACE,qBAEF,mCACE,sBACA,kBAEF,UACE,aACA,mBACA,QACA,yBACA,sCACA,oCACA,eACA,iBACA,WACE,qCAGJ,gBACE,sBAEF,mBACE,sBACA,2CAEF,oBACE,iCAEF,0BACE,gCAEF,oBACE,gCAGF,cACE,eACA,gBACA,gBACA,kBACA,eACA,kBACA,oBACA,cAEF,OACE,2DACA,mBAEF,QACE,0DACA,kBAEF,OACE,4DACA,oBAEF,SACE,4DACA,oBAEF,UACE,yDACA,iBAEF,mBAEE,4DACA,oBAEF,SACE,sBACA,mBAGF,SACE,OACA,gBACA,uBACA,mBACA,eACA,kBAEF,UACE,aACA,sBACA,qBACA,QACA,cACA,eACA,mBAEF,gBACE,aACA,mBACA,QAEF,eACE,cACA,gBACA,WACA,YACA,aACA,mBACA,uBACA,kBACA,cAEF,kBACE,6DACA,qBAEF,wBACE,4DACA,oBAEF,kBACE,sBACA,mBAEF,cACE,eACA,gBACA,gBACA,kBAEF,OACE,mBAEF,OACE,kBAEF,OACE,oBAEF,OACE,iBAEF,WACE,mBAGF,WACE,eACA,gBACA,gBACA,kBACA,cACA,eACA,gBACA,uBACA,mBACA,4DACA,oBAEF,aACE,oBACA,mBACA,QACA,eACA,gBACA,gBACA,mBAEF,WACE,2DACA,mBAEF,WACE,6DACA,qBAEF,iBACE,4DACA,oBAGF,aACE,OACA,aACA,sBACA,mBACA,uBACA,mBACA,QACA,aAEF,YACE,eACA,WAIF,cACE,OACA,aACA,sBACA,mBACA,uBACA,mBACA,QAEF,eACE,OACA,gBACA,kBACA,UAEF,kCACE,UAEF,wCACE,qBAEF,wCACE,sBACA,kBAGF,gBACE,sCAEF,oBACE,aACA,mBACA,QACA,iBACA,sBACA,eACA,iBACA,gBACA,MACA,UAEF,0BACE,sBAEF,4BACE,eACA,mBAEF,eACE,eACA,gBACA,yBACA,oBACA,mBAEF,eACE,eACA,gBACA,kBACA,sBACA,mBAEF,iBACE,aACA,QACA,iBACA,mBAEF,aACE,eACA,gBACA,kBACA,+BACA,yBACA,mBACA,eACA,gBACA,mBACA,2BAEF,mBACE,sBACA,kBACA,4BAEF,qBACE,iBACA,6BACA,eAEF,+BACE,aAGF,UACE,WACA,yBAEF,sBACE,sBAEF,aACE,cACA,mBAEF,yBACE,mBACA,mBACA,mBACA,gBACA,gBACA,gBACA,uBAEF,wBACE,kBACA,qBAGF,cACE,qBACA,qBACA,kBACA,gBACA,iBACA,cAEF,mBACE,uBAEF,eACE,sBAEF,eACE,sBAEF,eACE,sBAEF,gBACE,uBAEF,gBACE,uBACA,kBAEF,aACE,mBACA,kBACA,cAEF,YACE,eACA,iBACA,mBACA,eACA,+BACA,kBAEF,gBACE,eACA,oBACA,eACA,2BAGF,iBACE,aACA,SACA,kBACA,sBACA,sCACA,cACA,eAEF,WACE,aACA,sBACA,QAEF,YACE,eACA,mBACA,yBACA,oBAEF,YACE,eACA,gBACA,kBAEF,UACE,aACA,mBACA,QACA,eACA,6BACA,mBACA,iBACA,sCACA,qBAEF,eACE,OACA,gBACA,uBACA,mBAIF,KACE,iBACA,kBACA,+BACA,sBACA,kBACA,eACA,eACA,0BAEF,WACE,sBACA,4BAEF,kBACE,yDACA,2DACA,iBAEF,QACE,gBACA,eAIF,UACE,UACA,WACA,kBACA,wBACA,4BAEF,iBACE,QAEE,UAEF,IACE,YAKJ,oBACE,UACA,WAEF,0BACE,qBAEF,0BACE,sBACA","file":"request-inspector.css","sourcesContent":["// The Request Inspector page (moved from the template literal in src/lib/request-inspector.ts).\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n:root,\n:root[data-pp-dev-theme='light'] {\n  --bg: #ffffff;\n  --bg2: #f4f5f7;\n  --bg3: #e9ebef;\n  --bg4: #dbdee3;\n  --border: #d7dae0;\n  --border2: #c2c6cd;\n  --text: #1a1a1e;\n  --text2: #54566b;\n  --text3: #8a8c9c;\n  --accent: #4f46e5;\n  --accent2: #7c3aed;\n  --green: #16a34a;\n  --red: #dc2626;\n  --yellow: #a16207;\n  --blue: #2563eb;\n  --orange: #c2410c;\n  --purple: #9333ea;\n  --json-text: #24292f;\n  --json-key: #0550ae;\n  --json-str: #0a3069;\n  --json-num: #953800;\n  --json-bool: #cf222e;\n  --btn-primary-fg: #ffffff;\n  --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace;\n  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n:root[data-pp-dev-theme='dark'] {\n  --bg: #1a1a1e;\n  --bg2: #222228;\n  --bg3: #2a2a32;\n  --bg4: #32323c;\n  --border: #3a3a46;\n  --border2: #4a4a58;\n  --text: #e0e0f0;\n  --text2: #a0a0b8;\n  --text3: #606078;\n  --accent: #6e8efb;\n  --accent2: #a78bfa;\n  --green: #4ade80;\n  --red: #f87171;\n  --yellow: #fbbf24;\n  --blue: #60a5fa;\n  --orange: #fb923c;\n  --purple: #c084fc;\n  --json-text: #c9d1d9;\n  --json-key: #79b8ff;\n  --json-str: #9ecbff;\n  --json-num: #f8c555;\n  --json-bool: #f97583;\n  --btn-primary-fg: #0d0d10;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #1a1a1e;\n    --bg2: #222228;\n    --bg3: #2a2a32;\n    --bg4: #32323c;\n    --border: #3a3a46;\n    --border2: #4a4a58;\n    --text: #e0e0f0;\n    --text2: #a0a0b8;\n    --text3: #606078;\n    --accent: #6e8efb;\n    --accent2: #a78bfa;\n    --green: #4ade80;\n    --red: #f87171;\n    --yellow: #fbbf24;\n    --blue: #60a5fa;\n    --orange: #fb923c;\n    --purple: #c084fc;\n    --json-text: #c9d1d9;\n    --json-key: #79b8ff;\n    --json-str: #9ecbff;\n    --json-num: #f8c555;\n    --json-bool: #f97583;\n    --btn-primary-fg: #0d0d10;\n  }\n}\nhtml,\nbody {\n  height: 100%;\n  overflow: hidden;\n  background: var(--bg);\n  color: var(--text);\n  font-family: var(--font-ui);\n  font-size: 13px;\n  line-height: 1.5;\n}\n\n/* ── Layout ── */\n.app {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--bg2);\n  border-bottom: 1px solid var(--border);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n.toolbar-title {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--text);\n  margin-right: 4px;\n}\n.toolbar-badge {\n  font-size: 11px;\n  padding: 2px 7px;\n  border-radius: 10px;\n  background: var(--bg4);\n  color: var(--text2);\n}\n.toolbar-spacer {\n  flex: 1;\n}\n.theme-switch {\n  display: flex;\n  gap: 2px;\n  background: var(--bg3);\n  border: 1px solid var(--border);\n  border-radius: 4px;\n  padding: 2px;\n}\n.theme-switch button {\n  padding: 3px 8px;\n  border: none;\n  border-radius: 3px;\n  background: transparent;\n  color: var(--text2);\n  font-size: 11px;\n  cursor: pointer;\n  font-family: var(--font-ui);\n}\n.theme-switch button.active {\n  background: var(--accent);\n  color: var(--btn-primary-fg);\n}\n.mem-bar-wrap {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--text2);\n}\n.mem-bar {\n  width: 80px;\n  height: 6px;\n  background: var(--bg4);\n  border-radius: 3px;\n  overflow: hidden;\n}\n.mem-bar-fill {\n  height: 100%;\n  background: var(--accent);\n  transition: width 0.4s;\n}\n\n.split {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n.pane-list {\n  width: 380px;\n  min-width: 200px;\n  max-width: 60%;\n  border-right: 1px solid var(--border);\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n}\n.pane-detail {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* ── Filter bar ── */\n.filter-bar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px;\n  background: var(--bg2);\n  border-bottom: 1px solid var(--border);\n  flex-shrink: 0;\n}\n.filter-input {\n  flex: 1 1 120px;\n  min-width: 0;\n  background: var(--bg3);\n  border: 1px solid var(--border);\n  color: var(--text);\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  outline: none;\n}\n.filter-input:focus {\n  border-color: var(--accent);\n}\n.filter-selects {\n  display: flex;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.filter-select {\n  background: var(--bg3);\n  border: 1px solid var(--border);\n  color: var(--text);\n  padding: 4px 6px;\n  border-radius: 4px;\n  font-size: 12px;\n  outline: none;\n  cursor: pointer;\n  max-width: 90px;\n}\n.filter-select:focus {\n  border-color: var(--accent);\n}\n\n/* ── Request list ── */\n.req-list {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.req-list::-webkit-scrollbar {\n  width: 6px;\n}\n.req-list::-webkit-scrollbar-track {\n  background: var(--bg);\n}\n.req-list::-webkit-scrollbar-thumb {\n  background: var(--bg4);\n  border-radius: 3px;\n}\n.req-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 10px 7px 9px;\n  border-bottom: 1px solid var(--border);\n  border-left: 3px solid transparent;\n  cursor: pointer;\n  user-select: none;\n  transition:\n    background 0.1s,\n    border-left-color 0.1s;\n}\n.req-item:hover {\n  background: var(--bg3);\n}\n.req-item.selected {\n  background: var(--bg4);\n  border-left-color: var(--accent) !important;\n}\n.req-item.src-proxy {\n  border-left-color: var(--accent2);\n}\n.req-item.src-proxy-cache {\n  border-left-color: var(--yellow);\n}\n.req-item.src-local {\n  border-left-color: transparent;\n}\n\n.method-badge {\n  font-size: 10px;\n  font-weight: 700;\n  padding: 2px 5px;\n  border-radius: 3px;\n  min-width: 38px;\n  text-align: center;\n  letter-spacing: 0.4px;\n  flex-shrink: 0;\n}\n.m-GET {\n  background: color-mix(in srgb, var(--green) 20%, var(--bg));\n  color: var(--green);\n}\n.m-POST {\n  background: color-mix(in srgb, var(--blue) 20%, var(--bg));\n  color: var(--blue);\n}\n.m-PUT {\n  background: color-mix(in srgb, var(--orange) 20%, var(--bg));\n  color: var(--orange);\n}\n.m-PATCH {\n  background: color-mix(in srgb, var(--yellow) 20%, var(--bg));\n  color: var(--yellow);\n}\n.m-DELETE {\n  background: color-mix(in srgb, var(--red) 20%, var(--bg));\n  color: var(--red);\n}\n.m-HEAD,\n.m-OPTIONS {\n  background: color-mix(in srgb, var(--purple) 20%, var(--bg));\n  color: var(--purple);\n}\n.m-other {\n  background: var(--bg4);\n  color: var(--text2);\n}\n\n.req-url {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  color: var(--text);\n}\n.req-meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--text3);\n}\n.req-status-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.source-letter {\n  font-size: 9px;\n  font-weight: 700;\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 2px;\n  flex-shrink: 0;\n}\n.src-letter-proxy {\n  background: color-mix(in srgb, var(--accent2) 20%, var(--bg));\n  color: var(--accent2);\n}\n.src-letter-proxy-cache {\n  background: color-mix(in srgb, var(--yellow) 20%, var(--bg));\n  color: var(--yellow);\n}\n.src-letter-local {\n  background: var(--bg4);\n  color: var(--text3);\n}\n.status-badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 1px 4px;\n  border-radius: 2px;\n}\n.s-2xx {\n  color: var(--green);\n}\n.s-3xx {\n  color: var(--blue);\n}\n.s-4xx {\n  color: var(--yellow);\n}\n.s-5xx {\n  color: var(--red);\n}\n.s-pending {\n  color: var(--text3);\n}\n\n.user-chip {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 8px;\n  flex-shrink: 0;\n  max-width: 96px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background: color-mix(in srgb, var(--purple) 20%, var(--bg));\n  color: var(--purple);\n}\n.source-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 7px;\n  border-radius: 10px;\n}\n.src-local {\n  background: color-mix(in srgb, var(--green) 20%, var(--bg));\n  color: var(--green);\n}\n.src-proxy {\n  background: color-mix(in srgb, var(--accent2) 20%, var(--bg));\n  color: var(--accent2);\n}\n.src-proxy-cache {\n  background: color-mix(in srgb, var(--yellow) 20%, var(--bg));\n  color: var(--yellow);\n}\n\n.empty-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--text3);\n  gap: 8px;\n  padding: 40px;\n}\n.empty-icon {\n  font-size: 40px;\n  opacity: 0.5;\n}\n\n/* ── Detail pane ── */\n.detail-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--text3);\n  gap: 8px;\n}\n.detail-scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0;\n}\n.detail-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.detail-scroll::-webkit-scrollbar-track {\n  background: var(--bg);\n}\n.detail-scroll::-webkit-scrollbar-thumb {\n  background: var(--bg4);\n  border-radius: 3px;\n}\n\n.detail-section {\n  border-bottom: 1px solid var(--border);\n}\n.detail-section-hdr {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--bg2);\n  cursor: pointer;\n  user-select: none;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n.detail-section-hdr:hover {\n  background: var(--bg3);\n}\n.detail-section-hdr .toggle {\n  font-size: 10px;\n  color: var(--text3);\n}\n.section-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.6px;\n  color: var(--text2);\n}\n.section-badge {\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: 8px;\n  background: var(--bg4);\n  color: var(--text3);\n}\n.section-actions {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  align-items: center;\n}\n.section-btn {\n  font-size: 10px;\n  padding: 1px 7px;\n  border-radius: 3px;\n  border: 1px solid var(--border);\n  background: transparent;\n  color: var(--text3);\n  cursor: pointer;\n  line-height: 1.6;\n  transition: all 0.1s;\n  font-family: var(--font-ui);\n}\n.section-btn:hover {\n  background: var(--bg4);\n  color: var(--text);\n  border-color: var(--border2);\n}\n.detail-section-body {\n  padding: 8px 12px;\n  font-family: var(--font-mono);\n  font-size: 12px;\n}\n.detail-section-body.collapsed {\n  display: none;\n}\n\n.kv-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n.kv-table tr:hover td {\n  background: var(--bg3);\n}\n.kv-table td {\n  padding: 2px 0;\n  vertical-align: top;\n}\n.kv-table td:first-child {\n  color: var(--text2);\n  white-space: nowrap;\n  padding-right: 12px;\n  min-width: 140px;\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.kv-table td:last-child {\n  color: var(--text);\n  word-break: break-all;\n}\n\n.body-content {\n  white-space: pre-wrap;\n  word-break: break-all;\n  color: var(--text);\n  line-height: 1.6;\n  max-height: 400px;\n  overflow: auto;\n}\n.body-content.json {\n  color: var(--json-text);\n}\n.body-json-key {\n  color: var(--json-key);\n}\n.body-json-str {\n  color: var(--json-str);\n}\n.body-json-num {\n  color: var(--json-num);\n}\n.body-json-bool {\n  color: var(--json-bool);\n}\n.body-json-null {\n  color: var(--json-bool);\n  font-style: italic;\n}\n.body-binary {\n  color: var(--text3);\n  font-style: italic;\n  padding: 8px 0;\n}\n.body-image {\n  max-width: 100%;\n  max-height: 300px;\n  object-fit: contain;\n  margin-top: 4px;\n  border: 1px solid var(--border);\n  border-radius: 4px;\n}\n.truncated-note {\n  font-size: 11px;\n  color: var(--yellow);\n  margin-top: 4px;\n  font-family: var(--font-ui);\n}\n\n.detail-info-bar {\n  display: flex;\n  gap: 16px;\n  padding: 10px 12px;\n  background: var(--bg2);\n  border-bottom: 1px solid var(--border);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n.info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.info-label {\n  font-size: 10px;\n  color: var(--text3);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n.info-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text);\n}\n.info-url {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11px;\n  font-family: var(--font-mono);\n  color: var(--text2);\n  padding: 6px 12px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg);\n}\n.info-url-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Buttons ── */\n.btn {\n  padding: 4px 10px;\n  border-radius: 4px;\n  border: 1px solid var(--border);\n  background: var(--bg3);\n  color: var(--text);\n  font-size: 12px;\n  cursor: pointer;\n  transition: background 0.1s;\n}\n.btn:hover {\n  background: var(--bg4);\n  border-color: var(--border2);\n}\n.btn-danger:hover {\n  background: color-mix(in srgb, var(--red) 15%, var(--bg));\n  border-color: color-mix(in srgb, var(--red) 45%, var(--bg));\n  color: var(--red);\n}\n.btn-sm {\n  padding: 2px 7px;\n  font-size: 11px;\n}\n\n/* ── Live indicator ── */\n.live-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--green);\n  animation: pulse 2s infinite;\n}\n@keyframes pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n}\n\n/* ── Scrollbar ── */\n::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n::-webkit-scrollbar-track {\n  background: var(--bg);\n}\n::-webkit-scrollbar-thumb {\n  background: var(--bg4);\n  border-radius: 3px;\n}\n"]}

package/dist/client/request-inspector.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Request Inspector — pp-dev</title>
+<script>
+// Set the stored theme override before first paint, so switching pages/reloading doesn't
+// flash the OS-default theme before settling on the user's explicit choice.
+try {
+  var ppDevStoredTheme = localStorage.getItem('pp-dev-info-theme');
+
+  if (ppDevStoredTheme === 'dark' || ppDevStoredTheme === 'light') {
+    document.documentElement.setAttribute('data-pp-dev-theme', ppDevStoredTheme);
+  }
+} catch (e) {}
+</script>
+<link rel="stylesheet" href="/@pp-dev/inspector/request-inspector.css">
+<script type="module" src="/@pp-dev/inspector/request-inspector.js"></script>
+</head>
+<body data-capture-limit="{{captureLimit}}">
+<div class="app">
+  <div class="toolbar">
+    <span class="toolbar-title">🔍 Request Inspector</span>
+    <span class="live-dot" title="Live"></span>
+    <span class="toolbar-badge" id="req-count">0 requests</span>
+    <div class="mem-bar-wrap">
+      <div class="mem-bar"><div class="mem-bar-fill" id="mem-fill" style="width:0%"></div></div>
+      <span id="mem-text">0 B / 1 GB</span>
+    </div>
+    <div class="toolbar-spacer"></div>
+    <div class="theme-switch" id="theme-switch">
+      <button data-theme-choice="auto" aria-pressed="false">Auto</button>
+      <button data-theme-choice="dark" aria-pressed="false">Dark</button>
+      <button data-theme-choice="light" aria-pressed="false">Light</button>
+    </div>
+    <button class="btn btn-sm btn-danger" data-action="clear">Clear</button>
+  </div>
+  <div class="split">
+    <div class="pane-list">
+      <div class="filter-bar" id="filter-bar">
+        <input class="filter-input" id="search-input" placeholder="Filter by URL…" />
+        <div class="filter-selects">
+          <select class="filter-select" id="method-select">
+            <option value="">All</option>
+            <option>GET</option><option>POST</option><option>PUT</option>
+            <option>PATCH</option><option>DELETE</option><option>HEAD</option>
+          </select>
+          <select class="filter-select" id="status-select">
+            <option value="">All</option>
+            <option value="2">2xx</option><option value="3">3xx</option>
+            <option value="4">4xx</option><option value="5">5xx</option>
+          </select>
+          <select class="filter-select" id="source-select">
+            <option value="">All</option>
+            <option value="local">Local</option>
+            <option value="proxy">Proxy</option>
+            <option value="proxy-cache">Cached</option>
+          </select>
+          <select class="filter-select" id="user-select" title="The user whose tab made the request" style="display:none">
+            <option value="">All users</option>
+          </select>
+        </div>
+      </div>
+      <div class="req-list" id="req-list">
+        <div class="empty-state">
+          <div class="empty-icon">📡</div>
+          <div>No requests captured yet</div>
+          <div style="font-size:11px">Requests to the dev server will appear here</div>
+        </div>
+      </div>
+    </div>
+    <div class="pane-detail">
+      <div class="detail-empty" id="detail-empty">
+        <div style="font-size:32px;opacity:.3">←</div>
+        <div>Select a request to inspect</div>
+      </div>
+      <div id="detail-panel" style="display:none;flex:1;flex-direction:column;overflow:hidden">
+        <div class="detail-info-bar" id="detail-info"></div>
+        <div class="info-url" id="detail-url"></div>
+        <div class="detail-scroll" id="detail-scroll"></div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>