888-FMvr.1

<div class="sky"></div>
  <div class="frame"><i class="tl"></i><i class="tr"></i><i class="bl"></i><i class="br"></i></div>

  <div class="top">
    <div class="bar">
      <div class="brand"><span class="live"></span>KALI27 <i>//</i> <b>AI</b></div>
      <div class="tools">
        <button class="hbtn" id="labels" title="Labels">Aa</button>
        <button class="hbtn" id="edit" title="Edit">✎</button>
        <button class="hbtn" id="more" title="Menu">⋯</button>
        <div class="menu" id="menu">
          <div class="mi" data-m="copy">📋 Copy backup</div>
          <div class="mi" data-m="export">💾 Download backup</div>
          <div class="mi" data-m="restore">📥 Restore from text</div>
          <div class="mi danger" data-m="reset">↺ Reset to default</div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab on" data-v="deck">⬡ DECK</div>
      <div class="tab" data-v="relay">🔀 RELAY</div>
      <div class="tab" data-v="quick">⚡ QUICK</div>
      <div class="tab" data-v="shinzu">🧭 SUN TZU</div>
      <div class="tab" data-v="ledger">📊 LEDGER</div>
    </div>
    <div class="jump" id="jump"></div>
  </div>

  <div class="wrap">
    <div class="view on" id="view-deck">
      <div id="board"></div>
      <button class="addgroup" id="addGroup">+ group</button>
    </div>

    <div class="view" id="view-relay">
      <div class="relayhint">dictate → copy → paste between boxes</div>
      <div id="relay"></div>
    </div>

    <div class="view" id="view-quick">
      <div class="qpick">
        <div class="qmode" data-q="2">2-UP</div>
        <div class="qmode" data-q="3">3-UP</div>
        <div class="qmode" data-q="5">5-UP</div>
      </div>
      <div class="qgrid" id="qgrid"></div>
      <div class="qtip">
        <b>How "side-by-side" works on iPhone:</b><br>
        Tap a tile → it opens in its own tab. Tap the next → another tab. Then use Chrome's <b>tab switcher + swipe</b> to flip between them — that's your multi-view.<br><br>
        True split-screen panes only exist on <b>iPad / Mac</b> (Split View) or a native app. Tap tiles individually — iOS blocks opening several at once.
      </div>
    </div>

    <div class="view" id="view-shinzu">
      <div class="shz-banner" id="shzBanner"></div>
      <div class="shz-h" style="margin-bottom:8px;">🧭 SUN TZU v0.3 · AGENT CONSOLE</div>
      <div class="shz-agents" id="shzAgents"></div>
      <div class="shz-cmd"><textarea id="shzInput" placeholder="Talk to SUN TZU — type or dictate a messy command…"></textarea></div>
      <div class="shz-actions">
        <button class="shz-go" id="shzGo">▶ ROUTE</button>
        <button class="shz-mini" id="shzCompact">Compact: ON</button>
        <button class="shz-mini" id="shzClear">clear</button>
        <button class="shz-bell" id="shzBell">🔔</button>
      </div>
      <div class="shz-out" id="shzOut">SUN TZU v0.3 online. Pick an agent (or leave on Router), type a task, tap ROUTE.</div>
      <div class="shz-copyrow">
        <button data-c="full">📋 Response</button>
        <button data-c="paste">📋 Paste-Ready</button>
        <button data-c="board">📋 Board</button>
      </div>
      <div class="shz-h">⬡ TASK CARDS</div>
      <div class="shz-board" id="shzBoard"></div>
      <button class="shz-add" id="shzAdd">+ task card</button>
      <div class="shz-anchor">
        <h4>↩ Stay on SUN TZU</h4>
        <div class="row">
          <button id="shzCopyUrl">📋 Copy Cockpit URL</button>
          <button id="shzReopen">↗ Reopen Cockpit (new tab)</button>
          <button id="shzHelpBtn">❔ How to get back</button>
        </div>
        <div class="shz-help" id="shzHelp">
          <b>iPhone:</b> Share → <b>Add to Home Screen</b> → opens the Cockpit like an app.<br>
          <b>Chrome:</b> keep this Cockpit tab <b>pinned / open</b>; every AI link opens in a new tab.<br>
          <b>Jump back:</b> use the browser <b>tab switcher</b> to return to this tab, or tap <b>↩ SUN TZU</b>.<br>
          <b>Desktop note:</b> a true always-on-top hover over other sites needs a browser extension, Electron app, or native helper — not possible in plain HTML (v0.3).
        </div>
      </div>
      <div class="shz-note">⚠ SUN TZU v0.3 prepares &amp; tracks work. It does NOT directly control CW / Codex / Claude, and never logs in, signs, pays, sends, submits, uploads, deletes, deploys, or moves files. Automation requires a future local bridge.</div>
    </div>

    <div class="view" id="view-ledger">
      <div class="shz-h" style="margin-bottom:8px;">📊 MASTER LEDGER · SHEETS DATA LAYER (v0.2 · MOCK)</div>
      <div class="led-src" id="ledSrc"></div>
      <div class="led-nav" id="ledNav"></div>
      <div class="led-wrap"><div id="ledTable"></div></div>
      <div class="shz-note" style="margin-top:12px;">v0.2 read-only display from MOCK / sample data (the seeded ledger rows). To go live: paste your Apps Script Web App URL into the <b>SHEET_API_URL</b> constant — no other change. No live credentials, no writes, no AppleScript execution, nothing deployed.</div>
    </div>

    <div class="foot">One Universe · Many Tools · <b>One Command</b></div>
  </div>

  <div class="dock">
    <div class="dockin">
      <button class="dbtn mic" id="d-mic"><span class="di">🎤</span><span class="dl">DICTATE</span></button>
      <button class="dbtn" id="d-pic"><span class="di">📷</span><span class="dl">PIC</span></button>
      <button class="dbtn" id="d-file"><span class="di">📎</span><span class="dl">FILE</span></button>
      <button class="dbtn" id="d-copy"><span class="di">📋</span><span class="dl">COPY</span></button>
      <button class="dbtn" id="d-paste"><span class="di">📥</span><span class="dl">PASTE</span></button>
    </div>
  </div>

  <button class="retShz" id="retShz">↩ SUN TZU</button>

  <input type="file" id="picIn" accept="image/*" capture="environment" style="display:none">
  <input type="file" id="fileIn" accept="image/*" style="display:none">
  <div class="toast" id="toast"></div>

<script>
(function(){
  "use strict";
  document.addEventListener("touchstart",function(){},false);
  var KB="kali27_shinzu_test_board", KX="kali27_shinzu_test_boxes", KS="kali27_shinzu_test_shinzu";
  var P={purple:"#B14CFF",blue:"#00E5FF",gold:"#FFD700",yellow:"#FFFF00",green:"#39FF14",orange:"#FFBA00",pink:"#FF4DFF",red:"#FF1E1E"};
  var CYCLE=[P.blue,P.green,P.orange,P.pink,P.gold,P.yellow,P.red,P.purple];

  var SEED=[
    {id:"g_quick",name:"Quick",glyph:"⚡",color:P.gold,open:true,links:[
      {id:"q1",label:"Claude",url:"https://claude.ai/new",color:P.orange,sigil:"✴"},
      {id:"q2",label:"ChatGPT",url:"https://chatgpt.com",color:P.blue,sigil:"◈"},
      {id:"q3",label:"Grok",url:"https://grok.com",color:P.green,sigil:"⟁"},
      {id:"q4",label:"Gemini",url:"https://gemini.google.com/app",color:P.purple,sigil:"✦"},
      {id:"q5",label:"Drive",url:"https://drive.google.com",color:P.blue,sigil:"▲"},
      {id:"q6",label:"Gmail",url:"https://mail.google.com",color:P.blue,sigil:"✉"}
    ]},
    {id:"g_claude",name:"Claude",glyph:"✴",color:P.orange,open:false,links:[
      {id:"c1",label:"New",url:"https://claude.ai/new",sigil:"✴"},
      {id:"c2",label:"Projects",url:"https://claude.ai/projects",sigil:"▦"},
      {id:"c3",label:"Recents",url:"https://claude.ai/recents",sigil:"◷"},
      {id:"c4",label:"Code",url:"https://claude.ai/code",sigil:"⌘"},
      {id:"c5",label:"Cowork",url:"https://claude.ai/cowork/agent",sigil:"⬡"}
    ]},
    {id:"g_gpt",name:"ChatGPT",glyph:"◈",color:P.blue,open:false,links:[
      {id:"p1",label:"New",url:"https://chatgpt.com",sigil:"◈"}
    ]},
    {id:"g_grok",name:"Grok",glyph:"⟁",color:P.green,open:false,links:[
      {id:"k1",label:"New",url:"https://grok.com",sigil:"⟁"}
    ]},
    {id:"g_gemini",name:"Gemini",glyph:"✦",color:P.purple,open:false,links:[
      {id:"m1",label:"New",url:"https://gemini.google.com/app",sigil:"✦"}
    ]},
    {id:"g_google",name:"Google",glyph:"◍",color:P.blue,open:false,links:[
      {id:"o1",label:"Drive",url:"https://drive.google.com",sigil:"▲"},
      {id:"o2",label:"Gmail",url:"https://mail.google.com",sigil:"✉"},
      {id:"o3",label:"Notebook",url:"https://notebooklm.google.com",sigil:"◫"}
    ]}
  ];

  var groups, boxes, labelsOn=false, editing=false, qmode=2, qpicks=null, drag=null, cur="deck";

  function loadBoard(){try{var r=localStorage.getItem(KB);if(r){var p=JSON.parse(r);if(Array.isArray(p)&&p.length)return p;}}catch(e){}return JSON.parse(JSON.stringify(SEED));}
  function loadBoxes(){try{var r=localStorage.getItem(KX);if(r){var p=JSON.parse(r);if(p&&typeof p==="object")return p;}}catch(e){}return {master:{text:"",imgs:[]},cat:{},link:{}};}
  function saveBoard(){try{localStorage.setItem(KB,JSON.stringify(groups));return true;}catch(e){toast("Storage full");return false;}}
  function saveBoxes(){try{localStorage.setItem(KX,JSON.stringify(boxes));return true;}catch(e){toast("Storage full — clear photos/text");return false;}}
  function uid(){return "x"+Date.now().toString(36)+Math.floor(Math.random()*1e4).toString(36);}
  function esc(s){return String(s).replace(/[&<>"]/g,function(c){return{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c];});}
  function normUrl(u){u=(u||"").trim();if(!u)return"";if(!/^https?:\/\//i.test(u))u="https://"+u;return u;}
  function isImg(v){return /^https?:\/\//i.test(v)||/\.(png|jpe?g|gif|webp|svg)$/i.test(v);}
  function colorFor(name){var k=(name||"").toLowerCase();
    if(/claude|cowork/.test(k))return P.orange;if(/chatgpt|gpt|openai|atlas/.test(k))return P.blue;
    if(/grok|xai/.test(k))return P.green;if(/gemini/.test(k))return P.purple;
    if(/google|drive|gmail|mail|notebook/.test(k))return P.blue;if(/perplex/.test(k))return P.blue;
    if(/shopify|store/.test(k))return P.pink;if(/stripe|pay/.test(k))return P.red;
    if(/kali|core|quick/.test(k))return P.gold;if(/lucy|verify/.test(k))return P.yellow;
    return CYCLE[groups.length%CYCLE.length];}
  function allLinks(){var a=[];groups.forEach(function(g){g.links.forEach(function(l){a.push({g:g,l:l});});});return a;}
  function findLink(lid){var r=null;groups.forEach(function(g){g.links.forEach(function(l){if(l.id===lid)r={g:g,l:l};});});return r;}

  var T=document.getElementById("toast"),tt;
  function toast(m){T.textContent=m;T.classList.add("on");clearTimeout(tt);tt=setTimeout(function(){T.classList.remove("on");},1600);}

  function copyText(t){t=t||"";if(!t){toast("Nothing to copy");return;}
    if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(t).then(function(){toast("Copied ✓");},fb);}else fb();
    function fb(){try{var x=document.createElement("textarea");x.value=t;x.style.position="fixed";x.style.opacity="0";document.body.appendChild(x);x.focus();x.select();document.execCommand("copy");document.body.removeChild(x);toast("Copied ✓");}catch(e){toast("Copy failed");}}}
  function pasteInto(ta){if(navigator.clipboard&&navigator.clipboard.readText){navigator.clipboard.readText().then(function(t){insert(ta,t);toast("Pasted ✓");},function(){toast("Long-press the box → Paste");});}else{toast("Long-press the box → Paste");}}
  function insert(ta,t){var s=ta.selectionStart||ta.value.length;ta.value=ta.value.slice(0,s)+t+ta.value.slice(ta.selectionEnd||s);ta.dispatchEvent(new Event("input"));}

  function fileToThumb(file,cb){var img=new Image(),url=URL.createObjectURL(file);
    img.onload=function(){var max=1000,w=img.width,h=img.height;if(w>max||h>max){var s=Math.min(max/w,max/h);w=Math.round(w*s);h=Math.round(h*s);}
      var c=document.createElement("canvas");c.width=w;c.height=h;c.getContext("2d").drawImage(img,0,0,w,h);URL.revokeObjectURL(url);
      try{cb(c.toDataURL("image/jpeg",0.7));}catch(e){cb(null);}};
    img.onerror=function(){URL.revokeObjectURL(url);cb(null);};img.src=url;}

  /* ---------- DECK ---------- */
  var board=document.getElementById("board"),jump=document.getElementById("jump");
  function wireFocus(strip,label){
    function upd(){var