fraim-hub 2.0.340 → 2.0.342

package/public/ai-hub/styles.css

@@ -2696,6 +2696,13 @@ button.small { padding: 4px 10px; font-size: 12px; }
      matches this block's own stated intent ("bound X to keep the coach
      reachable at the bottom") for the one element Treatment 3 added. */
   #empty { max-height: calc(100vh - 160px); }
+  /* Issue #1911: #pane-surface-host is the same kind of element as #empty - a
+     `flex:1; min-height:0` pane child with nothing to flex-distribute against
+     once .conversation loses its height constraint here. Uncapped, the Coach
+     intake pushed #persistent-composer below the fold at 640px, the exact
+     failure the #empty cap above was added to stop. Any future surface
+     inherits the cap rather than having to rediscover it. */
+  #pane-surface-host { max-height: 45vh; }
   #active-conv { flex: initial; overflow-y: visible; }
   .conv-stream { flex: initial; }
   /* Mobile: thread panel reverts to normal block flow; page scrolls naturally */
@@ -5767,8 +5774,8 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 /* #1340: block-level so overflow/ellipsis actually applies (a plain inline span never
    establishes its own overflow box, so a long title/description used to run on past the
    row and visually collide with whatever came after it, including the new viz control
-   below). .tjd-mimic-row already carried this same fix locally; this closes the gap for
-   the default row too. */
+   below). The teach dialog row already carried this same fix locally; this closes
+   the gap for the default row too (.ci-picker-row inherits it now). */
 .cp-row-title { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .cp-row-sub { display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
 .cp-row-tag { font-size:10px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; flex-shrink:0; }
@@ -6462,23 +6469,19 @@ img.eh-av { object-fit: cover; background: var(--surface); }
   padding: 4px 12px 2px;
 }
 
-/* Issue #976: Teach-new-job intake dialog */
-.tjd-card { max-width:520px; max-height:calc(100vh - 48px); margin:24px auto; overflow:auto; }
-.tjd-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
-.tjd-hdr h2 { margin:0; }
-.tjd-body { display:flex; flex-direction:column; gap:12px; }
-.tjd-form { display:flex; flex-direction:column; gap:10px; min-width:0; }
+/* Issue #976 intake controls, reused by the Coach pane surface (issue #1911).
+   The dialog itself (.tjd-card/.tjd-hdr/.tjd-body/.tjd-form/.tjd-mimic*/
+   .tjd-actions/.tjd-secondary) is gone with #teach-job-modal; what survives is
+   the set of field, mode and error controls the panel renders instead, so the
+   intake looks and validates exactly as it did before it left the overlay. */
 .tjd-modes { display:flex; gap:8px; }
 .tjd-mode { flex:1; min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; text-align:left; background:var(--surface); color:var(--text); font:inherit; cursor:pointer; }
 .tjd-mode[aria-pressed="true"] { border-color:var(--teach); background:var(--teach-soft); color:var(--teach); }
 .tjd-mode strong { display:block; font-size:13px; margin-bottom:2px; }
 .tjd-mode span { display:block; font-size:11.5px; color:var(--muted); }
 .tjd-mode[aria-pressed="true"] span { color:inherit; }
-.tjd-mode:focus-visible,
-.tjd-mimic summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
-.tjd-new-fields { display:flex; flex-direction:column; gap:10px; }
-.tjd-new-fields[hidden], .tjd-hint[hidden], #tjd-mimic-toggle[hidden] { display:none; }
-.tjd-form .hm-field textarea { min-height:80px; }
+.tjd-mode:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+.tjd-hint[hidden] { display:none; }
 .tjd-hint { margin:0; font-size:12px; line-height:1.45; color:var(--muted); }
 .tjd-field-error,
 .tjd-submit-error { color:var(--danger); font-size:12px; line-height:1.35; margin-top:4px; }
@@ -6487,34 +6490,52 @@ img.eh-av { object-fit: cover; background: var(--surface); }
 .tjd-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px; }
 .tjd-search { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font:inherit; font-size:13px; background:var(--bg); color:var(--text); }
 .tjd-search:focus { outline:2px solid var(--accent); border-color:transparent; }
-.tjd-card input::placeholder, .tjd-card textarea::placeholder { color:var(--muted); opacity:1; }
-.tjd-mimic { min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; }
-.tjd-mimic summary { padding:10px 12px; font-size:12px; font-weight:600; cursor:pointer; }
-.tjd-mimic-head { padding:12px; border-bottom:1px solid var(--line); background:var(--surface); }
-.tjd-mimic-results { overflow-y:auto; overflow-x:hidden; min-height:0; max-height:156px; padding:5px 0; }
-.tjd-mimic-row { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; cursor:pointer; border:0; background:transparent; width:100%; max-width:100%; min-width:0; overflow:hidden; text-align:left; color:var(--text); font-size:13px; }
-.tjd-mimic-row:hover,
-.tjd-mimic-row.selected { background:var(--accent-soft,rgba(0,113,227,.08)); }
-.tjd-mimic-row:hover .cp-row-sub, .tjd-mimic-row.selected .cp-row-sub { color:var(--text); }
-.tjd-mimic-row .cp-row-body { display:flex; flex:1 1 auto; flex-direction:column; gap:2px; min-width:0; overflow:hidden; }
-.tjd-mimic-row .cp-row-title,
-.tjd-mimic-row .cp-row-sub { display:block; max-width:100%; white-space:normal; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; }
-.tjd-mimic-row .cp-row-title { line-height:1.25; }
-.tjd-mimic-row .cp-row-sub { line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
-.tjd-mimic-row .cp-row-tag { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
-.tjd-mimic-empty { padding:16px 12px; color:var(--muted); font-size:12px; }
-.tjd-selected-mimic { margin:10px 12px 4px; display:flex; align-items:flex-start; gap:8px; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line) 58%); background:var(--accent-soft,rgba(0,113,227,.08)); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--text); }
-.tjd-selected-mimic[hidden] { display:none; }
-.tjd-selected-mimic span { min-width:0; flex:1; }
-.tjd-selected-mimic button { border:0; background:transparent; color:var(--accent-strong); font-weight:700; cursor:pointer; padding:0; }
-.tjd-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; }
-.tjd-secondary { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:8px; padding:9px 14px; font-weight:700; cursor:pointer; }
-.tjd-secondary:hover { border-color:var(--accent); }
 
-@media (max-width: 760px) {
-  .tjd-card { width:calc(100vw - 24px); margin:18px auto; max-height:calc(100vh - 36px); overflow:auto; }
-  .tjd-body { padding:16px; }
-  .tjd-actions { position:sticky; bottom:0; background:var(--surface); padding-top:10px; }
+/* Issue #1911 R16: the reusable main-pane slot. It is a plain flex column that
+   fills the pane above the always-docked composer, so a surface only has to
+   describe its own content, not how to occupy the pane. */
+.pane-surface-host { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
+.pane-surface-host[hidden] { display:none; }
+/* Where a surface reports a composer-level validation failure (R10). */
+.pane-surface-composer-error { color:var(--danger); font-size:12px; line-height:1.35; margin-bottom:6px; }
+.pane-surface-composer-error:empty { display:none; }
+
+/* Issue #1911 Treatment B: the Coach intake panel. Every control inside it is
+   an existing one (.tjd-modes/.hm-field/.cp-row); these rules only give the
+   panel the pane's width and keep the picker scrolling inside itself, so the
+   mode control and the scope note stay on screen while jobs are browsed (R9). */
+.ci-card { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:2px 2px 8px; }
+.ci-card-hdr { display:flex; align-items:baseline; gap:10px; flex-shrink:0; }
+.ci-card-hdr h3 { margin:0; font-size:16px; font-weight:700; color:var(--text); }
+.ci-card-hdr p { margin:0; font-size:12px; color:var(--muted); }
+.ci-new-fields { flex-shrink:0; }
+.ci-card .tjd-modes, .ci-card > .tjd-hint, .ci-card > .tjd-submit-error { flex-shrink:0; }
+/* R9: the picker takes whatever height the pane has left and scrolls inside
+   itself, so the mode control and the scope note never leave the screen. */
+.ci-picker { min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; flex:1 1 auto; min-height:132px; }
+.ci-picker-head { padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0; }
+.ci-picker-list { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; padding:4px 0; }
+.ci-picker-row { align-items:flex-start; }
+.ci-picker-row.selected { background:var(--accent-soft,rgba(0,113,227,.08)); }
+.ci-picker-row.selected .cp-row-sub { color:var(--text); }
+.ci-picker-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+.ci-picker-row .cp-row-body { display:flex; flex:1 1 auto; flex-direction:column; gap:2px; min-width:0; overflow:hidden; }
+.ci-picker-row .cp-row-title,
+.ci-picker-row .cp-row-sub { display:block; max-width:100%; white-space:normal; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; }
+.ci-picker-row .cp-row-title { line-height:1.25; }
+.ci-picker-row .cp-row-sub { line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
+.ci-picker-row .cp-row-tag { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
+.ci-picker-empty { padding:16px 12px; color:var(--muted); font-size:12px; }
+.ci-picker-empty[hidden] { display:none; }
+
+/* Open question 3, resolved: below the breakpoint .composer-footer already
+   targets, Job name and Owner stack and the picker gives up height so the mode
+   control stays reachable without scrolling the panel. */
+@media (max-width: 650px) {
+  .ci-card { gap:10px; }
+  .ci-new-fields { flex-direction:column; }
+  .ci-picker { flex:0 1 auto; max-height:200px; min-height:104px; }
+  .tjd-modes { flex-direction:column; }
 }
 /* ─── End Issue #945 ─────────────────────────────────────────────────────── */