@kevin5251984/guild 0.2.18 → 0.2.20

package/src/public/style.css

@@ -840,23 +840,27 @@ a.btn:active { transform: scale(var(--press)); }
   color: var(--text);
   font-size: 0.92rem;
 }
-.aux-head-row,
-.aux-row {
+#aux {
   display: grid;
-  grid-template-columns: minmax(8.5rem, 0.85fr) minmax(0, 1.5fr) auto;
-  gap: 0.55rem 1rem;
+  grid-template-columns: 10.5rem minmax(0, 1fr) max-content;
+  column-gap: 1rem;
   align-items: center;
-  padding: 0.8rem 0;
-  border-top: 1px solid var(--line);
 }
-.aux-head-row {
-  border-top: 0;
+.aux-head-row,
+.aux-row { display: contents; }
+.aux-head-row > span {
   padding: 0 0 0.45rem;
   font-size: 0.7rem;
   letter-spacing: 0.07em;
   text-transform: uppercase;
   color: #8b8b8b;
 }
+.aux-task,
+.aux-now,
+.aux-act {
+  padding: 0.8rem 0;
+  border-top: 1px solid var(--line);
+}
 .aux-task strong { display: block; font-size: 0.95rem; }
 .aux-row .tag {
   display: inline-block;
@@ -867,10 +871,12 @@ a.btn:active { transform: scale(var(--press)); }
   color: #aaa;
   font-size: 0.72rem;
 }
+.aux-now { min-width: 0; }
 .aux-now b {
   display: block;
   font-weight: 600;
   color: var(--text);
+  overflow-wrap: break-word;
 }
 .aux-now .id {
   display: block;
@@ -878,22 +884,37 @@ a.btn:active { transform: scale(var(--press)); }
   color: #8b8b8b;
   font-size: 0.75rem;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  overflow-wrap: anywhere;
 }
 .aux-act {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.55rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 .aux-act .badge { margin-left: 0; }
+.aux-act .linkish { margin: 0; }
 @media (max-width: 720px) {
+  #aux { display: block; }
   .aux-head-row { display: none; }
   .aux-row {
+    display: grid;
     grid-template-columns: 1fr;
     gap: 0.35rem;
+    padding: 0.8rem 0;
+    border-top: 1px solid var(--line);
+  }
+  .aux-task,
+  .aux-now,
+  .aux-act {
+    padding: 0;
+    border-top: 0;
+  }
+  .aux-act {
+    justify-content: flex-start;
+    flex-wrap: wrap;
   }
-  .aux-act { justify-content: flex-start; }
 }
 .linkish {
   background: none;
@@ -912,6 +933,38 @@ a.btn:active { transform: scale(var(--press)); }
   border-radius: 10px;
   letter-spacing: 0.08em;
 }
+.model-head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.7rem;
+  margin: 0.65rem 0 0.15rem;
+}
+.model-head label { margin: 0; }
+.model-head .sync-free {
+  margin: 0;
+  padding: 0.45rem 1.05rem;
+  min-height: 2.2rem;
+  min-width: 5.6rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  font-weight: 650;
+  letter-spacing: 0.03em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+}
+.model-head .sync-free .sync-ico {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+.model-head .sync-free:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--paper) 88%, white);
+  color: var(--ink);
+}
 .model-row {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
@@ -919,6 +972,10 @@ a.btn:active { transform: scale(var(--press)); }
   margin-top: 0.4rem;
   align-items: center;
 }
+.model-row:has(.probe-flag) {
+  grid-template-columns: 1fr 1fr auto auto;
+}
+.model-row .probe-flag { margin: 0; }
 .model-row button { margin: 0; min-width: 2.2rem; padding: 0.4rem 0.55rem; }
 .row-2 { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
 @media (min-width: 720px) {
@@ -1032,6 +1089,12 @@ dialog.pick.add-provider { width: min(32rem, 92vw); }
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   letter-spacing: 0.02em;
 }
+.provider-card input[readonly],
+.provider-card select:disabled {
+  opacity: 0.72;
+  cursor: default;
+  color: var(--muted);
+}
 .card-head {
   display: flex;
   justify-content: space-between;
@@ -1084,15 +1147,28 @@ body.app.bar-page .shell {
   padding: 0 0 0.4rem;
 }
 .rpg-screen {
+  display: grid;
+  grid-template-rows: auto auto;
   position: relative;
-  aspect-ratio: 16 / 9;
   overflow: hidden;
   background: #000;
   border: 4px solid #0a0a12;
   box-shadow: 8px 8px 0 #000;
   image-rendering: pixelated;
 }
-.rpg-scene { position: absolute; inset: 0; }
+body.bar-page .rpg-screen {
+  background: #1a1410;
+  border-color: #1a1410;
+  box-shadow: 8px 8px 0 #1a1410;
+}
+.rpg-scene {
+  grid-row: 1;
+  grid-column: 1;
+  position: relative;
+  aspect-ratio: 16 / 9;
+  min-height: 0;
+  overflow: hidden;
+}
 .rpg-scene[hidden] { display: none; }
 .rpg-bg {
   display: block;
@@ -1213,27 +1289,115 @@ body.app.bar-page .shell {
   background: #2a1c18;
   box-shadow: inset 0 0 0 4px #1a100c, inset 0 0 12px #e07020;
 }
-.inn-actors { position: absolute; inset: 0; z-index: 2; }
-.rpg-npc {
+.inn-actors {
+  position: absolute;
+  top: 56px;
+  left: 56px;
+  right: 56px;
+  bottom: 0;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-content: start;
+  justify-items: center;
+  gap: 12px 6px;
+  padding: 22px 0 10px;
+  overflow: auto;
+}
+.inn-station {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 88px;
+  z-index: 2;
+}
+.inn-desk {
+  order: 2;
+  position: relative;
+  width: 72px;
+  height: 20px;
+  margin-top: -8px;
+  background: #8a5a32;
+  box-shadow: 0 3px 0 #6a4020, 0 5px 0 #3a2414, inset 0 2px 0 #b07a48;
+  z-index: 1;
+}
+.inn-monitor {
+  position: absolute;
+  left: 50%;
+  bottom: 14px;
+  width: 28px;
+  height: 18px;
+  margin-left: -14px;
+  background: #1a1a1a;
+  box-shadow: 0 0 0 2px #111;
+}
+.inn-monitor::after {
+  content: "";
   position: absolute;
+  inset: 3px 3px 4px;
+  background: repeating-linear-gradient(#7ec8e8 0 2px, #4aa3c8 2px 4px);
+}
+.inn-station:has(.rpg-npc.vacant) .inn-monitor::after { background: #2a2a2a; }
+.rpg-npc {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
+  order: 1;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   color: inherit;
-  transform: translate(-50%, -88%);
   cursor: pointer;
   z-index: 2;
 }
-.rpg-npc canvas {
-  width: 48px;
+.rpg-npc .npc-bust,
+.rpg-npc .npc-blank {
+  width: 72px;
   height: 72px;
+  box-sizing: border-box;
+  border: 3px solid #1a1410;
+  background: #2a2118;
+  box-shadow: 2px 3px 0 #0006;
+}
+.rpg-npc .npc-bust {
+  object-fit: cover;
+  object-position: center 18%;
+  display: block;
   image-rendering: pixelated;
-  filter: drop-shadow(2px 3px 0 #0008);
-  animation: bob 1.1s steps(2) infinite;
+}
+.rpg-npc .npc-blank {
+  display: grid;
+  place-items: center;
+  color: #f0d9a0;
+  font-family: VT323, ui-monospace, monospace;
+  font-size: 28px;
+  line-height: 1;
+}
+.rpg-npc.drawing .npc-bust,
+.rpg-npc.drawing .npc-blank {
+  filter: brightness(1.25) drop-shadow(0 0 6px #f0d060);
+}
+.npc-state {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 4;
+  padding: 0 5px;
+  background: #f4ead7;
+  color: #1a1410;
+  font-family: VT323, ui-monospace, monospace;
+  font-size: 14px;
+  line-height: 1.2;
+  white-space: nowrap;
+  box-shadow: 2px 2px 0 #1a1410;
+  transform: translate(-50%, calc(-100% - 4px));
+}
+.npc-state.live {
+  background: var(--signal);
+  color: #1a1410;
 }
 .rpg-npc .tag {
   margin-top: 2px;
@@ -1245,10 +1409,22 @@ body.app.bar-page .shell {
   line-height: 1.1;
   white-space: nowrap;
 }
-.rpg-npc:hover canvas { filter: brightness(1.18) drop-shadow(0 0 6px #f0d060); }
-.rpg-npc.on canvas { outline: 2px solid #f0d060; outline-offset: 1px; }
-.rpg-npc.vacant canvas { opacity: 0.35; }
+.rpg-npc:hover .npc-bust,
+.rpg-npc:hover .npc-blank { filter: brightness(1.18) drop-shadow(0 0 6px #f0d060); }
+.rpg-npc.on .npc-bust,
+.rpg-npc.on .npc-blank { outline: 2px solid #f0d060; outline-offset: 1px; }
+.rpg-npc.vacant .npc-blank { opacity: 0.55; }
 .rpg-npc.vacant .tag { color: #f0d060; }
+@media (max-width: 720px) {
+  .inn-actors {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    left: 24px;
+    right: 24px;
+  }
+}
+@media (max-width: 520px) {
+  .inn-actors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
 .rpg-exit {
   position: absolute;
   left: 10px;
@@ -1270,20 +1446,34 @@ body.app.bar-page .shell {
   transform: none;
 }
 .rpg-dialog {
-  position: absolute;
-  left: 3.5%;
-  right: 3.5%;
-  bottom: 3%;
+  grid-row: 2;
+  position: relative;
   z-index: 5;
+  margin: 8px 12px 10px;
   padding: 3px;
   background: #08080f;
   box-shadow: 0 0 0 2px #c9a227, inset 0 0 0 2px #3a4a8a;
 }
 .rpg-dialog-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
   min-height: 92px;
   padding: 10px 14px 8px;
   background: linear-gradient(#2a3668, #1a2248 55%, #141a3a);
 }
+.rpg-face {
+  flex: none;
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  object-position: center 18%;
+  border: 3px solid #1a1410;
+  background: #2a2118;
+  image-rendering: pixelated;
+}
+.rpg-face[hidden] { display: none; }
+.rpg-copy { min-width: 0; flex: 1; }
 .rpg-name {
   margin: 0 0 6px;
   color: #f0d060;
@@ -1298,18 +1488,22 @@ body.app.bar-page .shell {
   font-family: VT323, ui-monospace, monospace;
   font-size: 22px;
   line-height: 1.2;
+  overflow-wrap: anywhere;
 }
 .rpg-acts {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   margin-top: 8px;
   min-height: 22px;
 }
 .rpg-acts a,
 .rpg-acts button {
+  appearance: none;
   margin: 0;
   padding: 3px 8px;
   border: 2px solid #c9a227;
+  border-radius: 0;
   background: #141a3a;
   color: #f4f0e0;
   font-family: VT323, ui-monospace, monospace;

package/src/public/subagents-add.html

@@ -91,7 +91,12 @@
           return;
         }
         const button = document.getElementById("ai-generate");
+        if (button.disabled || button.getAttribute("aria-busy") === "true") return;
         button.disabled = true;
+        button.setAttribute("aria-busy", "true");
+        button.classList.add("is-busy");
+        const idle = button.textContent;
+        button.textContent = t("studio.generating");
         try {
           const response = await fetch("/generate", {
             method: "POST",
@@ -115,6 +120,9 @@
           setFlash("error", err.message);
         } finally {
           button.disabled = false;
+          button.removeAttribute("aria-busy");
+          button.classList.remove("is-busy");
+          button.textContent = idle;
         }
       });
       document.getElementById("ai-save").addEventListener("click", async () => {