gitgo_draft_design.html

<style>
:root{--bg:#fff;--bg2:#f6f5f2;--bg3:#edecea;--txt:#2c2c2a;--txt2:#5f5e5a;--txt3:#888780;--bdr:rgba(44,44,42,.11);--bdr2:rgba(44,44,42,.22);--blue:#378add;--blue-bg:#e8f2fc;--blue-txt:#185fa5;--blue-bdr:#a8cef5;--green:#639922;--green-bg:#ebf4df;--green-txt:#3b6d11;--teal:#1d9e75;--teal-bg:#e1f5ee;--teal-txt:#0f6e56;--amber:#c98b2a;--amber-bg:#faeeda;--amber-txt:#854f0b;--red:#dc3535;--red-bg:#fcebeb;--red-txt:#a32d2d;--r:8px;--rsm:5px;--mono:'Courier New',monospace}
.dm{--bg:#1a1a1a;--bg2:#232323;--bg3:#2a2a2a;--txt:#e8e8e8;--txt2:#aaa;--txt3:#666;--bdr:rgba(255,255,255,.07);--bdr2:rgba(255,255,255,.15);--blue-bg:#152236;--blue-txt:#6ba3ff;--blue-bdr:#254a72;--green-bg:#122008;--green-txt:#4caf82;--teal-bg:#0a1e16;--teal-txt:#2cce9a;--amber-bg:#1e1508;--amber-txt:#d4a644;--red-bg:#1e0808;--red-txt:#e05c5c}
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;align-items:center;justify-content:center;background:#ccc;min-height:300px;padding:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px}
.shell{width:940px;height:660px;border-radius:12px;overflow:visible;display:flex;flex-direction:column;border:.5px solid var(--bdr2);background:var(--bg3);position:relative}
.toolbar{background:var(--bg);border-bottom:.5px solid var(--bdr);height:40px;display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;color:var(--txt);border-radius:12px 12px 0 0;overflow:hidden}
.bc{flex:1;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--txt2)}
.bc a{color:var(--blue-txt);cursor:pointer}.bc a:hover{text-decoration:underline}
.bc strong{color:var(--txt);font-weight:500}.bcsep{color:var(--txt3)}
.tbtn{padding:4px 9px;border:.5px solid var(--bdr2);border-radius:var(--rsm);background:var(--bg2);color:var(--txt2);font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.tbtn:hover{background:var(--bg3);color:var(--txt)}
.spill{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:500;margin-left:4px}
.sp-idle{background:var(--green-bg);color:var(--green-txt)}.sp-sync{background:var(--amber-bg);color:var(--amber-txt)}
.tabs-wrap{background:var(--bg);border-bottom:.5px solid var(--bdr);display:none;flex-direction:column;flex-shrink:0}
.tabs-wrap.on{display:flex}
.tabs-row{display:flex;padding:0 12px}
.tab{padding:7px 12px;font-size:12px;color:var(--txt2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-.5px}
.tab:hover{color:var(--txt)}.tab.on{color:var(--txt);border-bottom-color:var(--blue);font-weight:500}
.tdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber-txt);margin-left:4px;vertical-align:2px}
.action-bar{height:28px;background:var(--bg2);border-top:.5px solid var(--bdr);display:flex;align-items:center;padding:0 8px;gap:2px}
.act{font-size:11px;color:var(--txt3);cursor:pointer;padding:2px 7px;border-radius:3px;display:flex;align-items:center;gap:3px}
.act:hover{background:var(--bg3);color:var(--txt2)}.act i{font-size:12px}
.actsep{width:.5px;height:12px;background:var(--bdr2);margin:0 3px}
.body-row{flex:1;display:flex;overflow:hidden;min-height:0}
.lsb{width:138px;flex-shrink:0;background:var(--bg);border-right:.5px solid var(--bdr);display:flex;flex-direction:column;display:none}
.lsb.on{display:flex}
.sb-hdr{padding:6px 10px;font-size:10px;font-weight:500;color:var(--txt3);letter-spacing:.05em;text-transform:uppercase;border-bottom:.5px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.sb-b{font-size:9px;padding:1px 4px;border-radius:3px;background:var(--blue-bg);color:var(--blue-txt)}
.tree{padding:4px 0;overflow-y:auto;flex:1}
.ts{padding:5px 10px 2px;font-size:10px;color:var(--txt3);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.ti{padding:3px 10px 3px 18px;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--txt2);cursor:pointer}
.ti:hover{background:var(--bg2)}.ti.fold{padding-left:10px;color:var(--txt)}
.ti.incoming-file{background:var(--blue-bg)}
.fi-badge{font-size:9px;padding:1px 4px;border-radius:3px;margin-left:auto;font-weight:500}
.fb-m{background:var(--amber-bg);color:var(--amber-txt)}.fb-n{background:var(--green-bg);color:var(--green-txt)}.fb-i{background:var(--blue-bg);color:var(--blue-txt)}
.sb-nodes{border-top:.5px solid var(--bdr);padding:4px 0}
.sb-nd{padding:3px 10px;display:flex;align-items:center;gap:5px;font-size:10px;color:var(--txt3)}
.ndot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.screens{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.screen{display:none;flex:1;overflow:hidden}.screen.on{display:flex}

/* ---- right sidebar (settings only) ---- */
.rsb-wrap{display:flex;flex-direction:row;flex-shrink:0;position:relative}
.rsb{width:36px;background:var(--bg);border-left:.5px solid var(--bdr);display:flex;flex-direction:column;flex-shrink:0}
.rsb-strip{width:36px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:6px 0}
.rsbi{width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt3);border-radius:5px;margin:2px 0}
.rsbi:hover{background:var(--bg2);color:var(--txt)}.rsbi.on{color:var(--blue-txt);background:var(--blue-bg)}
.rsbi i{font-size:16px}
.rsb-spacer{flex:1}
.rsb-divider{width:18px;height:.5px;background:var(--bdr);margin:0 auto}

/* ---- settings popover ---- */
.spop{position:absolute;bottom:8px;right:44px;width:210px;background:var(--bg);border:.5px solid var(--bdr2);border-radius:var(--r);box-shadow:0 4px 24px rgba(0,0,0,.15);z-index:300;display:none;overflow:hidden}
.spop.on{display:block}
.spop-section{padding:10px 14px}
.spop-section+.spop-section{border-top:.5px solid var(--bdr)}
.spop-lbl{font-size:10px;font-weight:500;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.spop-row{display:flex;gap:4px}
.spop-chip{padding:3px 9px;border-radius:4px;font-size:11px;cursor:pointer;border:.5px solid var(--bdr2);background:var(--bg2);color:var(--txt2)}
.spop-chip:hover{background:var(--bg3);color:var(--txt)}.spop-chip.on{background:var(--blue-bg);border-color:var(--blue-bdr);color:var(--blue-txt)}
.spop-tog-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--txt2)}
.sw{width:28px;height:16px;border-radius:8px;background:var(--bdr2);cursor:pointer;position:relative;transition:background .15s;flex-shrink:0}
.sw.on{background:var(--blue)}.sw::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:6px;background:#fff;transition:left .15s}
.sw.on::after{left:14px}
.spop-ver{padding:7px 14px;font-size:10px;color:var(--txt3);text-align:center;background:var(--bg2)}

.logbar{background:var(--bg2);border-top:.5px solid var(--bdr);padding:4px 12px;font-size:11px;font-family:var(--mono);color:var(--txt2);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.logbar.on{display:block}
.sbar{background:var(--bg);border-top:.5px solid var(--bdr);padding:3px 10px;font-size:11px;color:var(--txt2);display:none;gap:8px;align-items:center;flex-shrink:0;border-radius:0 0 12px 12px;overflow:hidden}
.sbar.on{display:flex}
.sbar-nd{display:flex;align-items:center;gap:4px;font-size:10px}
.sbsep{color:var(--bdr2);font-size:14px}
.term-btn{font-size:10px;padding:2px 7px;border:.5px solid var(--bdr2);border-radius:3px;background:var(--bg2);color:var(--txt3);cursor:pointer;display:flex;align-items:center;gap:3px}
.term-btn:hover{background:var(--bg3);color:var(--txt2)}
.proj-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.proj-title{padding:14px 16px 10px;border-bottom:.5px solid var(--bdr);flex-shrink:0}
.proj-title h2{font-size:16px;font-weight:500;color:var(--txt)}
.proj-cta{border-bottom:.5px solid var(--bdr);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--txt3);font-size:12px;min-height:52px;flex-shrink:0}
.proj-cta:hover{background:var(--bg2);color:var(--txt2)}
.proj-cta-circle{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bdr2);display:flex;align-items:center;justify-content:center}
.proj-cta-circle i{font-size:14px}
.proj-cta:hover .proj-cta-circle{border-color:var(--blue-bdr);color:var(--blue-txt)}
.proj-table{flex:1;overflow-y:auto}
table{width:100%;border-collapse:collapse}
th{font-size:10px;font-weight:500;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em;padding:6px 14px;text-align:left;border-bottom:.5px solid var(--bdr);background:var(--bg2)}
td{border-bottom:.5px solid var(--bdr)}
.pr{cursor:pointer}.pr:hover td{background:var(--bg2)}.pr td{padding:9px 14px}
.pn{font-weight:500;font-size:13px;color:var(--txt)}.pnote{color:var(--txt3);font-size:11px}
.pbadge{font-size:10px;padding:1px 6px;border-radius:3px;font-weight:500;display:inline-flex;align-items:center;gap:3px}
.pb-ok{background:var(--green-bg);color:var(--green-txt)}.pb-pen{background:var(--amber-bg);color:var(--amber-txt)}.pb-err{background:var(--red-bg);color:var(--red-txt)}
.pdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pd-ok{background:var(--green-txt)}.pd-pen{background:var(--amber-txt)}.pd-err{background:var(--red-txt)}
.ptime{color:var(--txt3);font-size:11px}
.padd td{padding:0}
.padd-inner{padding:8px 14px;display:flex;align-items:center;gap:6px;color:var(--txt3);font-size:12px;cursor:pointer}
.padd-inner:hover{background:var(--bg2);color:var(--txt2)}
.ctr{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:10px;gap:7px}
.col-hdrs{display:flex;align-items:center;flex-shrink:0;gap:0;margin-bottom:2px}
.ch{font-size:10px;font-weight:500;color:var(--txt2);display:flex;align-items:center}
.ch small{font-weight:400;color:var(--txt3);margin-left:4px}
.col-row{display:flex;flex:1;min-height:0;overflow:hidden}
.col-ws{width:148px;flex-shrink:0;display:flex;flex-direction:column;gap:5px;overflow-y:auto;padding-right:2px}
.col-conn{width:52px;flex-shrink:0;align-self:stretch;display:flex;align-items:flex-start;padding-top:4px}
.col-fm{flex:1;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.ws{background:var(--bg);border:.5px solid var(--bdr);border-radius:var(--rsm);padding:7px 9px;cursor:pointer;transition:border-color .1s,background .1s;position:relative}
.ws:hover{border-color:var(--bdr2)}.ws.sel{border-color:var(--blue);background:var(--blue-bg)}.ws.sel.t{border-color:var(--teal);background:var(--teal-bg)}
.wscb{position:absolute;top:6px;right:7px;width:14px;height:14px;border-radius:3px;border:.5px solid var(--bdr2);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent}
.ws.sel .wscb{background:var(--blue);border-color:var(--blue);color:#fff}
.ws.sel.t .wscb{background:var(--teal);border-color:var(--teal);color:#fff}
.wct{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-txt);margin-bottom:2px}
.wct.t{color:var(--teal-txt)}.wcs{font-size:11px;line-height:1.4;color:var(--txt);padding-right:18px}.wcm{font-size:10px;color:var(--txt3);margin-top:2px}
.fm{background:var(--bg);border:.5px solid var(--bdr2);border-radius:var(--rsm);padding:7px 9px;border-left:3px solid var(--blue);cursor:pointer;position:relative}
.fm.t{border-left-color:var(--teal)}.fm.in-commit{border-left-color:var(--amber)}
.fm.active{outline:2px solid var(--blue);outline-offset:1px}.fm.active.t{outline-color:var(--teal)}
.fp{font-size:10px;font-family:var(--mono);color:var(--txt3);margin-bottom:2px;padding-right:22px}.fmsg{font-size:12px;color:var(--txt)}
.ftags{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.tag{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:500}
.tg{background:var(--green-bg);color:var(--green-txt)}.tp{background:var(--bg2);color:var(--txt3);border:.5px solid var(--bdr)}
.fm-menu-btn{position:absolute;top:5px;right:6px;width:18px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt3);font-size:12px}
.fm-menu-btn:hover{background:var(--bg2);color:var(--txt)}
.ctx{position:absolute;right:0;top:26px;background:var(--bg);border:.5px solid var(--bdr2);border-radius:var(--rsm);box-shadow:0 3px 12px rgba(0,0,0,.12);z-index:200;min-width:195px;padding:4px 0;display:none}
.ctx.on{display:block}
.ctx-item{padding:6px 12px;font-size:11px;color:var(--txt);cursor:pointer;display:flex;align-items:center;gap:7px}
.ctx-item:hover{background:var(--bg2)}.ctx-item i{font-size:13px;color:var(--txt3)}.ctx-item.danger{color:var(--red-txt)}.ctx-item.danger i{color:var(--red-txt)}
.ctx-sep{height:.5px;background:var(--bdr);margin:3px 0}
.msg-area{flex-shrink:0}
.mlabel{font-size:10px;color:var(--txt3);margin-bottom:4px}
.mbox{background:var(--bg);border:.5px solid var(--bdr);border-radius:var(--rsm);padding:7px 9px;min-height:36px;font-size:12px;color:var(--txt3);font-style:italic;line-height:1.5}
.arow{display:flex;gap:6px;align-items:center;margin-top:6px;flex-shrink:0}
.ab{padding:5px 12px;border-radius:var(--rsm);font-size:12px;cursor:pointer;border:.5px solid var(--bdr2);background:var(--bg2);color:var(--txt2)}
.ab:hover{background:var(--bg3)}.ab.bl{background:var(--blue-bg);border-color:var(--blue-bdr);color:var(--blue-txt)}.ab.dis{opacity:.3;cursor:default;pointer-events:none}
.sel-info{font-size:11px;color:var(--txt3);margin-left:auto}
.sel-info b{color:var(--blue-txt)}

/* ---- workspace right splitter (diff + nodes) ---- */
#ws-right-splitter{width:220px;flex-shrink:0;background:var(--bg);border-left:.5px solid var(--bdr);display:flex;flex-direction:column}
#ws-diff-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#ws-node-panel{flex-shrink:0;border-top:.5px solid var(--bdr)}
.wsp-hdr{padding:6px 10px;font-size:10px;font-weight:500;color:var(--txt3);letter-spacing:.04em;text-transform:uppercase;border-bottom:.5px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.wsp-badge{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg2);color:var(--txt3);font-weight:400;text-transform:none;letter-spacing:0}
.wsp-body{flex:1;padding:8px 10px;overflow-y:auto;font-size:10px;font-family:var(--mono);line-height:1.75;color:var(--txt2)}
.wsp-body .hint{color:var(--txt3);font-style:italic;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11px}
.wsp-node-row{padding:5px 10px;display:flex;align-items:flex-start;gap:6px;font-size:10px}
.wsp-node-row+.wsp-node-row{border-top:.5px solid var(--bdr)}
.wsp-node-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:3px}
.wsp-node-info{display:flex;flex-direction:column;gap:1px}
.wsp-node-label{font-size:11px;font-weight:500;color:var(--txt2)}
.wsp-node-meta{font-size:10px;color:var(--txt3)}

.in-wrap{flex:1;display:flex;overflow:hidden}
.in-list{width:230px;flex-shrink:0;border-right:.5px solid var(--bdr);background:var(--bg);display:flex;flex-direction:column}
.in-hdr{padding:8px 12px;border-bottom:.5px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.in-hdr h3{font-size:13px;font-weight:500}
.trial-src{padding:6px 12px;background:var(--bg2);border-bottom:.5px solid var(--bdr);font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:5px}
.in-scroll{padding:6px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1}
.ic{padding:8px 10px;background:var(--bg);border:.5px solid var(--bdr);border-radius:var(--rsm);cursor:pointer}
.ic:hover{border-color:var(--bdr2);background:var(--bg2)}.ic.on{border-color:var(--blue);background:var(--blue-bg)}.ic.done{opacity:.45;pointer-events:none}
.ihash{font-size:10px;color:var(--txt3);font-family:var(--mono)}.ititle{font-size:12px;color:var(--txt);margin:2px 0}.imeta{font-size:10px;color:var(--txt3)}
.ib{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:500;display:inline-block;margin-top:3px}
.in-detail{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ind-top{padding:10px 12px;border-bottom:.5px solid var(--bdr);background:var(--bg2);flex-shrink:0}
.ind-top h4{font-size:13px;font-weight:500}.ind-meta{font-size:11px;color:var(--txt2);margin-top:2px}
.ind-files{padding:10px 12px;border-bottom:.5px solid var(--bdr);flex-shrink:0}
.fci{display:flex;align-items:center;gap:5px;font-size:11px;padding:3px 0}
.fcb{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:500;flex-shrink:0}
.ind-bridge{padding:10px 12px;border-bottom:.5px solid var(--bdr);flex-shrink:0}
.bridge-lbl{font-size:10px;font-weight:500;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.bridge-row{display:flex;align-items:center;gap:0}
.bridge-node{padding:5px 9px;border-radius:4px;font-size:10px;font-weight:500;white-space:nowrap;flex-shrink:0;border:.5px solid}
.bridge-in{background:var(--amber-bg);color:var(--amber-txt);border-color:var(--amber)}
.bridge-rel{background:var(--teal-bg);color:var(--teal-txt);border-color:var(--teal)}
.bridge-arrow{flex:1;display:flex;align-items:center;padding:0 4px}
.ind-msg{padding:10px 12px;flex-shrink:0}
.conf-mbox{background:var(--bg2);border:.5px solid var(--bdr);border-radius:var(--rsm);padding:6px 9px;font-size:12px;color:var(--txt);font-family:var(--mono);margin-bottom:8px}
.ind-actions{padding:10px 12px;flex-shrink:0}
.dec-row{display:flex;gap:8px}
.dec{flex:1;padding:7px 8px;border-radius:var(--rsm);font-size:11px;font-weight:500;cursor:pointer;border:.5px solid;text-align:center;line-height:1.5}
.dac{background:var(--green-bg);border-color:var(--green);color:var(--green-txt)}.dpr{background:var(--blue-bg);border-color:var(--blue);color:var(--blue-txt)}.ddi{background:var(--red-bg);border-color:var(--red);color:var(--red-txt)}
.dec:hover{filter:brightness(.97)}
.conf-btns{display:flex;gap:6px;margin-top:8px}
.cbtn{padding:5px 12px;border-radius:var(--rsm);font-size:12px;cursor:pointer;border:.5px solid;font-weight:500}
.cbtn-ok{background:var(--green-bg);border-color:var(--green);color:var(--green-txt)}.cbtn-ok:hover{filter:brightness(.97)}
.cbtn-cancel{background:var(--bg2);border-color:var(--bdr2);color:var(--txt2)}.cbtn-cancel:hover{background:var(--bg3)}
.rem-wrap{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;background:var(--bg)}
.rc{border:.5px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.rch{padding:8px 12px;display:flex;align-items:center;gap:7px;border-bottom:.5px solid var(--bdr)}
.rcb{padding:8px 12px;display:flex;gap:14px;font-size:12px;color:var(--txt2)}
.rst{display:flex;flex-direction:column;gap:2px}.rst span{font-size:10px;color:var(--txt3)}.rst strong{font-size:12px;color:var(--txt);font-weight:500}
.dot-g{width:7px;height:7px;border-radius:50%;background:var(--green-txt);flex-shrink:0}.dot-y{width:7px;height:7px;border-radius:50%;background:var(--amber-txt);flex-shrink:0}
.hist-wrap{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;background:var(--bg)}
.hi{display:flex;gap:10px;padding:9px 0;border-bottom:.5px solid var(--bdr)}
.ht{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.hd{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--blue);background:var(--bg);flex-shrink:0;margin-top:4px}.hl{width:1px;background:var(--bdr);flex:1;min-height:16px;margin-top:2px}
.hb{flex:1}.ha{font-size:12px;font-weight:500;color:var(--txt)}.hdet{font-size:11px;color:var(--txt2);margin:2px 0}.htime{font-size:10px;color:var(--txt3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
</style>

<h2 class="sr-only">gitgo interactive UI mockup — project list, commit workshop, incoming trial, remotes, history</h2>

<div class="shell" id="shell">
<div class="toolbar" id="toolbar">
  <div class="bc" id="bc"><span style="font-weight:500;font-size:13px;color:var(--txt)">gitgo</span></div>
</div>

<div class="tabs-wrap" id="tabs-wrap">
  <div class="tabs-row">
    <div class="tab on" id="t-ws" onclick="goTab('ws')">Commit workshop</div>
    <div class="tab" id="t-in" onclick="goTab('in')">Incoming <span class="tdot" id="in-dot"></span></div>
    <div class="tab" id="t-rem" onclick="goTab('rem')">Remotes</div>
    <div class="tab" id="t-hist" onclick="goTab('hist')">History</div>
  </div>
  <div class="action-bar" id="action-bar">
    <div class="act" onclick="doAct('undo')" id="act-undo"><i class="ti ti-arrow-back-up" aria-hidden="true"></i> Undo</div>
    <div class="actsep"></div>
    <div class="act" onclick="doAct('save')" id="act-save"><i class="ti ti-device-floppy" aria-hidden="true"></i> Save draft</div>
    <div class="act" onclick="doAct('export')" id="act-export"><i class="ti ti-file-export" aria-hidden="true"></i> Export tasks</div>
    <div class="actsep" id="act-sep2"></div>
    <div class="act" onclick="doAct('refresh')" id="act-extra"><i class="ti ti-refresh" aria-hidden="true"></i> Refresh</div>
  </div>
</div>

<div class="body-row">
  <div class="lsb" id="lsb">
    <div class="sb-hdr">Explorer <span class="sb-b" id="sb-badge">local</span></div>
    <div class="tree" id="tree">
      <div class="ts">Workspace <span style="font-size:9px;padding:0 3px;border-radius:3px;background:var(--bg3);color:var(--txt3)" id="ws-count">5 changes</span></div>
      <div class="ti fold">▾ adapters/</div>
      <div class="ti" onclick="showDiff('ssh.py')">ssh.py <span class="fi-badge fb-n">N</span></div>
      <div class="ti" onclick="showDiff('factory.py')">factory.py <span class="fi-badge fb-m">M</span></div>
      <div class="ti fold">▾ core/</div>
      <div class="ti" onclick="showDiff('session.py')">session.py <span class="fi-badge fb-m">M</span></div>
      <div class="ti" onclick="showDiff('trial.py')">trial.py <span class="fi-badge fb-n">N</span></div>
      <div class="ti fold" style="color:var(--txt3)">▾ ui/</div>
      <div class="ti" style="color:var(--txt3)" onclick="showDiff('workers.py')">workers.py <span class="fi-badge fb-m">M</span></div>
      <div id="incoming-tree-section" style="display:none">
        <div class="ts" style="margin-top:6px">Incoming <span style="font-size:9px;padding:0 3px;border-radius:3px;background:var(--blue-bg);color:var(--blue-txt)">trial</span></div>
        <div class="ti fold incoming-file">▾ cache/</div>
        <div class="ti incoming-file" onclick="showDiff('redis_adapter.py')">redis_adapter.py <span class="fi-badge fb-i">IN</span></div>
        <div class="ti incoming-file" onclick="showDiff('test_cache.py')">test_cache.py <span class="fi-badge fb-i">IN</span></div>
      </div>
    </div>
    <div class="sb-nodes">
      <div class="sb-nd"><span class="ndot" style="background:var(--blue)"></span>workspace · local</div>
      <div class="sb-nd"><span class="ndot" style="background:var(--teal)"></span>release · local</div>
      <div class="sb-nd"><span class="ndot" style="background:var(--amber)"></span>trial · SSH</div>
    </div>
  </div>

  <div class="screens">
    <div class="screen on" id="s-proj">
      <div class="proj-wrap">
        <div class="proj-title"><h2>Projects</h2></div>
        <div class="proj-cta" onclick="log('New project wizard…')">
          <div class="proj-cta-circle"><i class="ti ti-plus" aria-hidden="true"></i></div>
          <span>New project</span>
        </div>
        <div class="proj-table">
          <table>
            <thead><tr><th style="width:170px">Name</th><th style="width:170px">Note</th><th style="width:140px">Status</th><th>Last sync</th><th style="width:60px"></th></tr></thead>
            <tbody>
              <tr class="pr" onclick="openProject('MyApp')"><td><span class="pn">MyApp</span></td><td><span class="pnote">Main product</span></td><td><span class="pbadge pb-pen"><span class="pdot pd-pen"></span>3 files modified</span></td><td><span class="ptime">3 min ago</span></td><td style="text-align:right"><span class="tbtn" style="font-size:10px">Open →</span></td></tr>
              <tr class="pr" onclick="log('Opening WebAPI…')"><td><span class="pn">WebAPI</span></td><td><span class="pnote">REST backend</span></td><td><span class="pbadge pb-ok"><span class="pdot pd-ok"></span>Synced</span></td><td><span class="ptime">2 hours ago</span></td><td style="text-align:right"><span class="tbtn" style="font-size:10px">Open →</span></td></tr>
              <tr class="pr" onclick="log('Opening DesignSystem…')"><td><span class="pn">DesignSystem</span></td><td><span class="pnote">UI component lib</span></td><td><span class="pbadge pb-ok"><span class="pdot pd-ok"></span>Synced</span></td><td><span class="ptime">Yesterday</span></td><td style="text-align:right"><span class="tbtn" style="font-size:10px">Open →</span></td></tr>
              <tr class="pr" onclick="log('Opening Infra…')"><td><span class="pn">Infra</span></td><td><span class="pnote">Terraform configs</span></td><td><span class="pbadge pb-err"><span class="pdot pd-err"></span>SSH unreachable</span></td><td><span class="ptime">5 days ago</span></td><td style="text-align:right"><span class="tbtn" style="font-size:10px">Open →</span></td></tr>
              <tr class="padd"><td colspan="5"><div class="padd-inner" onclick="log('New project wizard…')"><i class="ti ti-plus" aria-hidden="true"></i> Add project…</div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="screen" id="s-ws" style="flex-direction:row">
      <div class="ctr">
        <div class="col-hdrs">
          <div class="ch" style="width:148px">Workspace <small id="ws-hdr-ct">3 new</small></div>
          <div style="width:52px"></div>
          <div class="ch" style="flex:1">Formal commits <small id="fm-hdr-ct">2 ready</small></div>
        </div>
        <div class="col-row">
          <div class="col-ws" id="col-ws">
            <div class="ws sel" id="wb0" onclick="toggleWs(0)"><div class="wscb">✓</div><div class="wct">feat</div><div class="wcs">add SSH file adapter</div><div class="wcm">today · duo</div></div>
            <div class="ws sel" id="wb1" onclick="toggleWs(1)"><div class="wscb">✓</div><div class="wct">feat</div><div class="wcs">SSH git runner + pool</div><div class="wcm">today · duo</div></div>
            <div class="ws t" id="wb2" onclick="toggleWs(2)"><div class="wscb"></div><div class="wct t">docs</div><div class="wcs">update arch docs</div><div class="wcm">yesterday · duo</div></div>
          </div>
          <div class="col-conn">
            <svg width="52" height="260" style="overflow:visible" id="conn-svg">
              <path id="c0" d="M0,27 C26,27 26,30 52,30" stroke="#378add" stroke-width="1.5" fill="none" opacity=".75"/>
              <path id="c1" d="M0,87 C26,87 26,30 52,30" stroke="#378add" stroke-width="1.5" fill="none" opacity=".75"/>
              <polygon id="arr0" points="50,27 52,30 50,33" fill="#378add" opacity=".75"/>
              <path id="c2" d="M0,147 C26,147 26,100 52,100" stroke="#1d9e75" stroke-width="1.5" fill="none" opacity=".55" stroke-dasharray="4 2"/>
              <polygon id="arr1" points="50,97 52,100 50,103" fill="#1d9e75" opacity=".55"/>
            </svg>
          </div>
          <div class="col-fm" id="col-fm">
            <div class="fm active" id="fm0" onclick="selectFm(0)" style="position:relative">
              <div class="fm-menu-btn" onclick="openCtx(event,0)" title="Merge options">⋯</div>
              <div class="ctx" id="ctx0">
                <div class="ctx-item" onclick="dissolve(0)"><i class="ti ti-git-branch-deleted" aria-hidden="true"></i> Dissolve — restore workspace commits</div>
                <div class="ctx-sep"></div>
                <div class="ctx-item danger" onclick="clearSources(0)"><i class="ti ti-eraser" aria-hidden="true"></i> Keep formal, clear source commits</div>
              </div>
              <div class="fp">[GITGO-5]</div>
              <div class="fmsg">feat: SSH adapter layer</div>
              <div class="ftags"><span class="tag tg">✓ synced</span><span class="tag tp">not pushed</span></div>
            </div>
            <div style="height:5px"></div>
            <div class="fm t" id="fm1" onclick="selectFm(1)" style="position:relative;opacity:.65">
              <div class="fm-menu-btn" onclick="openCtx(event,1)" title="Merge options">⋯</div>
              <div class="ctx" id="ctx1">
                <div class="ctx-item" onclick="dissolve(1)"><i class="ti ti-git-branch-deleted" aria-hidden="true"></i> Dissolve — restore workspace commits</div>
                <div class="ctx-sep"></div>
                <div class="ctx-item danger" onclick="clearSources(1)"><i class="ti ti-eraser" aria-hidden="true"></i> Keep formal, clear source commits</div>
              </div>
              <div class="fp">[GITGO-6]</div>
              <div class="fmsg">docs: adapter architecture</div>
              <div class="ftags"><span class="tag tp">not synced</span></div>
            </div>
            <div id="fm-incoming-slot" style="display:none;height:5px;margin-top:0"></div>
            <div class="fm in-commit" id="fm2" onclick="selectFm(2)" style="position:relative;display:none">
              <div class="fp">[incoming · abc123f]</div>
              <div class="fmsg">feat: Redis cache layer</div>
              <div class="ftags"><span class="tag" style="background:var(--amber-bg);color:var(--amber-txt)">from trial</span><span class="tag tp">cherry-pick pending</span></div>
            </div>
          </div>
        </div>
        <div class="msg-area">
          <div class="mlabel">Commit message</div>
          <div class="mbox" id="mbox">[GITGO-5] feat: SSH adapter layer — 2 workspace commits merged</div>
        </div>
        <div class="arow">
          <button class="ab bl" onclick="doSync()"><i class="ti ti-arrow-up" aria-hidden="true"></i> Sync to release</button>
          <button class="ab dis" id="push-btn"><i class="ti ti-brand-github" aria-hidden="true"></i> Push</button>
          <div class="sel-info" id="sel-info"><b>2</b> selected</div>
        </div>
      </div>
      <div id="ws-right-splitter">
        <div id="ws-diff-panel">
          <div class="wsp-hdr">Diff <span class="wsp-badge" id="diff-file-badge"></span></div>
          <div class="wsp-body" id="ws-diff-body"><span class="hint">Click a file to view diff</span></div>
        </div>
        <div id="ws-node-panel">
          <div class="wsp-hdr">Nodes</div>
          <div class="wsp-body" id="ws-node-body" style="padding:3px 0">
            <div class="wsp-node-row">
              <span class="wsp-node-dot" style="background:var(--blue)"></span>
              <div class="wsp-node-info">
                <span class="wsp-node-label">workspace</span>
                <span class="wsp-node-meta">local · 3 pending</span>
              </div>
            </div>
            <div class="wsp-node-row">
              <span class="wsp-node-dot" style="background:var(--teal)"></span>
              <div class="wsp-node-info">
                <span class="wsp-node-label">release</span>
                <span class="wsp-node-meta">local · up to date</span>
              </div>
            </div>
            <div class="wsp-node-row">
              <span class="wsp-node-dot" style="background:var(--amber)"></span>
              <div class="wsp-node-info">
                <span class="wsp-node-label">trial</span>
                <span class="wsp-node-meta">SSH · 3 incoming</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="screen" id="s-in">
      <div class="in-wrap">
        <div class="in-list">
          <div class="in-hdr"><h3>Incoming</h3><button class="tbtn" style="font-size:10px" onclick="log('Fetching from trial node…')"><i class="ti ti-refresh" aria-hidden="true"></i> Fetch</button></div>
          <div class="trial-src"><span class="ndot" style="background:var(--amber)"></span><span>trial · dev@192.168.1.20</span></div>
          <div class="in-scroll">
            <div class="ic on" id="ic0" onclick="selectIn(0)"><div class="ihash">abc123f · 2 hours ago</div><div class="ititle">feat: add Redis cache layer</div><div class="imeta">@alice · 4 files</div></div>
            <div class="ic" id="ic1" onclick="selectIn(1)"><div class="ihash">def456a · yesterday</div><div class="ititle">fix: token refresh race</div><div class="imeta">@bob · 2 files</div></div>
            <div class="ic" id="ic2" onclick="selectIn(2)"><div class="ihash">ghi789b · 3 days ago</div><div class="ititle">refactor: config loader</div><div class="imeta">@carol · 4 files</div></div>
          </div>
        </div>
        <div class="in-detail" id="in-detail">
          <div class="ind-top"><h4 id="in-title">feat: add Redis cache layer</h4><div class="ind-meta" id="in-meta">@alice · isolated in trial branch</div></div>
          <div class="ind-files">
            <div class="fci"><span class="fcb" style="background:var(--green-bg);color:var(--green-txt)">NEW</span> cache/redis_adapter.py</div>
            <div class="fci"><span class="fcb" style="background:var(--amber-bg);color:var(--amber-txt)">MOD</span> core/session.py</div>
            <div class="fci"><span class="fcb" style="background:var(--amber-bg);color:var(--amber-txt)">MOD</span> config/manager.py</div>
            <div class="fci"><span class="fcb" style="background:var(--green-bg);color:var(--green-txt)">NEW</span> tests/test_cache.py</div>
          </div>
          <div class="ind-bridge" id="bridge-section" style="display:none">
            <div class="bridge-lbl">Merge path — cherry-pick to release</div>
            <div class="bridge-row">
              <div class="bridge-node bridge-in">trial · abc123f</div>
              <div class="bridge-arrow">
                <svg width="100%" height="16" style="overflow:visible"><line x1="0" y1="8" x2="95%" y2="8" stroke="#c98b2a" stroke-width="1.5"/><polygon points="88%,5 95%,8 88%,11" fill="#c98b2a"/></svg>
              </div>
              <div class="bridge-node bridge-rel">release · HEAD</div>
            </div>
          </div>
          <div class="ind-msg" id="conf-msg-section" style="display:none">
            <div class="mlabel">Commit message for release</div>
            <div class="conf-mbox" id="conf-mbox">[incoming] feat: Redis cache layer — cherry-pick abc123f</div>
            <div class="conf-btns">
              <button class="cbtn cbtn-ok" onclick="confirmAccept()"><i class="ti ti-check" aria-hidden="true"></i> Confirm cherry-pick to release</button>
              <button class="cbtn cbtn-cancel" onclick="cancelAccept()">Cancel</button>
            </div>
          </div>
          <div class="ind-actions" id="dec-actions">
            <div class="dec-row">
              <button class="dec dac" onclick="startAccept()">✓ Accept<br><span style="font-size:10px;font-weight:400">→ cherry-pick to release</span></button>
              <button class="dec dpr" onclick="decide('promote')">↗ Promote<br><span style="font-size:10px;font-weight:400">→ workspace branch</span></button>
              <button class="dec ddi" onclick="decide('discard')">✕ Discard<br><span style="font-size:10px;font-weight:400">mark read, skip</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="screen" id="s-rem">
      <div class="rem-wrap">
        <div class="rc"><div class="rch"><div class="dot-g"></div><strong>origin</strong><span style="font-size:11px;color:var(--txt3);margin-left:4px">github_api</span><span style="margin-left:auto;font-size:11px;color:var(--txt2)">github.com/duo/myapp</span><button class="tbtn" style="font-size:10px;margin-left:8px" onclick="log('Pushing GITGO-5 to origin/main…')"><i class="ti ti-arrow-up" aria-hidden="true"></i> Push</button></div><div class="rcb"><div class="rst"><span>Last push</span><strong>3h ago</strong></div><div class="rst"><span>Branch</span><strong>main</strong></div><div class="rst"><span>Open PRs</span><strong>3</strong></div><div class="rst"><span>Ahead</span><strong>+1 / 0</strong></div></div></div>
        <div class="rc"><div class="rch"><div class="dot-g"></div><strong>nas-backup</strong><span style="font-size:11px;color:var(--txt3);margin-left:4px">git bare</span><span style="margin-left:auto;font-size:11px;color:var(--txt2)">git@nas:/volume1/myapp.git</span><button class="tbtn" style="font-size:10px;margin-left:8px" onclick="log('Pushing to nas-backup…')"><i class="ti ti-arrow-up" aria-hidden="true"></i> Push</button></div><div class="rcb"><div class="rst"><span>Last push</span><strong>2 days ago</strong></div><div class="rst"><span>Branch</span><strong>main</strong></div><div class="rst"><span>Protocol</span><strong>bare git</strong></div></div></div>
        <div class="rc"><div class="rch"><div class="dot-y"></div><strong>office-server</strong><span style="font-size:11px;color:var(--txt3);margin-left:4px">ssh</span><span style="margin-left:auto;font-size:11px;color:var(--txt2)">ssh://dev@192.168.1.20</span><button class="tbtn" style="font-size:10px;margin-left:8px;opacity:.35;pointer-events:none"><i class="ti ti-arrow-up" aria-hidden="true"></i> Push</button></div><div class="rcb"><div class="rst"><span>Status</span><strong style="color:var(--amber-txt)">unreachable</strong></div><div class="rst"><span>Last push</span><strong>5 days ago</strong></div></div></div>
      </div>
    </div>

    <div class="screen" id="s-hist">
      <div class="hist-wrap">
        <div class="hi"><div class="ht"><div class="hd" style="border-color:var(--blue)"></div><div class="hl"></div></div><div class="hb"><div class="ha">Pushed [GITGO-5] → origin/main</div><div class="hdet">feat: SSH adapter layer · 6 files</div><div class="htime">Today 14:32</div></div></div>
        <div class="hi"><div class="ht"><div class="hd" style="border-color:var(--green-txt)"></div><div class="hl"></div></div><div class="hb"><div class="ha">Synced [GITGO-5] to release</div><div class="hdet">6 files · 0.4s</div><div class="htime">Today 14:30</div></div></div>
        <div class="hi"><div class="ht"><div class="hd" style="border-color:var(--teal)"></div><div class="hl"></div></div><div class="hb"><div class="ha">Accepted abc123f → release</div><div class="hdet">feat: Redis cache layer · cherry-picked</div><div class="htime">Yesterday 18:05</div></div></div>
        <div class="hi"><div class="ht"><div class="hd" style="border-color:var(--amber-txt)"></div><div class="hl"></div></div><div class="hb"><div class="ha">Promoted def789c → workspace</div><div class="hdet">incoming/def789c branch created</div><div class="htime">Yesterday 11:22</div></div></div>
        <div class="hi"><div class="ht"><div class="hd" style="border-color:var(--blue)"></div><div class="hl"></div></div><div class="hb"><div class="ha">Pushed [GITGO-4] → origin/main + nas-backup</div><div class="hdet">feat: SyncSession state machine · 12 files</div><div class="htime">2 days ago 10:14</div></div></div>
      </div>
    </div>
  </div>

  <div class="rsb-wrap">
    <div class="rsb" id="rsb">
      <div class="rsb-strip">
        <div class="rsb-spacer"></div>
        <div class="rsb-divider"></div>
        <div class="rsbi" onclick="toggleSettings()" id="ri-settings" title="Settings"><i class="ti ti-settings" aria-hidden="true"></i></div>
      </div>
    </div>
    <div class="spop" id="spop">
      <div class="spop-section">
        <div class="spop-lbl">Theme</div>
        <div class="spop-row">
          <div class="spop-chip on" id="th-light" onclick="setTheme('light')">Light</div>
          <div class="spop-chip" id="th-dark" onclick="setTheme('dark')">Dark</div>
        </div>
      </div>
      <div class="spop-section">
        <div class="spop-lbl">Language</div>
        <div class="spop-row">
          <div class="spop-chip on" id="ln-en" onclick="setLang('en')">English</div>
          <div class="spop-chip" id="ln-zh" onclick="setLang('zh')">中文</div>
        </div>
      </div>
      <div class="spop-section">
        <div class="spop-tog-row">
          <span>UI transitions</span>
          <div class="sw on" id="anim-sw" onclick="toggleAnim()"></div>
        </div>
      </div>
      <div class="spop-ver">gitgo v0.5.0-dev</div>
    </div>
  </div>
</div>

<div class="logbar" id="logbar">› ready — 3 files modified, 2 new since last sync</div>
<div class="sbar" id="sbar">
  <div class="sbar-nd"><span class="ndot" style="background:var(--blue)"></span>workspace</div>
  <div style="font-size:10px;color:var(--amber-txt)">3 pending</div>
  <span class="sbsep">·</span>
  <div class="sbar-nd"><span class="ndot" style="background:var(--teal)"></span>release</div>
  <div style="font-size:10px;color:var(--green-txt)">up to date</div>
  <span class="sbsep">·</span>
  <div class="sbar-nd"><span class="ndot" style="background:var(--amber)"></span>trial</div>
  <div style="font-size:10px;color:var(--amber-txt)" id="trial-count">3 incoming</div>
  <span style="margin-left:auto;font-size:10px;color:var(--txt3);font-family:var(--mono)">⎇ main · abc123f</span>
  <span class="sbsep">·</span>
  <div class="term-btn" onclick="log('Opening CUI terminal…')"><i class="ti ti-terminal-2" style="font-size:11px" aria-hidden="true"></i> Terminal</div>
</div>
</div>

<script>
var S={inProj:false,tab:'ws',settingsOpen:false,wsState:[1,1,0],theme:'light',lang:'en',anim:true,acceptMode:false,acceptIdx:0};
var inData=[{h:'abc123f',t:'feat: add Redis cache layer',m:'@alice · 4 files',f:[['NEW','cache/redis_adapter.py'],['MOD','core/session.py'],['MOD','config/manager.py'],['NEW','tests/test_cache.py']]},{h:'def456a',t:'fix: token refresh race',m:'@bob · 2 files',f:[['MOD','core/auth.py'],['MOD','tests/test_auth.py']]},{h:'ghi789b',t:'refactor: config loader',m:'@carol · 4 files',f:[['MOD','config/manager.py'],['MOD','config/loader.py'],['NEW','config/base.py'],['MOD','tests/test_config.py']]}];

function openProject(n){
  S.inProj=true;
  document.getElementById('s-proj').classList.remove('on');
  document.getElementById('s-ws').classList.add('on');
  document.getElementById('tabs-wrap').classList.add('on');
  document.getElementById('logbar').classList.add('on');
  document.getElementById('sbar').classList.add('on');
  document.getElementById('lsb').classList.add('on');
  var bc=document.getElementById('bc');
  bc.innerHTML='<a onclick="goHome()">Projects</a><span class="bcsep"> › </span><strong>'+n+'</strong><span class="spill sp-idle" id="state-pill">IDLE</span>';
  updateActionBar('ws');
  log('MyApp — 3 files modified, 2 new since last sync');
}
function goHome(){
  S.inProj=false;
  ['ws','in','rem','hist'].forEach(k=>document.getElementById('s-'+k).classList.remove('on'));
  document.getElementById('s-proj').classList.add('on');
  document.getElementById('tabs-wrap').classList.remove('on');
  document.getElementById('logbar').classList.remove('on');
  document.getElementById('sbar').classList.remove('on');
  document.getElementById('lsb').classList.remove('on');
  document.getElementById('bc').innerHTML='<span style="font-weight:500;font-size:13px;color:var(--txt)">gitgo</span>';
}
function goTab(n){
  S.tab=n;
  ['ws','in','rem','hist'].forEach(k=>{
    document.getElementById('t-'+k).classList.toggle('on',k===n);
    document.getElementById('s-'+k).classList.toggle('on',k===n);
  });
  updateActionBar(n);
}
var actConf={
  ws:{undo:'Undo merge',save:'Save draft',export:'Export tasks',extra:{icon:'ti-refresh',label:'Re-scan'}},
  in:{undo:'Undo last decision',save:null,export:'Export list',extra:{icon:'ti-refresh',label:'Re-fetch'}},
  rem:{undo:null,save:null,export:null,extra:{icon:'ti-refresh',label:'Refresh all'}},
  hist:{undo:null,save:null,export:'Export history',extra:{icon:'ti-filter',label:'Filter'}}
};
function updateActionBar(tab){
  var c=actConf[tab]||actConf.ws;
  var b=document.getElementById('action-bar');
  b.innerHTML='';
  if(c.undo){var a=document.createElement('div');a.className='act';a.innerHTML='<i class="ti ti-arrow-back-up" aria-hidden="true"></i> '+c.undo;a.onclick=function(){doAct('undo')};b.appendChild(a);var sep=document.createElement('div');sep.className='actsep';b.appendChild(sep);}
  if(c.save){var a=document.createElement('div');a.className='act';a.innerHTML='<i class="ti ti-device-floppy" aria-hidden="true"></i> '+c.save;a.onclick=function(){doAct('save')};b.appendChild(a);}
  if(c.export){var a=document.createElement('div');a.className='act';a.innerHTML='<i class="ti ti-file-export" aria-hidden="true"></i> '+c.export;a.onclick=function(){doAct('export')};b.appendChild(a);}
  if(c.extra){var sep=document.createElement('div');sep.className='actsep';b.appendChild(sep);var a=document.createElement('div');a.className='act';a.innerHTML='<i class="ti '+c.extra.icon+'" aria-hidden="true"></i> '+c.extra.label;a.onclick=function(){doAct('refresh')};b.appendChild(a);}
}
function doAct(a){var m={undo:'Undo action applied',save:'Draft saved',export:'Exported to tasks.csv',refresh:'Refreshing…'};log(m[a]||a);}
function log(msg){var lb=document.getElementById('logbar');if(lb)lb.textContent='› '+msg;}

function showDiff(f){
  var diffs={'factory.py':'<div style="color:var(--green-txt)">+ from .ssh import SSHFileAdapter</div><div style="color:var(--red-txt)">- raise NotImplementedError</div>','session.py':'<div style="color:var(--green-txt)">+   active_trial: IncomingChange</div><div style="color:var(--red-txt)">-   pass</div>','trial.py':'<div style="color:var(--green-txt)">+ def promote_to_workspace(incoming):</div><div style="color:var(--green-txt)">+   runner.fetch(...)</div>','workers.py':'<div style="color:var(--red-txt)">- def _sync_direct(self):</div><div style="color:var(--green-txt)">+ def _sync_via_session(self):</div>','redis_adapter.py':'<div style="color:var(--green-txt)">+ class RedisAdapter:</div><div style="color:var(--green-txt)">+   def __init__(self, host):</div><div style="color:var(--green-txt)">+     self.client = None</div>','test_cache.py':'<div style="color:var(--green-txt)">+ def test_redis_connect():</div><div style="color:var(--green-txt)">+   adapter = RedisAdapter(host)</div><div style="color:var(--green-txt)">+   assert adapter.ping()</div>'};
  document.getElementById('diff-file-badge').textContent=f;
  document.getElementById('ws-diff-body').innerHTML=diffs[f]||'<div style="color:var(--green-txt)">+ (new file)</div>';
  log('diff: '+f);
}
function toggleWs(i){
  S.wsState[i]=S.wsState[i]?0:1;
  var el=document.getElementById('wb'+i);
  el.classList.toggle('sel',!!S.wsState[i]);
  el.querySelector('.wscb').textContent=S.wsState[i]?'✓':'';
  updateConnectors();
  var count=S.wsState.filter(Boolean).length;
  document.getElementById('sel-info').innerHTML=count?'<b>'+count+'</b> selected':'<span style="color:var(--txt3)">Select commits</span>';
  log(count+' workspace commit'+(count===1?'':'s')+' selected');
}
function updateConnectors(){
  var show=function(id,on){var el=document.getElementById(id);if(el)el.style.opacity=on?'0.75':'0';};
  show('c0',S.wsState[0]);show('c1',S.wsState[1]);show('arr0',S.wsState[0]||S.wsState[1]);
  show('c2',!S.wsState[2]?0.55:0);show('arr1',!S.wsState[2]?0.55:0);
}
function selectFm(i){
  [0,1,2].forEach(j=>{var el=document.getElementById('fm'+j);if(el){el.classList.toggle('active',j===i);el.style.opacity=j===i?'1':'0.6';}});
  var msgs=['[GITGO-5] feat: SSH adapter layer — 2 workspace commits merged','[GITGO-6] docs: adapter architecture — 1 workspace commit','[incoming] feat: Redis cache layer — cherry-pick from trial'];
  document.getElementById('mbox').textContent=msgs[i]||'';
  if(i<2){document.getElementById('push-btn').classList.remove('dis');}
  log('formal commit '+(i===0?'[GITGO-5]':i===1?'[GITGO-6]':'[incoming]')+' selected');
}
function openCtx(e,i){e.stopPropagation();closeAllCtx();document.getElementById('ctx'+i).classList.add('on');}
function closeAllCtx(){document.querySelectorAll('.ctx').forEach(c=>c.classList.remove('on'));}
function dissolve(i){
  closeAllCtx();
  if(i===0){S.wsState[0]=0;S.wsState[1]=0;var w0=document.getElementById('wb0'),w1=document.getElementById('wb1');w0.classList.remove('sel');w0.querySelector('.wscb').textContent='';w1.classList.remove('sel');w1.querySelector('.wscb').textContent='';updateConnectors();}
  if(i===1){S.wsState[2]=0;var w2=document.getElementById('wb2');w2.classList.remove('sel');w2.querySelector('.wscb').textContent='';updateConnectors();}
  document.getElementById('sel-info').innerHTML='<span style="color:var(--txt3)">Select commits</span>';
  log('Formal commit [GITGO-'+(5+i)+'] dissolved — workspace commits restored');
}
function clearSources(i){
  closeAllCtx();
  if(i===0){document.getElementById('wb0').style.opacity='.3';document.getElementById('wb0').style.pointerEvents='none';document.getElementById('wb1').style.opacity='.3';document.getElementById('wb1').style.pointerEvents='none';}
  if(i===1){document.getElementById('wb2').style.opacity='.3';document.getElementById('wb2').style.pointerEvents='none';}
  log('Source workspace commits cleared — formal commit preserved');
}
function doSync(){
  var pill=document.getElementById('state-pill');
  if(pill){pill.textContent='SYNCING';pill.className='spill sp-sync';}
  log('Syncing to release… git add . → git commit → 0.4s');
  setTimeout(function(){if(pill){pill.textContent='IDLE';pill.className='spill sp-idle';}log('✓ Synced — release up to date');},1500);
}

var inSelected=0;
function selectIn(i){
  S.acceptMode=false;S.acceptIdx=i;
  document.querySelectorAll('.ic').forEach(function(c,j){c.classList.toggle('on',j===i);});
  var d=inData[i];
  document.getElementById('in-title').textContent=d.t;
  document.getElementById('in-meta').textContent=d.m+' · isolated in trial branch';
  var ff=document.querySelector('.ind-files');
  ff.innerHTML=d.f.map(function(f){return'<div class="fci"><span class="fcb" style="background:var('+(f[0]==='NEW'?'--green-bg);">NEW</span>':'--amber-bg);">MOD</span>')+''+f[1]+'</div>';}).join('');
  document.getElementById('bridge-section').style.display='none';
  document.getElementById('conf-msg-section').style.display='none';
  document.getElementById('dec-actions').style.display='block';
  document.getElementById('conf-mbox').textContent='[incoming] '+d.t.replace('feat: ','')+'— cherry-pick '+d.h;
  log('Loading '+d.h+' into trial zone…');
}
function startAccept(){
  S.acceptMode=true;
  document.getElementById('bridge-section').style.display='block';
  document.getElementById('conf-msg-section').style.display='block';
  document.getElementById('dec-actions').style.display='none';
  log('Accept flow — review merge path and confirm');
}
function confirmAccept(){
  var ic=document.getElementById('ic'+S.acceptIdx);
  if(ic){ic.classList.add('done');ic.innerHTML+='<div><span class="ib" style="background:var(--green-bg);color:var(--green-txt)">✓ accepted</span></div>';}
  document.getElementById('bridge-section').style.display='none';
  document.getElementById('conf-msg-section').style.display='none';
  document.getElementById('dec-actions').style.display='block';
  var d=inData[S.acceptIdx];
  document.getElementById('fm2').style.display='block';
  document.getElementById('fm-incoming-slot').style.display='block';
  document.getElementById('incoming-tree-section').style.display='block';
  document.getElementById('fm2').querySelector('.fmsg').textContent=d.t;
  log('✓ Cherry-pick queued → added to Commit workshop as [incoming]');
  setTimeout(function(){goTab('ws');selectFm(2);},800);
}
function cancelAccept(){
  S.acceptMode=false;
  document.getElementById('bridge-section').style.display='none';
  document.getElementById('conf-msg-section').style.display='none';
  document.getElementById('dec-actions').style.display='block';
  log('Accept cancelled');
}
function decide(a){
  var m={promote:'↗ Promoting — workspace branch incoming/'+inData[S.acceptIdx].h+' created',discard:'✕ Discarded — commit marked read'};
  log(m[a]);
  var ic=document.getElementById('ic'+S.acceptIdx);
  if(ic){ic.classList.add('done');var col=a==='promote'?'var(--blue-bg)':'var(--red-bg)';var tc=a==='promote'?'var(--blue-txt)':'var(--red-txt)';var lbl=a==='promote'?'↗ promoted':'✕ discarded';ic.innerHTML+='<div><span class="ib" style="background:'+col+';color:'+tc+'">'+lbl+'</span></div>';}
  if(a==='promote'){setTimeout(function(){goTab('ws');log('incoming/'+inData[S.acceptIdx].h+' ready — switch branch to continue');},700);}
}
function toggleSettings(){S.settingsOpen=!S.settingsOpen;document.getElementById('spop').classList.toggle('on',S.settingsOpen);document.getElementById('ri-settings').classList.toggle('on',S.settingsOpen);}
function setTheme(t){S.theme=t;['light','dark'].forEach(function(k){document.getElementById('th-'+k).classList.toggle('on',k===t);});if(t==='dark'){document.getElementById('shell').classList.add('dm');}else{document.getElementById('shell').classList.remove('dm');}log('Theme: '+t);}
function setLang(l){S.lang=l;['en','zh'].forEach(function(k){document.getElementById('ln-'+k).classList.toggle('on',k===l);});log('Language set to '+l+' — restart to fully apply');}
function toggleAnim(){S.anim=!S.anim;document.getElementById('anim-sw').classList.toggle('on',S.anim);log('Transitions '+(S.anim?'enabled':'disabled'));}
document.addEventListener('click',function(e){if(!e.target.closest('.ctx')&&!e.target.closest('.fm-menu-btn'))closeAllCtx();if(!e.target.closest('.spop')&&!e.target.closest('#ri-settings')&&S.settingsOpen){S.settingsOpen=false;document.getElementById('spop').classList.remove('on');document.getElementById('ri-settings').classList.remove('on');}});
</script>