fraim-framework 2.0.124 → 2.0.127

package/public/ai-hub/styles.css

@@ -1,568 +1,871 @@
 :root {
   color-scheme: light;
-  --visa-blue: #1434cb;
-  --visa-gold: #f7b600;
-  --ink: #10233f;
-  --muted: #607089;
+  --bg: #f4f6f2;
   --surface: #ffffff;
-  --surface-muted: #f6f8fc;
-  --surface-strong: #edf2ff;
-  --surface-soft: rgba(255, 255, 255, 0.72);
-  --line: #d8e1f0;
-  --success: #12785e;
-  --danger: #a22738;
-  --shadow: 0 22px 48px rgba(16, 35, 63, 0.08);
-  --shadow-soft: 0 12px 28px rgba(16, 35, 63, 0.06);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  min-height: 100%;
-}
-
+  --soft: #f7faf6;
+  --line: #e3e8df;
+  --text: #1f2a24;
+  --muted: #6b7a72;
+  --accent: #3d8a6e;
+  --accent-strong: #2f7359;
+  --accent-soft: #eaf3ee;
+  --warn: #b08442;
+  --warn-soft: #fffaf0;
+  --danger: #a24747;
+  --shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
+  --shadow-lg: 0 12px 36px rgba(20, 40, 30, 0.18);
+  /* Issue #347 — picker group dots. Decorative only; the picker uses
+     these to scan groups by color without adding semantic weight. Kept
+     as variables so future themes flow through here. */
+  --picker-delegation: #5b7eb0;
+  --picker-learning: #8b5fbf;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+[hidden] { display: none !important; }
+
+html, body { height: 100%; }
 body {
-  margin: 0;
-  font-family: "Segoe UI", Inter, Arial, sans-serif;
-  color: var(--ink);
-  background:
-    linear-gradient(180deg, rgba(20, 52, 203, 0.08), rgba(20, 52, 203, 0) 16%),
-    linear-gradient(135deg, rgba(247, 182, 0, 0.12), rgba(247, 182, 0, 0) 22%),
-    #f4f7fc;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-button,
-input,
-textarea {
-  font: inherit;
+  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+  line-height: 1.5;
+  font-size: 15px;
+  /* Issue #339 fix: bound the page to the viewport. The conversation
+     pane scrolls internally instead of growing the entire page. */
+  overflow: hidden;
 }
 
-a {
-  color: var(--visa-blue);
-}
+button { font: inherit; cursor: pointer; }
 
-.app-shell {
-  max-width: 1480px;
+.page {
+  max-width: 1080px;
   margin: 0 auto;
-  padding: 18px 24px 28px;
-  min-height: 100dvh;
-  display: grid;
-  grid-template-rows: auto 1fr;
-  gap: 18px;
-}
-
-.app-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
-  gap: 18px;
-  align-items: stretch;
-}
-
-.brand-lockup {
-  padding: 18px 0 8px;
-  display: grid;
-  gap: 4px;
-}
-
-.brand-title {
-  font-size: 32px;
-  line-height: 1.05;
-  font-weight: 800;
-  color: var(--ink);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100vh;
+  min-height: 0;
 }
 
-.brand-subtitle,
-.section-label,
-.helper-text,
-.muted {
-  color: var(--muted);
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
 }
-
-.section-label {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0;
-  text-transform: uppercase;
+.header h1 {
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: -0.01em;
 }
-
-.section-label {
+.project-button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-}
-
-h1,
-h2,
-p {
-  margin: 0;
-}
-
-.topbar-card,
-.card {
-  background: var(--surface-soft);
-  backdrop-filter: blur(16px);
+  background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: 10px;
+  padding: 8px 14px;
+  color: var(--text);
   box-shadow: var(--shadow);
+  max-width: 360px;
 }
-
-.topbar-card {
-  width: 100%;
-  padding: 16px 18px;
-  display: flex;
-  gap: 16px;
-  align-items: start;
-  justify-content: space-between;
-}
-
-.workspace-card {
-  align-self: stretch;
-}
-
-.workspace-section {
-  display: grid;
-  gap: 10px;
+.project-button:hover { background: var(--soft); }
+.project-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.project-button .folder { color: var(--muted); font-size: 13px; }
+.project-button strong {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.workspace-section-inline {
-  min-width: 0;
-  flex: 1 1 auto;
+/* Welcome line */
+.welcome {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 18px 24px;
+  box-shadow: var(--shadow);
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--muted);
 }
-
-.employee-picker,
-.category-picker,
-.template-chips,
-.project-actions,
-.composer-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+.welcome strong.you { color: var(--text); font-weight: 600; }
+.welcome .concept {
+  position: relative;
+  font-weight: 600;
+  color: var(--accent);
 }
-
-.employee-chip,
-.category-chip,
-.template-chip,
-.secondary-button,
-.primary-button {
-  border-radius: 7px;
-  border: 1px solid var(--line);
-  padding: 10px 14px;
-  background: rgba(255, 255, 255, 0.9);
-  color: var(--ink);
+.welcome .info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+  margin-left: 3px;
+  margin-right: 1px;
   cursor: pointer;
-  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+  vertical-align: 1px;
+  border: none;
+  font-family: serif;
+  font-style: italic;
+}
+.welcome .info:hover { background: var(--accent); color: #fff; }
+.welcome .info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  width: 320px;
+  /* Hard cap + internal scroll so a verbose explanation never clips off
+     the bottom of the viewport (was a real bug — popover content used to
+     run past the bottom edge with no way to read it). */
+  max-height: min(60vh, 480px);
+  overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 14px 16px;
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--text);
+  line-height: 1.5;
+  display: none;
 }
-
-.employee-chip:hover,
-.category-chip:hover,
-.template-chip:hover,
-.secondary-button:hover,
-.primary-button:hover {
-  transform: translateY(-1px);
+.popover.open { display: block; }
+.popover .pop-title {
+  display: block;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 6px;
 }
-
-.employee-chip.active,
-.category-chip.active,
-.template-chip.active {
-  border-color: var(--visa-blue);
-  background: var(--surface-strong);
-  box-shadow: inset 0 0 0 1px rgba(20, 52, 203, 0.08);
+.popover .pop-link {
+  display: inline-block;
+  margin-top: 10px;
+  color: var(--accent);
+  font-size: 13px;
+  text-decoration: none;
+  font-weight: 500;
 }
-
-.employee-chip.unavailable {
-  opacity: 0.55;
+.popover .pop-link:hover { text-decoration: underline; }
+.popover .pop-jobs {
+  display: none;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
 }
-
-.primary-button {
-  background: var(--visa-blue);
-  border-color: var(--visa-blue);
-  color: #fff;
-  font-weight: 700;
-  box-shadow: 0 12px 24px rgba(20, 52, 203, 0.2);
+.popover .pop-jobs.open { display: grid; gap: 8px; }
+.popover .pop-jobs .job-row {
+  display: grid;
+  gap: 1px;
+  font-size: 13px;
 }
-
-.primary-button:disabled,
-.secondary-button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
+.popover .pop-jobs .job-row strong {
+  color: var(--accent);
+  font-weight: 600;
 }
-
-.workspace {
-  display: grid;
-  grid-template-columns: 340px minmax(0, 1fr);
-  gap: 18px;
-  align-items: start;
+.popover .pop-jobs .job-row span {
+  color: var(--muted);
 }
 
-.workspace-intro {
-  grid-column: 1 / -1;
-  padding: 18px 20px;
+/* Layout */
+.layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 18px;
-  align-items: end;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 20px;
+  align-items: stretch;
+  flex: 1;
+  min-height: 0;
 }
 
-.workspace-intro-copy,
-.workspace-intro-actions {
+/* Left rail */
+.rail {
   display: grid;
-  gap: 10px;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: min-content;
+  gap: 8px;
+  min-width: 0;
+  align-self: start;
+  max-height: 100%;
+  overflow-y: auto;
 }
-
-.workspace-intro-actions {
-  justify-items: end;
+.new-conv {
+  width: 100%;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-weight: 600;
+  box-shadow: var(--shadow);
 }
-
-.job-panel,
-.interaction-panel {
+.new-conv:hover { background: var(--accent-strong); }
+.new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
+.conv-list {
   display: grid;
-  gap: 18px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  margin-top: 4px;
+  min-width: 0;
 }
-
-.job-panel {
-  align-content: start;
+.conv-item {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--text);
 }
-
-.interaction-panel {
-  align-content: start;
+.conv-item:hover { background: var(--soft); }
+.conv-item.active {
+  background: var(--surface);
+  border-color: var(--line);
+  box-shadow: var(--shadow);
 }
-
-.panel-head {
-  display: grid;
-  gap: 18px;
-  padding: 18px;
+.conv-title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.conv-status {
+  font-size: 12px;
+  color: var(--muted);
+  font-weight: 500;
+  flex-shrink: 0;
 }
+.conv-status.running { color: var(--accent); }
+.conv-status.attention { color: var(--warn); }
+.conv-status.failed { color: var(--danger); }
 
-.panel-copy {
+/* Conversation pane — fills the layout column vertically. Inner regions
+   manage their own height; the .messages list is the only scrollable area. */
+.conversation {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+.empty-state {
   display: grid;
-  gap: 10px;
+  gap: 8px;
+  place-items: center;
+  text-align: center;
+  color: var(--muted);
+  padding: 80px 16px;
 }
+.empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; }
+.empty-state p { margin: 0; max-width: 320px; }
 
-.panel-intro {
-  font-size: 18px;
-  line-height: 1.5;
-  color: var(--ink);
+#active-conv {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+  min-height: 0;
 }
 
-.panel-title {
-  font-size: 24px;
-  line-height: 1.1;
+.conv-header,
+.coach,
+.micro,
+.progress {
+  flex-shrink: 0;
+}
+.conv-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 12px;
+  row-gap: 4px;
 }
+.conv-header h2 { flex: 1 1 auto; min-width: 0; }
+#artifact-slot { flex: 0 0 auto; }
 
-.project-path {
-  min-width: 230px;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  padding: 0 14px;
-  box-shadow: none;
+.conv-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
+.conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
 }
 
-.project-path summary {
-  list-style: none;
+/* Progress is now a single-line status strip (was a tall card) so the
+   messages region gets the vertical space it needs. */
+.progress {
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 0;
-  cursor: pointer;
-  font-weight: 600;
+  gap: 10px;
+  min-width: 0;
+  overflow: hidden;
 }
-
-.project-path summary::-webkit-details-marker {
-  display: none;
+.progress .stage {
+  font-weight: 600;
+  color: var(--text);
+  flex-shrink: 0;
 }
-
-.project-path-preview {
-  min-width: 0;
-  max-width: 180px;
+.progress .latest {
+  color: var(--muted);
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 500;
+  min-width: 0;
 }
-
-.project-path-body {
+.progress .stage::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-right: 6px;
+  vertical-align: 1px;
+  animation: pulse 1.4s infinite;
+}
+.progress.done .stage::before { background: #6cb39a; animation: none; }
+.progress.attention .stage::before { background: var(--warn); animation: none; }
+.progress.failed .stage::before { background: var(--danger); animation: none; }
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+.messages {
   display: grid;
-  gap: 12px;
-  padding: 0 0 16px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 12px;
+  min-width: 0;
+  /* Scroll messages here, not the page. */
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
 }
-
-.text-input,
-.composer {
-  width: 100%;
+.message { word-wrap: break-word; overflow-wrap: anywhere; }
+.message {
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 14px;
+  line-height: 1.5;
+  animation: slidein 280ms ease;
+}
+@keyframes slidein {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.message.manager {
+  background: var(--accent-soft);
+  border: 1px solid #c5dcd0;
+  color: var(--text);
+}
+.message.employee {
+  background: var(--soft);
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: var(--surface-muted);
-  padding: 11px 12px;
-  color: var(--ink);
+  color: var(--text);
 }
-
-.composer {
-  min-height: 140px;
-  resize: vertical;
-  line-height: 1.5;
+.message .who {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  display: block;
+  margin-bottom: 4px;
 }
 
-.job-list-card {
-  padding: 16px;
-  display: grid;
-  gap: 14px;
+/* Inline artifact pill that sits in the .conv-header next to the title.
+   Compact so it never crowds Coach or Micro-manage. Hover reveals the
+   path so the user can locate the file. */
+.artifact {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--warn-soft);
+  border: 1px solid #ecd9b0;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--text);
+  max-width: 320px;
+  animation: slidein 280ms ease;
+}
+.artifact-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--warn);
+  flex-shrink: 0;
+}
+.artifact-label {
+  font-weight: 600;
+  color: var(--warn);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 10px;
+  margin-right: 2px;
 }
-
-.job-list {
-  display: grid;
-  gap: 8px;
-  overflow: visible;
-  align-content: start;
+.artifact-name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
+.artifact-where { display: none; }   /* full path lives in tooltip via title attr */
 
-.job-list button {
+.coach textarea {
   width: 100%;
-  text-align: left;
-  border-radius: 7px;
+  min-height: 56px;
+  max-height: 30vh;
+  resize: vertical;
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.88);
-  padding: 13px 14px;
-  cursor: pointer;
-  box-shadow: none;
-  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
-}
-
-.job-list button:hover {
-  transform: translateY(-1px);
-  border-color: rgba(20, 52, 203, 0.32);
+  border-radius: 10px;
+  padding: 10px 14px;
+  font: inherit;
+  color: var(--text);
+  background: var(--surface);
 }
-
-.job-list button.active {
-  border-color: var(--visa-blue);
-  background: var(--surface-strong);
+.coach textarea:focus { outline: none; border-color: var(--accent); }
+.coach-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
+.send-button {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 18px;
+  font-weight: 600;
 }
+.send-button:hover { background: var(--accent-strong); }
+.send-button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
+.send-button:disabled { background: #c5d2cb; cursor: not-allowed; }
 
-.job-title {
-  font-weight: 700;
-  margin-bottom: 5px;
+.micro {
+  border-top: 1px solid var(--line);
+  padding-top: 16px;
 }
-
-.job-intent {
+.micro summary {
+  cursor: pointer;
   color: var(--muted);
-  line-height: 1.45;
   font-size: 14px;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.micro summary::-webkit-details-marker { display: none; }
+.micro summary::before {
+  content: "▸";
+  font-size: 11px;
+  transition: transform 100ms;
+}
+.micro[open] summary::before { transform: rotate(90deg); }
+.micro-log {
+  margin-top: 12px;
+  background: #1f2a24;
+  color: #c5d2cb;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-family: Consolas, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  max-height: 220px;
+  overflow-y: auto;
 }
 
-.job-outcomes {
-  display: grid;
-  gap: 8px;
+.status-line {
   margin: 0;
-  padding-left: 18px;
   color: var(--muted);
+  font-size: 13px;
+  text-align: center;
+  min-height: 1.2em;
 }
+.status-line.error { color: var(--danger); }
 
-.interaction-card {
-  padding: 18px;
-  display: grid;
-  gap: 18px;
-}
-
-.run-toolbar {
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 40, 30, 0.36);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: 20px;
+  animation: fade 180ms ease;
+}
+.modal-backdrop.open { display: flex; }
+@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+
+.modal {
+  background: var(--surface);
+  border-radius: 16px;
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  max-width: 540px;
+  max-height: 90vh;
   display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: 18px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid rgba(216, 225, 240, 0.8);
+  flex-direction: column;
+  overflow: hidden;
+  animation: rise 220ms ease;
+  min-height: 0;
 }
-
-.selected-job-summary {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
+/* Each step IS the modal's main content — make it a flex column too so
+   .modal-body can actually scroll inside the bounded .modal height
+   instead of pushing the modal past 90vh. */
+#step1, #step2 {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
-
-.run-toolbar-actions {
+@keyframes rise {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.modal-header { padding: 22px 24px 12px; border-bottom: 1px solid var(--line); }
+.modal-header h2 { margin: 0; font-size: 19px; font-weight: 600; }
+.modal-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
+.modal-body { padding: 18px 24px; overflow-y: auto; flex: 1; }
+.modal-footer {
+  padding: 14px 24px 18px;
+  border-top: 1px solid var(--line);
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  gap: 12px;
 }
+.modal-footer .left { color: var(--muted); font-size: 13px; }
+.modal-footer .right { display: flex; gap: 10px; }
 
-.interaction-body {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
-  gap: 18px;
-  align-items: start;
+.ghost {
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 9px 14px;
+  color: var(--text);
+  font-weight: 500;
 }
+.ghost:hover { background: var(--soft); }
+.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
-.conversation-column {
-  display: grid;
-  gap: 14px;
+.search {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 10px 14px;
+  font: inherit;
+  margin-bottom: 14px;
 }
+.search:focus { outline: none; border-color: var(--accent); }
 
-.interaction-head {
-  display: grid;
-  gap: 18px;
+.job-category { margin-bottom: 16px; }
+.job-category h4 {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 8px;
 }
-
-.timeline {
-  min-height: 420px;
-  max-height: 540px;
-  overflow: auto;
-  display: grid;
-  gap: 12px;
-  padding: 4px;
-  align-content: start;
+.job-option {
+  width: 100%;
+  text-align: left;
+  background: transparent;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: rgba(247, 249, 253, 0.72);
+  border-radius: 10px;
+  padding: 10px 14px;
+  margin-bottom: 6px;
+  display: grid;
+  gap: 2px;
+  color: var(--text);
+}
+.job-option:hover { background: var(--soft); border-color: var(--accent); }
+.job-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.job-option.selected { background: var(--accent-soft); border-color: var(--accent); }
+.job-option strong { font-weight: 600; }
+.job-option span { color: var(--muted); font-size: 13px; }
+
+.step2 .assigned-job {
+  background: var(--accent-soft);
+  border: 1px solid #c5dcd0;
+  border-radius: 10px;
+  padding: 12px 14px;
+  margin-bottom: 14px;
+}
+.step2 .assigned-job .label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
-
-.message {
+.step2 .assigned-job .name { font-weight: 600; margin-top: 2px; }
+.step2 .assigned-job .desc { color: var(--muted); font-size: 13px; margin-top: 2px; }
+.step2 textarea {
+  width: 100%;
+  min-height: 140px;
+  resize: vertical;
   border: 1px solid var(--line);
-  border-radius: 7px;
-  padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.88);
+  border-radius: 10px;
+  padding: 12px 14px;
+  font: inherit;
 }
+.step2 textarea:focus { outline: none; border-color: var(--accent); }
 
-.message.manager {
-  background: #eef3ff;
-  border-color: #c9d8ff;
+.employee-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--muted);
 }
-
-.message.employee {
-  background: #ffffff;
+.employee-select {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 6px 10px;
+  background: var(--surface);
+  color: var(--text);
+}
+.employee-select:focus { outline: none; border-color: var(--accent); }
+
+@media (max-width: 820px) {
+  /* Single-column reflow — the rigid 100vh layout doesn't make sense at
+     mobile width because the rail stacks above the conversation. Let the
+     page scroll naturally and bound the messages section to keep the
+     coach + micro-manage reachable at the bottom. */
+  html, body { height: auto; }
+  body { overflow: auto; }
+  .page { height: auto; min-height: 100vh; }
+  .layout { grid-template-columns: 1fr; flex: initial; }
+  .rail { max-height: none; overflow-y: visible; }
+  .conversation { height: auto; min-height: 60vh; overflow: visible; }
+  #active-conv { flex: initial; }
+  .conv-stream { flex: initial; }
+  .messages { flex: initial; max-height: 60vh; }
+  .header { flex-wrap: wrap; }
+  .popover { width: min(320px, calc(100vw - 60px)); }
+}
+
+/* ---------------------------------------------------------------- */
+/* Issue #347 — Pizza tracker (R1), template picker (R2), totals (R4) */
+/* ---------------------------------------------------------------- */
+
+.tracker {
+  padding: 12px 4px 14px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.tracker-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
-
-.message.system {
-  background: #f7f9fd;
+.tracker-row {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  position: relative;
 }
-
-.message-meta {
+.tracker .stage {
   display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 8px;
-  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 0;
+  min-width: 0;
+  position: relative;
+  z-index: 2;
+}
+/* Connector segment to the previous stage in the same row. The fill
+   color flips green when the previous stage is done or the current
+   stage is current — that produces the "fill bar threads through
+   completed stages" effect without an SVG path. */
+.tracker .stage::before {
+  content: '';
+  position: absolute;
+  top: 13px;
+  left: -50%;
+  right: 50%;
+  height: 3px;
+  background: var(--line);
+  z-index: 0;
+}
+.tracker .tracker-row .stage:first-child::before { display: none; }
+.tracker .stage.done::before,
+.tracker .stage.current::before { background: var(--accent); }
+.tracker .stage-circle {
+  width: 26px; height: 26px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 2px solid var(--line);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
   color: var(--muted);
+  font-weight: 600;
+  position: relative;
+  z-index: 2;
 }
-
-.message-role {
-  font-weight: 700;
-  color: var(--visa-blue);
-}
-
-.message-text {
-  white-space: pre-wrap;
-  line-height: 1.55;
+.tracker .stage.done .stage-circle {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
 }
-
-.manager-tools {
-  display: grid;
-  gap: 14px;
-  padding: 16px;
-  border-radius: 8px;
-  background: rgba(247, 249, 253, 0.72);
-  border: 1px solid var(--line);
+.tracker .stage.current .stage-circle {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent-strong);
+  box-shadow: 0 0 0 4px rgba(61, 138, 110, 0.10);
 }
-
-.template-row {
-  display: grid;
-  gap: 8px;
+.tracker .stage-label {
+  font-size: 11px;
+  color: var(--muted);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
-
-.composer-label {
+.tracker .stage.current .stage-label {
+  color: var(--text);
   font-weight: 600;
 }
-
-.micro-manage {
-  padding: 0 18px;
-  box-shadow: var(--shadow-soft);
-}
-
-.micro-manage summary {
-  padding: 16px 0;
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.micro-manage-body {
-  padding: 0 0 18px;
-  max-height: 240px;
-  overflow: auto;
-  display: grid;
-  gap: 8px;
-  font-family: Consolas, "Courier New", monospace;
+.tracker-note {
+  margin-top: 10px;
   font-size: 12px;
   color: var(--muted);
+  text-align: center;
 }
+.tracker-note .glyph { color: var(--accent); margin-right: 4px; }
 
-.micro-row {
-  padding: 10px 12px;
-  border-radius: 7px;
-  background: var(--surface-muted);
+/* Active-stage label that lives outside the rows. Always rendered by
+   JS; hidden by default and shown only at narrow viewports where the
+   per-stage labels are too cramped to read (spec R1.4 acceptance). */
+.tracker-active-label {
+  display: none;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text);
+  font-weight: 600;
+  text-align: center;
+}
+
+/* Narrow-viewport label collapse (spec R1.4 acceptance). At ≤ 640px,
+   per-stage labels disappear; the standalone active label below the
+   rows tells the manager which stage is current. Numbered circles
+   keep the journey visible. */
+@media (max-width: 640px) {
+  .tracker .stage .stage-label { display: none; }
+  .tracker-active-label { display: block; }
+}
+
+/* Template picker popover (R2). Absolute-positioned inside .coach-actions
+   so opening it does not push the textarea down. */
+.coach-actions { position: relative; }
+.template-popover {
+  position: absolute;
+  bottom: 44px;
+  right: 0;
+  width: 320px;
+  max-height: 360px;
+  overflow: auto;
+  background: var(--surface);
   border: 1px solid var(--line);
-  white-space: pre-wrap;
-}
-
-@media (max-width: 1080px) {
-  html,
-  body {
-    min-height: 100%;
-  }
-
-  .app-shell {
-    min-height: 100dvh;
-  }
-
-  .workspace,
-  .app-header,
-  .interaction-body,
-  .workspace-intro {
-    grid-template-columns: 1fr;
-  }
-
-  .topbar-card,
-  .run-toolbar {
-    display: grid;
-  }
-
-  .project-path {
-    min-width: 0;
-  }
-
-  .workspace-intro-actions {
-    justify-items: start;
-  }
+  border-radius: 12px;
+  box-shadow: var(--shadow-lg);
+  padding: 12px;
+  z-index: 10;
+}
+.template-popover .group {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--line);
+}
+.template-popover .group:last-child { border-bottom: none; }
+.template-popover .group-label {
+  font-size: 11px;
+  color: var(--accent-strong);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  margin: 0 0 4px 0;
+  padding: 4px 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.template-popover .group-label .group-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  display: inline-block;
+}
+.template-popover .group.delegation .group-dot { background: var(--picker-delegation); }
+.template-popover .group.coaching .group-dot { background: var(--accent); }
+.template-popover .group.verification .group-dot { background: var(--warn); }
+.template-popover .group.learning .group-dot { background: var(--picker-learning); }
+.template-popover .template-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  text-align: left;
+  width: 100%;
+  font: inherit;
+  color: var(--text);
 }
+.template-popover .template-row:hover { background: var(--accent-soft); }
+.template-popover .template-row strong { font-size: 13px; font-weight: 500; }
+.template-popover .template-row span { font-size: 12px; color: var(--muted); }
 
-@media (max-width: 768px) {
-  .app-shell {
-    padding: 18px 16px 16px;
-  }
-
-  .brand-title {
-    font-size: 28px;
-  }
-
-  .interaction-head {
-    display: grid;
-  }
-
-  .workspace,
-  .app-header {
-    gap: 18px;
-  }
-
-  .timeline {
-    min-height: 280px;
-    max-height: 380px;
-  }
-
-  .panel-intro {
-    font-size: 16px;
-  }
+/* Totals line (R4). 12px muted, no border, single row that wraps if it
+   absolutely must. Discoverable via hover tooltips per spec R4.4. */
+.totals {
+  font-size: 12px;
+  color: var(--muted);
+  padding-top: 4px;
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
 }
+.totals span { cursor: help; }
+.totals .sep { color: var(--line); }
+.totals strong { color: var(--text); font-weight: 600; }