ホーム エクスプローラ ヘルプ
サインイン
mzp
/
gh-hub
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ブランチ: main
ブランチ タグ
gh-hub
/
media
/
dashboard.html

dashboard.html 46 KB
パーマリンク 履歴 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>GH-Hub</title>
    7. 

  7. <style>
    8. 

  8. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    9. 

  9. :root {
    10. 

  10.   --bg: var(--vscode-editor-background, #1e1e1e);
    11. 

  11.   --bg2: var(--vscode-sideBar-background, #252526);
    12. 

  12.   --bg3: var(--vscode-input-background, #3c3c3c);
    13. 

  13.   --border: var(--vscode-panel-border, #474747);
    14. 

  14.   --text: var(--vscode-editor-foreground, #cccccc);
    15. 

  15.   --text2: var(--vscode-descriptionForeground, #858585);
    16. 

  16.   --accent: var(--vscode-textLink-foreground, #3794ff);
    17. 

  17.   --green: #3fb950; --yellow: #d29922; --red: #f85149; --purple: #a371f7;
    18. 

  18.   --font: var(--vscode-font-family, system-ui);
    19. 

  19.   --mono: var(--vscode-editor-font-family, monospace);
    20. 

  20.   --radius: 4px;
    21. 

  21. }
    22. 

  22. body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; height: 100vh; display: flex; flex-direction: column; }
    23. 

  23. a { color: var(--accent); text-decoration: none; }
    24. 

  24. a:hover { text-decoration: underline; }
    25. 

  25. 

  26. button {
    27. 

  27.   font-family: var(--font); font-size: 12px; padding: 4px 12px;
    28. 

  28.   border: 1px solid var(--border); border-radius: var(--radius);
    29. 

  29.   background: var(--bg3); color: var(--text); cursor: pointer;
    30. 

  30. }
    31. 

  31. button:hover { opacity: 0.85; }
    32. 

  32. button.primary { background: #238636; border-color: #2ea043; color: #fff; }
    33. 

  33. button.danger { background: #da3633; border-color: #f85149; color: #fff; }
    34. 

  34. button.ai { background: #1f1a3e; border-color: var(--purple); color: var(--purple); }
    35. 

  35. button:disabled { opacity: 0.4; cursor: default; }
    36. 

  36. 

  37. input, textarea, select {
    38. 

  38.   font-family: var(--font); font-size: 12px; padding: 4px 8px;
    39. 

  39.   border: 1px solid var(--border); border-radius: var(--radius);
    40. 

  40.   background: var(--bg3); color: var(--text); width: 100%;
    41. 

  41. }
    42. 

  42. textarea { resize: vertical; min-height: 80px; font-family: var(--mono); font-size: 12px; }
    43. 

  43. 

  44. /* ─── Header ──────────────────────────────── */
    45. 

  45. .header {
    46. 

  46.   display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    47. 

  47.   background: var(--bg2); border-bottom: 1px solid var(--border);
    48. 

  48. }
    49. 

  49. .header h1 { font-size: 15px; font-weight: 600; }
    50. 

  50. .header h1 b { color: var(--accent); }
    51. 

  51. .header .user { color: var(--text2); font-size: 12px; }
    52. 

  52. .header .spacer { flex: 1; }
    53. 

  53. .badge {
    54. 

  54.   background: var(--accent); color: #000; font-size: 10px; font-weight: 700;
    55. 

  55.   padding: 1px 7px; border-radius: 8px; cursor: pointer; min-width: 18px; text-align: center;
    56. 

  56. }
    57. 

  57. .badge.zero { background: var(--bg3); color: var(--text2); }
    58. 

  58. .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
    59. 

  59. .dot.ok { background: var(--green); }
    60. 

  60. .dot.err { background: var(--red); }
    61. 

  61. 

  62. /* ─── Tabs ────────────────────────────────── */
    63. 

  63. .tabs {
    64. 

  64.   display: flex; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 14px;
    65. 

  65. }
    66. 

  66. .tab {
    67. 

  67.   padding: 7px 14px; font-size: 12px; color: var(--text2); cursor: pointer;
    68. 

  68.   border-bottom: 2px solid transparent;
    69. 

  69. }
    70. 

  70. .tab:hover { color: var(--text); }
    71. 

  71. .tab.active { color: var(--text); border-bottom-color: var(--accent); }
    72. 

  72. 

  73. /* ─── Panels ──────────────────────────────── */
    74. 

  74. .content { flex: 1; overflow: hidden; }
    75. 

  75. .panel { display: none; height: 100%; overflow-y: auto; padding: 14px; }
    76. 

  76. .panel.active { display: flex; flex-direction: column; }
    77. 

  77. 

  78. /* ─── Repos ───────────────────────────────── */
    79. 

  79. .toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
    80. 

  80. .toolbar h2 { font-size: 14px; flex: 1; }
    81. 

  81. .repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; flex: 1; overflow-y: auto; }
    82. 

  82. .repo-card {
    83. 

  83.   background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    84. 

  84.   padding: 12px; cursor: pointer;
    85. 

  85. }
    86. 

  86. .repo-card:hover { border-color: var(--accent); }
    87. 

  87. .repo-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    88. 

  88. .repo-card h3 { font-size: 13px; color: var(--accent); }
    89. 

  89. .repo-card .desc { color: var(--text2); font-size: 11px; margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    90. 

  90. .repo-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text2); }
    91. 

  91. .lang-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; vertical-align: middle; }
    92. 

  92. .tag-private { color: var(--yellow); border: 1px solid var(--yellow); padding: 0 4px; border-radius: 3px; font-size: 9px; }
    93. 

  93. 

  94. /* ─── Split View ──────────────────────────── */
    95. 

  95. .split { display: flex; height: 100%; gap: 0; flex: 1; overflow: hidden; }
    96. 

  96. .list-pane { width: 320px; min-width: 240px; border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
    97. 

  97. .detail-pane { flex: 1; overflow-y: auto; padding: 14px; }
    98. 

  98. 

  99. .filter-bar { padding: 6px 10px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; align-items: center; }
    100. 

  100. .filter-bar .label { font-size: 11px; color: var(--accent); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    101. 

  101. .filter-bar select { width: auto; font-size: 11px; }
    102. 

  102. 

  103. .item-card { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
    104. 

  104. .item-card:hover { background: var(--bg3); }
    105. 

  105. .item-card.sel { background: var(--bg3); border-left: 3px solid var(--accent); }
    106. 

  106. .item-card .num { color: var(--text2); font-size: 11px; }
    107. 

  107. .item-card .title { font-size: 12px; font-weight: 500; }
    108. 

  108. .item-card .meta { font-size: 10px; color: var(--text2); display: flex; gap: 8px; margin-top: 2px; }
    109. 

  109. .label-tag { display: inline-block; font-size: 9px; font-weight: 600; padding: 0 5px; border-radius: 8px; margin-right: 3px; }
    110. 

  110. 

  111. /* ─── Detail ──────────────────────────────── */
    112. 

  112. .detail-header h2 { font-size: 15px; margin-bottom: 2px; }
    113. 

  113. .detail-header .meta { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
    114. 

  114. .detail-body {
    115. 

  115.   background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    116. 

  116.   padding: 12px; margin-bottom: 12px; font-size: 12px; line-height: 1.6; word-wrap: break-word;
    117. 

  117. }
    118. 

  118. .detail-body pre { background: var(--bg); padding: 8px; border-radius: 3px; overflow-x: auto; font-family: var(--mono); font-size: 11px; margin: 6px 0; }
    119. 

  119. .detail-body code { font-family: var(--mono); font-size: 11px; background: var(--bg3); padding: 1px 3px; border-radius: 2px; }
    120. 

  120. .detail-body pre code { background: none; padding: 0; }
    121. 

  121. 

  122. .comment { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; }
    123. 

  123. .comment .author { font-weight: 600; font-size: 12px; }
    124. 

  124. .comment .time { color: var(--text2); font-size: 10px; margin-left: 6px; }
    125. 

  125. .comment .body { margin-top: 6px; font-size: 12px; line-height: 1.5; }
    126. 

  126. 

  127. .reply-area { margin-top: 12px; }
    128. 

  128. .reply-actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
    129. 

  129. .confidence { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
    130. 

  130. .confidence.high { background: #0d3321; color: var(--green); }
    131. 

  131. .confidence.medium { background: #3d2e00; color: var(--yellow); }
    132. 

  132. .confidence.low { background: #3d1214; color: var(--red); }
    133. 

  133. 

  134. .empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text2); flex-direction: column; gap: 6px; padding: 30px; text-align: center; }
    135. 

  135. 

  136. /* ─── Notifications ───────────────────────── */
    137. 

  137. .notif-item {
    138. 

  138.   display: flex; gap: 10px; padding: 8px 12px; background: var(--bg2);
    139. 

  139.   border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; align-items: flex-start;
    140. 

  140. }
    141. 

  141. .notif-item .icon { font-size: 14px; margin-top: 2px; }
    142. 

  142. .notif-item .info { flex: 1; }
    143. 

  143. .notif-item .repo { font-size: 10px; color: var(--text2); }
    144. 

  144. .notif-item .title { font-size: 12px; }
    145. 

  145. .notif-item .reason { font-size: 10px; color: var(--text2); }
    146. 

  146. 

  147. /* ─── Push ────────────────────────────────── */
    148. 

  148. .push-panel { max-width: 600px; }
    149. 

  149. .field { margin-bottom: 10px; }
    150. 

  150. .field label { font-size: 11px; color: var(--text2); margin-bottom: 3px; display: block; }
    151. 

  151. .field-row { display: flex; gap: 6px; }
    152. 

  152. .git-info { margin: 10px 0; }
    153. 

  153. .git-info .branch { font-size: 13px; font-weight: 600; color: var(--green); }
    154. 

  154. .git-info .counts { font-size: 11px; color: var(--text2); margin-top: 2px; }
    155. 

  155. .git-info pre { background: var(--bg2); padding: 8px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; margin-top: 6px; max-height: 150px; overflow-y: auto; }
    156. 

  156. .log { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; font-family: var(--mono); font-size: 11px; min-height: 60px; white-space: pre-wrap; color: var(--text2); margin-top: 10px; }
    157. 

  157. .log .ok { color: var(--green); }
    158. 

  158. .log .err { color: var(--red); }
    159. 

  159. 

  160. /* ─── Publish Tab ─────────────────────────── */
    161. 

  161. .pub-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-shrink: 0; }
    162. 

  162. .pub-top h2 { font-size: 14px; flex: 1; }
    163. 

  163. .pub-settings { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-bottom: 8px; }
    164. 

  164. .pub-settings select, .pub-settings input { width: auto; font-size: 11px; }
    165. 

  165. .pub-settings input { max-width: 180px; }
    166. 

  166. .pub-split { display: flex; flex: 1; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
    167. 

  167. .pub-editor { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
    168. 

  168. .pub-toolbar { display: flex; gap: 2px; padding: 4px 6px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    169. 

  169. .pub-toolbar button { font-size: 11px; padding: 2px 7px; min-width: 26px; border: none; background: transparent; color: var(--text2); }
    170. 

  170. .pub-toolbar button:hover { background: var(--bg3); color: var(--text); border-radius: 3px; }
    171. 

  171. .pub-toolbar .sep { width: 1px; background: var(--border); margin: 2px 4px; }
    172. 

  172. .pub-editor textarea { flex: 1; border: none; border-radius: 0; resize: none; padding: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--bg); }
    173. 

  173. .pub-preview { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg); font-size: 13px; line-height: 1.7; }
    174. 

  174. .pub-preview h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 16px 0 10px; }
    175. 

  175. .pub-preview h2 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 4px; margin: 14px 0 8px; }
    176. 

  176. .pub-preview h3 { font-size: 15px; margin: 12px 0 6px; }
    177. 

  177. .pub-preview h4 { font-size: 13px; margin: 10px 0 4px; }
    178. 

  178. .pub-preview p { margin: 6px 0; }
    179. 

  179. .pub-preview img { max-width: 100%; border-radius: 4px; margin: 8px 0; }
    180. 

  180. .pub-preview pre { background: var(--bg2); padding: 10px; border-radius: 4px; overflow-x: auto; font-family: var(--mono); font-size: 11px; margin: 8px 0; }
    181. 

  181. .pub-preview code { font-family: var(--mono); font-size: 11px; background: var(--bg3); padding: 1px 4px; border-radius: 2px; }
    182. 

  182. .pub-preview pre code { background: none; padding: 0; }
    183. 

  183. .pub-preview blockquote { border-left: 3px solid var(--accent); padding: 4px 12px; margin: 8px 0; color: var(--text2); }
    184. 

  184. .pub-preview table { border-collapse: collapse; margin: 8px 0; width: 100%; }
    185. 

  185. .pub-preview th, .pub-preview td { border: 1px solid var(--border); padding: 4px 8px; font-size: 12px; text-align: left; }
    186. 

  186. .pub-preview th { background: var(--bg2); }
    187. 

  187. .pub-preview ul, .pub-preview ol { padding-left: 20px; margin: 6px 0; }
    188. 

  188. .pub-preview li { margin: 2px 0; }
    189. 

  189. .pub-preview hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
    190. 

  190. .pub-preview a { color: var(--accent); }
    191. 

  191. .img-upload-area { padding: 6px 10px; background: var(--bg2); border-top: 1px solid var(--border); font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
    192. 

  192. .img-upload-area button { font-size: 11px; padding: 2px 8px; }
    193. 

  193. 

  194. /* ─── Modal ───────────────────────────────── */
    195. 

  195. .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 99; }
    196. 

  196. .modal-bg.show { display: flex; }
    197. 

  197. .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 18px; width: 380px; }
    198. 

  198. .modal h3 { margin-bottom: 12px; font-size: 14px; }
    199. 

  199. .modal .actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; }
    200. 

  200. 

  201. .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .5s linear infinite; }
    202. 

  202. @keyframes spin { to { transform: rotate(360deg); } }
    203. 

  203. .loading { display: flex; align-items: center; gap: 6px; padding: 20px; color: var(--text2); }
    204. 

  204. </style>
    205. 

  205. </head>
    206. 

  206. <body>
    207. 

  207. 

  208. <div class="header">
    209. 

  209.   <h1>GH-<b>Hub</b></h1>
    210. 

  210.   <span class="dot" id="hDot"></span>
    211. 

  211.   <span class="user" id="hUser">...</span>
    212. 

  212.   <span class="spacer"></span>
    213. 

  213.   <span class="badge zero" id="hBadge" onclick="switchTab('notifications')">0</span>
    214. 

  214. </div>
    215. 

  215. 

  216. <div class="tabs">
    217. 

  217.   <div class="tab active" data-t="repos" onclick="switchTab('repos')">Repos</div>
    218. 

  218.   <div class="tab" data-t="issues" onclick="switchTab('issues')">Issues</div>
    219. 

  219.   <div class="tab" data-t="pulls" onclick="switchTab('pulls')">PRs</div>
    220. 

  220.   <div class="tab" data-t="notifications" onclick="switchTab('notifications')">Notifications</div>
    221. 

  221.   <div class="tab" data-t="push" onclick="switchTab('push')">Push</div>
    222. 

  222.   <div class="tab" data-t="publish" onclick="switchTab('publish')">Publish</div>
    223. 

  223. </div>
    224. 

  224. 

  225. <div class="content">
    226. 

  226.   <!-- ═══ Repos ═══ -->
    227. 

  227.   <div class="panel active" id="p-repos">
    228. 

  228.     <div class="toolbar">
    229. 

  229.       <h2>Repositories</h2>
    230. 

  230.       <button onclick="loadRepos()">Refresh</button>
    231. 

  231.       <button class="primary" onclick="showModal('createRepoModal')">+ New</button>
    232. 

  232.     </div>
    233. 

  233.     <div class="repo-grid" id="repoGrid"><div class="loading"><span class="spinner"></span> Loading...</div></div>
    234. 

  234.   </div>
    235. 

  235. 

  236.   <!-- ═══ Issues ═══ -->
    237. 

  237.   <div class="panel" id="p-issues" style="padding:0;">
    238. 

  238.     <div class="split">
    239. 

  239.       <div class="list-pane">
    240. 

  240.         <div class="filter-bar">
    241. 

  241.           <span class="label" id="iRepoLabel">Select a repo</span>
    242. 

  242.           <select id="iState" onchange="loadIssues()"><option value="open">Open</option><option value="closed">Closed</option><option value="all">All</option></select>
    243. 

  243.         </div>
    244. 

  244.         <div id="iList" style="flex:1;overflow-y:auto;"><div class="empty">Click a repo first</div></div>
    245. 

  245.       </div>
    246. 

  246.       <div class="detail-pane" id="iDetail"><div class="empty">Select an issue</div></div>
    247. 

  247.     </div>
    248. 

  248.   </div>
    249. 

  249. 

  250.   <!-- ═══ PRs ═══ -->
    251. 

  251.   <div class="panel" id="p-pulls" style="padding:0;">
    252. 

  252.     <div class="split">
    253. 

  253.       <div class="list-pane">
    254. 

  254.         <div class="filter-bar">
    255. 

  255.           <span class="label" id="pRepoLabel">Select a repo</span>
    256. 

  256.           <select id="pState" onchange="loadPRs()"><option value="open">Open</option><option value="closed">Closed</option><option value="all">All</option></select>
    257. 

  257.         </div>
    258. 

  258.         <div id="pList" style="flex:1;overflow-y:auto;"><div class="empty">Click a repo first</div></div>
    259. 

  259.       </div>
    260. 

  260.       <div class="detail-pane" id="pDetail"><div class="empty">Select a PR</div></div>
    261. 

  261.     </div>
    262. 

  262.   </div>
    263. 

  263. 

  264.   <!-- ═══ Notifications ═══ -->
    265. 

  265.   <div class="panel" id="p-notifications">
    266. 

  266.     <div class="toolbar">
    267. 

  267.       <h2>Notifications</h2>
    268. 

  268.       <button onclick="loadNotifs()">Refresh</button>
    269. 

  269.       <button onclick="markAllRead()">Mark All Read</button>
    270. 

  270.     </div>
    271. 

  271.     <div id="notifList" style="flex:1;overflow-y:auto;max-width:650px;"><div class="loading"><span class="spinner"></span> Loading...</div></div>
    272. 

  272.   </div>
    273. 

  273. 

  274.   <!-- ═══ Push ═══ -->
    275. 

  275.   <div class="panel" id="p-push">
    276. 

  276.     <h2 style="font-size:14px;margin-bottom:10px;">Quick Push</h2>
    277. 

  277.     <div class="push-panel">
    278. 

  278.       <div class="field">
    279. 

  279.         <label>Local Directory</label>
    280. 

  280.         <div class="field-row">
    281. 

  281.           <input id="pushDir" placeholder="/path/to/project">
    282. 

  282.           <button onclick="pickFolder()" style="white-space:nowrap;">Browse</button>
    283. 

  283.           <button onclick="useWorkspace()" style="white-space:nowrap;">Workspace</button>
    284. 

  284.         </div>
    285. 

  285.       </div>
    286. 

  286.       <button onclick="checkGit()">Check Status</button>
    287. 

  287.       <div class="git-info" id="gitInfo"></div>
    288. 

  288.       <div style="display:flex;gap:6px;margin-top:8px;">
    289. 

  289.         <button class="primary" id="pushBtn" onclick="doPush()" disabled>Push</button>
    290. 

  290.         <button onclick="doQuickSetup()">Quick Setup + Push</button>
    291. 

  291.       </div>
    292. 

  292.       <div class="log" id="pushLog" style="display:none;"></div>
    293. 

  293.     </div>
    294. 

  294.   </div>
    295. 

  295. 

  296.   <!-- ═══ Publish ═══ -->
    297. 

  297.   <div class="panel" id="p-publish">
    298. 

  298.     <div class="pub-top">
    299. 

  299.       <h2>Publish to GitHub</h2>
    300. 

  300.       <span id="pubResult" style="font-size:12px;"></span>
    301. 

  301.     </div>
    302. 

  302.     <div class="pub-settings">
    303. 

  303.       <select id="pubRepo" onchange="onRepoChange()"><option value="">Target Repo</option></select>
    304. 

  304.       <input id="pubPath" value="README.md" style="max-width:140px;" placeholder="Path (e.g. README.md)">
    305. 

  305.       <input id="pubMsg" value="Update README" style="max-width:200px;" placeholder="Commit message">
    306. 

  306.       <button onclick="fetchExistingReadme()">Load Existing</button>
    307. 

  307.       <button class="primary" onclick="doPublish()" id="pubBtn">Publish</button>
    308. 

  308.     </div>
    309. 

  309.     <div class="pub-split">
    310. 

  310.       <div class="pub-editor">
    311. 

  311.         <div class="pub-toolbar">
    312. 

  312.           <button onclick="tbWrap('**','**')" title="Bold"><b>B</b></button>
    313. 

  313.           <button onclick="tbWrap('*','*')" title="Italic"><i>I</i></button>
    314. 

  314.           <button onclick="tbWrap('~~','~~')" title="Strikethrough"><s>S</s></button>
    315. 

  315.           <div class="sep"></div>
    316. 

  316.           <button onclick="tbPrefix('# ')" title="H1">H1</button>
    317. 

  317.           <button onclick="tbPrefix('## ')" title="H2">H2</button>
    318. 

  318.           <button onclick="tbPrefix('### ')" title="H3">H3</button>
    319. 

  319.           <div class="sep"></div>
    320. 

  320.           <button onclick="tbPrefix('- ')" title="Bullet list">&#8226;</button>
    321. 

  321.           <button onclick="tbPrefix('1. ')" title="Numbered list">1.</button>
    322. 

  322.           <button onclick="tbPrefix('> ')" title="Blockquote">&gt;</button>
    323. 

  323.           <div class="sep"></div>
    324. 

  324.           <button onclick="tbLink()" title="Insert link">Link</button>
    325. 

  325.           <button onclick="tbImage()" title="Insert image from URL">Img</button>
    326. 

  326.           <button onclick="tbUploadImage()" title="Upload image to repo">Upload</button>
    327. 

  327.           <div class="sep"></div>
    328. 

  328.           <button onclick="tbWrap('`','`')" title="Inline code">code</button>
    329. 

  329.           <button onclick="tbCodeBlock()" title="Code block">```</button>
    330. 

  330.           <button onclick="tbPrefix('---')" title="Horizontal rule">HR</button>
    331. 

  331.           <div class="sep"></div>
    332. 

  332.           <button onclick="tbTable()" title="Insert table">Table</button>
    333. 

  333.         </div>
    334. 

  334.         <textarea id="pubEditor" placeholder="Write your markdown here..." oninput="updatePreview()"></textarea>
    335. 

  335.         <div class="img-upload-area">
    336. 

  336.           <span>Images:</span>
    337. 

  337.           <button onclick="tbUploadImage()">Browse & Upload</button>
    338. 

  338.           <span id="imgStatus" style="color:var(--text2);font-size:10px;"></span>
    339. 

  339.         </div>
    340. 

  340.       </div>
    341. 

  341.       <div class="pub-preview" id="pubPreview">
    342. 

  342.         <div class="empty" style="height:auto;">Live preview will appear here</div>
    343. 

  343.       </div>
    344. 

  344.     </div>
    345. 

  345.   </div>
    346. 

  346. </div>
    347. 

  347. 

  348. <!-- ═══ Create Repo Modal ═══ -->
    349. 

  349. <div class="modal-bg" id="createRepoModal">
    350. 

  350.   <div class="modal">
    351. 

  351.     <h3>New Repository</h3>
    352. 

  352.     <div class="field"><label>Name</label><input id="nrName" placeholder="my-project"></div>
    353. 

  353.     <div class="field"><label>Description</label><input id="nrDesc" placeholder="optional"></div>
    354. 

  354.     <div class="field"><label><input type="checkbox" id="nrPrivate" style="width:auto;margin-right:4px;">Private</label></div>
    355. 

  355.     <div class="actions">
    356. 

  356.       <button onclick="hideModal('createRepoModal')">Cancel</button>
    357. 

  357.       <button class="primary" onclick="createRepo()">Create</button>
    358. 

  358.     </div>
    359. 

  359.   </div>
    360. 

  360. </div>
    361. 

  361. 

  362. <!-- ═══ Quick Setup Modal ═══ -->
    363. 

  363. <div class="modal-bg" id="quickSetupModal">
    364. 

  364.   <div class="modal">
    365. 

  365.     <h3>Quick Setup + Push</h3>
    366. 

  366.     <p style="font-size:11px;color:var(--text2);margin-bottom:10px;">Create repo, init git, commit all, and push in one step.</p>
    367. 

  367.     <div class="field"><label>Repo Name (owner/name)</label><input id="qsName" placeholder="GeneralNoCodeDP/my-project"></div>
    368. 

  368.     <div class="field"><label>Description</label><input id="qsDesc"></div>
    369. 

  369.     <div class="field"><label>Commit Message</label><input id="qsMsg" value="Initial commit"></div>
    370. 

  370.     <div class="field"><label><input type="checkbox" id="qsPrivate" style="width:auto;margin-right:4px;">Private</label></div>
    371. 

  371.     <div class="actions">
    372. 

  372.       <button onclick="hideModal('quickSetupModal')">Cancel</button>
    373. 

  373.       <button class="primary" onclick="execQuickSetup()">Go</button>
    374. 

  374.     </div>
    375. 

  375.   </div>
    376. 

  376. </div>
    377. 

  377. 

  378. <script>
    379. 

  379. const vscode = acquireVsCodeApi();
    380. 

  380. let S = { repo: null, repos: [], aiReady: false, pubContent: '', pendingCallbacks: {} };
    381. 

  381. let msgId = 0;
    382. 

  382. 

  383. // ─── Bridge ──────────────────────────────────
    384. 

  384. 

  385. function send(command, args = {}) {
    386. 

  386.   return new Promise((resolve, reject) => {
    387. 

  387.     const id = ++msgId;
    388. 

  388.     S.pendingCallbacks[id] = { resolve, reject };
    389. 

  389.     vscode.postMessage({ id, command, args });
    390. 

  390.   });
    391. 

  391. }
    392. 

  392. 

  393. window.addEventListener('message', e => {
    394. 

  394.   const msg = e.data;
    395. 

  395.   // Async response
    396. 

  396.   if (msg.id && S.pendingCallbacks[msg.id]) {
    397. 

  397.     const cb = S.pendingCallbacks[msg.id];
    398. 

  398.     delete S.pendingCallbacks[msg.id];
    399. 

  399.     if (msg.error) cb.reject(new Error(msg.error));
    400. 

  400.     else cb.resolve(msg.data);
    401. 

  401.     return;
    402. 

  402.   }
    403. 

  403.   // Push events
    404. 

  404.   if (msg.command === 'notifUpdate') {
    405. 

  405.     const n = Array.isArray(msg.data) ? msg.data.length : 0;
    406. 

  406.     setBadge(n);
    407. 

  407.   }
    408. 

  408. });
    409. 

  409. 

  410. // ─── Tabs ────────────────────────────────────
    411. 

  411. 

  412. function switchTab(t) {
    413. 

  413.   document.querySelectorAll('.tab').forEach(el => el.classList.toggle('active', el.dataset.t === t));
    414. 

  414.   document.querySelectorAll('.panel').forEach(el => el.classList.toggle('active', el.id === `p-${t}`));
    415. 

  415.   if (t === 'notifications') loadNotifs();
    416. 

  416.   if (t === 'publish') populateRepoSelect();
    417. 

  417. }
    418. 

  418. 

  419. // ─── Init ────────────────────────────────────
    420. 

  420. 

  421. async function init() {
    422. 

  422.   try {
    423. 

  423.     const s = await send('status');
    424. 

  424.     document.getElementById('hDot').className = s.ok ? 'dot ok' : 'dot err';
    425. 

  425.     document.getElementById('hUser').textContent = s.ok ? s.user : 'Not authenticated';
    426. 

  426.     S.aiReady = s.aiReady;
    427. 

  427.   } catch (e) {
    428. 

  428.     document.getElementById('hDot').className = 'dot err';
    429. 

  429.     document.getElementById('hUser').textContent = 'Error';
    430. 

  430.   }
    431. 

  431.   loadRepos();
    432. 

  432. }
    433. 

  433. 

  434. function setBadge(n) {
    435. 

  435.   const b = document.getElementById('hBadge');
    436. 

  436.   b.textContent = n;
    437. 

  437.   b.className = n > 0 ? 'badge' : 'badge zero';
    438. 

  438. }
    439. 

  439. 

  440. function showModal(id) { document.getElementById(id).classList.add('show'); }
    441. 

  441. function hideModal(id) { document.getElementById(id).classList.remove('show'); }
    442. 

  442. 

  443. // ─── Repos ───────────────────────────────────
    444. 

  444. 

  445. const LC = { JavaScript:'#f1e05a', TypeScript:'#3178c6', Python:'#3572a5', Go:'#00add8', Rust:'#dea584', HTML:'#e34c26', CSS:'#563d7c', Shell:'#89e051', Vue:'#41b883' };
    446. 

  446. 

  447. async function loadRepos() {
    448. 

  448.   const g = document.getElementById('repoGrid');
    449. 

  449.   g.innerHTML = '<div class="loading"><span class="spinner"></span> Loading...</div>';
    450. 

  450.   try {
    451. 

  451.     const repos = await send('listRepos');
    452. 

  452.     S.repos = repos || [];
    453. 

  453.     if (!repos?.length) { g.innerHTML = '<div class="empty">No repos</div>'; return; }
    454. 

  454.     g.innerHTML = repos.map(r => {
    455. 

  455.       const nwo = r.owner.login + '/' + r.name;
    456. 

  456.       const l = r.primaryLanguage?.name || '';
    457. 

  457.       const c = LC[l] || '#858585';
    458. 

  458.       return `<div class="repo-card${S.repo===nwo?' sel':''}" onclick="selectRepo('${nwo}')" data-r="${nwo}">
    459. 

  459.         <h3>${r.name}</h3>
    460. 

  460.         <div class="desc">${esc(r.description||'No description')}</div>
    461. 

  461.         <div class="repo-meta">
    462. 

  462.           ${l?`<span><span class="lang-dot" style="background:${c}"></span>${l}</span>`:''}
    463. 

  463.           <span>&#9733;${r.stargazerCount}</span>
    464. 

  464.           <span>${timeAgo(r.updatedAt)}</span>
    465. 

  465.           ${r.isPrivate?'<span class="tag-private">Private</span>':''}
    466. 

  466.         </div></div>`;
    467. 

  467.     }).join('');
    468. 

  468.   } catch (e) { g.innerHTML = `<div class="empty">Error: ${esc(e.message)}</div>`; }
    469. 

  469. }
    470. 

  470. 

  471. function selectRepo(nwo) {
    472. 

  472.   S.repo = nwo;
    473. 

  473.   document.querySelectorAll('.repo-card').forEach(c => c.classList.toggle('sel', c.dataset.r === nwo));
    474. 

  474.   document.getElementById('iRepoLabel').textContent = nwo;
    475. 

  475.   document.getElementById('pRepoLabel').textContent = nwo;
    476. 

  476.   loadIssues(); loadPRs();
    477. 

  477. }
    478. 

  478. 

  479. async function createRepo() {
    480. 

  480.   const name = document.getElementById('nrName').value.trim();
    481. 

  481.   if (!name) return;
    482. 

  482.   try {
    483. 

  483.     await send('createRepo', { name, description: document.getElementById('nrDesc').value.trim(), isPrivate: document.getElementById('nrPrivate').checked });
    484. 

  484.     hideModal('createRepoModal');
    485. 

  485.     document.getElementById('nrName').value = '';
    486. 

  486.     document.getElementById('nrDesc').value = '';
    487. 

  487.     loadRepos();
    488. 

  488.   } catch (e) { alert('Error: ' + e.message); }
    489. 

  489. }
    490. 

  490. 

  491. // ─── Issues ──────────────────────────────────
    492. 

  492. 

  493. async function loadIssues() {
    494. 

  494.   if (!S.repo) return;
    495. 

  495.   const el = document.getElementById('iList');
    496. 

  496.   el.innerHTML = '<div class="loading"><span class="spinner"></span></div>';
    497. 

  497.   try {
    498. 

  498.     const items = await send('listIssues', { repo: S.repo, state: document.getElementById('iState').value });
    499. 

  499.     if (!items?.length) { el.innerHTML = '<div class="empty">No issues</div>'; return; }
    500. 

  500.     el.innerHTML = items.map(i => `<div class="item-card" onclick="viewIssue(${i.number})">
    501. 

  501.       <div class="num">#${i.number}</div>
    502. 

  502.       <div class="title">${esc(i.title)}</div>
    503. 

  503.       <div class="meta"><span>${i.author?.login||'?'}</span><span>${timeAgo(i.createdAt)}</span><span>${i.comments||0} comments</span></div>
    504. 

  504.       ${(i.labels||[]).map(l=>`<span class="label-tag" style="background:${l.color?'#'+l.color+'33':'var(--bg3)'};color:${l.color?'#'+l.color:'var(--text2)'}">${esc(l.name)}</span>`).join('')}
    505. 

  505.     </div>`).join('');
    506. 

  506.   } catch (e) { el.innerHTML = `<div class="empty">${esc(e.message)}</div>`; }
    507. 

  507. }
    508. 

  508. 

  509. async function viewIssue(num) {
    510. 

  510.   const el = document.getElementById('iDetail');
    511. 

  511.   el.innerHTML = '<div class="loading"><span class="spinner"></span></div>';
    512. 

  512.   document.querySelectorAll('#iList .item-card').forEach(c => c.classList.toggle('sel', c.querySelector('.num')?.textContent === '#'+num));
    513. 

  513.   try {
    514. 

  514.     const d = await send('viewIssue', { repo: S.repo, number: num });
    515. 

  515.     const cm = d.commentList || [];
    516. 

  516.     el.innerHTML = `
    517. 

  517.       <div class="detail-header"><h2>${esc(d.title)} <span style="color:var(--text2);font-weight:400">#${d.number}</span></h2>
    518. 

  518.       <div class="meta"><span style="color:${d.state==='OPEN'?'var(--green)':'var(--purple)'}">${d.state}</span> &middot; ${d.author?.login||'?'} &middot; ${timeAgo(d.createdAt)}</div></div>
    519. 

  519.       <div class="detail-body">${renderMd(d.body||'(empty)')}</div>
    520. 

  520.       ${cm.length?cm.map(c=>`<div class="comment"><span class="author">${esc(c.author)}</span><span class="time">${timeAgo(c.createdAt)}</span><div class="body">${renderMd(c.body)}</div></div>`).join(''):''}
    521. 

  521.       <div class="reply-area"><textarea id="iReply" placeholder="Write a reply..."></textarea>
    522. 

  522.       <div class="reply-actions">
    523. 

  523.         ${S.aiReady?`<button class="ai" onclick="aiDraft('issue',${num})">AI Draft</button>`:''}<span id="iConf"></span><span style="flex:1"></span>
    524. 

  524.         <button class="primary" onclick="postIssueComment(${num})">Reply</button>
    525. 

  525.         ${d.state==='OPEN'?`<button class="danger" onclick="doCloseIssue(${num})">Close</button>`:`<button onclick="doReopenIssue(${num})">Reopen</button>`}
    526. 

  526.       </div></div>`;
    527. 

  527.   } catch (e) { el.innerHTML = `<div class="empty">${esc(e.message)}</div>`; }
    528. 

  528. }
    529. 

  529. 

  530. async function postIssueComment(num) {
    531. 

  531.   const body = document.getElementById('iReply').value.trim();
    532. 

  532.   if (!body) return;
    533. 

  533.   await send('commentIssue', { repo: S.repo, number: num, body });
    534. 

  534.   viewIssue(num);
    535. 

  535. }
    536. 

  536. async function doCloseIssue(num) { await send('closeIssue', { repo: S.repo, number: num }); viewIssue(num); loadIssues(); }
    537. 

  537. async function doReopenIssue(num) { await send('reopenIssue', { repo: S.repo, number: num }); viewIssue(num); loadIssues(); }
    538. 

  538. 

  539. // ─── PRs ─────────────────────────────────────
    540. 

  540. 

  541. async function loadPRs() {
    542. 

  542.   if (!S.repo) return;
    543. 

  543.   const el = document.getElementById('pList');
    544. 

  544.   el.innerHTML = '<div class="loading"><span class="spinner"></span></div>';
    545. 

  545.   try {
    546. 

  546.     const items = await send('listPRs', { repo: S.repo, state: document.getElementById('pState').value });
    547. 

  547.     if (!items?.length) { el.innerHTML = '<div class="empty">No PRs</div>'; return; }
    548. 

  548.     el.innerHTML = items.map(p => `<div class="item-card" onclick="viewPR(${p.number})">
    549. 

  549.       <div class="num">#${p.number}${p.isDraft?' <span style="color:var(--text2)">(Draft)</span>':''}</div>
    550. 

  550.       <div class="title">${esc(p.title)}</div>
    551. 

  551.       <div class="meta"><span>${p.author?.login||'?'}</span><span>${p.headRefName} &rarr; ${p.baseRefName}</span><span>${timeAgo(p.createdAt)}</span></div>
    552. 

  552.     </div>`).join('');
    553. 

  553.   } catch (e) { el.innerHTML = `<div class="empty">${esc(e.message)}</div>`; }
    554. 

  554. }
    555. 

  555. 

  556. async function viewPR(num) {
    557. 

  557.   const el = document.getElementById('pDetail');
    558. 

  558.   el.innerHTML = '<div class="loading"><span class="spinner"></span></div>';
    559. 

  559.   document.querySelectorAll('#pList .item-card').forEach(c => c.classList.toggle('sel', c.querySelector('.num')?.textContent?.startsWith('#'+num)));
    560. 

  560.   try {
    561. 

  561.     const d = await send('viewPR', { repo: S.repo, number: num });
    562. 

  562.     const cm = d.commentList || [];
    563. 

  563.     const sc = d.state==='OPEN'?'var(--green)':d.state==='MERGED'?'var(--purple)':'var(--red)';
    564. 

  564.     el.innerHTML = `
    565. 

  565.       <div class="detail-header"><h2>${esc(d.title)} <span style="color:var(--text2);font-weight:400">#${d.number}</span></h2>
    566. 

  566.       <div class="meta"><span style="color:${sc}">${d.state}</span> &middot; ${d.author?.login||'?'} &middot; ${d.headRefName}&rarr;${d.baseRefName} &middot; +${d.additions||0} -${d.deletions||0} (${d.changedFiles||0} files)</div></div>
    567. 

  567.       <div class="detail-body">${renderMd(d.body||'(empty)')}</div>
    568. 

  568.       ${cm.length?cm.map(c=>`<div class="comment"><span class="author">${esc(c.author)}</span><span class="time">${timeAgo(c.createdAt)}</span><div class="body">${renderMd(c.body)}</div></div>`).join(''):''}
    569. 

  569.       <div class="reply-area"><textarea id="pReply" placeholder="Write a comment..."></textarea>
    570. 

  570.       <div class="reply-actions">
    571. 

  571.         ${S.aiReady?`<button class="ai" onclick="aiDraft('pr',${num})">AI Draft</button>`:''}<span id="pConf"></span><span style="flex:1"></span>
    572. 

  572.         <button class="primary" onclick="postPRComment(${num})">Comment</button>
    573. 

  573.         ${d.state==='OPEN'?`<button class="primary" onclick="doMergePR(${num})">Merge</button><button class="danger" onclick="doClosePR(${num})">Close</button>`:''}
    574. 

  574.       </div></div>`;
    575. 

  575.   } catch (e) { el.innerHTML = `<div class="empty">${esc(e.message)}</div>`; }
    576. 

  576. }
    577. 

  577. 

  578. async function postPRComment(num) { const b = document.getElementById('pReply').value.trim(); if (!b) return; await send('commentPR', { repo: S.repo, number: num, body: b }); viewPR(num); }
    579. 

  579. async function doMergePR(num) { await send('mergePR', { repo: S.repo, number: num, method: 'merge' }); viewPR(num); loadPRs(); }
    580. 

  580. async function doClosePR(num) { await send('closePR', { repo: S.repo, number: num }); viewPR(num); loadPRs(); }
    581. 

  581. 

  582. // ─── AI Draft ────────────────────────────────
    583. 

  583. 

  584. async function aiDraft(type, num) {
    585. 

  585.   const tid = type==='issue'?'iReply':'pReply';
    586. 

  586.   const cid = type==='issue'?'iConf':'pConf';
    587. 

  587.   const ta = document.getElementById(tid);
    588. 

  588.   const conf = document.getElementById(cid);
    589. 

  589.   ta.value = 'Generating...'; ta.disabled = true;
    590. 

  590.   conf.innerHTML = '<span class="spinner"></span>';
    591. 

  591.   try {
    592. 

  592.     const detail = await send(type==='issue'?'viewIssue':'viewPR', { repo: S.repo, number: num });
    593. 

  593.     const res = await send('aiDraft', { type, title: detail.title, body: detail.body, comments: detail.commentList, repoName: S.repo });
    594. 

  594.     ta.value = res.draft;
    595. 

  595.     conf.innerHTML = `<span class="confidence ${res.confidence}">${res.confidence}</span>`;
    596. 

  596.   } catch (e) { ta.value = ''; conf.textContent = ''; alert('AI error: '+e.message); }
    597. 

  597.   ta.disabled = false; ta.focus();
    598. 

  598. }
    599. 

  599. 

  600. // ─── Notifications ───────────────────────────
    601. 

  601. 

  602. const NI = { Issue:'<span style="color:var(--green)">&#9679;</span>', PullRequest:'<span style="color:var(--purple)">&#10542;</span>', Release:'<span style="color:var(--accent)">&#9830;</span>' };
    603. 

  603. 

  604. async function loadNotifs() {
    605. 

  605.   const el = document.getElementById('notifList');
    606. 

  606.   el.innerHTML = '<div class="loading"><span class="spinner"></span></div>';
    607. 

  607.   try {
    608. 

  608.     const items = await send('listNotifications');
    609. 

  609.     setBadge(items?.length || 0);
    610. 

  610.     if (!items?.length) { el.innerHTML = '<div class="empty">No unread notifications</div>'; return; }
    611. 

  611.     el.innerHTML = items.map(n => `<div class="notif-item">
    612. 

  612.       <div class="icon">${NI[n.type]||'&#9679;'}</div>
    613. 

  613.       <div class="info"><div class="repo">${esc(n.repo)}</div><div class="title">${esc(n.title)}</div><div class="reason">${n.reason} &middot; ${timeAgo(n.updatedAt)}</div></div>
    614. 

  614.       <button onclick="markRead('${n.id}',this.parentElement)">Read</button>
    615. 

  615.     </div>`).join('');
    616. 

  616.   } catch (e) { el.innerHTML = `<div class="empty">${esc(e.message)}</div>`; }
    617. 

  617. }
    618. 

  618. 

  619. async function markRead(id, el) { await send('markRead', { id }); if (el) el.style.opacity = '0.3'; }
    620. 

  620. async function markAllRead() { await send('markAllRead'); loadNotifs(); }
    621. 

  621. 

  622. // ─── Push ────────────────────────────────────
    623. 

  623. 

  624. async function pickFolder() { const p = await send('pickFolder'); if (p) document.getElementById('pushDir').value = p; }
    625. 

  625. async function useWorkspace() { const p = await send('getWorkspaceDir'); if (p) document.getElementById('pushDir').value = p; }
    626. 

  626. 

  627. async function checkGit() {
    628. 

  628.   const dir = document.getElementById('pushDir').value.trim(); if (!dir) return;
    629. 

  629.   const el = document.getElementById('gitInfo');
    630. 

  630.   el.innerHTML = '<div class="loading"><span class="spinner"></span></div>';
    631. 

  631.   try {
    632. 

  632.     const s = await send('gitStatus', { dir });
    633. 

  633.     el.innerHTML = `<div class="branch">${esc(s.branch)}</div>
    634. 

  634.       <div class="counts">${s.ahead>0?`<span style="color:var(--green)">${s.ahead} ahead</span> `:''}${s.behind>0?`<span style="color:var(--red)">${s.behind} behind</span> `:''}${s.ahead===0&&s.behind===0?'Up to date':''}</div>
    635. 

  635.       ${s.status?`<pre>${esc(s.status)}</pre>`:'<pre style="color:var(--text2)">Clean</pre>'}`;
    636. 

  636.     document.getElementById('pushBtn').disabled = false;
    637. 

  637.   } catch (e) { el.innerHTML = `<span style="color:var(--red)">${esc(e.message)}</span>`; document.getElementById('pushBtn').disabled = true; }
    638. 

  638. }
    639. 

  639. 

  640. async function doPush() {
    641. 

  641.   const dir = document.getElementById('pushDir').value.trim(); if (!dir) return;
    642. 

  642.   const log = document.getElementById('pushLog');
    643. 

  643.   log.style.display = 'block'; log.innerHTML = 'Pushing...\n';
    644. 

  644.   document.getElementById('pushBtn').disabled = true;
    645. 

  645.   try {
    646. 

  646.     const r = await send('gitPush', { dir });
    647. 

  647.     log.innerHTML += `<span class="ok">${esc(typeof r==='string'?r:r?.message||'Done')}</span>\n`;
    648. 

  648.   } catch (e) { log.innerHTML += `<span class="err">Error: ${esc(e.message)}</span>\n`; }
    649. 

  649.   document.getElementById('pushBtn').disabled = false;
    650. 

  650.   checkGit();
    651. 

  651. }
    652. 

  652. 

  653. function doQuickSetup() {
    654. 

  654.   const dir = document.getElementById('pushDir').value.trim();
    655. 

  655.   if (!dir) { alert('Set directory first'); return; }
    656. 

  656.   const n = dir.split('/').pop();
    657. 

  657.   document.getElementById('qsName').value = `GeneralNoCodeDP/${n}`;
    658. 

  658.   showModal('quickSetupModal');
    659. 

  659. }
    660. 

  660. 

  661. async function execQuickSetup() {
    662. 

  662.   const dir = document.getElementById('pushDir').value.trim();
    663. 

  663.   const log = document.getElementById('pushLog');
    664. 

  664.   log.style.display = 'block'; log.innerHTML = 'Setting up...\n';
    665. 

  665.   hideModal('quickSetupModal');
    666. 

  666.   try {
    667. 

  667.     const r = await send('quickSetup', {
    668. 

  668.       dir,
    669. 

  669.       createRepo: true,
    670. 

  670.       repoName: document.getElementById('qsName').value.trim(),
    671. 

  671.       description: document.getElementById('qsDesc').value.trim(),
    672. 

  672.       isPrivate: document.getElementById('qsPrivate').checked,
    673. 

  673.       commitMessage: document.getElementById('qsMsg').value.trim() || 'Initial commit'
    674. 

  674.     });
    675. 

  675.     log.innerHTML += `<span class="ok">${esc(r?.message||'Done!')}</span>\n`;
    676. 

  676.   } catch (e) { log.innerHTML += `<span class="err">Error: ${esc(e.message)}</span>\n`; }
    677. 

  677.   checkGit();
    678. 

  678. }
    679. 

  679. 

  680. // ─── Publish ─────────────────────────────────
    681. 

  681. 

  682. function populateRepoSelect() {
    683. 

  683.   const sel = document.getElementById('pubRepo');
    684. 

  684.   const cur = sel.value;
    685. 

  685.   sel.innerHTML = '<option value="">Target Repo</option>' + S.repos.map(r => {
    686. 

  686.     const nwo = r.owner.login+'/'+r.name;
    687. 

  687.     return `<option value="${nwo}"${nwo===cur?' selected':''}>${nwo}</option>`;
    688. 

  688.   }).join('');
    689. 

  689. }
    690. 

  690. 

  691. function onRepoChange() {
    692. 

  692.   // Auto-load existing README when repo changes
    693. 

  693. }
    694. 

  694. 

  695. async function fetchExistingReadme() {
    696. 

  696.   const repo = document.getElementById('pubRepo').value;
    697. 

  697.   if (!repo) { alert('Select a repo first'); return; }
    698. 

  698.   const editor = document.getElementById('pubEditor');
    699. 

  699.   const res = document.getElementById('pubResult');
    700. 

  700.   res.innerHTML = '<span class="spinner"></span> Loading...';
    701. 

  701.   try {
    702. 

  702.     const data = await send('fetchReadme', { repo });
    703. 

  703.     if (data.content) {
    704. 

  704.       editor.value = data.content;
    705. 

  705.       updatePreview();
    706. 

  706.       res.innerHTML = '<span style="color:var(--green)">Loaded existing README</span>';
    707. 

  707.     } else {
    708. 

  708.       res.innerHTML = '<span style="color:var(--text2)">No existing README found</span>';
    709. 

  709.     }
    710. 

  710.   } catch (e) { res.innerHTML = `<span style="color:var(--red)">Error: ${esc(e.message)}</span>`; }
    711. 

  711. }
    712. 

  712. 

  713. function updatePreview() {
    714. 

  714.   const md = document.getElementById('pubEditor').value;
    715. 

  715.   const el = document.getElementById('pubPreview');
    716. 

  716.   if (!md.trim()) { el.innerHTML = '<div class="empty" style="height:auto;">Live preview will appear here</div>'; return; }
    717. 

  717.   el.innerHTML = renderFullMd(md);
    718. 

  718. }
    719. 

  719. 

  720. // ─── Toolbar Actions ────────────────────────
    721. 

  721. 

  722. function getEditor() { return document.getElementById('pubEditor'); }
    723. 

  723. 

  724. function tbWrap(before, after) {
    725. 

  725.   const ta = getEditor();
    726. 

  726.   const start = ta.selectionStart, end = ta.selectionEnd;
    727. 

  727.   const sel = ta.value.substring(start, end) || 'text';
    728. 

  728.   ta.value = ta.value.substring(0, start) + before + sel + after + ta.value.substring(end);
    729. 

  729.   ta.selectionStart = start + before.length;
    730. 

  730.   ta.selectionEnd = start + before.length + sel.length;
    731. 

  731.   ta.focus(); updatePreview();
    732. 

  732. }
    733. 

  733. 

  734. function tbPrefix(prefix) {
    735. 

  735.   const ta = getEditor();
    736. 

  736.   const start = ta.selectionStart;
    737. 

  737.   // Find line start
    738. 

  738.   const lineStart = ta.value.lastIndexOf('\n', start - 1) + 1;
    739. 

  739.   ta.value = ta.value.substring(0, lineStart) + prefix + ta.value.substring(lineStart);
    740. 

  740.   ta.selectionStart = ta.selectionEnd = start + prefix.length;
    741. 

  741.   ta.focus(); updatePreview();
    742. 

  742. }
    743. 

  743. 

  744. function tbLink() {
    745. 

  745.   const ta = getEditor();
    746. 

  746.   const sel = ta.value.substring(ta.selectionStart, ta.selectionEnd) || 'link text';
    747. 

  747.   const start = ta.selectionStart;
    748. 

  748.   const ins = `[${sel}](url)`;
    749. 

  749.   ta.value = ta.value.substring(0, start) + ins + ta.value.substring(ta.selectionEnd);
    750. 

  750.   // Select "url" for easy replacement
    751. 

  751.   ta.selectionStart = start + sel.length + 3;
    752. 

  752.   ta.selectionEnd = start + sel.length + 6;
    753. 

  753.   ta.focus(); updatePreview();
    754. 

  754. }
    755. 

  755. 

  756. function tbImage() {
    757. 

  757.   const ta = getEditor();
    758. 

  758.   const start = ta.selectionStart;
    759. 

  759.   const ins = '![alt text](image-url)';
    760. 

  760.   ta.value = ta.value.substring(0, start) + ins + ta.value.substring(ta.selectionEnd);
    761. 

  761.   ta.selectionStart = start + 12;
    762. 

  762.   ta.selectionEnd = start + 21;
    763. 

  763.   ta.focus(); updatePreview();
    764. 

  764. }
    765. 

  765. 

  766. function tbCodeBlock() {
    767. 

  767.   const ta = getEditor();
    768. 

  768.   const sel = ta.value.substring(ta.selectionStart, ta.selectionEnd) || 'code here';
    769. 

  769.   const start = ta.selectionStart;
    770. 

  770.   const ins = '```\n' + sel + '\n```';
    771. 

  771.   ta.value = ta.value.substring(0, start) + ins + ta.value.substring(ta.selectionEnd);
    772. 

  772.   ta.selectionStart = start + 4;
    773. 

  773.   ta.selectionEnd = start + 4 + sel.length;
    774. 

  774.   ta.focus(); updatePreview();
    775. 

  775. }
    776. 

  776. 

  777. function tbTable() {
    778. 

  778.   const ta = getEditor();
    779. 

  779.   const start = ta.selectionStart;
    780. 

  780.   const ins = '\n| Column 1 | Column 2 | Column 3 |\n|----------|----------|----------|\n| Cell 1   | Cell 2   | Cell 3   |\n| Cell 4   | Cell 5   | Cell 6   |\n';
    781. 

  781.   ta.value = ta.value.substring(0, start) + ins + ta.value.substring(ta.selectionEnd);
    782. 

  782.   ta.selectionStart = start + 3;
    783. 

  783.   ta.selectionEnd = start + 11;
    784. 

  784.   ta.focus(); updatePreview();
    785. 

  785. }
    786. 

  786. 

  787. // ─── Image Upload ───────────────────────────
    788. 

  788. 

  789. async function tbUploadImage() {
    790. 

  790.   const repo = document.getElementById('pubRepo').value;
    791. 

  791.   if (!repo) { alert('Select a target repo first — images will be uploaded there'); return; }
    792. 

  792.   const status = document.getElementById('imgStatus');
    793. 

  793.   status.textContent = 'Picking image...';
    794. 

  794.   try {
    795. 

  795.     const img = await send('pickImage');
    796. 

  796.     if (!img) { status.textContent = ''; return; }
    797. 

  797.     status.textContent = `Uploading ${img.name} (${(img.size/1024).toFixed(1)}KB)...`;
    798. 

  798.     const filePath = `assets/images/${img.name}`;
    799. 

  799.     const result = await send('uploadImage', { repo, filePath, base64: img.base64, message: `Upload ${img.name}` });
    800. 

  800.     // Insert markdown image at cursor
    801. 

  801.     const ta = getEditor();
    802. 

  802.     const pos = ta.selectionStart;
    803. 

  803.     const imgMd = `![${img.name}](${result.url})\n`;
    804. 

  804.     ta.value = ta.value.substring(0, pos) + imgMd + ta.value.substring(ta.selectionEnd);
    805. 

  805.     ta.selectionStart = ta.selectionEnd = pos + imgMd.length;
    806. 

  806.     updatePreview();
    807. 

  807.     status.textContent = `Uploaded ${img.name}`;
    808. 

  808.     setTimeout(() => { status.textContent = ''; }, 3000);
    809. 

  809.   } catch (e) { status.textContent = `Error: ${e.message}`; }
    810. 

  810. }
    811. 

  811. 

  812. // ─── Publish Action ─────────────────────────
    813. 

  813. 

  814. async function doPublish() {
    815. 

  815.   const content = document.getElementById('pubEditor').value;
    816. 

  816.   if (!content.trim()) { alert('Write some content first'); return; }
    817. 

  817.   const repo = document.getElementById('pubRepo').value;
    818. 

  818.   if (!repo) { alert('Select a repo'); return; }
    819. 

  819.   const fpath = document.getElementById('pubPath').value.trim() || 'README.md';
    820. 

  820.   const msg = document.getElementById('pubMsg').value.trim() || 'Update file';
    821. 

  821.   const res = document.getElementById('pubResult');
    822. 

  822.   res.innerHTML = '<span class="spinner"></span> Publishing...';
    823. 

  823.   document.getElementById('pubBtn').disabled = true;
    824. 

  824.   try {
    825. 

  825.     await send('updateFile', { repo, content, path: fpath, message: msg });
    826. 

  826.     res.innerHTML = `<span style="color:var(--green)">Published ${esc(fpath)} to ${esc(repo)}</span>`;
    827. 

  827.   } catch (e) { res.innerHTML = `<span style="color:var(--red)">Error: ${esc(e.message)}</span>`; }
    828. 

  828.   document.getElementById('pubBtn').disabled = false;
    829. 

  829. }
    830. 

  830. 

  831. // ─── Utils ───────────────────────────────────
    832. 

  832. 

  833. function esc(s) { return s==null?'':String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
    834. 

  834. 

  835. function timeAgo(d) {
    836. 

  836.   if (!d) return '';
    837. 

  837.   const m = Math.floor((Date.now()-new Date(d))/60000);
    838. 

  838.   if (m<1) return 'just now'; if (m<60) return m+'m'; const h=Math.floor(m/60);
    839. 

  839.   if (h<24) return h+'h'; const dy=Math.floor(h/24); if (dy<30) return dy+'d';
    840. 

  840.   return new Date(d).toLocaleDateString();
    841. 

  841. }
    842. 

  842. 

  843. function renderMd(t) {
    844. 

  844.   if (!t) return '';
    845. 

  845.   let h = esc(t);
    846. 

  846.   h = h.replace(/```(\w*)\n([\s\S]*?)```/g,'<pre><code>$2</code></pre>');
    847. 

  847.   h = h.replace(/`([^`]+)`/g,'<code>$1</code>');
    848. 

  848.   h = h.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');
    849. 

  849.   h = h.replace(/\*(.+?)\*/g,'<em>$1</em>');
    850. 

  850.   h = h.replace(/^### (.+)$/gm,'<h4 style="margin:6px 0 3px">$1</h4>');
    851. 

  851.   h = h.replace(/^## (.+)$/gm,'<h3 style="margin:8px 0 4px">$1</h3>');
    852. 

  852.   h = h.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank">$1</a>');
    853. 

  853.   h = h.replace(/^- (.+)$/gm,'&bull; $1');
    854. 

  854.   h = h.replace(/\n/g,'<br>');
    855. 

  855.   return h;
    856. 

  856. }
    857. 

  857. 

  858. function renderFullMd(t) {
    859. 

  859.   if (!t) return '';
    860. 

  860.   let h = esc(t);
    861. 

  861.   // Code blocks (fenced)
    862. 

  862.   h = h.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
    863. 

  863.   // Inline code
    864. 

  864.   h = h.replace(/`([^`\n]+)`/g, '<code>$1</code>');
    865. 

  865.   // Images (before links)
    866. 

  866.   h = h.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
    867. 

  867.   // Links
    868. 

  868.   h = h.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
    869. 

  869.   // Bold + Italic
    870. 

  870.   h = h.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
    871. 

  871.   h = h.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    872. 

  872.   h = h.replace(/\*(.+?)\*/g, '<em>$1</em>');
    873. 

  873.   h = h.replace(/~~(.+?)~~/g, '<del>$1</del>');
    874. 

  874.   // Headings
    875. 

  875.   h = h.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
    876. 

  876.   h = h.replace(/^### (.+)$/gm, '<h3>$1</h3>');
    877. 

  877.   h = h.replace(/^## (.+)$/gm, '<h2>$1</h2>');
    878. 

  878.   h = h.replace(/^# (.+)$/gm, '<h1>$1</h1>');
    879. 

  879.   // Horizontal rule
    880. 

  880.   h = h.replace(/^---+$/gm, '<hr>');
    881. 

  881.   // Blockquote
    882. 

  882.   h = h.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
    883. 

  883.   // Tables
    884. 

  884.   h = h.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)+)/gm, (_, header, sep, body) => {
    885. 

  885.     const ths = header.split('|').filter(c=>c.trim()).map(c=>'<th>'+c.trim()+'</th>').join('');
    886. 

  886.     const rows = body.trim().split('\n').map(row => {
    887. 

  887.       const tds = row.split('|').filter(c=>c.trim()).map(c=>'<td>'+c.trim()+'</td>').join('');
    888. 

  888.       return '<tr>'+tds+'</tr>';
    889. 

  889.     }).join('');
    890. 

  890.     return '<table><thead><tr>'+ths+'</tr></thead><tbody>'+rows+'</tbody></table>';
    891. 

  891.   });
    892. 

  892.   // Unordered list
    893. 

  893.   h = h.replace(/^- (.+)$/gm, '<li>$1</li>');
    894. 

  894.   h = h.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
    895. 

  895.   // Ordered list
    896. 

  896.   h = h.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
    897. 

  897.   // Paragraphs: double newline
    898. 

  898.   h = h.replace(/\n\n/g, '</p><p>');
    899. 

  899.   // Single newlines (not inside block elements)
    900. 

  900.   h = h.replace(/\n/g, '<br>');
    901. 

  901.   // Clean up
    902. 

  902.   h = '<p>' + h + '</p>';
    903. 

  903.   h = h.replace(/<p>\s*<(h[1-4]|hr|pre|ul|ol|table|blockquote)/g, '<$1');
    904. 

  904.   h = h.replace(/<\/(h[1-4]|pre|ul|ol|table|blockquote)>\s*<\/p>/g, '</$1>');
    905. 

  905.   h = h.replace(/<p>\s*<\/p>/g, '');
    906. 

  906.   return h;
    907. 

  907. }
    908. 

  908. 

  909. // ─── Boot ────────────────────────────────────
    910. 

  910. init();
    911. 

  911. </script>
    912. 

  912. </body>
    913. 

  913. </html>
    914.