feat: add temporal context and contextual help

webui/src/components/Card.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { usePlatformLanguage } from "../i18n/LanguageContext";
+import type { PlatformInterfaceIdentityProps } from "../types";
 
-type CardProps = {
+type CardProps = PlatformInterfaceIdentityProps & {
   title?: ReactNode;
   children: ReactNode;
   actions?: ReactNode;
@@ -38,7 +39,7 @@ function writeCollapseState(storageKey: string | null, collapsed: boolean): void
     // localStorage may be unavailable in private or restricted contexts.
   }}
 
-export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true }: CardProps) {
+export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true, interfaceId, helpContextId, helpTopicId }: CardProps) {
   const { translateText } = usePlatformLanguage();
   const storageKey = resolveCollapseStorageKey(collapsible, persistCollapse, collapseKey, title);
   const [collapseState, setCollapseState] = useState(() => ({ storageKey, collapsed: readCollapseState(storageKey) }));
@@ -59,7 +60,14 @@ export default function Card({ title, children, actions, collapsible = false, co
   }
 
   return (
-    <section className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}>
+    <section
+      className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}
+      data-help-scope="interface"
+      data-interface-id={interfaceId}
+      data-help-context-id={helpContextId}
+      data-help-topic-id={helpTopicId}
+      data-help-key={typeof title === "string" ? title : undefined}
+    >
       {hasHeader &&
       <header className="card-header">
           {title && (typeof title === "string" ? <h2>{translateText(title)}</h2> : <div className="card-title-node">{title}</div>)}
@@ -85,4 +93,4 @@ export default function Card({ title, children, actions, collapsible = false, co
       {shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}</div> : body)}
     </section>);
 
-}
+}