fraim-framework 2.0.146 → 2.0.148

package/public/ai-hub/styles.css

@@ -1,19 +1,19 @@
 :root {
   color-scheme: light;
-  --bg: #f4f6f2;
-  --surface: #ffffff;
-  --soft: #f7faf6;
-  --line: #e3e8df;
-  --text: #1f2a24;
-  --muted: #6b7a72;
-  --accent: #3d8a6e;
-  --accent-strong: #2f7359;
-  --accent-soft: #eaf3ee;
+  --bg: #ebe4d7;
+  --surface: #f8f4eb;
+  --soft: #f1ebde;
+  --line: #d7cdbf;
+  --text: #231e17;
+  --muted: #7c6f61;
+  --accent: #1f437d;
+  --accent-strong: #16345f;
+  --accent-soft: #dfe7f5;
   --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);
+  --shadow: 0 1px 2px rgba(35, 30, 23, 0.05);
+  --shadow-lg: 0 18px 48px rgba(35, 30, 23, 0.16);
   /* 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. */
@@ -27,9 +27,11 @@ html, body { margin: 0; padding: 0; }
 
 html, body { height: 100%; }
 body {
-  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   color: var(--text);
-  background: var(--bg);
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%),
+    linear-gradient(180deg, #efe8dc 0%, var(--bg) 100%);
   line-height: 1.5;
   font-size: 15px;
   /* Issue #339 fix: bound the page to the viewport. The conversation
@@ -40,8 +42,9 @@ body {
 button { font: inherit; cursor: pointer; }
 
 .page {
-  max-width: 1080px;
-  margin: 0 auto;
+  max-width: none;
+  width: 100%;
+  margin: 0;
   padding: 24px;
   display: flex;
   flex-direction: column;
@@ -57,20 +60,32 @@ button { font: inherit; cursor: pointer; }
   justify-content: space-between;
   gap: 16px;
 }
+.header-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.header-eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
 .header h1 {
-  font-size: 22px;
-  font-weight: 600;
+  font-size: 34px;
+  font-weight: 700;
   margin: 0;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.03em;
 }
 .project-button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: var(--surface);
+  background: rgba(255, 255, 255, 0.5);
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 8px 14px;
+  border-radius: 14px;
+  padding: 10px 16px;
   color: var(--text);
   box-shadow: var(--shadow);
   max-width: 360px;
@@ -87,10 +102,10 @@ button { font: inherit; cursor: pointer; }
 
 /* Welcome line */
 .welcome {
-  background: var(--surface);
+  background: rgba(248, 244, 235, 0.86);
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 18px 24px;
+  border-radius: 20px;
+  padding: 20px 24px;
   box-shadow: var(--shadow);
   font-size: 15px;
   line-height: 1.7;
@@ -184,7 +199,7 @@ button { font: inherit; cursor: pointer; }
 /* Layout */
 .layout {
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
+  grid-template-columns: 326px minmax(0, 1fr);
   gap: 20px;
   align-items: stretch;
   flex: 1;
@@ -196,49 +211,71 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-auto-rows: min-content;
-  gap: 8px;
+  gap: 14px;
   min-width: 0;
   align-self: start;
   max-height: 100%;
   overflow-y: auto;
+  border-radius: 28px;
+  background: rgba(248, 244, 235, 0.84);
+  box-shadow: var(--shadow);
 }
 .new-conv {
   width: 100%;
   background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 10px;
-  padding: 10px 14px;
+  border-radius: 14px;
+  padding: 13px 16px;
   font-weight: 600;
   box-shadow: var(--shadow);
 }
+.rail-note {
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+.rail-section {
+  display: grid;
+  gap: 10px;
+}
+.rail-section-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 0 2px;
+}
 .new-conv:hover { background: var(--accent-strong); }
 .new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
 .conv-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 4px;
-  margin-top: 4px;
+  gap: 10px;
+  margin-top: 0;
   min-width: 0;
 }
 .conv-item {
   width: 100%;
   text-align: left;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 8px 10px;
+  background: rgba(255, 255, 255, 0.44);
+  border: 1px solid rgba(31, 67, 125, 0.08);
+  border-radius: 22px;
+  padding: 14px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 10px;
+  gap: 12px;
   color: var(--text);
+  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
 }
 .conv-item:hover { background: var(--soft); }
 .conv-item.active {
-  background: var(--surface);
-  border-color: var(--line);
-  box-shadow: var(--shadow);
+  background: rgba(229, 236, 248, 0.92);
+  border-color: rgba(31, 67, 125, 0.2);
+  box-shadow: 0 14px 28px rgba(31, 67, 125, 0.12);
 }
 /* Text column: stacks persona name label above job title */
 .conv-body {
@@ -246,7 +283,7 @@ button { font: inherit; cursor: pointer; }
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 4px;
 }
 .conv-persona-name {
   font-size: 10px;
@@ -258,15 +295,24 @@ button { font: inherit; cursor: pointer; }
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.conv-title { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.conv-title {
+  font-size: 17px;
+  font-weight: 700;
+  min-width: 0;
+  line-height: 1.3;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 /* Persona avatar chip — enlarged to 34px to serve as a clear visual anchor */
 .conv-persona-chip {
   flex-shrink: 0;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: var(--accent-soft);
-  border: 1.5px solid var(--accent);
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  background: #ffffff;
+  border: 2px solid rgba(31, 67, 125, 0.14);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -277,13 +323,15 @@ button { font: inherit; cursor: pointer; }
   line-height: 1;
   text-transform: uppercase;
 }
-.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
 .conv-persona-chip--free { background: transparent; border-color: var(--line); color: var(--muted); }
 .conv-status {
   font-size: 11px;
   color: var(--muted);
   font-weight: 500;
   flex-shrink: 0;
+  white-space: nowrap;
+  padding-top: 4px;
 }
 .conv-status.running { color: var(--accent); }
 .conv-status.attention { color: var(--warn); }
@@ -292,11 +340,11 @@ button { font: inherit; cursor: pointer; }
 /* 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);
+  background: rgba(248, 244, 235, 0.94);
   border: 1px solid var(--line);
-  border-radius: 14px;
-  box-shadow: var(--shadow);
-  padding: 18px 20px;
+  border-radius: 30px;
+  box-shadow: var(--shadow-lg);
+  padding: 24px 26px;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -313,13 +361,26 @@ button { font: inherit; cursor: pointer; }
   color: var(--muted);
   padding: 80px 16px;
 }
+.empty-state::before {
+  content: "F";
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-weight: 700;
+  font-size: 24px;
+}
 .empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; }
 .empty-state p { margin: 0; max-width: 320px; }
 
 #active-conv {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
   min-width: 0;
   flex: 1;
   min-height: 0;
@@ -331,6 +392,76 @@ button { font: inherit; cursor: pointer; }
 .progress {
   flex-shrink: 0;
 }
+.conv-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.employee-identity {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.identity-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px solid rgba(31, 67, 125, 0.14);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  flex-shrink: 0;
+}
+.identity-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.identity-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.identity-copy strong {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+.identity-copy small {
+  font-size: 13px;
+  color: var(--muted);
+}
+.run-state-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 12px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(31, 67, 125, 0.1);
+  color: var(--accent-strong);
+}
+.run-state-pill.running {
+  background: rgba(31, 67, 125, 0.14);
+}
+.run-state-pill.failed {
+  background: #fbebeb;
+  color: var(--danger);
+}
+.run-state-pill.completed {
+  background: #e4f0ea;
+  color: #2c6b4e;
+}
 .conv-header {
   display: flex;
   flex-wrap: wrap;
@@ -338,11 +469,27 @@ button { font: inherit; cursor: pointer; }
   column-gap: 12px;
   row-gap: 4px;
 }
+.title-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
 .conv-header h2 { flex: 1 1 auto; min-width: 0; }
 #artifact-slot { flex: 0 0 auto; }
 
-.conv-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
+.conv-header h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
 .conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
+.summary-strip {
+  background: rgba(255, 255, 255, 0.56);
+  border: 1px solid rgba(31, 67, 125, 0.08);
+  border-radius: 18px;
+  padding: 14px 16px;
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.55;
+}
 
 .section-title {
   font-size: 13px;
@@ -378,7 +525,7 @@ button { font: inherit; cursor: pointer; }
 /* 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);
+  background: rgba(255, 255, 255, 0.46);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 8px 12px;
@@ -420,24 +567,48 @@ button { font: inherit; cursor: pointer; }
   50% { opacity: 0.5; transform: scale(0.8); }
 }
 
+.thread-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 280px;
+  flex: 1;
+  padding: 18px 18px 16px;
+  border-radius: 28px;
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.5)),
+    radial-gradient(circle at top left, rgba(31, 67, 125, 0.06), transparent 34%);
+}
+
+.thread-surface-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
 .messages {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 10px;
-  margin-top: 12px;
+  gap: 24px;
+  margin-top: 0;
   min-width: 0;
   /* Scroll messages here, not the page. */
   flex: 1;
-  min-height: 0;
+  min-height: 180px;
   overflow-y: auto;
-  padding-right: 4px;
+  padding: 8px 8px 8px 2px;
+  scroll-behavior: smooth;
 }
-.message { word-wrap: break-word; overflow-wrap: anywhere; }
 .message {
-  border-radius: 10px;
-  padding: 10px 14px;
-  font-size: 14px;
-  line-height: 1.5;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  width: 100%;
+  display: grid;
+  gap: 10px;
   animation: slidein 280ms ease;
 }
 @keyframes slidein {
@@ -445,23 +616,91 @@ button { font: inherit; cursor: pointer; }
   to { opacity: 1; transform: translateY(0); }
 }
 .message.manager {
-  background: var(--accent-soft);
-  border: 1px solid #c5dcd0;
-  color: var(--text);
+  justify-items: end;
+  padding-left: 24%;
 }
 .message.employee {
-  background: var(--soft);
-  border: 1px solid var(--line);
-  color: var(--text);
+  justify-items: start;
+  padding-right: 24%;
+}
+.message.system {
+  justify-items: stretch;
+  padding-right: 16%;
+}
+.message-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.message.manager .message-meta {
+  justify-content: flex-end;
+}
+.message-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid rgba(31, 67, 125, 0.1);
+}
+.message-avatar.manager {
+  background: rgba(31, 67, 125, 0.12);
+  color: var(--accent-strong);
+}
+.message-avatar.employee {
+  background: #ffffff;
+  color: var(--accent-strong);
+}
+.message-avatar.system {
+  background: rgba(35, 30, 23, 0.08);
+  color: var(--muted);
+}
+.message-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 .message .who {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.08em;
   color: var(--muted);
-  display: block;
-  margin-bottom: 4px;
+}
+.message .lane-label {
+  font-size: 11px;
+  color: var(--muted);
+  opacity: 0.88;
+}
+.transport-raw {
+  display: none;
+}
+.bubble {
+  border-radius: 26px;
+  padding: 16px 18px;
+  font-size: 14px;
+  line-height: 1.6;
+  box-shadow: 0 12px 26px rgba(35, 30, 23, 0.05);
+  max-width: min(760px, 100%);
+}
+.message.manager .bubble {
+  background: var(--accent);
+  color: #fff;
+}
+.message.employee .bubble {
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  color: var(--text);
+}
+.message.system .bubble {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(35, 30, 23, 0.08);
+  color: var(--text);
 }
 
 /* Inline artifact pill that sits in the .conv-header next to the title.
@@ -510,14 +749,20 @@ button { font: inherit; cursor: pointer; }
   max-height: 30vh;
   resize: vertical;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 14px;
+  border-radius: 18px;
+  padding: 13px 15px;
   font: inherit;
   color: var(--text);
   background: var(--surface);
 }
 .coach textarea:focus { outline: none; border-color: var(--accent); }
 .coach-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
+.coach-note {
+  margin-top: 10px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
 .send-button {
   background: var(--accent);
   color: #fff;
@@ -758,6 +1003,22 @@ button.small { padding: 4px 10px; font-size: 12px; }
   .conv-stream { flex: initial; }
   .messages { flex: initial; max-height: 60vh; }
   .header { flex-wrap: wrap; }
+  .conv-topline { align-items: flex-start; flex-direction: column; }
+  .conv-header h2 { font-size: 28px; }
+  .thread-surface {
+    padding: 16px 14px 14px;
+  }
+  .message,
+  .message.manager,
+  .message.employee,
+  .message.system {
+    max-width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .team-roster {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
   .popover { width: min(320px, calc(100vw - 60px)); }
 }
 
@@ -956,30 +1217,66 @@ button.small { padding: 4px 10px; font-size: 12px; }
 
 /* Team roster — horizontal chip row above conv list */
 .team-roster {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px 4px;
-  flex-wrap: wrap;
+  display: grid;
+  gap: 10px;
 }
 .roster-chip {
-  display: flex;
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 74px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  font-size: 12px;
+  color: var(--text);
+  cursor: pointer;
+  overflow: hidden;
+  padding: 12px 14px;
+  text-align: left;
+  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
+}
+.roster-chip.active {
+  border-color: rgba(31, 67, 125, 0.22);
+  background: rgba(223, 231, 245, 0.92);
+  box-shadow: 0 14px 28px rgba(31, 67, 125, 0.1);
+}
+.roster-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--accent-soft);
-  border: 2px solid var(--line);
-  font-size: 11px;
-  font-weight: 700;
+  background: #ffffff;
   color: var(--accent-strong);
-  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid rgba(31, 67, 125, 0.1);
   overflow: hidden;
-  flex-shrink: 0;
 }
-.roster-chip.active { border-color: var(--accent); }
-.roster-chip img { width: 100%; height: 100%; object-fit: cover; }
+.roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.roster-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.roster-copy strong {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.25;
+}
+.roster-copy small {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+.roster-chip--all .roster-avatar {
+  background: var(--accent-soft);
+}
 .roster-chip-add {
   width: 36px;
   height: 36px;