rift-ds 1.0.0

package/components/ThreadPanel/ThreadPanel.css

@@ -0,0 +1,862 @@
+/* ============================================
+   THREAD PANEL COMPONENT
+   The session-history rail of a chat or agent product: brand header,
+   new-thread action, standing controls, projects, grouped history,
+   profile footer. Deliberately surface-less — the host paints the band
+   it sits on.
+
+   Expand/collapse is AppSidebar's choreography, restated: the panel owns
+   its width (64px rail, 280px expanded — the same constants), the sweeping
+   clip and the labels' opacity fades carry the whole transition, and inner
+   layout stays constant so nothing snaps mid-glide. Rows keep AppSidebar's
+   geometry: 40px --radius-pill pills inset by 12px margins, so a collapsed
+   row is a perfect circle around its icon (12 + 8 + 24 + 8 + 12 = 64).
+   ============================================ */
+
+.ds-thread-panel {
+  /* Width and padding combine on the root and the rows, so the component
+     declares its own sizing model rather than leaning on a host reset —
+     without it the 64px rail renders 88 wide in a bare host. */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  /* AppSidebar's row rhythm: one gap-xs beat between every action row,
+     the new-thread row included; the larger section breaks come from the
+     history's and footer's own top padding. */
+  gap: var(--gap-100);
+  width: 64px;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  /* The inline inset lives on the panel, not the rows: every row fills
+     the padded column, so the fills all stop at the same 12px breathing
+     room in both states — and the collapsed circle math is unchanged
+     (12 + 8 + 24 + 8 + 12 = the 64px rail). */
+  padding: var(--padding-400) var(--padding-300);
+  transition: width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-thread-panel--expanded {
+  width: 280px;
+}
+
+/* Collapsed, the whole rail is an expand target (the markup only wires
+   the click when a collapse handler exists, and rows keep their own
+   jobs); the cursor says so. */
+.ds-thread-panel:not(.ds-thread-panel--expanded) {
+  cursor: pointer;
+}
+
+/* ============================================
+   HEADER — brand row and the collapse toggle
+   ============================================ */
+
+/* Collapsed, --padding-200 centres the 24px mark on the rail's axis
+   (12 + 8 = the rows' icon seat); expanded it deepens to the 28px optical
+   seat with everything else, the padding gliding with the sweep. The
+   margin sits the brand row evenly between the panel's top edge and the
+   new-thread row: 6 + 12 + the panel's 4px gap below mirrors the 16px
+   panel padding + 6 above. */
+.ds-thread-panel__header {
+  display: flex;
+  align-items: center;
+  flex: none;
+  min-width: 0;
+  padding: var(--padding-150) var(--padding-200);
+  margin-bottom: var(--gap-300);
+  transition: padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__header {
+  padding: var(--padding-150) var(--padding-400);
+}
+
+/* A logo-less header collapsed to the rail: the empty brand slot would
+   otherwise push the standing toggle off the rail's axis, so it stands
+   down and the toggle centres like every other mark. */
+.ds-thread-panel:not(.ds-thread-panel--expanded)
+  .ds-thread-panel__header--bare {
+  justify-content: center;
+}
+
+.ds-thread-panel:not(.ds-thread-panel--expanded)
+  .ds-thread-panel__header--bare
+  .ds-thread-panel__header-inner {
+  display: none;
+}
+
+/* Collapsed, the logo doubles as the expand button (role="button" comes
+   from the markup); the pointer affordance is all it needs visually. */
+.ds-thread-panel__header-inner {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+.ds-thread-panel__header-inner[role='button'] {
+  cursor: pointer;
+}
+
+.ds-thread-panel__header-inner[role='button']:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-100);
+}
+
+.ds-thread-panel__logo {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/* ChatHeader's title face, so a brand here sits at the same size the
+   chat's own header wears it — the two surfaces meet in one product. */
+.ds-thread-panel__brand {
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__brand {
+  opacity: 1;
+}
+
+/* The toggle folds to nothing while collapsed — the logo carries the
+   expand gesture — and glides back in with the width (AppSidebar's
+   mechanics: both widths explicit, so the width interpolates). */
+.ds-thread-panel__toggle {
+  --icon-size: var(--icon-size-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  height: 24px;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
+    width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__toggle {
+  width: 24px;
+  opacity: 1;
+}
+
+/* With no logo there is nothing to hand the expand gesture to, so the
+   toggle stays present in both states. */
+.ds-thread-panel__toggle--standalone {
+  width: 24px;
+  opacity: 1;
+}
+
+.ds-thread-panel__toggle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-100);
+}
+
+/* ============================================
+   ROWS — AppSidebar's shared pill shape
+   40px --radius-pill rows inset by 12px margins with 8px padding: the
+   icon keeps its x-position in both states, and the collapsed hover pill
+   is a circle clear of the rail edges.
+   ============================================ */
+
+.ds-thread-panel__new,
+.ds-thread-panel__control,
+.ds-thread-panel__project,
+.ds-thread-panel__thread {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  width: 100%;
+  height: 40px;
+  min-width: 0;
+  padding: var(--padding-200);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  text-decoration: none;
+  transition: background-color var(--motion-duration-fast)
+      var(--motion-ease-standard),
+    padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+/* Expanded, the rows breathe: --padding-400 inline sets the 28px optical
+   seat (12 + 16) that everything in the panel aligns to — the pen icon's
+   box is the guide. Collapsed returns to --padding-200, which is what the
+   40px circle's math needs; the padding glides with the rail's sweep. */
+.ds-thread-panel--expanded .ds-thread-panel__new,
+.ds-thread-panel--expanded .ds-thread-panel__control,
+.ds-thread-panel--expanded .ds-thread-panel__project,
+.ds-thread-panel--expanded .ds-thread-panel__thread {
+  padding: var(--padding-200) var(--padding-400);
+}
+
+.ds-thread-panel__new:hover,
+.ds-thread-panel__control:hover,
+.ds-thread-panel__project:hover,
+.ds-thread-panel__thread:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-thread-panel__new:focus-visible,
+.ds-thread-panel__control:focus-visible,
+.ds-thread-panel__project:focus-visible,
+.ds-thread-panel__projects-add:focus-visible,
+.ds-thread-panel__thread:focus-visible,
+.ds-thread-panel__more:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   NEW THREAD — the one filled action, always in reach
+   ============================================ */
+
+/* Deliberately as quiet as the control rows: the leading position and the
+   add glyph carry the affordance, not a fill. */
+.ds-thread-panel__new {
+  flex: none;
+}
+
+.ds-thread-panel__new-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-thread-panel__new-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-primary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__new-label {
+  opacity: 1;
+}
+
+.ds-thread-panel__new-kbd {
+  display: inline-flex;
+  flex: none;
+  gap: var(--gap-050);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__new-kbd {
+  opacity: 1;
+}
+
+/* ============================================
+   CONTROLS — quiet standing rows
+   ============================================ */
+
+.ds-thread-panel__controls {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  gap: var(--gap-100);
+}
+
+.ds-thread-panel__control-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-thread-panel__control-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__control-label {
+  opacity: 1;
+}
+
+/* ============================================
+   PROJECTS — standing rows under their own overline header
+   Rows share the controls' anatomy (icon circles while collapsed, labels
+   fading with the sweep); the header carries the section's name and the
+   quiet new-project button, and fades out whole while collapsed — the
+   rows' icons keep the section present on the rail.
+   ============================================ */
+
+.ds-thread-panel__projects {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  gap: var(--gap-050);
+}
+
+/* The group-label's seat and rhythm, with the add button balanced on the
+   trailing edge; the vertical inset shrinks to keep the 24px button from
+   growing the header past the label-only group rows below. */
+.ds-thread-panel__projects-header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+  padding: var(--padding-150) var(--padding-200) var(--padding-150)
+    var(--padding-400);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
+    visibility 0s var(--motion-duration-base);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__projects-header {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
+    visibility 0s;
+}
+
+.ds-thread-panel__projects-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.ds-thread-panel__projects-add {
+  --icon-size: var(--icon-size-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
+}
+
+.ds-thread-panel__projects-add:hover {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-thread-panel__project--active {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-thread-panel__project-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-thread-panel__project-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__project-label {
+  opacity: 1;
+}
+
+/* A project's meta fades with the labels — collapsed, the row is only its
+   icon circle. The label fades' pace, not the menu-fade's. */
+.ds-thread-panel__project .ds-thread-panel__meta {
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__project .ds-thread-panel__meta {
+  opacity: 1;
+}
+
+/* ============================================
+   HISTORY — the one scrolling region
+   Threads have no icons, so unlike AppSidebar's nav the history has no
+   collapsed form: it fades out and leaves the accessibility tree and tab
+   order (visibility), holding the rail's middle open.
+   ============================================ */
+
+.ds-thread-panel__history {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400);
+  padding-top: var(--padding-150);
+  /* Tucked-away scrollbar (ChatThread's manner, without its JS): thin, no
+     track fill, and invisible until the pointer is over the history. No
+     reserved gutter — it would hold the history's rows 10px narrower than
+     the action rows above on classic-scrollbar platforms, and the row
+     widths matching matters more than a rare reflow when a long history
+     first overflows. */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
+    visibility 0s var(--motion-duration-base);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__history {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
+    visibility 0s;
+}
+
+.ds-thread-panel__history:hover {
+  scrollbar-color: var(--color-divider) transparent;
+}
+
+.ds-thread-panel__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+}
+
+/* Aligned with the expanded rows' 28px optical seat. The vertical padding
+   is the rows' own inset restated — as if the label sat inside a row —
+   so the overline keeps the pills' rhythm instead of hugging the
+   new-thread row above and the first thread below. */
+.ds-thread-panel__group-label {
+  padding: var(--padding-200) var(--padding-400);
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.ds-thread-panel__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  /* A hairline of air between fills, so stacked hover and active pills
+     never read as one slab. */
+  gap: 1px;
+}
+
+/* Thread rows keep the shared 40px shape — no height override, so they
+   match the new-thread and control rows exactly. The <li> is the row's
+   frame: relative, so the overflow trigger can sit over the trailing
+   edge without living inside the row button (nested controls are
+   invalid markup). */
+
+.ds-thread-panel__row {
+  position: relative;
+  min-width: 0;
+}
+
+.ds-thread-panel__thread--active {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+/* A row with a description wraps to two lines: the title line keeps the
+   shared height's rhythm, the description takes the full second line, and
+   the row's gap becomes column-only so the lines sit close. */
+.ds-thread-panel__thread--detailed {
+  height: auto;
+  min-height: 40px;
+  flex-wrap: wrap;
+  column-gap: var(--gap-200);
+  row-gap: 0;
+}
+
+/* The unread dot: a small status disc leading the title. Sized on the gap
+   scale — there is no icon token this small, and 8px matches the title's
+   cap height. */
+.ds-thread-panel__unread {
+  flex: none;
+  width: var(--gap-200);
+  height: var(--gap-200);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-status-info-icon);
+}
+
+.ds-thread-panel__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  /* A long title dissolves at the trailing edge instead of clipping to an
+     ellipsis — the fade is where the overflow trigger lands, so revealed
+     text and control never fight. Short titles end before the fade zone
+     and are untouched; the full text stays in the row's tooltip.
+     ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--gap-1000)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--gap-1000)),
+    transparent
+  );
+}
+
+/* The naming state: a shimmer bar holds the title's place while the host
+   generates a name (Skeleton's sweep restated on the row's own geometry);
+   the row's accessible name stays on its tooltip. */
+.ds-thread-panel__title--pending {
+  display: flex;
+  align-items: center;
+}
+
+.ds-thread-panel__title-shimmer {
+  display: block;
+  /* Full width of the title's space — the row's inline padding is the
+     only inset; the title mask softens its trailing end. */
+  width: 100%;
+  height: 0.75em;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-secondary);
+  position: relative;
+  overflow: hidden;
+}
+
+.ds-thread-panel__title-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-bg-container-primary) 50%,
+    transparent 100%
+  );
+  /* ds-allow(motion): Skeleton's shimmer — the sweep needs a symmetric
+     in-out curve no --motion-ease-* token provides; the duration is
+     tokenized. */
+  animation: ds-thread-panel-shimmer var(--motion-duration-loop-shimmer)
+    ease-in-out infinite;
+}
+
+@keyframes ds-thread-panel-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* The description line: the caption face on the full second line, fading
+   at the trailing edge like the title above it. Indented past the unread
+   dot's column so both lines share a left edge.
+   ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+.ds-thread-panel__description {
+  flex-basis: 100%;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--gap-1000)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--gap-1000)),
+    transparent
+  );
+}
+
+.ds-thread-panel__thread--unread .ds-thread-panel__description {
+  /* The dot's width plus the row's column gap. */
+  margin-left: calc(var(--gap-200) + var(--gap-200));
+}
+
+/* The trailing cluster: session glyph, pin marker, and the meta caption,
+   fading together when the overflow trigger needs their edge. */
+.ds-thread-panel__trail {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--gap-100);
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-thread-panel__thread-icon,
+.ds-thread-panel__pin {
+  --icon-size: var(--icon-size-500);
+  flex: none;
+  color: var(--color-icon-secondary);
+}
+
+.ds-thread-panel__meta {
+  flex: none;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* ============================================
+   THREAD MENU — the hover-revealed overflow trigger
+   A 28px circular trigger over the row's faded trailing edge, opening the
+   compact DropdownMenu. Hidden until the row is hovered or holds keyboard
+   focus, and held while its menu is open — never standing on a resting
+   row. The meta caption steps aside as the trigger arrives, since they
+   share the trailing edge.
+   ============================================ */
+
+.ds-thread-panel__row .ds-thread-panel__menu {
+  position: absolute;
+  top: var(--padding-150);
+  right: var(--padding-150);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-thread-panel__row:hover .ds-thread-panel__menu,
+.ds-thread-panel__row:focus-within .ds-thread-panel__menu,
+.ds-thread-panel__row .ds-thread-panel__menu:has([aria-expanded='true']) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ds-thread-panel__row--with-menu:hover .ds-thread-panel__trail,
+.ds-thread-panel__row--with-menu:focus-within .ds-thread-panel__trail,
+.ds-thread-panel__row--with-menu:has([aria-expanded='true'])
+  .ds-thread-panel__trail {
+  opacity: 0;
+}
+
+/* While the menu is open the pointer is off in the panel, so the row holds
+   its hover wash — the open menu and its row read as one thing. */
+.ds-thread-panel__row:has(.ds-thread-panel__menu [aria-expanded='true'])
+  .ds-thread-panel__thread {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-thread-panel__menu-trigger {
+  --icon-size: var(--icon-size-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
+}
+
+.ds-thread-panel__menu-trigger:hover {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-thread-panel__menu-trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   RENAME — the inline title editor
+   The input wears the row's exact shape and face; the teal border is the
+   active-input treatment, the one sanctioned "you are editing here" mark.
+   ============================================ */
+
+.ds-thread-panel__rename {
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  min-width: 0;
+  padding: 0 var(--padding-400);
+  border: var(--border-025) solid var(--color-action-primary-bg);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-primary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  outline: none;
+}
+
+/* ============================================
+   MORE — the quiet trailing reveal
+   ============================================ */
+
+.ds-thread-panel__more {
+  align-self: flex-start;
+  padding: var(--padding-150) var(--padding-400);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-thread-panel__more:hover {
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   FOOTER — host furniture and the profile row
+   The slot fades out while collapsed (AppSidebar's contract); the profile
+   keeps its avatar, the texts fading with the labels above.
+   ============================================ */
+
+.ds-thread-panel__footer {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  gap: var(--gap-200);
+  min-width: 0;
+  /* Enough air that an overflowing history's last row never crowds the
+     profile — the footer is a different region, and the space says so. */
+  padding-top: var(--padding-200);
+}
+
+.ds-thread-panel__footer-slot {
+  min-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__footer-slot {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Same per-state seat as the header: collapsed, --padding-100 centres the
+   32px avatar on the rail's axis (12 + 4); expanded joins the 28px seat. */
+.ds-thread-panel__profile {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+  padding: var(--padding-100);
+  transition: padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__profile {
+  padding: var(--padding-100) var(--padding-400);
+}
+
+.ds-thread-panel__profile-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-primary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__profile-name {
+  opacity: 1;
+}
+
+.ds-thread-panel__profile-meta {
+  flex: none;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-thread-panel--expanded .ds-thread-panel__profile-meta {
+  opacity: 1;
+}