fix(agents): restore the conversation card layout (#2089)

* fix(agents): restore the conversation card layout

* fix(agents): group consecutive author rows and anchor message footers

src/features/agents/Session.module.css

@@ -1,5 +1,6 @@
 .session {
-  --session-content-width: calc(var(--agent-conversation-width) - var(--space-4) * 6);
+  --session-content-width: var(--agent-conversation-width);
+  --session-card-width: 80%;
   flex: 1;
   min-height: 0;
   min-width: 0;
@@ -11,6 +12,7 @@
 }
 
 .conversation {
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -111,25 +113,19 @@
   min-width: 0;
   width: min(100%, var(--session-content-width));
   max-width: 100%;
-  margin-inline: 0;
+  margin-inline: auto;
   box-sizing: border-box;
 }
-/* Messages and folded process rows share the tool-window gutter. */
+.conversationRow {
+  min-width: 0;
+}
+/* Keep turns distinct and the work within a turn close to its author. */
 .stream > * + * {
-  margin-top: var(--space-3);
+  margin-top: var(--space-4);
 }
-.stream > * + .process {
+.stream > [data-process] + [data-process] {
   margin-top: var(--space-2);
 }
-.stream > .process + * {
-  margin-top: var(--space-2);
-}
-.stream > * + .agentMessage[data-continuation] {
-  margin-top: var(--space-2);
-}
-.stream > .process + .process {
-  margin-top: 2px;
-}
 .stream:focus {
   outline: none;
 }
@@ -182,11 +178,19 @@
 .messageHead > .role {
   margin-bottom: 0;
 }
-/* User prompts stay in the same column as replies and tool calls. */
+/* User cards and their footers share a right edge. */
 .userMessage {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: flex-end;
+}
+.userMessage > .user {
+  width: fit-content;
+  max-width: min(var(--session-card-width), 720px);
+}
+.userMessage > .messageHead,
+.userMessage > .messageFooter {
+  justify-content: flex-end;
 }
 /* The actions and time below a message, in flow so they never cover the next entry. */
 .messageFooter {
@@ -197,9 +201,6 @@
   max-width: 100%;
   flex-wrap: wrap;
 }
-.messageFooter > .messageTime {
-  order: -1;
-}
 /* Who wrote the message. */
 .role {
   display: flex;
@@ -214,14 +215,38 @@
 .agentMessage {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: flex-start;
+}
+.agentAuthor {
+  display: flex;
+  align-items: center;
+  min-height: var(--h-control-small);
+}
+.agentAuthor > .role {
+  margin-bottom: 0;
+}
+.agentAuthor + * {
+  margin-top: calc(var(--space-2) / 2);
+}
+.conversationRow > .process,
+.conversationRow > .permissionLine {
+  max-width: min(var(--session-card-width), calc(var(--session-content-width) * 0.8), 760px);
 }
-.agentMessage > .messageHead,
 .agentCard {
   box-sizing: border-box;
-  width: 100%;
+  width: fit-content;
+  max-width: min(var(--session-card-width), calc(var(--session-content-width) * 0.8), 760px);
   min-width: 0;
   overflow-wrap: anywhere;
+  padding: var(--space-2) calc(var(--space-2) + var(--space-2) / 4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-small);
+  background: var(--bg-elev);
+}
+@container (max-width: 640px) {
+  .stream {
+    --session-card-width: 96%;
+  }
 }
 .messageActions {
   display: inline-flex;
@@ -233,6 +258,7 @@
   -webkit-user-select: none;
   user-select: none;
 }
+.conversationRow:nth-last-child(1 of [data-message]) .messageActions,
 .message:hover .messageActions,
 .reply:hover .messageActions,
 .agentMessage:hover .messageActions,
@@ -301,10 +327,10 @@
 .user {
   width: 100%;
   box-sizing: border-box;
-  padding: var(--space-2);
+  padding: var(--space-2) calc(var(--space-2) + var(--space-2) / 4);
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
-  background: var(--bg-elev);
+  background: var(--bg-tree-selected-inactive);
   color: var(--fg-strong);
   line-height: 1.5;
   white-space: pre-wrap;
@@ -792,7 +818,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  align-self: flex-start;
+  align-self: center;
   width: 100%;
   max-width: calc(var(--session-content-width) + var(--space-3) * 2);
   box-sizing: border-box;