@happy-nut/monacori 0.1.2 → 0.1.3

package/dist/viewer.css

@@ -1,18 +1,18 @@
 
 :root {
   color-scheme: dark;
-  --bg: #2b2b2b;
-  --panel: #2b2b2b;
+  --bg: #161616;
+  --panel: #1b1b1b;
   --text: #a9b7c6;
   --muted: #808080;
   --border: #393b3d;
   --line: #313335;
-  --add: #2f3d2c;
-  --del: #4b3434;
-  --add-strong: #3d5238;
-  --del-strong: #6b4242;
+  --add: #16351f;
+  --del: #3f1d1d;
+  --add-strong: #1f5b34;
+  --del-strong: #6e2c2c;
   --active: #4a88c7;
-  --sidebar: #3c3f41;
+  --sidebar: #1c1c1c;
   --token-comment: #808080;
   --token-keyword: #cc7832;
   --token-string: #6a8759;
@@ -127,6 +127,10 @@ body {
 }
 .tab.active, .plain-button:hover { border-color: var(--active); color: var(--active); }
 .hidden { display: none !important; }
+/* IntelliJ-style git status on sidebar file names: untracked(new)=red, modified=blue, staged(git add)=green. */
+.vcs-new.source-link .path, .vcs-new.change-row .change-name { color: #d36c6c; }
+.vcs-edited.source-link .path, .vcs-edited.change-row .change-name { color: #6c9fd4; }
+.vcs-staged.source-link .path, .vcs-staged.change-row .change-name { color: #7faf6b; }
 .sidebar-footer {
   flex: 0 0 auto;
   padding: 8px 12px;
@@ -138,10 +142,9 @@ body {
   font-size: 11px;
   color: var(--muted);
 }
-.sidebar-footer .app-version { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-footer .app-version { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .app-update-flag { color: var(--active); font-weight: 600; cursor: pointer; white-space: nowrap; }
 .settings-btn {
-  margin-left: auto;
   flex: none;
   border: 1px solid transparent;
   border-radius: 6px;
@@ -152,7 +155,7 @@ body {
   padding: 3px 6px;
   cursor: pointer;
 }
-.settings-btn:hover { color: var(--active); border-color: var(--border); }
+.settings-btn:hover { color: var(--text); background: color-mix(in srgb, var(--active) 12%, transparent); }
 .app-info {
   position: fixed;
   left: 12px;
@@ -174,24 +177,58 @@ body {
 .app-info-head .app-info-ver { color: var(--muted); font-weight: 500; }
 .app-info-status { color: var(--muted); margin-bottom: 10px; }
 .app-info-status.has-update { color: var(--active); font-weight: 600; }
-.app-info-cmd { display: flex; align-items: center; gap: 6px; }
-.app-info-cmd code {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 5px 8px;
-  border-radius: 6px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  font: 11px Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  color: var(--text);
-}
-.app-info-cmd .plain-button { padding: 5px 9px; font-size: 11px; }
+.app-info-update { width: 100%; margin: 0 0 10px; border-color: var(--active); color: var(--active); font-weight: 600; }
+.app-info-update:hover { background: color-mix(in srgb, var(--active) 14%, transparent); color: var(--active); }
+.app-info-update:disabled { opacity: 0.55; cursor: default; }
 .app-info-keys { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
+
+/* Settings modal (Cmd+Shift+/ merge prompts, etc.) — sidebar categories + form, like a desktop app. */
+.settings-modal {
+  position: fixed; inset: 0; z-index: 70;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0, 0, 0, 0.6); padding: 32px;
+}
+.settings-modal.hidden { display: none; }
+.settings-panel {
+  display: flex;
+  width: 980px; max-width: 90vw; height: 700px; max-height: 88vh;
+  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
+  overflow: hidden; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
+}
+.settings-nav {
+  flex: 0 0 200px; padding: 16px 10px;
+  background: var(--sidebar); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 4px;
+}
+.settings-nav-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 8px; }
+.settings-cat { text-align: left; border: 0; background: transparent; color: var(--text); padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
+.settings-cat:hover { background: color-mix(in srgb, var(--active) 12%, transparent); }
+.settings-cat.active { background: color-mix(in srgb, var(--active) 20%, transparent); color: var(--active); font-weight: 600; }
+.settings-body { flex: 1 1 auto; min-width: 0; padding: 24px 28px; overflow: auto; }
+.settings-h { font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 6px; }
+.settings-ver { color: var(--muted); font-weight: 500; font-size: 0.62em; letter-spacing: 0.02em; }
+.settings-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
+.settings-label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
+.settings-textarea {
+  width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px;
+  background: var(--bg); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
+  font: 12px/1.55 ui-sans-serif, system-ui, sans-serif;
+}
+.settings-textarea:focus { outline: none; border-color: var(--active); }
+.settings-select {
+  width: auto; box-sizing: border-box;
+  background: var(--bg); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
+  font: 12px/1.55 ui-sans-serif, system-ui, sans-serif;
+}
+.settings-select:focus { outline: none; border-color: var(--active); }
+.settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
+.settings-saved { font-size: 12px; color: var(--active); }
 .app-info-keys-h { font-weight: 600; color: var(--text); margin-bottom: 8px; }
-.keys-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: center; }
+.keys-cat { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
+.app-info-keys .keys-cat:first-of-type { margin-top: 4px; }
+.keys-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: center; margin-bottom: 2px; }
 .keys-grid kbd {
   justify-self: start;
   font: 10px Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -299,6 +336,10 @@ body {
   -webkit-user-select: text;
   user-select: text;
 }
+/* Changed lines: lift the base text brighter than the gray context so additions/deletions read as
+   edits, not the same gray. hljs tokens keep their own colors; this only affects unhighlighted text. */
+td.d2h-ins:not(.d2h-code-side-linenumber),
+td.d2h-del:not(.d2h-code-side-linenumber) { color: #d8e0e8; }
 .d2h-code-line-prefix { -webkit-user-select: none; user-select: none; }
 .d2h-code-side-linenumber, .d2h-code-linenumber { -webkit-user-select: none; user-select: none; }
 .d2h-code-line-ctn .hljs-keyword,
@@ -547,6 +588,40 @@ h1 { margin: 0; font-size: 18px; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Files-mode tabs: one row of tabs above the source toolbar (open files, click to switch, × to close). */
+.source-tabs {
+  display: flex;
+  overflow-x: auto;
+  gap: 1px;
+  margin-bottom: 8px;
+  background: var(--sidebar);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  scrollbar-width: thin;
+}
+.source-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  max-width: 220px;
+  padding: 6px 8px 6px 12px;
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.source-tab:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
+.source-tab:hover { color: var(--text); }
+.source-tab.active { color: var(--text); background: var(--bg); box-shadow: inset 0 -2px 0 var(--active); }
+.source-tab-name { overflow: hidden; text-overflow: ellipsis; }
+.source-tab-close {
+  flex: none; border: 0; background: transparent; color: var(--muted);
+  font-size: 14px; line-height: 1; padding: 0 3px; cursor: pointer; border-radius: 3px;
+}
+.source-tab-close:hover { background: var(--line); color: var(--text); }
 .source-body {
   border: 1px solid var(--border);
   border-radius: 8px;
@@ -578,6 +653,10 @@ h1 { margin: 0; font-size: 18px; }
    gracefully where unsupported. contain-intrinsic-size keeps the scrollbar stable. */
 .source-row { content-visibility: auto; contain-intrinsic-size: auto 19px; }
 .d2h-diff-table tr { content-visibility: auto; contain-intrinsic-size: auto 18px; }
+/* Comment/composer rows are tall and interactive (a textarea lives here). Skip-rendering them
+   with a tiny 18px placeholder made the browser re-evaluate their render state on every
+   keystroke, so typing in the composer stuttered — keep these rows always rendered. */
+.d2h-diff-table tr.mc-comment-row, .d2h-diff-table tr.mc-spacer-row { content-visibility: visible; contain-intrinsic-size: auto; }
 .source-row.search-hit .source-code { background: color-mix(in srgb, var(--active) 14%, transparent); }
 .source-row.changed-line .source-code { background: color-mix(in srgb, var(--active) 9%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--active) 55%, transparent); }
 .source-row.symbol-target .source-code {
@@ -601,6 +680,13 @@ h1 { margin: 0; font-size: 18px; }
 @keyframes cursor-blink {
   50% { opacity: 0; }
 }
+/* Keep the caret solid while it is actively moving (held arrow key / typing); blink only when idle. */
+.caret-busy .code-cursor { animation: none; opacity: 1; }
+/* Markdown/CSV rendered rows have no inline caret span — mark the whole cursor row instead. */
+.source-row.md-row.cursor-line .md-cell,
+.source-row.csv-row.cursor-line .csv-cell { background: color-mix(in srgb, #000 26%, transparent); }
+.source-row.md-row.cursor-line .num,
+.source-row.csv-row.cursor-line .num { color: var(--active); }
 .num {
   width: 58px;
   user-select: none;
@@ -631,29 +717,41 @@ h1 { margin: 0; font-size: 18px; }
 .mc-thread-cell { padding: 4px 12px 8px 64px; }
 .source-table .mc-thread-cell { padding: 4px 12px 8px 66px; }
 .mc-card {
-  border: 1px solid var(--border); border-left: 3px solid var(--muted);
-  border-radius: 6px; background: var(--panel); margin: 6px 0; max-width: 760px;
+  border: 1px solid var(--border);
+  border-radius: 8px; background: var(--panel); margin: 8px 0; max-width: 760px;
   font: 12px/1.5 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
 }
-.mc-card.mc-q { border-left-color: var(--token-number); }
-.mc-card.mc-c { border-left-color: var(--token-tag); }
-.mc-card-head { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-bottom: 1px solid var(--border); color: var(--muted); }
-.mc-kind { font-weight: 650; color: var(--text); }
-.mc-del { margin-left: auto; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
-.mc-del:hover { color: var(--del-strong); }
-.mc-card-body { padding: 7px 10px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
+/* Question vs change-request is a small colored pill on the kind label — no heavy left bar. */
+.mc-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; color: var(--muted); }
+.mc-kind {
+  font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
+  padding: 2px 8px; border-radius: 999px;
+  color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent);
+}
+.mc-card.mc-q .mc-kind { color: var(--token-number); background: color-mix(in srgb, var(--token-number) 18%, transparent); }
+.mc-card.mc-c .mc-kind { color: var(--token-tag); background: color-mix(in srgb, var(--token-tag) 18%, transparent); }
+.mc-del { margin-left: auto; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 1px 5px; border-radius: 5px; }
+.mc-del:hover { color: var(--del-strong); background: color-mix(in srgb, var(--del-strong) 16%, transparent); }
+.mc-card-body { padding: 2px 12px 11px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
 .mc-input {
   display: block; box-sizing: border-box; resize: vertical;
-  margin: 8px 10px; width: calc(100% - 20px); min-height: 56px;
+  margin: 0 10px 10px; width: calc(100% - 20px); min-height: 60px;
   background: var(--bg); color: var(--text);
-  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
-  font: 12px/1.5 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px;
+  font: 12px/1.55 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
 }
-.mc-input:focus { outline: none; border-color: var(--active); }
+.mc-input:focus { outline: none; border-color: var(--active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--active) 22%, transparent); }
 .mc-actions { display: flex; align-items: center; gap: 8px; padding: 0 10px 9px; }
 .mc-btn { background: var(--active); color: #fff; border: 0; border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
 .mc-btn:hover { filter: brightness(1.1); }
 .mc-btn.mc-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
+/* Terminal-send buttons in the merged modal: green to read as "send to the live session", with a clear
+   focus ring so arrow-key selection between split panes is visible. */
+.mc-send-term { background: #2f8f46; }
+.mc-send-term:focus, .mc-send-term:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
 .mc-hint { color: var(--muted); font-size: 11px; }
 .mc-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: min(10vh, 80px); background: color-mix(in srgb, #000 32%, transparent); }
 .mc-modal.hidden { display: none; }
@@ -937,3 +1035,60 @@ h1 { margin: 0; font-size: 18px; }
 .csv-head .csv-cell { background: var(--line); color: #d7e0ea; font-weight: 650; }
 .csv-row:nth-child(even) .csv-cell { background: rgba(255, 255, 255, 0.018); }
 .csv-empty { color: var(--muted); font-style: italic; padding: 16px; }
+
+/* --- Integrated terminal panel (Electron only): fixed to the content column's bottom, height-resizable.
+   The active border-top marks it as the merged-prompt send target ("highlighted while it's open"). --- */
+.terminal-panel {
+  position: fixed;
+  left: var(--sidebar-width, 280px);
+  right: 0;
+  bottom: 0;
+  height: var(--terminal-height, 320px);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  border-top: 2px solid var(--active);
+  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
+}
+.terminal-resizer { flex: none; height: 6px; margin-top: -3px; cursor: row-resize; }
+.terminal-resizer:hover, .terminal-resizer.resizing { background: var(--active); }
+.terminal-bar {
+  flex: none; display: flex; align-items: center; justify-content: space-between;
+  padding: 4px 10px; background: var(--sidebar); border-bottom: 1px solid var(--border);
+  font-size: 11px; color: var(--muted);
+}
+.terminal-title { letter-spacing: 0.08em; text-transform: uppercase; }
+.terminal-x { border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
+.terminal-x:hover { color: var(--text); }
+/* Split panes sit side by side (no tabs); the 1px gap shows the --border underneath as a divider. */
+.terminal-host { flex: 1 1 auto; min-height: 0; display: flex; gap: 1px; overflow: hidden; background: var(--border); }
+.terminal-pane { flex: 1 1 0; min-width: 0; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
+/* Per-pane name strip at the top; double-click or Cmd/Ctrl+Alt+R to rename inline. */
+.terminal-pane-label {
+  flex: none; padding: 2px 10px; font-size: 10px; letter-spacing: 0.04em;
+  color: var(--muted); background: var(--sidebar); border-bottom: 1px solid var(--border);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text;
+}
+.terminal-pane-label:hover { color: var(--text); }
+.terminal-pane-label[contenteditable="true"] { color: var(--text); background: var(--bg); outline: none; }
+.terminal-pane.is-active .terminal-pane-label { color: var(--text); }
+.terminal-pane-host { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 4px 0 4px 8px; }
+.terminal-pane.is-active { box-shadow: inset 2px 0 0 var(--active); }
+/* Pane-pick mode (merged "Send to terminal"): chosen pane ringed + full opacity, the rest dimmed. */
+.terminal-panel.send-mode .terminal-pane { transition: opacity 120ms ease; }
+.terminal-pane.is-dimmed { opacity: 0.3; }
+.terminal-pane.is-send-target { box-shadow: inset 0 0 0 2px var(--active); opacity: 1; position: relative; }
+/* Faint ⏎ hint floating over the chosen pane; it vanishes the instant Enter exits send mode. */
+.terminal-pane.is-send-target::after {
+  content: "⏎";
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  font-size: 56px; color: var(--active); opacity: 0.32; pointer-events: none; z-index: 5;
+}
+/* Send mode dims the rest of the app (sidebar + file/diff view) so only the terminal pops. */
+body.terminal-send-mode .sidebar,
+body.terminal-send-mode .content,
+body.terminal-send-mode .sidebar-resizer { opacity: 0.25; pointer-events: none; }
+/* Pad the content tail so it isn't hidden behind the fixed panel while the terminal is open. */
+body.terminal-open .content { padding-bottom: var(--terminal-height, 320px); }
+.terminal-toggle.is-active { color: var(--active); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happy-nut/monacori",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Validation control plane for AI-generated code changes.",
   "type": "module",
   "repository": {
@@ -50,8 +50,12 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@electron/rebuild": "^4.0.4",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
     "diff2html": "^3.4.56",
     "electron": "^42.4.1",
-    "highlight.js": "^11.11.1"
+    "highlight.js": "^11.11.1",
+    "node-pty": "^1.1.0"
   }
 }

package/scripts/patch-electron-name.mjs

@@ -1,4 +1,5 @@
 import { existsSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 
@@ -48,6 +49,13 @@ function main() {
       const fixed = pt.replace("MacOS/Electron", "MacOS/" + APP_NAME);
       if (fixed !== pt) writeFileSync(pathTxt, fixed);
     }
+    // Refresh LaunchServices so the Dock / Cmd+Tab show "monacori" instead of a cached "Electron".
+    // Without this, macOS keeps the previously-registered bundle name even after the plist is patched.
+    spawnSync(
+      "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister",
+      ["-f", appDir],
+      { stdio: "ignore" },
+    );
     console.log('monacori: branded Electron app + executable as "' + APP_NAME + '"');
   } catch {
     // read-only / permission-denied environments — harmless, this is a convenience step