-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
40 lines (39 loc) · 31.3 KB
/
Copy pathindex.html
File metadata and controls
40 lines (39 loc) · 31.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Loop:以对话为中心,观察模型、工具与回执的真实过程。">
<title>Loop · 看清每一步</title>
<link rel="icon" type="image/png" href="/icon.png">
<style>
:root{color-scheme:light;--page:#f0f2ee;--paper:#fff;--ink:#27372f;--body:#445249;--muted:#748074;--line:#e2e7df;--accent:#315b47;--wash:#f0f5ec;--error:#a34737;--error-wash:#fff4ed;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;color:var(--ink);background:var(--page)}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,input,select,textarea{border:1px solid var(--line);border-radius:6px;background:white}button{cursor:pointer;padding:7px 12px;transition:background .14s,border-color .14s}button:hover:not(:disabled){background:var(--wash);border-color:#bed0b8}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}:focus-visible{outline:3px solid #94b493;outline-offset:2px}h1,h2,h3,p{margin:0}code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.muted{color:var(--muted)}a{color:var(--accent)}.eyebrow{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.04em}.primary{background:var(--accent);border-color:var(--accent);color:white;font-size:12px;padding:9px 14px}.primary:hover:not(:disabled){background:#244633;border-color:#244633}.skip-link{position:fixed;top:-60px;left:12px;z-index:5;background:white;padding:10px}.skip-link:focus{top:10px}.quiet-button{border-color:transparent;background:transparent;font-size:11px;color:var(--muted);padding:5px}.icon-button{width:30px;height:30px;padding:0;display:grid;place-items:center;font-size:19px;background:transparent;border-color:transparent;flex-shrink:0}
.topbar{height:59px;max-width:1900px;padding:0 24px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;align-items:center;gap:10px}.brand-home{display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--accent);color:white;font-size:25px}.brand-mark img,.agent-avatar img{display:block;width:100%;height:100%;border-radius:inherit}.brand h1{font-size:21px;letter-spacing:-.7px}.brand small{font-size:11px;color:var(--muted);border-left:1px solid #d0d8ca;padding-left:15px;margin-left:7px}.top-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:15px}.model-label{font-family:var(--mono);font-size:10px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1900px;margin:auto;padding:0 18px 17px}.app-shell{height:calc(100dvh - 76px);min-height:590px;display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr);border:1px solid #d9e1d5;border-radius:11px;overflow:hidden;background:white;box-shadow:0 7px 28px #2d412808;position:relative}.app-shell.sidebar-collapsed{grid-template-columns:51px minmax(0,1fr)}.sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f6f8f2;border-right:1px solid var(--line);padding:13px 10px 10px}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:0 3px 10px}.sidebar-heading h2{font-size:12px;font-weight:600}.sidebar-actions{display:flex;gap:6px}.new-task-button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:9px 11px;font-size:12px;background:#fff;border-color:#d6e0ce}.new-task-button b{font-size:17px;font-weight:400}.task-list{min-height:0;overflow:auto;flex:1;scrollbar-gutter:stable;margin:10px -4px 0;padding:0 4px}.task-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px;width:100%;border:1px solid transparent;border-radius:6px;padding:8px 4px 8px 9px;margin-bottom:4px}.task-item .task-open{display:block;width:100%;text-align:left;border:0;background:transparent;padding:0;border-radius:0}.task-item .task-open:hover:not(:disabled){background:transparent;border-color:transparent}.task-item strong{font-size:11px;line-height:1.75;font-weight:450;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-item .task-open>span,.task-item.renaming>span{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:9px;color:var(--muted)}.task-item time{margin-left:auto;font-family:var(--mono);font-size:8px}.task-item.active{background:#e9f0e2;border-color:#d3dfc9}.task-rename{opacity:0;font-size:9px;padding:2px 5px;border:0;background:transparent;color:var(--muted);white-space:nowrap}.task-item:hover .task-rename,.task-item.active .task-rename,.task-rename:focus-visible{opacity:1}.task-title-input{width:100%;font-size:11px;padding:4px 6px}.task-dot{height:4px;width:4px;border-radius:50%;background:#809575;flex-shrink:0}.task-dot.failed,.task-dot.budget_exhausted{background:#b77c55}.task-dot.running{background:#8e9c42;animation:pulse 1.5s infinite}.sidebar-footer{font-size:9px;color:var(--muted);border-top:1px solid var(--line);padding:10px 4px 0;margin-top:8px;line-height:1.7}.sidebar-footer p{margin-top:4px}.list-empty{font-size:11px;color:var(--muted);padding:15px 8px}.sidebar-collapsed .sidebar{padding:12px 7px}.sidebar-collapsed .sidebar-heading{padding:0 0 8px;justify-content:center}.sidebar-collapsed .sidebar-heading h2,.sidebar-collapsed .sidebar-actions,.sidebar-collapsed .task-list,.sidebar-collapsed .sidebar-footer,.sidebar-collapsed .new-task-button span{display:none}.sidebar-collapsed .new-task-button{justify-content:center;padding:5px;border:0;background:transparent}.main-views{min-width:0;min-height:0}
.task-home{height:100%;overflow:auto;background:#fff;padding:32px 38px}.home-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:25px;border-bottom:1px solid var(--line)}.home-heading h2{font-size:25px;font-weight:550;letter-spacing:-.6px;margin-top:6px}.home-heading p{font-size:11px;color:var(--muted);margin-top:10px}.home-actions{display:flex;gap:12px;align-items:center}.home-columns{display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 20px;gap:18px;padding:15px 12px 9px;color:#899281;font-size:10px}.home-task{display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 20px;align-items:center;gap:18px;text-align:left;width:100%;padding:16px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}.home-task>span:first-child{min-width:0}.home-task strong{font-size:13px;font-weight:480;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.8}.home-task small{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:7px}.home-task time{font-size:10px;color:var(--muted);font-family:var(--mono)}.home-task>span:last-child{color:#a2ad99}.task-state{font-size:10px;color:#66805b}.task-state.failed,.task-state.budget_exhausted{color:#a67550}.task-state.running{color:#87973b}.home-empty{padding:70px 20px;text-align:center;color:var(--muted)}.home-empty h2{font-size:21px;font-weight:500;color:var(--body);margin-bottom:15px}.home-empty p{font-size:12px;line-height:1.8}.home-empty button{margin-top:25px}.home-note{font-size:11px;color:var(--muted);line-height:1.8;margin-top:20px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:720px;padding:22px 12px;border-bottom:1px solid var(--line)}.setting-row strong{display:block;font-size:14px;font-weight:500}.setting-row small{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.7}.setting-row select{padding:7px 10px;font-size:13px;min-width:72px}
.workbench{display:grid;grid-template-columns:minmax(0,var(--conversation-size,1.85fr)) 7px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%;min-width:0;min-height:0;background:white}.workbench.trace-collapsed{grid-template-columns:minmax(0,1fr) 43px}.trace-resize{position:relative;cursor:col-resize;touch-action:none;outline-offset:-1px;background:#fafcf7;z-index:1}.trace-resize:before{content:"";position:absolute;inset:0 3px;background:var(--line)}.trace-resize:after{content:"";position:absolute;top:calc(50% - 15px);left:2px;width:3px;height:30px;border-radius:3px;background:#b6c4ad}.trace-resize:hover:after,.trace-resize:focus-visible:after,.resizing-trace .trace-resize:after{background:var(--accent)}.resizing-trace,.resizing-trace *{cursor:col-resize!important;user-select:none!important}.trace-collapsed .trace-resize{display:none}.conversation-pane{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;border-right:1px solid var(--line)}.pane-heading{padding:19px 26px 14px;border-bottom:1px solid var(--line)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title h2{min-width:0;font-size:15px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-title small{font-size:10px;white-space:nowrap;color:var(--muted);background:#f3f6ef;padding:3px 6px;border-radius:3px}.trace-summary{font-size:10px;color:var(--muted);border:0;background:transparent;padding:7px 0 0;text-align:left}.conversation{min-height:0;overflow:auto;scrollbar-gutter:stable;padding:25px clamp(22px,4vw,70px);line-height:1.9}.message{max-width:850px;margin:0 auto}.conversation-turn+.conversation-turn{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}.turn-trace{margin-left:auto;font-size:9px;padding:4px 6px;color:var(--muted);background:transparent;border-color:transparent}.turn-trace.active{color:var(--accent);background:var(--wash)}.message+.message{margin-top:28px}.speaker{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;margin-bottom:11px}.speaker small{font-size:10px;font-weight:400;color:var(--muted);margin-left:auto}.avatar{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#eff3e9;font-size:11px}.agent-avatar{background:var(--accent);color:white;font-size:20px}.message>p{font-size:14px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}.user-message>p{background:#f4f6f0;border:1px solid #e8ede1;border-radius:5px 10px 10px 10px;padding:13px 16px;color:#475444}.assistant-message>p{padding:0 3px}.message .acceptance-note{font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:20px}.answer-placeholder{font-size:13px;line-height:1.9;color:var(--muted)}.error-link{margin-top:14px;background:var(--error-wash);border-color:#ead2bf;color:var(--error);font-size:11px}.welcome{max-width:760px;margin:10px auto}.welcome h3{font-size:27px;font-weight:520;line-height:1.5;letter-spacing:-.7px;margin:14px 0}.welcome p{font-size:13px;color:var(--muted);line-height:1.9}.loading-note{font-size:12px;color:var(--muted)}
.composer{border-top:1px solid var(--line);background:#fdfefa;padding:16px clamp(22px,4vw,70px) 13px}.composer-inner{max-width:850px;margin:auto}textarea{display:block;width:100%;min-height:87px;max-height:210px;padding:11px 13px;resize:vertical;line-height:1.8;font-size:12px;border-color:#d3ddcb;background:#fff}.composer-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}.composer-note{font-size:9px;color:var(--muted);line-height:1.7;margin-top:8px}.access{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.error-box{padding:10px;border:1px solid #e7ccba;background:var(--error-wash);color:var(--error);font-size:12px;line-height:1.7;border-radius:6px;margin-bottom:10px}
.trace-pane{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 48px;background:#fafcf7;overflow:hidden}.trace-pane.detail-open{grid-template-rows:auto minmax(0,var(--trace-list-height,.58fr)) 7px minmax(0,1fr)}.trace-heading{padding:10px 12px 8px;border-bottom:1px solid var(--line);background:#fcfdf9}.trace-heading-top{display:flex;align-items:center;justify-content:space-between;gap:3px 8px;flex-wrap:wrap}.trace-heading-top h2{order:1}.trace-heading-top .trace-actions{order:2}.trace-heading-top .metrics{order:3;flex-basis:100%;margin-top:2px}.trace-heading h2{font-size:12px;font-weight:600}.trace-actions{display:flex;align-items:center;gap:7px}.status{font-size:9px;color:var(--muted)}.status[data-status=failed],.status[data-status=budget_exhausted]{color:var(--error)}.metrics{display:block;font-size:10px;color:#728267;font-family:var(--mono);line-height:1.8;margin-top:9px;overflow-wrap:anywhere}.trace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.run-id{font-family:var(--mono);font-size:8px;color:#9aa58e}.workspace-label{font-size:8px;color:#8e9983;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px}.trace-rail{display:none;background:#fafcf7;padding-top:13px;text-align:center}.trace-rail button{font-size:10px;padding:6px 4px;writing-mode:vertical-rl;border:0;background:transparent;color:var(--muted);letter-spacing:2px;line-height:1.8}.trace-collapsed .trace-pane{display:none}.trace-collapsed .trace-rail{display:block}.graph-scroll{min-height:0;overflow:auto;scrollbar-gutter:stable;padding:0;background:white}.graph{min-width:0}.trace-row{--row-tone:#748273;display:grid;grid-template-columns:22px 67px minmax(0,1fr) 55px;align-items:center;gap:7px;width:100%;min-width:0;border:0;border-bottom:1px solid #eef0ec;border-radius:0;background:white;padding:7px 9px;text-align:left;min-height:32px}.row-index{font-family:var(--mono);font-size:8px;color:#a4aaa0;text-align:center}.role-tag{font-size:8px;font-weight:600;letter-spacing:.025em;display:inline-block;width:max-content;max-width:100%;padding:3px 5px;border-radius:3px;line-height:1.2}.role-user{color:#5080c0;background:#edf3ff}.role-assistant,.role-model{color:#8d6caf;background:#f2ecf8}.role-tool{color:#bd7d2a;background:#fff5e6}.role-context,.role-result{color:#52916c;background:#edf7ee}.role-harness{color:#728376;background:#f0f3ee}.role-stop{color:#a37450;background:#fbf3e9}.row-content{font-size:11px;font-weight:400;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#4a5349}.row-metric{text-align:right;font-family:var(--mono);font-size:8px;line-height:1.65;color:#8d9587;white-space:nowrap}.row-metric small{display:block;font-size:7px;color:#a0a991}.trace-row.related{background:#f7faf4}.trace-row.selected{background:#edf3e6;box-shadow:inset 2px 0 #7d9b67}.trace-row.failed{background:#fffaf5}.trace-row.failed .row-content{color:#a57553}.trace-row.failed.selected{background:#fff1e4;box-shadow:inset 2px 0 #c2966e}.trace-row.running .role-tag{animation:pulse 1.5s infinite}.turn-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 9px;width:100%;text-align:left;border:0;border-top:1px solid #dce5d3;border-bottom:1px solid #e4ebdd;border-radius:0;background:#f5f8f0;padding:9px 10px}.turn-number{font:600 11px var(--mono);color:var(--accent);white-space:nowrap}.turn-task{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#596a4e}.turn-status{font-size:8px;color:var(--muted);white-space:nowrap}.turn-status.failed,.turn-status.budget_exhausted{color:var(--error)}.turn-metrics{grid-column:2/-1;font:8px var(--mono);color:#829171;line-height:1.7}.trace-turn+.trace-turn{margin-top:9px}.stream-section{position:relative}.request-mark{font-size:8px;color:#a0a994;margin-right:8px}.phase-request{border-left:1px solid #e1e8d7;margin-left:10px}.phase-request>.trace-row{margin-left:-1px;width:calc(100% + 1px)}.phase-end{border-top:1px solid #e4eadb;margin-top:7px}.phase-end .trace-row{font-weight:500}.batch-summary{display:flex;align-items:center;gap:7px;text-align:left;border:0;border-bottom:1px solid #f0f3eb;border-radius:0;background:#fff;width:100%;padding:4px 10px 4px 28px;font-size:10px;color:#829071;line-height:1.7}.batch-summary.has-error{color:#ac7d56;background:#fffbf7}.batch-summary.has-error small{color:#b78c68}.batch-summary small{font-size:8px;margin-left:auto;color:#a0aa94}.disclosure-arrow{font-size:10px;color:#9ead8e}.batch-events{border-left:1px solid #dfe7d4;margin-left:17px}.batch-events .trace-row{padding-left:2px}.stream-receipt-link{font-size:9px;line-height:1.7;padding:3px 10px 3px 30px;width:100%;border:0;border-radius:0;background:#fcfef9;color:#7b9564;text-align:left}.stream-note{font-size:9px;color:#9d927c;padding:6px 12px 8px 31px;line-height:1.7}.empty-graph{padding:45px 15px;text-align:center;font-size:12px;color:#8b9980;line-height:2}.waiting-dot{display:inline-block;width:5px;height:5px;background:#8ba172;border-radius:50%;margin-right:6px;animation:pulse 1.5s infinite}
.trace-view-tools{display:flex;align-items:center;gap:7px;margin-top:7px}.trace-view-tools #follow-latest,.trace-view-tools #download{white-space:nowrap;flex-shrink:0}.trace-view-tools #follow-latest{color:var(--accent)}.trace-view-tools #download{font-size:9px;margin-left:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.timeline{padding:7px 0 3px;border-top:1px solid #e9ede4;margin-top:7px}.timeline-axis,.timeline-lane{display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px;font-size:8px;color:#9ca593;align-items:center}.timeline-lane.step-lane{margin-bottom:9px;height:23px}.step-track{position:relative;height:23px;overflow:hidden}.step-track .timeline-bar{top:2px;height:19px;color:#fff;font:9px var(--mono);overflow:hidden;min-width:0}.turn-lane{height:21px;margin-bottom:4px}.turn-track{position:relative;height:21px;overflow:hidden}.turn-track button{position:absolute;top:0;height:20px;padding:0 4px;text-align:left;border:0;border-left:1px solid #b4c5aa;border-radius:0;background:#f0f5e9;color:#657c53;font:9px var(--mono);white-space:nowrap;overflow:hidden}.timeline-axis{font-family:var(--mono);margin-bottom:5px}.timeline-axis>div{display:flex;justify-content:space-between}.timeline-lane{height:17px}.lane-track{height:11px;position:relative;overflow:hidden;background:repeating-linear-gradient(to right,#e7ece3 0,#e7ece3 1px,transparent 1px,transparent 25%);border-radius:2px}.timeline-bar{position:absolute;top:2px;height:7px;min-width:3px;padding:0;border:0;border-radius:1px;opacity:.8}.timeline-bar.kind-input{background:#7397d2}.timeline-bar.kind-model{background:#9a7cb6}.timeline-bar.kind-tool{background:#d19a4c}.timeline-bar.kind-control{background:#8eb197}.timeline-bar.related{opacity:1}.timeline-bar.selected{opacity:1;outline:1px solid #354b37;outline-offset:1px}.timeline-bar.failed{outline:1px solid #b2654b;outline-offset:0}.timeline-bar.running{animation:pulse 1.5s infinite}.stream-header{display:flex;align-items:center;justify-content:space-between;margin-top:5px;font-size:9px;color:#859577}.trace-toolbar{margin-top:5px}.trace-workspace{margin-bottom:3px}
.detail-resize{display:none;position:relative;cursor:row-resize;touch-action:none;background:#f7faf2;z-index:2;outline-offset:-1px}.trace-pane.detail-open .detail-resize{display:block}.detail-resize:before{content:"";position:absolute;inset:3px 0;background:var(--line)}.detail-resize:after{content:"";position:absolute;left:calc(50% - 18px);top:2px;width:36px;height:3px;border-radius:2px;background:#a3b294}.detail-resize:hover:after,.detail-resize:focus-visible:after,.resizing-detail .detail-resize:after{background:var(--accent)}.resizing-detail,.resizing-detail *{cursor:row-resize!important;user-select:none!important}.inspector{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);border-top:1px solid #d5e0ca;background:white;overflow:hidden}.detail-heading{padding:11px 13px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.detail-heading h2{font-size:12px;font-weight:550;margin:4px 0 9px}.detail-heading .eyebrow{font-size:8px}.detail-tabs{display:flex;gap:13px;margin-left:auto;align-self:stretch;align-items:flex-end}.detail-tabs button{font-size:10px;padding:8px 0 10px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);white-space:nowrap}.detail-tabs button.active{border-bottom-color:var(--accent);color:var(--accent)}.detail-toggle{font-size:11px;border:1px solid #c5d4bb;background:#eef4e8;color:var(--accent);padding:6px 11px;white-space:nowrap;font-weight:550}.detail-content{padding:12px 13px;overflow:auto;min-height:0;scrollbar-gutter:stable}.detail-stats{display:flex;flex-wrap:wrap;gap:6px 13px;font-size:9px;color:var(--muted);padding-bottom:12px;line-height:1.7}.detail-stats b{font-family:var(--mono);font-size:9px;font-weight:500;color:#566949;margin-left:3px}.step-explanation{font-size:12px;line-height:1.9;color:var(--body)}.connections{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:12px}.text-link{font-size:10px;padding:3px 0;border:0;background:transparent;color:var(--accent);text-align:left;line-height:1.7}.text-link span{color:#94aa83}.step-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px;border-top:1px solid var(--line);padding-top:10px;font-size:9px;color:var(--muted)}.step-facts b{font-weight:400;margin-left:4px;font-family:var(--mono)}.error-evidence{font-size:10px;line-height:1.8;padding:10px;background:var(--error-wash);border-left:2px solid #caa682;margin-top:12px;color:var(--error)}.record-link{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin:-2px 0 11px}.record-link code{font-size:9px;color:var(--muted)}.record-link [role=status]{font-size:9px;color:var(--muted);overflow-wrap:anywhere}.record-link [role=status]:not(:empty){flex-basis:100%}.json-pair{display:grid;gap:12px}.detail-content h3{font-size:10px;font-weight:500;margin:0 0 7px}.detail-content h3 code{font-size:8px;color:var(--muted);font-weight:400;margin-left:3px}.detail-content pre{font-family:var(--mono);font-size:10px;line-height:1.8;margin:0;padding:10px;border:1px solid #e7ecdf;background:#f8faf5;border-radius:5px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;tab-size:2;color:#4c623f}.evidence-fragment{margin-bottom:12px;border-left:2px solid #a4bc8e;padding-left:10px}.detail-note{font-size:9px;color:var(--muted);line-height:1.8;margin-top:10px;overflow-wrap:anywhere}.source-heading{display:flex;flex-wrap:wrap;gap:8px;font-size:9px;color:var(--muted);margin-bottom:8px}.detail-content .source-code{white-space:pre;overflow-wrap:normal;max-height:none}.trace-pane:not(.detail-open) .detail-tabs,.trace-pane:not(.detail-open) .detail-content,.trace-pane:not(.detail-open) .detail-heading .eyebrow{display:none}.trace-pane:not(.detail-open) .detail-heading{padding:0 13px;align-items:center}.trace-pane:not(.detail-open) .detail-heading h2{font-size:10px;margin:0}.trace-pane:not(.detail-open) .inspector{grid-template-rows:1fr}.trace-pane:not(.detail-open) .detail-toggle{margin-left:auto}
@keyframes pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1200px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.conversation{padding:22px}.composer{padding:14px 22px}.task-home{padding:27px 25px}.brand small{display:none}.home-columns,.home-task{grid-template-columns:minmax(0,1fr) 90px 95px 15px;gap:10px}}
@media(max-width:900px){main{padding:0 8px 10px}.topbar{height:54px;padding:0 12px}.app-shell,.app-shell.sidebar-collapsed{grid-template-columns:48px minmax(0,1fr);height:calc(100dvh - 64px);min-height:570px}.sidebar{position:absolute;inset:0 auto 0 0;width:260px;z-index:3;box-shadow:8px 0 20px #33472618}.sidebar-collapsed .sidebar{position:relative;width:auto;box-shadow:none}.main-views{grid-column:2}.pane-heading{padding:15px 17px}.conversation{padding:19px 17px}.composer{padding:13px 17px}.task-home{padding:24px 20px}.home-columns{display:none}.home-task{grid-template-columns:minmax(0,1fr) 85px;gap:10px;padding:14px 2px}.home-task>time,.home-task>span:last-child{display:none}.home-heading{align-items:flex-start}.home-actions{gap:6px}.home-heading h2{font-size:22px}}
@media(max-width:650px){.trace-resize{display:none}.workbench,.workbench.trace-collapsed{display:flex;flex-direction:column;height:auto;min-height:100%}.main-views{overflow:auto}.conversation-pane{border-right:0;border-bottom:1px solid var(--line);flex-shrink:0}.conversation{min-height:190px;max-height:430px;padding:18px 15px}.message>p{font-size:13px}.composer{padding:12px 15px}.trace-pane{min-height:420px;grid-template-rows:auto minmax(220px,1fr) 48px;flex-shrink:0}.trace-pane.detail-open{height:820px;grid-template-rows:auto minmax(0,var(--trace-list-height,270px)) 7px minmax(0,1fr)}.graph-scroll{max-height:480px}.trace-collapsed .trace-rail{padding:8px}.trace-rail button{writing-mode:horizontal-tb;letter-spacing:0;width:100%}.task-home{padding:20px 14px}.home-heading{flex-wrap:wrap;gap:12px;padding-bottom:17px}.home-heading h2{font-size:21px}.home-task{grid-template-columns:minmax(0,1fr);gap:7px}.home-task>span:first-child{min-width:0}.home-task strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px}.home-task .task-state{font-size:9px}.home-task small{font-size:8px}.model-label{max-width:min(240px,50vw)}.app-shell{border-radius:8px}textarea{font-size:11px;min-height:83px}.detail-content{max-height:none}.welcome h3{font-size:23px}.trace-summary{font-size:9px}.section-title h2{min-width:0;font-size:13px}}
</style>
</head>
<body>
<a class="skip-link" href="#task">跳到任务输入</a>
<header class="topbar"><div class="brand"><button class="brand-home" data-home aria-label="返回所有任务"><span class="brand-mark" aria-hidden="true"><img src="/icon.png" alt=""></span><h1>Loop</h1></button><small>运行 Agent,看清每一步。</small></div><div class="top-meta"><button class="quiet-button" data-settings>设置</button></div></header>
<main><div class="app-shell" id="app-shell">
<aside class="sidebar" aria-label="任务侧栏"><div class="sidebar-heading"><h2>任务</h2><div class="sidebar-actions"><button class="icon-button" data-home aria-label="所有任务" title="所有任务">☷</button></div><button class="icon-button" id="sidebar-toggle" aria-label="收起任务侧栏" aria-expanded="true" aria-controls="task-list">‹</button></div><button class="new-task-button" data-new-task title="新任务" aria-label="新任务"><b>+</b><span>新任务</span></button><nav class="task-list" id="task-list" aria-label="运行记录列表"><p class="list-empty">正在读取任务…</p></nav><footer class="sidebar-footer"><span id="task-count"></span><p id="history-note"></p></footer></aside>
<div class="main-views">
<section class="task-home" id="task-home" aria-label="所有任务总览"><header class="home-heading"><div><span class="eyebrow" id="home-eyebrow">LOOP / 本地工作台</span><h2>所有任务</h2><p id="home-count">正在读取记录…</p></div><div class="home-actions"><button class="quiet-button" id="refresh-tasks">刷新列表</button><button class="primary" data-new-task>+ 新任务</button></div></header><div class="home-columns"><span>任务 / 模型</span><span>状态</span><span>创建时间</span><span></span></div><div id="home-task-list"></div><p class="home-note" id="home-note">选择一项查看回答和执行记录,或新建一个只读任务。查看历史不会再次调用模型。</p></section>
<section class="task-home" id="settings" hidden aria-label="设置"><header class="home-heading"><div><span class="eyebrow">LOOP / 设置</span><h2>设置</h2><p>这些选项只作用于之后新提交的一轮。</p></div><button class="quiet-button" data-leave-settings>返回</button></header><label class="setting-row"><span><strong>本轮请求上限</strong><small>这一轮最多几次模型请求,不是工具调用次数。</small></span><select id="budget" aria-label="本轮模型请求上限"><option>1</option><option>2</option><option>3</option><option selected>4</option><option>5</option><option>6</option><option>7</option><option>8</option></select></label></section>
<div class="workbench" id="workbench" hidden>
<section class="conversation-pane" id="conversation-pane" aria-label="任务与回答"><header class="pane-heading"><div class="section-title"><h2 id="conversation-title">新任务</h2><small id="mode-label">对话与只读工具</small></div><button class="trace-summary" id="trace-summary" data-toggle-trace aria-controls="trace-pane" aria-expanded="true">执行过程 · 尚未运行</button></header><div class="conversation" id="conversation"></div><form class="composer" id="task-form"><div class="composer-inner"><div class="error-box" id="error" role="alert" hidden></div><p class="composer-note" id="coding-consent" hidden>点击“授权并运行练习”,允许 Loop 只修改本次独立项目的 average.ts,并在断网容器内运行测试。测试文件受保护。</p><textarea id="task" maxlength="4000" required aria-label="任务"></textarea><div class="composer-actions"><span class="model-label" id="model-label">正在连接</span><button id="submit" class="primary" disabled>开始任务 →</button></div><p class="composer-note access" id="access"></p></div></form></section>
<div id="trace-resize" class="trace-resize" role="separator" tabindex="0" aria-label="调整对话与执行轨迹宽度" aria-orientation="vertical" aria-controls="conversation-pane trace-pane" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65" title="左右拖动调整宽度,双击恢复默认;也可用左右方向键调整"></div>
<section class="trace-pane" id="trace-pane" aria-label="紧凑执行轨迹"><header class="trace-heading"><div class="trace-heading-top"><h2 id="trace-title">执行轨迹</h2><span class="metrics" id="metrics">提交任务后显示用量与耗时</span><div class="trace-actions"><span class="status" id="status" aria-live="polite">等待任务</span><button class="icon-button" id="trace-toggle" data-toggle-trace aria-label="收起轨迹栏" aria-controls="trace-pane" aria-expanded="true" title="收起轨迹栏">›</button></div></div><div class="trace-view-tools"><button class="quiet-button" id="follow-latest" hidden title="回到当前运行的最新事件。只影响浏览,不会重跑任务。">回到最新</button><button class="quiet-button" id="download" disabled>导出 ↓</button></div><span class="sr-only" id="run-id"></span><p class="sr-only" id="workspace-label"></p><div class="timeline" id="timeline" aria-label="整段对话的分轨概览"></div><div class="stream-header"><span id="event-count">完整事件流 · 0 条</span><span>点击色块定位事件</span></div></header><div class="graph-scroll" id="graph-scroll"><div class="graph" id="graph"></div></div><div id="detail-resize" class="detail-resize" role="separator" tabindex="0" aria-label="上下调整轨迹与记录高度" aria-orientation="horizontal" aria-controls="graph-scroll detail-content" aria-valuemin="0" aria-valuemax="100" aria-valuenow="58" title="上下拖动调整高度,双击恢复默认;也可用上下方向键调整"></div><aside class="inspector" aria-label="选中步骤的原始记录"><div class="detail-heading" id="detail-heading"><h2>选择一个步骤查看原始记录</h2></div><div class="detail-content" id="detail-content" role="tabpanel"></div></aside></section><aside class="trace-rail" aria-label="已收起的轨迹栏"><button data-toggle-trace aria-label="展开轨迹栏">‹ 执行过程</button></aside>
</div></div></div></main>
<script type="module" src="/app.js"></script>
</body></html>