@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/css/management-views.css

@@ -34,6 +34,19 @@
   gap: 16px;
 }
 
+.mcp-management-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mcp-search-wrapper {
+  flex: 0 1 400px;
+  min-width: min(260px, 100%);
+}
+
 .management-title-group {
   display: flex;
   flex-direction: column;
@@ -62,6 +75,47 @@
   margin: 0;
 }
 
+.management-workspace-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.82rem;
+  color: var(--text-muted, #94a3b8);
+  margin-top: 4px;
+}
+
+.management-workspace-label {
+  font-weight: 500;
+}
+
+.management-workspace-path {
+  padding: 2px 6px;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
+  color: var(--text-main, #f8fafc);
+  font-size: 0.8rem;
+  font-family: var(--font-mono, monospace);
+  word-break: break-all;
+}
+
+.management-workspace-none {
+  font-style: italic;
+  color: var(--text-muted, #94a3b8);
+}
+
+.management-modal-source {
+  margin-top: 6px;
+  font-size: 0.8rem;
+  color: var(--text-muted, #64748b);
+  word-break: break-all;
+}
+
+.management-modal-source code {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.78rem;
+  color: var(--text-muted, #94a3b8);
+}
+
 .management-primary-btn {
   display: inline-flex;
   align-items: center;
@@ -804,9 +858,9 @@
 
 .management-badge.active,
 .management-badge.connected {
-  background: rgba(16, 185, 129, 0.15);
-  color: #34d399;
-  border: 1px solid rgba(16, 185, 129, 0.3);
+  background: var(--status-success-bg);
+  color: var(--status-success-fg);
+  border: 1px solid var(--status-success-border);
 }
 
 .management-badge.workspace {
@@ -816,16 +870,16 @@
 }
 
 .management-badge.global {
-  background: rgba(168, 85, 247, 0.15);
-  color: #c084fc;
-  border: 1px solid rgba(168, 85, 247, 0.3);
+  background: var(--status-purple-bg);
+  color: var(--status-purple-fg);
+  border: 1px solid var(--status-purple-border);
 }
 
 .management-badge.inactive,
 .management-badge.disconnected {
-  background: rgba(148, 163, 184, 0.15);
+  background: var(--bg-surface-soft);
   color: var(--text-muted, #94a3b8);
-  border: 1px solid rgba(148, 163, 184, 0.25);
+  border: 1px solid var(--border-default);
 }
 
 .management-dot {
@@ -853,7 +907,7 @@
 }
 
 .management-tag.global {
-  color: #c084fc;
+  color: var(--status-purple-fg);
 }
 
 /* Compact plugin row (Plugins & Integrations) — one line per plugin (icon +
@@ -909,7 +963,7 @@
 }
 
 .management-plugin-name .management-dot.connected {
-  background: #34d399;
+  background: var(--status-success-fg);
 }
 
 .management-section-title {
@@ -919,6 +973,65 @@
   margin: 0 0 12px;
 }
 
+.mcp-image-input-setting {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: fit-content;
+  max-width: min(100%, 620px);
+  margin: 0 0 28px;
+  padding: 12px 14px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  border-radius: var(--radius-lg, 12px);
+  background: var(--surface, rgba(255, 255, 255, 0.03));
+  color: var(--text-main, #f8fafc);
+  font-size: 0.88rem;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: border-color 0.18s ease, background-color 0.18s ease;
+}
+
+.mcp-image-input-setting:hover,
+.mcp-image-input-setting:focus-within {
+  border-color: var(--accent, #3b82f6);
+  background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+}
+
+.mcp-image-input-setting input {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin: 2px 0 0;
+  accent-color: var(--accent, #3b82f6);
+}
+
+.mcp-image-input-hint {
+  color: var(--text-muted, #94a3b8);
+}
+
+@media (max-width: 640px) {
+  .mcp-management-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .mcp-management-actions > button {
+    flex: 1 1 auto;
+  }
+
+  .mcp-search-wrapper {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .mcp-image-input-setting {
+    width: auto;
+    max-width: 100%;
+    margin-bottom: 24px;
+    font-size: 0.84rem;
+  }
+}
+
 .management-installed-row {
   display: flex;
   flex-wrap: wrap;
@@ -926,6 +1039,14 @@
   margin-bottom: 28px;
 }
 
+.mcp-installed-section {
+  margin-bottom: 28px;
+}
+
+.mcp-installed-section .management-section-title {
+  margin-bottom: 12px;
+}
+
 /* Icon-only, no label — matches the "installed" strip in most plugin
    stores (ChatGPT, VS Code extensions, ...): once you know what you added,
    the logo alone is enough to pick it back out. */
@@ -949,6 +1070,12 @@
   box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.16));
 }
 
+.management-plugin-avatar:focus-visible {
+  outline: 2px solid var(--accent, #3b82f6);
+  outline-offset: 3px;
+  border-color: var(--accent, #3b82f6);
+}
+
 /* The quick-enable "+" (and "…" once enabled, opening the detail view
    instead) on a plugin row — the on/off toggle itself only lives in the
    detail modal now, so this row never has to explain its own state in
@@ -1019,29 +1146,29 @@
   border-radius: var(--radius-md);
   font-size: 0.82rem;
   font-weight: 500;
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-main, #cbd5e1);
+  border: 1px solid var(--btn-gray-border, var(--border, rgba(255, 255, 255, 0.1)));
+  background: var(--btn-gray-bg, var(--bg-surface-soft));
+  color: var(--btn-gray-fg, var(--text-main, #f8fafc));
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .management-action-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-main);
-  border-color: var(--border, rgba(255, 255, 255, 0.2));
+  background: var(--btn-gray-bg-hover, var(--bg-surface-hover));
+  color: var(--btn-gray-fg, var(--text-main));
+  border-color: var(--accent-border, var(--btn-gray-border-hover));
 }
 
 .management-action-btn.danger {
-  color: #f87171;
-  border-color: rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.1);
+  color: var(--status-error-fg);
+  border-color: var(--status-error-border);
+  background: var(--status-error-bg);
 }
 
 .management-action-btn.danger:hover {
-  background: rgba(239, 68, 68, 0.25);
-  color: #fca5a5;
-  border-color: rgba(239, 68, 68, 0.5);
+  background: var(--hover-delete-bg);
+  color: var(--hover-delete);
+  border-color: var(--status-error);
 }
 
 /* Expand / Collapse Chevron Button */
@@ -1237,6 +1364,58 @@
   box-shadow: 0 0 0 3px var(--accent-glow, rgba(59, 130, 246, 0.2));
 }
 
+.mcp-timeout-input {
+  min-height: 42px;
+  font-variant-numeric: tabular-nums;
+}
+
+.mcp-timeout-input:focus-visible {
+  outline: 2px solid var(--accent, #10b981);
+  outline-offset: 2px;
+}
+
+.mcp-allowlist-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.mcp-allowlist-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  padding: 6px 10px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius-md, 8px);
+  background: var(--surface-bg, rgba(255, 255, 255, 0.04));
+  color: var(--text-main, #f8fafc);
+  font-size: 0.82rem;
+  line-height: 1.3;
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.18s ease, background-color 0.18s ease;
+}
+
+.mcp-allowlist-toggle:hover,
+.mcp-allowlist-toggle:focus-within {
+  border-color: var(--interactive-fg, #10b981);
+  background: var(--surface-strong, rgba(255, 255, 255, 0.07));
+}
+
+.mcp-allowlist-toggle .mint-custom-checkbox {
+  width: 17px;
+  height: 17px;
+  min-width: 17px;
+}
+
+.mcp-allowlist-toggle .mint-custom-checkbox:checked {
+  background-color: var(--interactive-fg, #10b981);
+  border-color: var(--interactive-fg, #10b981);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-fg, #10b981) 20%, transparent);
+}
+
 .management-textarea-field {
   min-height: 110px;
   resize: vertical;
@@ -1368,11 +1547,11 @@
 }
 
 .mcp-test-status.success {
-  color: #34d399;
+  color: var(--status-success-fg);
 }
 
 .mcp-test-status.error {
-  color: #f87171;
+  color: var(--status-error-fg);
 }
 
 .mcp-test-status.testing {
@@ -1380,9 +1559,9 @@
 }
 
 .management-badge.remote {
-  background: rgba(59, 130, 246, 0.15);
-  color: #60a5fa;
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  background: var(--status-info-bg);
+  color: var(--status-info-fg);
+  border: 1px solid var(--status-info-border);
 }
 
 .mcp-spin {
@@ -1403,8 +1582,8 @@
   margin-top: 14px;
   border-radius: var(--radius-lg, 10px);
   overflow: hidden;
-  border: 1px solid rgba(245, 158, 11, 0.28);
-  background: rgba(245, 158, 11, 0.05);
+  border: 1px solid var(--status-warning-border);
+  background: var(--status-warning-bg);
 }
 
 .mcp-security-header {
@@ -1412,21 +1591,21 @@
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  background: rgba(245, 158, 11, 0.12);
-  color: #fbbf24;
+  background: var(--status-warning-bg);
+  color: var(--status-warning-fg);
   font-size: 0.86rem;
   font-weight: 600;
-  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
+  border-bottom: 1px solid var(--status-warning-border);
 }
 
 .mcp-security-icon {
   flex-shrink: 0;
-  color: #f59e0b;
+  color: var(--status-warning);
 }
 
 .mcp-security-body {
   padding: 12px 14px;
-  background: rgba(15, 23, 42, 0.45);
+  background: var(--bg-surface-soft);
 }
 
 .mcp-security-ack {
@@ -1475,8 +1654,8 @@
 
 .mint-custom-checkbox:hover {
   border-color: var(--accent, #10b981);
-  background: rgba(255, 255, 255, 0.12);
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
+  background: var(--bg-surface-hover);
+  box-shadow: 0 0 0 3px var(--accent-glow, rgba(16, 185, 129, 0.16));
 }
 
 .mint-custom-checkbox:checked {
@@ -1499,7 +1678,7 @@
 }
 
 .mint-custom-checkbox:focus-visible {
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 0 0 3px var(--accent-glow, rgba(16, 185, 129, 0.3));
 }
 
 /* Allow All Tools Row */

package/src/renderer/shared/css/mcp-results.css

@@ -0,0 +1,54 @@
+.mcp-results { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 12px; overflow-wrap: anywhere; }
+.mcp-call-status { display: grid; gap: 5px; font-size: .85rem; }
+.mcp-call-status progress { width: 100%; accent-color: var(--accent, #73d6b0); }
+.mcp-results a { color: var(--interactive-fg); text-decoration: underline; }
+.mcp-artifacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
+.mcp-artifact { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.mcp-image-button { padding: 0; background: transparent; border: 0; cursor: zoom-in; }
+.mcp-image-button img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; }
+.mcp-image-dialog { box-sizing: border-box; width: fit-content; max-width: 96vw; max-height: 94dvh; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-overlay); color: var(--text-main); }
+.mcp-image-dialog::backdrop { background: rgba(0, 0, 0, .75); }
+.mcp-image-dialog header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
+.mcp-image-dialog header span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.mcp-image-dialog button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface-soft); color: var(--text-main); cursor: pointer; }
+.mcp-image-dialog img { display: block; max-width: 100%; max-height: calc(94dvh - 86px); object-fit: contain; }
+.mcp-image-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.execution-state { font-weight: 600; }
+.execution-state-succeeded { color: var(--accent, #69e6a6); }
+.execution-state-failed { color: var(--danger, #ff6b6b); }
+.execution-state-running { color: var(--interactive-fg, #60a5fa); }
+.execution-state-cancelled { color: var(--muted, #888); }
+.execution-exit { color: var(--muted, #888); }
+.execution-exit-error { color: var(--danger, #ff6b6b); }
+
+.mcp-results-compact {
+  margin: 6px 0 10px 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.mcp-warning-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--bg-surface-soft);
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  line-height: 1.4;
+}
+
+.mcp-warning-icon {
+  flex-shrink: 0;
+  color: var(--interactive-fg, var(--accent));
+  opacity: 0.9;
+}
+
+.mcp-warning-text {
+  flex: 1;
+  min-width: 0;
+}
+