Add GUI usage illustrations

Codex · Codex · commit ec7e3a2ece28 · 2026-03-22T22:19:15.000+08:00
diff --git a/README.md b/README.md
@@ -7,6 +7,14 @@ Local CLI + GUI for scanning and safely deleting exhausted `sub2api` account rec
 
 It does not touch your server, domain, or IDC panel. It only operates on `sub2api` admin account records through the REST API.
 
+## GUI preview
+
+![GUI overview](./assets/gui-overview.svg)
+
+![GUI scan results](./assets/gui-scan-results.svg)
+
+![GUI delete safety flow](./assets/gui-delete-safety.svg)
+
 ## Highlights
 
 - Scans `openai/oauth` accounts whose 7-day Codex window is fully exhausted
diff --git a/assets/gui-delete-safety.svg b/assets/gui-delete-safety.svg
@@ -0,0 +1,70 @@
+<svg width="1440" height="900" viewBox="0 0 1440 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg3" x1="0" y1="0" x2="1440" y2="900" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F6F0E4"/>
+      <stop offset="1" stop-color="#EBE1CF"/>
+    </linearGradient>
+    <filter id="shadow3" x="0" y="0" width="1440" height="900" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="18" stdDeviation="24" flood-color="#432D1C" flood-opacity="0.15"/>
+    </filter>
+  </defs>
+
+  <rect width="1440" height="900" fill="url(#bg3)"/>
+  <circle cx="180" cy="760" r="210" fill="#2F6F3E" fill-opacity="0.08"/>
+  <circle cx="1260" cy="138" r="200" fill="#A13D2D" fill-opacity="0.08"/>
+
+  <text x="96" y="120" fill="#A13D2D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="3">DELETE SAFETY</text>
+  <text x="96" y="176" fill="#241B14" font-size="56" font-family="Georgia, Times New Roman, serif" font-weight="700">Backup first, re-check before delete</text>
+  <text x="96" y="220" fill="#6B5B4D" font-size="22" font-family="Avenir Next, Segoe UI, sans-serif">The delete path is designed to leave an audit trail and avoid removing accounts that no longer qualify.</text>
+
+  <g filter="url(#shadow3)">
+    <rect x="88" y="274" width="1264" height="542" rx="34" fill="#FFFDF8" fill-opacity="0.92" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  </g>
+
+  <rect x="126" y="316" width="364" height="456" rx="28" fill="#FFF9EF" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="156" y="362" fill="#241B14" font-size="34" font-family="Georgia, Times New Roman, serif" font-weight="700">Safety sequence</text>
+
+  <rect x="156" y="404" width="304" height="86" rx="22" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="182" y="440" fill="#065F5B" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="700">1. Write sanitized backup</text>
+  <text x="182" y="468" fill="#6B5B4D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif">Stored outside the repo in ~/.sub2api-cleaner/backups</text>
+
+  <rect x="156" y="512" width="304" height="86" rx="22" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="182" y="548" fill="#065F5B" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="700">2. Re-fetch every candidate</text>
+  <text x="182" y="576" fill="#6B5B4D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif">Delete only if the account still qualifies right now</text>
+
+  <rect x="156" y="620" width="304" height="86" rx="22" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="182" y="656" fill="#065F5B" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="700">3. Record skipped + failed</text>
+  <text x="182" y="684" fill="#6B5B4D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif">Timeouts, no-longer-eligible rows, and errors remain visible</text>
+
+  <rect x="530" y="316" width="782" height="170" rx="28" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="560" y="360" fill="#241B14" font-size="32" font-family="Georgia, Times New Roman, serif" font-weight="700">Delete summary</text>
+  <text x="560" y="396" fill="#6B5B4D" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">The GUI shows what happened after the run instead of only a pass/fail state.</text>
+
+  <rect x="560" y="426" width="198" height="40" rx="18" fill="#FBE6E2"/>
+  <text x="590" y="452" fill="#A13D2D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="700">backup written</text>
+  <text x="780" y="452" fill="#241B14" font-size="16" font-family="SFMono-Regular, Menlo, monospace">~/.sub2api-cleaner/backups/sub2api-accounts-...</text>
+
+  <rect x="530" y="514" width="248" height="252" rx="28" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <rect x="796" y="514" width="248" height="252" rx="28" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <rect x="1062" y="514" width="250" height="252" rx="28" fill="#FFFDF8" stroke="#8A6A4F" stroke-opacity="0.14"/>
+
+  <text x="560" y="554" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">DELETED</text>
+  <text x="826" y="554" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">FAILED</text>
+  <text x="1092" y="554" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">SKIPPED</text>
+
+  <text x="560" y="612" fill="#2F6F3E" font-size="46" font-family="Georgia, Times New Roman, serif" font-weight="700">2</text>
+  <text x="826" y="612" fill="#A13D2D" font-size="46" font-family="Georgia, Times New Roman, serif" font-weight="700">1</text>
+  <text x="1092" y="612" fill="#065F5B" font-size="46" font-family="Georgia, Times New Roman, serif" font-weight="700">1</text>
+
+  <text x="560" y="658" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">[1368] mosera3e63e9@yo.hush2u.com</text>
+  <text x="560" y="692" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">[1364] ammamaria3e63b0@g9.cloudvxz.com</text>
+
+  <text x="826" y="658" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">[1362] timeout after 30000ms</text>
+  <text x="826" y="692" fill="#6B5B4D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif">Batch continues with remaining rows.</text>
+
+  <text x="1092" y="658" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">[1376] no_longer_eligible</text>
+  <text x="1092" y="692" fill="#6B5B4D" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif">Reset window changed after the scan.</text>
+
+  <rect x="530" y="792" width="782" height="12" rx="6" fill="#8A6A4F" fill-opacity="0.12"/>
+  <rect x="530" y="792" width="494" height="12" rx="6" fill="#0B7A75"/>
+</svg>
diff --git a/assets/gui-overview.svg b/assets/gui-overview.svg
@@ -0,0 +1,107 @@
+<svg width="1440" height="900" viewBox="0 0 1440 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="80" y1="40" x2="1320" y2="860" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F4EFE4"/>
+      <stop offset="1" stop-color="#EFE6D5"/>
+    </linearGradient>
+    <linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
+      <stop stop-color="#FFFDF8" stop-opacity="0.96"/>
+      <stop offset="1" stop-color="#FFF7EC" stop-opacity="0.9"/>
+    </linearGradient>
+    <filter id="shadow" x="0" y="0" width="1440" height="900" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="24" stdDeviation="30" flood-color="#432D1C" flood-opacity="0.14"/>
+    </filter>
+  </defs>
+
+  <rect width="1440" height="900" fill="url(#bg)"/>
+  <circle cx="188" cy="122" r="220" fill="#0B7A75" fill-opacity="0.08"/>
+  <circle cx="1264" cy="772" r="236" fill="#A13D2D" fill-opacity="0.08"/>
+
+  <g filter="url(#shadow)">
+    <rect x="62" y="54" width="1316" height="792" rx="34" fill="#FFFCF6" fill-opacity="0.68" stroke="#8A6A4F" stroke-opacity="0.16"/>
+  </g>
+
+  <text x="98" y="112" fill="#065F5B" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="3">LOCAL CONTROL SURFACE</text>
+  <text x="98" y="176" fill="#241B14" font-size="58" font-family="Georgia, Times New Roman, serif" font-weight="700">Sub2API Cleaner GUI</text>
+  <text x="98" y="220" fill="#6B5B4D" font-size="22" font-family="Avenir Next, Segoe UI, sans-serif">Scan exhausted OpenAI OAuth accounts, review candidates, and delete with backup-first safety.</text>
+
+  <rect x="928" y="108" width="128" height="108" rx="24" fill="url(#card)" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <rect x="1076" y="108" width="128" height="108" rx="24" fill="url(#card)" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <rect x="1224" y="108" width="128" height="108" rx="24" fill="url(#card)" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="952" y="146" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">SCANNED</text>
+  <text x="1100" y="146" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">CANDIDATES</text>
+  <text x="1248" y="146" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">DELETED</text>
+  <text x="954" y="194" fill="#241B14" font-size="42" font-family="Georgia, Times New Roman, serif" font-weight="700">57</text>
+  <text x="1102" y="194" fill="#A13D2D" font-size="42" font-family="Georgia, Times New Roman, serif" font-weight="700">3</text>
+  <text x="1250" y="194" fill="#2F6F3E" font-size="42" font-family="Georgia, Times New Roman, serif" font-weight="700">2</text>
+
+  <rect x="98" y="278" width="404" height="506" rx="28" fill="url(#card)" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="128" y="326" fill="#065F5B" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="2">CONNECTION</text>
+  <text x="128" y="366" fill="#241B14" font-size="34" font-family="Georgia, Times New Roman, serif" font-weight="700">Instance Config</text>
+  <rect x="388" y="320" width="84" height="38" rx="19" fill="#D7F1EE"/>
+  <text x="409" y="345" fill="#065F5B" font-size="15" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">IDLE</text>
+
+  <text x="128" y="418" fill="#6B5B4D" font-size="15" font-family="Avenir Next, Segoe UI, sans-serif">Sub2API URL</text>
+  <rect x="128" y="432" width="344" height="54" rx="18" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.18"/>
+  <text x="148" y="466" fill="#241B14" font-size="18" font-family="SFMono-Regular, Menlo, monospace">https://example-sub2api.com</text>
+
+  <text x="128" y="522" fill="#6B5B4D" font-size="15" font-family="Avenir Next, Segoe UI, sans-serif">Admin Email</text>
+  <rect x="128" y="536" width="344" height="54" rx="18" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.18"/>
+  <text x="148" y="570" fill="#241B14" font-size="18" font-family="SFMono-Regular, Menlo, monospace">admin@example.com</text>
+
+  <text x="128" y="626" fill="#6B5B4D" font-size="15" font-family="Avenir Next, Segoe UI, sans-serif">Password</text>
+  <rect x="128" y="640" width="344" height="54" rx="18" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.18"/>
+  <text x="148" y="674" fill="#6B5B4D" font-size="18" font-family="SFMono-Regular, Menlo, monospace">••••••••••••••••</text>
+
+  <rect x="128" y="718" width="344" height="72" rx="22" fill="#FFF7EC" stroke="#8A6A4F" stroke-opacity="0.12"/>
+  <rect x="148" y="742" width="20" height="20" rx="6" fill="#0B7A75" fill-opacity="0.16" stroke="#0B7A75" stroke-opacity="0.5"/>
+  <path d="M154 752L159 757L166 748" stroke="#0B7A75" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <text x="182" y="758" fill="#241B14" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif">Delete only account records, never the server or domain.</text>
+
+  <rect x="128" y="806" width="166" height="54" rx="18" fill="#F5E7CC" stroke="#8A6A4F" stroke-opacity="0.18"/>
+  <rect x="306" y="806" width="166" height="54" rx="18" fill="#973526"/>
+  <text x="174" y="840" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">Scan Candidates</text>
+  <text x="342" y="840" fill="#FFF9F5" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">Backup + Delete</text>
+
+  <rect x="532" y="278" width="782" height="506" rx="28" fill="url(#card)" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="562" y="326" fill="#065F5B" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="2">RUN OUTPUT</text>
+  <text x="562" y="366" fill="#241B14" font-size="34" font-family="Georgia, Times New Roman, serif" font-weight="700">Review Results</text>
+
+  <rect x="1122" y="320" width="162" height="42" rx="16" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.18"/>
+  <text x="1163" y="347" fill="#241B14" font-size="16" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">Copy JSON</text>
+
+  <rect x="562" y="400" width="226" height="102" rx="22" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <rect x="810" y="400" width="226" height="102" rx="22" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <rect x="1058" y="400" width="226" height="102" rx="22" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.14"/>
+  <text x="588" y="434" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">LAST MODE</text>
+  <text x="836" y="434" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">SCANNED AT</text>
+  <text x="1084" y="434" fill="#6B5B4D" font-size="14" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">BACKUP</text>
+  <text x="588" y="478" fill="#241B14" font-size="32" font-family="Georgia, Times New Roman, serif" font-weight="700">scan</text>
+  <text x="836" y="478" fill="#241B14" font-size="20" font-family="Avenir Next, Segoe UI, sans-serif">2026-03-22 20:25</text>
+  <text x="1084" y="478" fill="#6B5B4D" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">~/.sub2api-cleaner/...</text>
+
+  <rect x="562" y="532" width="722" height="60" rx="18" fill="#E7F5F2" stroke="#0B7A75" stroke-opacity="0.18"/>
+  <text x="590" y="571" fill="#065F5B" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">Scan complete. Review candidates, then delete with backup-first safety.</text>
+
+  <rect x="562" y="614" width="722" height="146" rx="22" fill="#FFFDF9" stroke="#8A6A4F" stroke-opacity="0.16"/>
+  <rect x="562" y="614" width="722" height="42" rx="22" fill="#F6EEE0"/>
+  <text x="588" y="641" fill="#6B5B4D" font-size="13" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">ID</text>
+  <text x="662" y="641" fill="#6B5B4D" font-size="13" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">NAME</text>
+  <text x="974" y="641" fill="#6B5B4D" font-size="13" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">STATUS</text>
+  <text x="1068" y="641" fill="#6B5B4D" font-size="13" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">7D%</text>
+  <text x="1144" y="641" fill="#6B5B4D" font-size="13" font-family="Avenir Next, Segoe UI, sans-serif" letter-spacing="1.5">RESULT</text>
+
+  <text x="588" y="689" fill="#241B14" font-size="18" font-family="SFMono-Regular, Menlo, monospace">1368</text>
+  <text x="662" y="689" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">mosera3e63e9@yo.hush2u.com</text>
+  <text x="976" y="689" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">active</text>
+  <text x="1072" y="689" fill="#A13D2D" font-size="18" font-family="Georgia, Times New Roman, serif" font-weight="700">100</text>
+  <rect x="1140" y="668" width="112" height="32" rx="16" fill="#A13D2D" fill-opacity="0.12"/>
+  <text x="1158" y="689" fill="#A13D2D" font-size="15" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">delete_candidate</text>
+
+  <text x="588" y="735" fill="#241B14" font-size="18" font-family="SFMono-Regular, Menlo, monospace">1364</text>
+  <text x="662" y="735" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">ammamaria3e63b0@g9.cloudvxz.com</text>
+  <text x="976" y="735" fill="#241B14" font-size="18" font-family="Avenir Next, Segoe UI, sans-serif">active</text>
+  <text x="1072" y="735" fill="#A13D2D" font-size="18" font-family="Georgia, Times New Roman, serif" font-weight="700">100</text>
+  <rect x="1140" y="714" width="112" height="32" rx="16" fill="#A13D2D" fill-opacity="0.12"/>
+  <text x="1158" y="735" fill="#A13D2D" font-size="15" font-family="Avenir Next, Segoe UI, sans-serif" font-weight="600">delete_candidate</text>
+</svg>
diff --git a/assets/gui-scan-results.svg b/assets/gui-scan-results.svg
