@springbrand/message-panel 0.1.3-alpha.23 → 0.1.3-alpha.25

package/cloud-os/chat/transcript-model.ts

@@ -27,6 +27,7 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   createdAt?: number;
   error?: string;
   interruptedByUser?: boolean;
+  turnId?: string;
   turnDurationMs?: number;
   turnStartedAt?: number;
   turnStatus?: string;
@@ -45,6 +46,25 @@ export interface CloudOsAttachment {
   mediaType?: string;
 }
 
+interface CloudOsActionPresentationFile {
+  type: "file";
+  url: string;
+  mediaType?: string;
+}
+
+interface CloudOsActionProduces {
+  type: "image" | "audio" | "video" | "document" | "archive" | "data" | "other";
+  mediaType?: string;
+}
+
+export interface CloudOsActionPresentation {
+  type: "action-execution";
+  executionId: string;
+  state: "running" | "ready" | "failed" | "outcome_unknown";
+  produces?: CloudOsActionProduces;
+  content: CloudOsActionPresentationFile[];
+}
+
 export interface PlanStep {
   text: string;
   status: "pending" | "in_progress" | "done";
@@ -79,6 +99,11 @@ export type AssistantBlock =
       mediaType?: string;
     }
   | { kind: "file"; key: string; file: CloudOsAttachment }
+  | {
+      kind: "actionPresentation";
+      key: string;
+      presentation: CloudOsActionPresentation;
+    }
   | { kind: "error"; key: string; title: string; body?: string };
 
 export interface ParallelTool {
@@ -118,8 +143,10 @@ export type CloudOsEntry =
       type: "assistant";
       key: string;
       messageId: string;
+      turnId?: string;
       blocks: AssistantBlock[];
       copyText: string;
+      durationMs?: number;
       timestamp?: number;
       terminal?: { kind: "interrupted" | "error"; title: string; body?: string };
     };
@@ -143,6 +170,10 @@ function nonNegativeNumber(value: unknown): number | undefined {
     : undefined;
 }
 
+function nonEmptyString(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
+
 export function cloudOsMetadata(message: UIMessage): CloudOsMessageMetadata {
   return recordOf(message.metadata) as CloudOsMessageMetadata;
 }
@@ -197,6 +228,54 @@ export function formatFullTimestamp(timestamp: number): string {
   });
 }
 
+function turnDuration(metadata: CloudOsMessageMetadata): number | undefined {
+  const explicit = nonNegativeNumber(metadata.turnDurationMs);
+  if (explicit !== undefined) return explicit;
+  const startedAt = nonNegativeNumber(metadata.turnStartedAt);
+  const completedAt = nonNegativeNumber(metadata.completedAt);
+  return startedAt !== undefined && completedAt !== undefined
+    ? Math.max(0, completedAt - startedAt)
+    : undefined;
+}
+
+function isWorkBlock(block: AssistantBlock): boolean {
+  return (
+    block.kind === "reasoning" ||
+    block.kind === "toolGroup" ||
+    block.kind === "plan" ||
+    block.kind === "parallel" ||
+    block.kind === "subagents"
+  );
+}
+
+/**
+ * 把一条 assistant 消息拆成可折叠的工作过程与始终可见的最终内容。
+ * 最后一段工作之前的 text 是过程旁白；最后一次工作之后的 text 才是正文。
+ */
+export function partitionAssistantBlocks(blocks: readonly AssistantBlock[]): {
+  work: AssistantBlock[];
+  content: AssistantBlock[];
+} {
+  let lastWorkIndex = -1;
+  blocks.forEach((block, index) => {
+    if (isWorkBlock(block)) lastWorkIndex = index;
+  });
+
+  const work: AssistantBlock[] = [];
+  const content: AssistantBlock[] = [];
+  blocks.forEach((block, index) => {
+    if (
+      isWorkBlock(block) ||
+      (block.kind === "text" && index < lastWorkIndex)
+    ) {
+      work.push(block);
+    } else {
+      content.push(block);
+    }
+  });
+  return { work, content };
+}
+
 function toolNameOf(part: unknown): string | null {
   const type = String(recordOf(part).type ?? "");
   if (type === "dynamic-tool") {
@@ -244,6 +323,71 @@ function normalizeStatus(value: unknown): ParallelTool["status"] {
   return "pending";
 }
 
+function actionPresentationOf(value: unknown): CloudOsActionPresentation | null {
+  const presentation = recordOf(recordOf(value).presentation);
+  const state = presentation.state;
+  if (
+    presentation.type !== "action-execution" ||
+    typeof presentation.executionId !== "string" ||
+    !/^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+      presentation.executionId,
+    ) ||
+    (state !== "running" &&
+      state !== "ready" &&
+      state !== "failed" &&
+      state !== "outcome_unknown") ||
+    !Array.isArray(presentation.content)
+  ) return null;
+
+  let produces: CloudOsActionProduces | undefined;
+  if (presentation.produces !== undefined) {
+    const hint = recordOf(presentation.produces);
+    if (
+      !["image", "audio", "video", "document", "archive", "data", "other"].includes(
+        String(hint.type),
+      ) ||
+      (hint.mediaType !== undefined &&
+        (typeof hint.mediaType !== "string" || !/^[^\s/]+\/[^\s/]+$/.test(hint.mediaType)))
+    ) return null;
+    produces = {
+      type: hint.type as CloudOsActionProduces["type"],
+      ...(hint.mediaType === undefined ? {} : { mediaType: hint.mediaType as string }),
+    };
+  }
+  if (state !== "running" && produces) return null;
+
+  const content: CloudOsActionPresentationFile[] = [];
+  for (const value of presentation.content) {
+    const file = recordOf(value);
+    if (file.type !== "file" || typeof file.url !== "string") return null;
+    try {
+      if (new URL(file.url).protocol !== "https:") return null;
+    } catch {
+      return null;
+    }
+    if (
+      file.mediaType !== undefined &&
+      (typeof file.mediaType !== "string" || !file.mediaType.trim())
+    ) return null;
+    content.push({
+      type: "file" as const,
+      url: file.url,
+      ...(file.mediaType !== undefined
+        ? { mediaType: file.mediaType }
+        : {}),
+    });
+  }
+  if (state !== "ready" && content.length > 0) return null;
+
+  return {
+    type: "action-execution",
+    executionId: presentation.executionId,
+    state,
+    ...(produces ? { produces } : {}),
+    content,
+  };
+}
+
 // ── 独立消息(非 assistant 回合)判定 ────────────────────────────────────────
 
 function standaloneEntry(
@@ -427,6 +571,13 @@ function assistantBlocks(
     if (toolName === null) return;
 
     const call = toCloudOsToolCall(part, key, isActive);
+    const presentation = actionPresentationOf(call.output);
+    if (presentation) {
+      pendingCalls.push(call);
+      flush();
+      blocks.push({ kind: "actionPresentation", key, presentation });
+      return;
+    }
 
     if (call.awaitingApproval) {
       const approvalId = approvalIdOf(part);
@@ -524,6 +675,9 @@ export function buildCloudOsEntries({
     }
     return -1;
   })();
+  const activeTurnId = isActive && lastAssistantIndex >= 0
+    ? nonEmptyString(cloudOsMetadata(messages[lastAssistantIndex]!).turnId)
+    : undefined;
 
   messages.forEach((message, index) => {
     if (message.role === "system") return;
@@ -578,8 +732,10 @@ export function buildCloudOsEntries({
       type: "assistant",
       key: `assistant-${message.id}-${index}`,
       messageId: message.id,
+      turnId: nonEmptyString(metadata.turnId),
       blocks,
       copyText: messageText(message),
+      durationMs: turnDuration(metadata),
       timestamp:
         nonNegativeNumber(metadata.completedAt) ??
         nonNegativeNumber(metadata.createdAt),
@@ -587,7 +743,100 @@ export function buildCloudOsEntries({
     });
   });
 
-  return dropSupersededPlans(entries);
+  return aggregateCompletedTurnWork(
+    dropSupersededActionPresentations(dropSupersededPlans(entries)),
+    activeTurnId,
+  );
+}
+
+/** Collapse every completed Turn's assistant segments into one display entry. */
+function aggregateCompletedTurnWork(
+  entries: CloudOsEntry[],
+  activeTurnId: string | undefined,
+): CloudOsEntry[] {
+  const indexesByTurn = new Map<string, number[]>();
+  entries.forEach((entry, index) => {
+    if (entry.type !== "assistant" || !entry.turnId) return;
+    const indexes = indexesByTurn.get(entry.turnId) ?? [];
+    indexes.push(index);
+    indexesByTurn.set(entry.turnId, indexes);
+  });
+
+  const hidden = new Set<number>();
+  const replacements = new Map<number, CloudOsEntry>();
+  for (const [turnId, indexes] of indexesByTurn) {
+    if (turnId === activeTurnId || indexes.length < 2) continue;
+    const assistantEntries = indexes.map(
+      (index) => entries[index] as Extract<CloudOsEntry, { type: "assistant" }>,
+    );
+    const anchorIndex = indexes[indexes.length - 1]!;
+    const anchor = assistantEntries[assistantEntries.length - 1]!;
+    const durations = assistantEntries.flatMap((entry) =>
+      entry.durationMs === undefined ? [] : [entry.durationMs]
+    );
+    const timestamps = assistantEntries.flatMap((entry) =>
+      entry.timestamp === undefined ? [] : [entry.timestamp]
+    );
+
+    indexes.slice(0, -1).forEach((index) => hidden.add(index));
+    replacements.set(anchorIndex, {
+      ...anchor,
+      key: `assistant-turn-${turnId}`,
+      blocks: assistantEntries.flatMap((entry) => entry.blocks),
+      ...(durations.length > 0 ? { durationMs: Math.max(...durations) } : {}),
+      ...(timestamps.length > 0 ? { timestamp: Math.max(...timestamps) } : {}),
+    });
+  }
+
+  return entries.flatMap((entry, index) =>
+    hidden.has(index) ? [] : [replacements.get(index) ?? entry]
+  );
+}
+
+function dropSupersededActionPresentations(entries: CloudOsEntry[]): CloudOsEntry[] {
+  const snapshots = new Map<string, {
+    entryIndex: number;
+    blockIndex: number;
+    presentation: CloudOsActionPresentation;
+  }>();
+  entries.forEach((entry, entryIndex) => {
+    if (entry.type !== "assistant") return;
+    entry.blocks.forEach((block, blockIndex) => {
+      if (block.kind !== "actionPresentation") return;
+      const current = snapshots.get(block.presentation.executionId);
+      if (!current) {
+        snapshots.set(block.presentation.executionId, {
+          entryIndex,
+          blockIndex,
+          presentation: block.presentation,
+        });
+        return;
+      }
+      if (block.presentation.state !== "running") {
+        current.presentation = block.presentation;
+      } else if (current.presentation.state === "running") {
+        current.presentation = {
+          ...block.presentation,
+          produces: block.presentation.produces ?? current.presentation.produces,
+        };
+      }
+    });
+  });
+
+  return entries.map((entry, entryIndex) =>
+    entry.type !== "assistant"
+      ? entry
+      : {
+          ...entry,
+          blocks: entry.blocks.flatMap<AssistantBlock>((block, blockIndex) => {
+            if (block.kind !== "actionPresentation") return [block];
+            const snapshot = snapshots.get(block.presentation.executionId)!;
+            return snapshot.entryIndex === entryIndex && snapshot.blockIndex === blockIndex
+              ? [{ ...block, presentation: snapshot.presentation }]
+              : [];
+          }),
+        }
+  );
 }
 
 /**

package/cloud-os/composer/cloud-os-chat-input.tsx

@@ -3,7 +3,6 @@ import {
   File as FileIcon,
   Plug,
   Plus,
-  Terminal,
 } from "@phosphor-icons/react";
 import {
   AssistantRuntimeProvider,
@@ -106,7 +105,7 @@ export interface CloudOsChatInputProps {
    * 传了就以它为准来决定显示发送键还是停止键。
    */
   turnActive?: boolean;
-  /** 可用的斜杠命令，也会显示在「+」菜单中。 */
+  /** 可用的斜杠命令。 */
   commands?: readonly CloudOsComposerCommand[];
   capabilities?: readonly CloudOsCapabilityView[];
   onCommandSelect?: (command: CloudOsComposerCommand) => void;
@@ -521,25 +520,6 @@ function CloudOsChatInputContent({
                     </span>
                   </DropdownMenu.Item>
                 )}
-                {commands.length > 0 && (
-                  <>
-                    {commands.map((command) => (
-                      <DropdownMenu.Item
-                        key={`${command.prefix ?? "/"}${command.name}`}
-                        onClick={() => selectCommand(command, false)}
-                        className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default"
-                      >
-                        <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
-                          <Terminal size={14} />
-                        </span>
-                        <span className="min-w-0 flex-1 truncate">
-                          {commandLabel(command)}
-                        </span>
-                      </DropdownMenu.Item>
-                    ))}
-                    <div className="my-1 border-t border-kumo-line/70" />
-                  </>
-                )}
                 {onFilesSelected && (
                   <DropdownMenu.Item
                     onClick={() => attachmentInputRef.current?.click()}

package/cloud-os/file-view.tsx

@@ -1,4 +1,13 @@
-import { File as FileIcon } from "@phosphor-icons/react";
+import {
+  Database,
+  File as FileIcon,
+  FileArchive,
+  FileAudio,
+  FileImage,
+  FileText,
+  FileVideo,
+  type Icon,
+} from "@phosphor-icons/react";
 import {
   CheckIcon,
   FileArchiveIcon,
@@ -14,6 +23,21 @@ import {
   useState,
   type ComponentType,
 } from "react";
+import {
+  PRODUCT_PRESETS,
+  productTypeForMediaType,
+  type ProductType,
+} from "./chat/image-generation";
+
+const PRODUCT_ICONS = {
+  image: FileImage,
+  audio: FileAudio,
+  video: FileVideo,
+  document: FileText,
+  archive: FileArchive,
+  data: Database,
+  other: FileIcon,
+} satisfies Record<ProductType, Icon>;
 
 export type FileViewPlacement =
   | "assistant-message"
@@ -21,6 +45,7 @@ export type FileViewPlacement =
   | "user-message";
 
 export type FileViewStatus = "error" | "ready" | "uploading";
+export type FileViewVariant = "compact" | "product";
 
 export interface FileViewFile {
   url?: string;
@@ -32,6 +57,7 @@ export interface FileViewFile {
 export interface FileViewProps {
   file: FileViewFile;
   placement: FileViewPlacement;
+  variant?: FileViewVariant;
   status?: FileViewStatus;
   progress?: number;
   onRemove?: () => void;
@@ -59,10 +85,12 @@ function ImageFileView({
   src,
   label,
   placement,
+  frameClassName,
 }: {
   src: string;
   label: string;
   placement: Exclude<FileViewPlacement, "composer">;
+  frameClassName?: string;
 }) {
   const imageRef = useRef<HTMLImageElement>(null);
   const [loadedSrc, setLoadedSrc] = useState<string>();
@@ -78,9 +106,11 @@ function ImageFileView({
   }, [src]);
 
   const assistant = placement === "assistant-message";
-  const previewClassName = assistant
-    ? "relative inline-block max-w-full overflow-hidden rounded-xl border border-kumo-line align-bottom"
-    : "themed-thumbnail-shadow relative inline-block max-w-64 overflow-hidden rounded-xl border border-kumo-line align-bottom";
+  const previewClassName = frameClassName
+    ? `themed-thumbnail-shadow relative inline-block max-w-full overflow-hidden rounded-2xl border border-kumo-line align-bottom ${frameClassName}`
+    : assistant
+      ? "relative inline-block max-w-full overflow-hidden rounded-xl border border-kumo-line align-bottom"
+      : "themed-thumbnail-shadow relative inline-block max-w-64 overflow-hidden rounded-xl border border-kumo-line align-bottom";
 
   return (
     <span
@@ -93,9 +123,11 @@ function ImageFileView({
         src={src}
         alt={label}
         className={`${
-          assistant
-            ? "block max-h-[28rem] max-w-full object-contain"
-            : "block max-h-52 max-w-64 object-cover"
+          frameClassName
+            ? "block size-full object-contain"
+            : assistant
+              ? "block max-h-[28rem] max-w-full object-contain"
+              : "block max-h-52 max-w-64 object-cover"
         } ${loaded && !error ? "" : "invisible"}`}
         decoding="async"
         loading="lazy"
@@ -115,7 +147,7 @@ function ImageFileView({
             className="size-6 animate-pulse motion-reduce:animate-none"
             aria-hidden="true"
           />
-          <span className="sr-only">Loading {label}</span>
+          <span className="sr-only">Loading preview...</span>
         </span>
       )}
       {error && (
@@ -123,7 +155,7 @@ function ImageFileView({
           className="absolute inset-0 flex min-h-24 min-w-36 items-center justify-center bg-kumo-elevated text-kumo-danger"
           data-image-state="error"
           role="img"
-          aria-label={`Unable to load ${label}`}
+          aria-label="Unable to load preview"
         >
           <FileImageIcon className="size-6" aria-hidden="true" />
         </span>
@@ -132,12 +164,100 @@ function ImageFileView({
   );
 }
 
+function ProductFileView({
+  file,
+  label,
+  placement,
+}: {
+  file: FileViewFile;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+}) {
+  const type = productTypeForMediaType(file.mediaType);
+  const { frame } = PRODUCT_PRESETS[type];
+  const image = type === "image" && file.url;
+  const video = type === "video" && file.url;
+  const ProductIcon = PRODUCT_ICONS[type];
+  const preview = image
+    ? (
+      <ImageFileView
+        src={file.url!}
+        label={label}
+        placement={placement}
+        frameClassName={frame}
+      />
+    )
+    : video
+      ? (
+        <video
+          src={file.url}
+          controls
+          preload="metadata"
+          playsInline
+          aria-label={label}
+          className={`themed-thumbnail-shadow block max-w-full rounded-2xl border border-kumo-line bg-kumo-elevated object-contain ${frame}`}
+          data-video-preview=""
+        />
+      )
+      : (
+        <span className={`themed-thumbnail-shadow relative inline-grid max-w-full place-items-center overflow-hidden rounded-2xl border border-kumo-line bg-kumo-elevated ${frame}`}>
+          <ProductIcon
+            size={24}
+            weight="light"
+            className="text-kumo-subtle"
+            aria-hidden="true"
+            data-product-icon={type}
+          />
+          {file.mediaType && (
+            <span className="absolute end-2.5 top-2.5 font-mono text-[10px] text-kumo-inactive">
+              {file.mediaType}
+            </span>
+          )}
+        </span>
+      );
+  const content = (
+    <span className="flex w-fit max-w-full flex-col gap-2.5" data-product-file-view={type}>
+      {preview}
+      <span className="flex min-w-0 max-w-full items-center gap-1 text-xs text-kumo-inactive">
+        <span className="capitalize text-kumo-subtle">{type}</span>
+        <span aria-hidden="true">·</span>
+        <span className="min-w-0 truncate">{label}</span>
+      </span>
+    </span>
+  );
+
+  return file.url && !video ? (
+    <a
+      href={file.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Open ${label}`}
+      className="inline-block max-w-full rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+      data-file-view={image ? undefined : ""}
+      data-placement={placement}
+      data-file-variant="product"
+    >
+      {content}
+    </a>
+  ) : (
+    <span
+      className="inline-block max-w-full"
+      data-file-view=""
+      data-placement={placement}
+      data-file-variant="product"
+    >
+      {content}
+    </span>
+  );
+}
+
 /**
  * Cloud OS 的默认文件视图。宿主可通过 `renderFile` 在同一 seam 替换它。
  */
 export function FileView({
   file,
   placement,
+  variant = "compact",
   status = "ready",
   progress = 0,
   onRemove,
@@ -238,6 +358,10 @@ export function FileView({
     );
   }
 
+  if (variant === "product") {
+    return <ProductFileView file={file} label={label} placement={placement} />;
+  }
+
   if (isImage) {
     return (
       <ImageFileView src={file.url!} label={label} placement={placement} />
@@ -251,7 +375,28 @@ export function FileView({
       data-placement={placement}
     >
       <FileIcon size={13} className="text-kumo-inactive" />
-      {label}
+      <span className="min-w-0 truncate">{label}</span>
+      {file.url && (
+        <span className="ms-1 inline-flex items-center gap-1.5 border-s border-kumo-line ps-2">
+          <a
+            href={file.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Open ${label}`}
+            className="rounded text-kumo-default hover:text-kumo-default-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            Open
+          </a>
+          <a
+            href={file.url}
+            download={label}
+            aria-label={`Download ${label}`}
+            className="rounded text-kumo-default hover:text-kumo-default-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            Download
+          </a>
+        </span>
+      )}
     </span>
   );
 }

package/cloud-os/index.ts

@@ -20,6 +20,7 @@ export type {
   FileViewPlacement,
   FileViewProps,
   FileViewStatus,
+  FileViewVariant,
 } from "./file-view";
 export {
   CloudOsConversationLoading,
@@ -64,8 +65,12 @@ export type { CloudOsUrlResolver } from "./chat/markdown-message";
 export {
   ThinkingTraceRow,
   ToolCallDetails,
+  ToolGroupDetails,
   ToolGroupRow,
+  WorkDescriptionRow,
   WorkIcon,
+  WorkTraceDisclosure,
+  formatWorkDuration,
 } from "./chat/tool-rows";
 export {
   ApprovalBlock,
@@ -90,6 +95,7 @@ export {
   formatClockTime,
   formatFullTimestamp,
   messageText,
+  partitionAssistantBlocks,
   requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";

package/cloud-os/styles/cloud-os.css

@@ -51,6 +51,8 @@
   --color-kumo-success: oklch(72.3% 0.219 149.579);
   --color-kumo-success-tint: oklch(92% 0.08 150);
 
+  --color-operation-base: #ffffff;
+
   --color-kumo-tip-shadow: #14111014;
   --color-kumo-tip-stroke: transparent;
 
@@ -73,6 +75,10 @@
   --color-cos-status-live: oklch(72.3% 0.219 149.579);
   --color-cos-status-draft: oklch(68.1% 0.162 75.834);
   --color-cos-status-building: oklch(62.3% 0.214 259.815);
+  --text-color-cos-work-description: rgba(0, 0, 0, 0.5);
+  --text-color-cos-work-description-subtle: rgba(0, 0, 0, 0.7);
+  --text-color-cos-tool-group: rgba(0, 0, 0, 0.5);
+  --text-color-cos-output: #000000b3;
 }
 
 /* ── 作用域根:通用 token 只在 cloud-os 子树内生效 ─────────────────────────── */
@@ -152,6 +158,8 @@
   --color-kumo-success: oklch(52.7% 0.154 150.069);
   --color-kumo-success-tint: oklch(0.25 0.06 150.069);
 
+  --color-operation-base: var(--color-kumo-base);
+
   --color-kumo-tip-shadow: #00000066;
   --color-kumo-tip-stroke: oklch(0.34 0.022 285);
 
@@ -172,6 +180,10 @@
   --color-cos-status-live: oklch(79.2% 0.209 151.711);
   --color-cos-status-draft: oklch(82.8% 0.189 84.429);
   --color-cos-status-building: oklch(74% 0.16 250);
+  --text-color-cos-work-description: var(--text-color-kumo-subtle);
+  --text-color-cos-work-description-subtle: var(--text-color-kumo-subtle);
+  --text-color-cos-tool-group: var(--text-color-kumo-inactive);
+  --text-color-cos-output: var(--text-color-kumo-subtle);
 
   --color-selection-bg: color-mix(in srgb, var(--color-kumo-brand) 28%, transparent);
   --color-selection-text: oklch(0.97 0.006 285);