buddy-builder 1.4.1

package/dist/renderer/styles/info-window.css

@@ -0,0 +1,249 @@
+/* ─── Info Window (dedicated popup) ─── */
+
+.info-window {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--titlebar-h));
+  overflow: hidden;
+  background: var(--bg-0);
+}
+
+.info-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-1);
+  padding: 0 12px;
+  flex-shrink: 0;
+}
+
+.info-tab {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.info-tab:hover { color: var(--text); }
+.info-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.info-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Overview cards */
+.info-card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.info-card {
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+}
+.info-card.full {
+  margin-bottom: 10px;
+}
+
+.info-card-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.info-card-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  word-break: break-all;
+}
+.info-card-value.mono {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.info-summary {
+  text-align: center;
+  padding: 12px 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border);
+  margin-top: 6px;
+}
+
+/* Tools tab */
+.info-search {
+  width: 100%;
+  padding: 6px 10px;
+  margin-bottom: 12px;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-size: 12px;
+  outline: none;
+}
+.info-search:focus {
+  border-color: var(--accent);
+}
+
+.info-category {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  padding: 8px 0 4px;
+}
+
+.info-tool-row {
+  border-bottom: 1px solid var(--border);
+}
+.info-tool-row.expanded {
+  background: var(--bg-1);
+  border-radius: var(--radius-md);
+  margin-bottom: 4px;
+}
+
+.info-tool-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 4px;
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+.info-tool-header:hover { color: var(--accent); }
+
+.info-tool-arrow {
+  font-size: 8px;
+  width: 12px;
+  color: var(--text-muted);
+}
+
+.info-tool-name {
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.info-tool-detail {
+  padding: 4px 22px 10px;
+}
+
+.info-tool-desc {
+  font-size: 11px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0 0 8px;
+}
+
+.info-param-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+.info-param-table th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-muted);
+  padding: 3px 8px 3px 0;
+  border-bottom: 1px solid var(--border);
+}
+.info-param-table td {
+  padding: 3px 8px 3px 0;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border);
+}
+.info-param-table td.mono {
+  font-family: var(--font-mono);
+  color: var(--accent);
+  white-space: nowrap;
+}
+
+/* MCP tab */
+.info-server-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+}
+
+.info-server-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.info-server-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.info-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+.info-status-dot.status-connected { background: var(--success); }
+.info-status-dot.status-error { background: var(--error); }
+.info-status-dot.status-disconnected { background: var(--text-muted); }
+
+/* Commands tab */
+.info-chip-section {
+  margin-bottom: 12px;
+}
+
+.info-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.info-chip {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  padding: 3px 8px;
+  background: var(--bg-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+/* Shared info states */
+.info-empty, .info-loading, .info-error {
+  text-align: center;
+  padding: 32px 16px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.info-error { color: var(--error); }

package/dist/renderer/styles/input-bar.css

@@ -0,0 +1,189 @@
+/* ═══ Input bar ═════════════════════════════════════════════════ */
+
+#input-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0 24px 16px;
+  background: var(--bg-0);
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  position: relative;
+  width: 100%;
+}
+
+/* ─── Slash command autocomplete ─── */
+
+.input-row-wrap {
+  position: relative;
+}
+
+.input-row {
+  display: flex;
+  gap: 10px;
+  padding-top: 12px;
+}
+
+.slash-autocomplete {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 4px;
+  background: var(--bg-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 50;
+  padding: 4px;
+  animation: dropdown-in 0.12s ease-out;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.slash-autocomplete-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: background 0.1s;
+  text-align: left;
+}
+
+.slash-autocomplete-item:hover {
+  background: var(--hover-bg);
+  color: var(--text);
+}
+
+.slash-autocomplete-item.active {
+  background: var(--accent-bg);
+  color: var(--text);
+}
+
+.slash-autocomplete-cmd {
+  font-weight: 500;
+}
+
+#input {
+  flex: 1;
+  padding: 10px 16px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-2);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 15px;
+  resize: none;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  line-height: 1.46667;
+}
+
+#input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+#input:disabled { opacity: 0.4; }
+#input::placeholder { color: var(--text-muted); }
+
+#send {
+  padding: 10px 20px;
+  border-radius: var(--radius-lg);
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 700;
+  font-family: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+#send:hover { background: var(--accent-dim); }
+#send:disabled { opacity: 0.3; cursor: not-allowed; }
+
+/* Stop button (shown beside Send while session is busy) */
+#stop-btn {
+  padding: 10px 16px;
+  border-radius: var(--radius-lg);
+  border: none;
+  background: var(--error);
+  color: #fff;
+  font-weight: 700;
+  font-family: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+#stop-btn:hover { background: #c4184e; }
+
+.escape-hint,
+.queue-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 2px 0;
+  animation: hintFadeIn 0.1s ease-out;
+}
+.escape-hint { color: var(--warning, #e8a838); }
+@keyframes hintFadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+/* ═══ Image preview bar (input area thumbnails) ═══════════════ */
+
+.image-preview-bar {
+  display: flex;
+  gap: 8px;
+  padding: 10px 0 0;
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.image-preview-bar::-webkit-scrollbar { height: 4px; }
+
+.image-preview-thumb {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  flex-shrink: 0;
+}
+
+.image-preview-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-preview-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.image-preview-thumb:hover .image-preview-remove {
+  opacity: 1;
+}

package/dist/renderer/styles/modal.css

@@ -0,0 +1,225 @@
+/* ═══ Modal ════════════════════════════════════════════════════ */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  background: var(--bg-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  width: 480px;
+  max-width: 90vw;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+  position: relative;
+  overflow: hidden;
+}
+
+.modal.settings-modal { overflow: visible; }
+
+.modal-close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 2px 6px;
+  line-height: 1;
+  z-index: 1;
+  border-radius: var(--radius);
+  transition: background 0.15s, color 0.15s;
+}
+
+.modal-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+
+.modal-body {
+  padding: 18px;
+}
+
+/* ─── Settings hero / branding ─── */
+
+.settings-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 36px 24px 24px;
+  background: linear-gradient(180deg, rgba(0, 168, 232, 0.08) 0%, transparent 100%);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.settings-logo {
+  width: 80px;
+  height: 80px;
+  border-radius: 20px;
+  box-shadow: 0 8px 32px rgba(0, 168, 232, 0.25);
+  margin-bottom: 16px;
+}
+
+.settings-brand {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.3px;
+  color: var(--text);
+}
+
+.settings-tagline {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.settings-section {
+  margin-bottom: 8px;
+}
+
+.settings-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.settings-version {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-right: auto;
+}
+
+.setting-label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.setting-input {
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-1);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  outline: none;
+}
+
+.setting-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+
+.setting-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.setting-status {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--success);
+}
+
+.setting-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.setting-toggle-row > span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.setting-toggle-switch {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  border: none;
+  background: var(--border-strong);
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+  transition: background 0.15s;
+}
+
+.setting-toggle-switch.active {
+  background: var(--accent);
+}
+
+.setting-toggle-knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.15s;
+}
+
+.setting-toggle-switch.active .setting-toggle-knob {
+  transform: translateX(18px);
+}
+
+.modal-footer {
+  padding: 12px 18px;
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.modal-btn {
+  padding: 7px 18px;
+  border-radius: var(--radius);
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.modal-btn:hover { background: var(--accent-dim); }
+
+/* ─── Settings browse row ─── */
+
+.settings-browse-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.settings-browse-row .setting-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.browse-btn {
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-2);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.browse-btn:hover { background: var(--bg-3, var(--bg-1)); }