@bridge_gpt/mcp-server 0.2.24 → 0.2.25

package/public/css/main.min.css

@@ -2560,6 +2560,84 @@ select.input-error {
         flex-basis: auto;
     }
 }
+/* ---- BAPI-590: simplified Code Reviewer drawer (two-check surface) ---- */
+/* Page-scoped hierarchy, spacing rhythm (8/12/16/24px), and warning semantics
+   for the reviewer drawer. Reuses existing surface/border/radius/color tokens
+   rather than introducing a new visual system. */
+#project-detail-container .drawer-code-review .drawer-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+#project-detail-container .code-review-supporting-text {
+    margin: 8px 0 24px;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: var(--secondary-color, #555);
+}
+
+/* The Critical Priorities subsection reads as a related group, not a new card. */
+#project-detail-container .code-review-subsection {
+    margin-top: 24px;
+    padding: 16px;
+    border: 1px solid var(--border-color, #e0e0e0);
+    border-radius: 6px;
+    background: var(--surface-color, #fafafa);
+}
+
+#project-detail-container .code-review-subsection-heading {
+    margin: 0 0 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+#project-detail-container .drawer-code-review .form-group label {
+    font-weight: 600;
+}
+
+#project-detail-container #critical_priorities {
+    min-height: 140px;
+    width: 100%;
+    resize: vertical;
+    font: inherit;
+}
+
+/* Priorities warning: shared warning semantics with visible copy so severity is
+   never conveyed by color alone. Distinct from `.input-error`/`--error-color`. */
+#project-detail-container .drawer-code-review .warning {
+    margin-top: 8px;
+    padding: 8px 12px;
+    border: 1px solid var(--warning-color, #b26a00);
+    border-radius: 4px;
+    background: var(--warning-bg, #fff6e5);
+    color: var(--warning-text, #7a4a00);
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+/* Keep a clearly-visible coral keyboard focus ring and touch-friendly targets. */
+#project-detail-container .drawer-code-review .toggle-drawer:focus-visible,
+#project-detail-container .drawer-code-review input[type="checkbox"]:focus-visible,
+#project-detail-container #critical_priorities:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 1px;
+}
+
+/* Narrow viewports: reduce padding and let content wrap without horizontal scroll. */
+@media (max-width: 768px) {
+    #project-detail-container .code-review-subsection {
+        padding: 12px;
+    }
+
+    #project-detail-container .code-review-supporting-text,
+    #project-detail-container .drawer-code-review .warning,
+    #project-detail-container .drawer-code-review label {
+        overflow-wrap: anywhere;
+    }
+}
+
 /*!*************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/optimize_analysis.css ***!
   \*************************************************************************************************************/
@@ -3222,11 +3300,30 @@ textarea {
    All rules scoped under #get-started-container
    ============================================================ */
 
+/* ---- Hero: the page's job is connecting GitHub (BAPI-630) ---- */
+
+/* The shared .section-header is a `space-between` row built for title+button.
+   This hero is a title plus a paragraph, so it stacks instead — otherwise the
+   intro is pushed alongside the h1 and both columns crowd at narrow widths. */
+#get-started-container .get-started-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+}
+
+#get-started-container .get-started-hero h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 0.5rem;
+}
+
 #get-started-container .get-started-intro {
     color: var(--text-muted, #666);
     max-width: 720px;
     margin-bottom: 1.5rem;
-    line-height: 1.6;
+    line-height: 1.5;
 }
 
 /* ---- Section cards ---- */
@@ -3238,7 +3335,9 @@ textarea {
     margin-bottom: 1.5rem;
 }
 
-#get-started-container .get-started-section h2 {
+/* Subsection headings inside the optional MCP drawer. These are descriptive,
+   not steps in a mandatory flow, so they sit below the two numbered tasks. */
+#get-started-container .get-started-section h3 {
     margin-top: 0;
     font-size: 1.15rem;
     margin-bottom: 0.75rem;
@@ -3261,7 +3360,7 @@ textarea {
     flex-wrap: wrap;
 }
 
-.install-key-header h3 {
+.install-key-header h4 {
     margin: 0 0 0.25rem;
     font-size: 1rem;
 }
@@ -3280,9 +3379,20 @@ textarea {
     flex-shrink: 0;
 }
 
+/* Base state is NEUTRAL. The outcome modifiers below are applied by JS from the
+   real inserted-slot count, so a generated-but-not-inserted key is never
+   presented in success green (BAPI-630 / CI-2). */
 .install-key-status {
     font-size: 0.82rem;
-    color: var(--success-color, #28a745);
+    color: var(--text-muted, #666);
+}
+
+.install-key-status--success {
+    color: var(--success-color, #10b981);
+}
+
+.install-key-status--warning {
+    color: var(--dark-orange, #e17055);
 }
 
 .install-key-error {
@@ -3658,71 +3768,24 @@ textarea {
     text-align: center;
 }
 
-/* ---- Responsive ---- */
-@media (max-width: 600px) {
-    .snippet-tab-btn {
-        padding: 0.35rem 0.55rem;
-        font-size: 0.82rem;
-    }
-
-    .handoff-copy-row {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .install-key-header {
-        flex-direction: column;
-    }
-
-    .install-key-actions {
-        width: 100%;
-    }
-
-    .install-key-actions .btn {
-        flex: 1;
-    }
-
-    .install-key-panel .key-display {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .install-key-panel .key-display input,
-    .install-key-panel .key-display .btn {
-        width: 100%;
-    }
-
-    .status-field-row {
-        flex-direction: column;
-        gap: 0.2rem;
-    }
-
-    /* Collapse checklist rows into a readable single-column stack at narrow
-       widths so long required-for text never forces horizontal overflow. */
-    .install-integration-row {
-        align-items: flex-start;
-    }
-
-    .install-integration-required {
-        overflow-wrap: anywhere;
-    }
-
-    .github-connect-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .github-connect-actions .btn {
-        width: 100%;
-    }
-}
-
 /* ============================================================
    GitHub App connect flow (BAPI-506)
    ============================================================ */
 
+/* The page's primary task: a dominant white surface directly under the hero,
+   separated from the optional MCP drawer by a full section gap (BAPI-630). */
 #get-started-container .github-connect-section {
-    /* Inherits .get-started-section card rhythm; nothing extra needed here. */
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--box-shadow);
+}
+
+#get-started-container .github-connect-section h2 {
+    margin-top: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.25;
+    margin-bottom: 0.75rem;
 }
 
 .github-connect-card {
@@ -3735,7 +3798,8 @@ textarea {
 
 .github-connect-card > p {
     color: var(--text-muted, #666);
-    line-height: 1.6;
+    font-size: 1rem;
+    line-height: 1.5;
     margin-top: 0;
 }
 
@@ -3829,6 +3893,135 @@ textarea {
     margin-bottom: 0;
 }
 
+/* ============================================================
+   Optional editor/MCP disclosure (BAPI-630)
+
+   Spacing and typography ONLY. Open/closed behavior, `.hidden`, `.expanded`,
+   and the toggle glyph all belong to the shared drawer utility (utils.js
+   initDrawers/setDrawerExpanded) — this page must not reimplement them.
+   ============================================================ */
+
+#get-started-container .get-started-mcp-drawers {
+    margin-bottom: 1.5rem;
+}
+
+#get-started-container .get-started-mcp-drawer .drawer-header {
+    padding: 1rem 1.25rem;
+    gap: 1rem;
+}
+
+/* Secondary to the GitHub h2: same element level, deliberately quieter. */
+#get-started-container .get-started-mcp-drawer-title {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+}
+
+#get-started-container .get-started-mcp-drawer .drawer-content {
+    padding: 0 1.25rem 1rem;
+}
+
+/* Breathing room between the drawer's own subsections once expanded. The
+   nested section cards already carry their own margin-bottom. */
+#get-started-container .get-started-mcp-drawer .drawer-content > .get-started-state {
+    margin: 1rem 0;
+}
+
+/* ---- Responsive (consolidated; established 768px breakpoint) ---- */
+@media (max-width: 768px) {
+    #get-started-container .get-started-hero h1 {
+        font-size: 1.6rem;
+    }
+
+    #get-started-container .github-connect-section {
+        padding: 1.25rem;
+    }
+
+    #get-started-container .github-connect-section h2 {
+        font-size: 1.3rem;
+    }
+
+    .github-connect-card {
+        padding: 1rem;
+    }
+
+    /* The primary action goes full-width so it stays the obvious, easily
+       tapped next step at phone widths. */
+    .github-connect-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .github-connect-actions .btn {
+        width: 100%;
+    }
+
+    #get-started-container .get-started-mcp-drawer .drawer-header {
+        padding: 0.75rem 1rem;
+    }
+
+    #get-started-container .get-started-mcp-drawer .drawer-content {
+        padding: 0 1rem 0.75rem;
+    }
+
+    #get-started-container .get-started-section {
+        padding: 1rem;
+    }
+
+    .snippet-tab-btn {
+        padding: 0.35rem 0.55rem;
+        font-size: 0.82rem;
+    }
+
+    .handoff-copy-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .install-key-header {
+        flex-direction: column;
+    }
+
+    .install-key-actions {
+        width: 100%;
+    }
+
+    .install-key-actions .btn {
+        flex: 1;
+    }
+
+    .install-key-panel .key-display {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .install-key-panel .key-display input,
+    .install-key-panel .key-display .btn {
+        width: 100%;
+    }
+
+    .install-key-status {
+        overflow-wrap: anywhere;
+    }
+
+    .status-field-row {
+        flex-direction: column;
+        gap: 0.2rem;
+    }
+
+    /* Collapse checklist rows into a readable single-column stack at narrow
+       widths so long required-for text never forces horizontal overflow. */
+    .install-integration-row {
+        align-items: flex-start;
+    }
+
+    .install-integration-required {
+        overflow-wrap: anywhere;
+    }
+}
+
 /*!*******************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/data_health.css ***!
   \*******************************************************************************************************/