shadok-ai 0.2.48 → 0.2.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/public/index.html +38 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shadok-ai",
3
- "version": "0.2.48",
3
+ "version": "0.2.49",
4
4
  "main": "dist/session.js",
5
5
  "scripts": {
6
6
  "test": "node --import tsx --test test/*.ts .claude/skills/shadok-ai-agents/test/*.test.mjs",
package/public/index.html CHANGED
@@ -105,10 +105,38 @@
105
105
  }
106
106
  header .brand::before { content: "◆ "; }
107
107
  /* The brand name doubles as the cockpit's editable title: click to rename,
108
- Enter/blur commits, Escape cancels. Kept subtle until hovered. */
109
- header .brand-name { cursor: text; border-radius: 3px; padding: 0 3px; outline: none; }
110
- header .brand-name:hover { background: rgba(240, 168, 72, 0.14); }
111
- header .brand-name:focus { background: rgba(240, 168, 72, 0.22); cursor: text; }
108
+ Enter/blur commits, Escape cancels. A dashed outline + pencil on hover make
109
+ the affordance obvious; the outline turns solid amber while editing. */
110
+ header .brand-name {
111
+ cursor: pointer;
112
+ border-radius: 4px;
113
+ padding: 1px 5px;
114
+ outline: none;
115
+ border: 1px dashed transparent;
116
+ transition: background 0.12s, border-color 0.12s;
117
+ }
118
+ header .brand-name:hover {
119
+ background: rgba(240, 168, 72, 0.12);
120
+ border-color: rgba(240, 168, 72, 0.5);
121
+ }
122
+ header .brand.editing .brand-name,
123
+ header .brand-name:focus {
124
+ cursor: text;
125
+ background: rgba(240, 168, 72, 0.16);
126
+ border: 1px solid var(--amber);
127
+ }
128
+ /* Pencil cue: hidden until the brand is hovered, gone while editing. */
129
+ header .brand-edit {
130
+ margin-left: 4px;
131
+ font-size: 11px;
132
+ color: var(--amber);
133
+ cursor: pointer;
134
+ opacity: 0;
135
+ transition: opacity 0.12s;
136
+ }
137
+ header .brand:hover .brand-edit { opacity: 0.75; }
138
+ header .brand-edit:hover { opacity: 1; }
139
+ header .brand.editing .brand-edit { opacity: 0; pointer-events: none; }
112
140
  header .ver {
113
141
  font-family: var(--mono);
114
142
  font-size: 10px;
@@ -1273,7 +1301,7 @@
1273
1301
  <body>
1274
1302
 
1275
1303
  <header>
1276
- <span class="brand"><span class="brand-name" id="brandName" title="Click to rename this cockpit">shadok-ai</span> <span class="ver" id="verView" title="Running version"></span></span>
1304
+ <span class="brand"><span class="brand-name" id="brandName" title="Rename this cockpit">shadok-ai</span><span class="brand-edit" id="brandEdit" title="Rename this cockpit" aria-hidden="true">✎</span> <span class="ver" id="verView" title="Running version"></span></span>
1277
1305
  <span class="spacer"></span>
1278
1306
  <div class="gauge quota" id="quota5h" data-window="5h" title="5h rolling limit">
1279
1307
  <svg class="dial" viewBox="0 0 56 44" role="img" aria-label="5h rolling limit">
@@ -3712,8 +3740,11 @@
3712
3740
  // ── Rename the cockpit by clicking its name in the header ──────────────
3713
3741
  const brandNameEl = $("brandName");
3714
3742
  if (brandNameEl) {
3743
+ const brandEl = brandNameEl.closest(".brand");
3744
+ const brandEditEl = $("brandEdit");
3715
3745
  const startRename = () => {
3716
3746
  if (brandNameEl.isContentEditable) return;
3747
+ if (brandEl) brandEl.classList.add("editing");
3717
3748
  brandNameEl.contentEditable = "plaintext-only";
3718
3749
  brandNameEl.spellcheck = false;
3719
3750
  brandNameEl.focus();
@@ -3725,6 +3756,7 @@
3725
3756
  };
3726
3757
  const commitRename = async () => {
3727
3758
  if (!brandNameEl.isContentEditable) return;
3759
+ if (brandEl) brandEl.classList.remove("editing");
3728
3760
  brandNameEl.contentEditable = "false";
3729
3761
  // Collapse to one line: contenteditable can capture pasted newlines.
3730
3762
  const next = (brandNameEl.textContent || "").replace(/\s+/g, " ").trim().slice(0, 60);
@@ -3742,6 +3774,7 @@
3742
3774
  }
3743
3775
  };
3744
3776
  brandNameEl.addEventListener("click", startRename);
3777
+ if (brandEditEl) brandEditEl.addEventListener("click", startRename);
3745
3778
  brandNameEl.addEventListener("keydown", (e) => {
3746
3779
  if (e.key === "Enter") { e.preventDefault(); brandNameEl.blur(); }
3747
3780
  else if (e.key === "Escape") {