@keith9681/dsh-sidebar 0.15.2

package/src/client/SideChatView.module.css

@@ -0,0 +1,437 @@
+/* Side Chat tab: ONE side conversation per tab (Codex-style). Visual
+ * language mirrors the main conversation pane: right-aligned user bubbles
+ * on --dsw-specific-bubble, full-width assistant markdown, a capsule
+ * composer card on --dsw-specific-input-major with a circular accent
+ * send/stop button. Tool calls, thinking and context injections share one
+ * collapsible-line chrome (no cards); shimmer is reserved for generating
+ * states (running status line, streaming rows, the creating hero). Motion
+ * is crossfade-only (≤200ms entrances, no springs); reduced-motion disables
+ * every loop. All values consume DSW tokens (fallbacks point at older alias
+ * tokens for rc-era hosts). */
+.sidechat {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── thread header (status dot · agent badge · threads menu · save) ─── */
+.sidechatDetailHeader {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 36px;
+  padding: 4px 8px 4px 12px;
+  border-bottom: 1px solid var(--dsw-alias-hairline);
+}
+
+.sidechatHeaderDot {
+  flex: none;
+}
+
+.sidechatHeaderSpacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.sidechatAgentBadge {
+  flex: none;
+  max-width: 55%;
+  padding: 1px 8px;
+  border: 1px solid var(--dsw-alias-hairline);
+  border-radius: 999px;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidechatIconBtn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  transition: background-color 100ms ease-out, color 100ms ease-out;
+}
+
+.sidechatIconBtn:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.sidechatIconBtn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* ── hero (unbound tab: the one brand moment) ───────────────────────── */
+.sidechatHero {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 20px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+  animation: sidechatFadeIn 200ms ease-out;
+}
+
+.sidechatHeroTitle {
+  font: var(--dsw-font-s-14);
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+}
+
+.sidechatHeroDesc {
+  max-width: 300px;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+  line-height: 1.6;
+}
+
+.sidechatPrimaryBtn {
+  flex: none;
+  margin-top: 4px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 999px;
+  background: var(--dsw-alias-button-info-fill, var(--dsw-alias-accent));
+  color: var(--dsw-alias-button-info-label, var(--dsw-alias-accent-ink, #fff));
+  font: var(--dsw-font-s-13);
+  cursor: pointer;
+  transition: opacity 100ms ease-out;
+}
+
+.sidechatPrimaryBtn:hover:not(:disabled) {
+  opacity: 0.88;
+}
+
+.sidechatPrimaryBtn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.sidechatHint {
+  flex: none;
+  padding: 4px 12px;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.sidechatError {
+  flex: none;
+  padding: 4px 12px;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-danger);
+}
+
+/* ── transcript ─────────────────────────────────────────────────────── */
+.sidechatScroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Rows crossfade in on append (keys are stable, so only NEW rows play). */
+.sidechatScroll > * {
+  animation: sidechatRowIn 180ms ease-out;
+}
+
+/* User message: right-aligned bubble, same surface as the main pane. */
+.sidechatUser {
+  align-self: flex-end;
+  max-width: 88%;
+  padding: 8px 14px;
+  border-radius: 18px;
+  background: var(--dsw-specific-bubble, var(--dsw-alias-bg-base));
+  font: var(--dsw-font-s-14);
+  color: var(--dsw-alias-label-primary);
+  overflow-wrap: anywhere;
+}
+
+/* Assistant message: full-width narration, no bubble — the main pane way. */
+.sidechatAssistant {
+  align-self: stretch;
+  font: var(--dsw-font-s-14);
+  color: var(--dsw-alias-label-primary);
+  overflow-wrap: anywhere;
+}
+
+/* ── collapsible context rows (tool / thinking / injection, Codex-style) ──
+ * One quiet line — chevron + label + one-line summary — that expands into
+ * an indented body hung on a hairline thread. No cards, no fills: hierarchy
+ * rides ink weight alone. Streaming rows shimmer the label (shimmer =
+ * generating); failed rows go danger; reduced-motion stills every loop. */
+.sidechatRow {
+  align-self: stretch;
+}
+
+.sidechatRowLine {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 1px 0;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.sidechatRowSummary {
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.sidechatRowSummary::-webkit-details-marker {
+  display: none;
+}
+
+.sidechatRowSummary:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.sidechatRowStatic {
+  cursor: default;
+}
+
+.sidechatRowChevron {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  transition: transform 100ms ease-out;
+}
+
+.sidechatRow[open] .sidechatRowChevron {
+  transform: rotate(90deg);
+}
+
+.sidechatRowLabel {
+  flex: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.sidechatRowMono {
+  font-family: var(--dsw-font-mono);
+}
+
+.sidechatRowMeta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--dsw-font-mono);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.sidechatRowFailed .sidechatRowLabel,
+.sidechatRowFailed .sidechatRowMeta {
+  color: var(--dsw-alias-danger);
+}
+
+.sidechatRowBody {
+  margin: 2px 0 4px 7px;
+  padding: 2px 0 2px 10px;
+  border-left: 1px solid var(--dsw-alias-hairline);
+}
+
+.sidechatRowProse {
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.sidechatRowCode {
+  margin: 0;
+  padding: 4px 0;
+  font: var(--dsw-font-xxs-12);
+  font-family: var(--dsw-font-mono);
+  color: var(--dsw-alias-label-secondary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.sidechatRowCode + .sidechatRowCode {
+  border-top: 1px solid var(--dsw-alias-hairline);
+}
+
+/* Shimmer sweep text: generating (streaming row labels, creating hero). */
+.sidechatShimmerText {
+  background-image: linear-gradient(
+    90deg,
+    var(--dsw-alias-label-tertiary) 0%,
+    var(--dsw-alias-label-primary) 50%,
+    var(--dsw-alias-label-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: sidechatSweep 2.6s linear infinite;
+}
+
+/* ── running status line (above the composer, main-pane style) ──────── */
+.sidechatStatus {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 14px 6px;
+  animation: sidechatFadeIn 160ms ease-out;
+}
+
+.sidechatStatusText {
+  font: var(--dsw-font-xxs-12);
+  background-image: linear-gradient(
+    90deg,
+    var(--dsw-alias-label-tertiary) 0%,
+    var(--dsw-alias-label-primary) 50%,
+    var(--dsw-alias-label-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: sidechatSweep 2.6s linear infinite;
+}
+
+/* ── composer (capsule card, InputBar-aligned) ──────────────────────── */
+.sidechatComposer {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 8px 8px;
+  padding: 8px 8px 6px 14px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin, var(--dsw-alias-hairline));
+  border-radius: 16px;
+  background: var(--dsw-specific-input-major, var(--dsw-alias-bg-base));
+  box-shadow: var(--dsw-shadow-lv2, none);
+}
+
+.sidechatComposerInput {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 2px 0;
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: var(--dsw-font-s-14);
+  line-height: 22px;
+  outline: none;
+  resize: none;
+  max-height: 132px;
+}
+
+.sidechatComposerInput::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.sidechatComposerBar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+}
+
+.sidechatComposerMeta {
+  flex: 1;
+  min-width: 0;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidechatSendBtn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--dsw-alias-button-info-fill, var(--dsw-alias-accent));
+  color: var(--dsw-alias-button-info-label, var(--dsw-alias-accent-ink, #fff));
+  cursor: pointer;
+  /* send ⇄ stop swap: keyed remount plays this, hover only fades. */
+  animation: sidechatBtnIn 120ms ease-out;
+  transition: opacity 100ms ease-out;
+}
+
+.sidechatSendBtn:hover:not(:disabled) {
+  opacity: 0.88;
+}
+
+.sidechatSendBtn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* ── motion vocabulary (crossfade only, ≤200ms; loops reduced-motion off) */
+@keyframes sidechatRowIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes sidechatFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes sidechatBtnIn {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes sidechatSweep {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidechatScroll > *,
+  .sidechatHero,
+  .sidechatStatus,
+  .sidechatSendBtn {
+    animation: none;
+  }
+  .sidechatStatusText,
+  .sidechatShimmerText {
+    animation: none;
+    background-image: none;
+    color: var(--dsw-alias-label-tertiary);
+  }
+  .sidechatRowChevron {
+    transition: none;
+  }
+}