@progress/kendo-themes-html 14.4.0-dev.2 → 14.4.0-dev.4

package/src/agent-response/agent-step.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { Icon } from "../icon";
+import { Badge } from "../badge";
+import { KendoComponent, KendoBaseProps } from "../_types/component";
+import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
+
+export const AGENT_STEP_CLASSNAME = "k-agent-step";
+
+const states = [] as const;
+const options = {};
+
+export type KendoAgentStepProps = {
+  /** Icon name for the step type (e.g. "sparkles", "search", "wrench", "code", "file-txt") */
+  icon?: string;
+  /** Primary label text (bold) — e.g. "Thinking", "bash", "edit", "read" */
+  label?: string;
+  /** Additional class names applied to the label span (e.g. "k-text-shimmer" for active/streaming state) */
+  labelClassName?: string;
+  /** Secondary descriptive text (subtle) — e.g. "src/utils/formatDate.ts", "git diff --stat" */
+  secondaryLabel?: string;
+  /** Number of lines added (rendered green with + prefix) */
+  linesAdded?: number;
+  /** Number of lines removed (rendered red with - prefix) */
+  linesRemoved?: number;
+  /** Duration string — e.g. "120ms", "4m 18s" */
+  time?: string;
+  /** Status badge text — e.g. "Completed", "Awaiting Approval", "No results found" */
+  status?: string;
+  /** Theme color for the status Badge */
+  statusThemeColor?: "base" | "success" | "warning" | "error" | "info";
+  /** Status Badge icon — e.g. "check-circle", "exclamation-circle", "x-circle" */
+  statusIcon?: string;
+  /** Whether the step can be expanded */
+  expandable?: boolean;
+  /** Whether the step is currently expanded */
+  expanded?: boolean;
+  /** Whether the step has completed (disables the label shimmer and dims the icon/label) */
+  completed?: boolean;
+};
+
+const defaultOptions = {
+  expandable: false,
+  expanded: false,
+  completed: false,
+};
+
+/**
+ * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
+ * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
+ * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text (e.g. icon-only steps).
+ * @ux {Expand / Collapse} Clicking or activating the step's head via keyboard toggles the body content open and closed.
+ * @ux {Hover feedback} Hovering the head highlights it with the app-surface background and normalizes all text/icon colors to on-app-surface.
+ * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Diff stats} Added/removed line counts always render in success/error colors, regardless of hover or completed state.
+ */
+export const AgentStep: KendoComponent<KendoAgentStepProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoAgentStepProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { icon, label, labelClassName, secondaryLabel, linesAdded, linesRemoved, time, status, statusThemeColor = "success", statusIcon, expandable = defaultOptions.expandable, expanded = defaultOptions.expanded, completed = defaultOptions.completed, className, children, ...other } = props;
+
+  return (
+    <div
+      {...other}
+      className={classNames(className, AGENT_STEP_CLASSNAME, {
+        "k-agent-completed": completed,
+      })}
+    >
+      <button className="k-agent-step-head" aria-expanded={expandable ? expanded : undefined}>
+        {icon && <Icon icon={icon} size="small" className="k-agent-step-icon" />}
+        <span className="k-agent-step-content">
+          {label && <span className={classNames("k-agent-step-label", labelClassName)}>{label}</span>}
+          {secondaryLabel && (
+            <>
+              <span className="k-agent-step-sep">·</span>
+              <span className="k-agent-step-secondary">{secondaryLabel}</span>
+            </>
+          )}
+          {linesAdded  && <span className="k-agent-step-added">+{linesAdded}</span>}
+          {linesRemoved && <span className="k-agent-step-removed">-{linesRemoved}</span>}
+          {time && (
+            <>
+              <span className="k-agent-step-sep">·</span>
+              <span className="k-agent-step-time">{time}</span>
+            </>
+          )}
+          {status && (
+            <Badge size="small" themeColor={statusThemeColor} rounded="full">
+              {statusIcon && <Icon icon={statusIcon} size="small" />}
+              {status}
+            </Badge>
+          )}
+          {expandable && <Icon icon={expanded ? "chevron-up" : "chevron-right"} size="small" className="k-agent-step-expand" />}
+        </span>
+      </button>
+      {expanded && children && <div className="k-agent-step-body">{children}</div>}
+    </div>
+  );
+};
+
+AgentStep.states = states;
+AgentStep.options = options;
+AgentStep.className = AGENT_STEP_CLASSNAME;
+AgentStep.defaultOptions = defaultOptions;
+AgentStep.moduleName = AGENT_RESPONSE_MODULE_NAME;
+AgentStep.folderName = AGENT_RESPONSE_FOLDER_NAME;
+
+/**
+ * @keyboard {Enter or Space} Triggers the focused step's head, toggling the expanded state when the step is expandable.
+ * @keyboard {Tab} Moves focus to the next step's head; each AgentStep head is its own stop in the tab sequence.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ WAI-ARIA Authoring Practices: Disclosure (Show/Hide) Pattern
+ */
+
+export default AgentStep;

package/src/agent-response/chain-of-thought.spec.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { KendoComponent, KendoBaseProps } from "../_types/component";
+import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
+
+export const CHAIN_OF_THOUGHT_CLASSNAME = "k-chain-of-thought";
+
+const states = [] as const;
+const options = {};
+
+export type KendoChainOfThoughtProps = KendoAgentStepProps;
+
+const defaultOptions = {
+  icon: "sparkles",
+};
+
+/**
+ * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
+ * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
+ * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
+ * @ux {Expand / Collapse} Clicking or activating the head toggles the nested Thought steps open and closed.
+ * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ */
+export const ChainOfThought: KendoComponent<KendoChainOfThoughtProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoChainOfThoughtProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { icon = defaultOptions.icon, className, ...other } = props;
+
+  return <AgentStep {...other} icon={icon} className={classNames(className, CHAIN_OF_THOUGHT_CLASSNAME)} />;
+};
+
+ChainOfThought.states = states;
+ChainOfThought.options = options;
+ChainOfThought.className = CHAIN_OF_THOUGHT_CLASSNAME;
+ChainOfThought.defaultOptions = defaultOptions;
+ChainOfThought.moduleName = AGENT_RESPONSE_MODULE_NAME;
+ChainOfThought.folderName = AGENT_RESPONSE_FOLDER_NAME;
+
+/**
+ * @keyboard {Enter or Space} Triggers the focused head, toggling the expanded state when expandable.
+ * @keyboard {Tab} Moves focus to the next ChainOfThought head; each instance is its own stop in the tab sequence.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ WAI-ARIA Authoring Practices: Disclosure (Show/Hide) Pattern
+ */
+
+export default ChainOfThought;

package/src/agent-response/constants.ts

@@ -0,0 +1,2 @@
+export const AGENT_RESPONSE_MODULE_NAME = 'agent-response';
+export const AGENT_RESPONSE_FOLDER_NAME = AGENT_RESPONSE_MODULE_NAME;

package/src/agent-response/index.ts

@@ -0,0 +1,10 @@
+export * from './agent-step';
+export * from './chain-of-thought.spec';
+export * from './templates/chain-of-thought-normal';
+export * from './templates/chain-of-thought-expanded';
+export * from './reasoning.spec';
+export * from './templates/reasoning-normal';
+export * from './templates/reasoning-expanded';
+export * from './tool-call.spec';
+export * from './templates/tool-call-normal';
+export * from './templates/tool-call-expanded';

package/src/agent-response/reasoning.spec.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { KendoComponent, KendoBaseProps } from "../_types/component";
+import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
+
+export const REASONING_CLASSNAME = "k-reasoning";
+
+const states = [] as const;
+const options = {};
+
+export type KendoReasoningProps = KendoAgentStepProps;
+
+const defaultOptions = {
+  icon: "sparkles",
+  label: "Reasoning",
+};
+
+/**
+ * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
+ * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
+ * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
+ * @ux {Expand / Collapse} Clicking or activating the head toggles the reasoning body open and closed.
+ * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ */
+export const Reasoning: KendoComponent<KendoReasoningProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoReasoningProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { icon = defaultOptions.icon, label = defaultOptions.label, className, ...other } = props;
+
+  return <AgentStep {...other} icon={icon} label={label} className={classNames(className, REASONING_CLASSNAME)} />;
+};
+
+Reasoning.states = states;
+Reasoning.options = options;
+Reasoning.className = REASONING_CLASSNAME;
+Reasoning.defaultOptions = defaultOptions;
+Reasoning.moduleName = AGENT_RESPONSE_MODULE_NAME;
+Reasoning.folderName = AGENT_RESPONSE_FOLDER_NAME;
+
+/**
+ * @keyboard {Enter or Space} Triggers the focused head, toggling the expanded state when expandable.
+ * @keyboard {Tab} Moves focus to the next Reasoning head; each instance is its own stop in the tab sequence.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ WAI-ARIA Authoring Practices: Disclosure (Show/Hide) Pattern
+ */
+
+export default Reasoning;

package/src/agent-response/templates/chain-of-thought-expanded.tsx

@@ -0,0 +1,9 @@
+import ChainOfThought from '../chain-of-thought.spec';
+import Thought from '../thought.spec';
+
+export const ChainOfThoughtExpanded = (props: any) => (
+    <ChainOfThought label="Thought" time="for 4m 18s" completed expandable expanded {...props}>
+        <Thought icon="search" label="Searched for components" completed />
+        <Thought icon="book" label="Reviewed component variants" completed />
+    </ChainOfThought>
+);

package/src/agent-response/templates/chain-of-thought-normal.tsx

@@ -0,0 +1,3 @@
+import ChainOfThought from '../chain-of-thought.spec';
+
+export const ChainOfThoughtNormal = (props: any) => <ChainOfThought label="Thought" time="for 4m 18s" completed expandable {...props} />;

package/src/agent-response/templates/reasoning-expanded.tsx

@@ -0,0 +1,7 @@
+import Reasoning from '../reasoning.spec';
+
+export const ReasoningExpanded = (props: any) => (
+    <Reasoning time="for 48s" completed expandable expanded {...props}>
+        <span>I&apos;ll design a resource component system for an AI chat — covering different resource types, states, and variants. Let me read the relevant skills first.</span>
+    </Reasoning>
+);

package/src/agent-response/templates/reasoning-normal.tsx

@@ -0,0 +1,3 @@
+import Reasoning from '../reasoning.spec';
+
+export const ReasoningNormal = (props: any) => <Reasoning time="for 48s" completed expandable {...props} />;

package/src/agent-response/templates/tool-call-expanded.tsx

@@ -0,0 +1,15 @@
+import ToolCall from '../tool-call.spec';
+import { Card, CardBody } from '../../card';
+
+export const ToolCallExpanded = (props: any) => (
+    <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable expanded {...props}>
+        <div>Parameters</div>
+        <Card>
+            <CardBody>
+                <pre style={{ fontSize: '14px', marginTop: '0px' }}>
+                    <code>{`cd packages/html && npx tsc --noEmit -p .`}</code>
+                </pre>
+            </CardBody>
+        </Card>
+    </ToolCall>
+);

package/src/agent-response/templates/tool-call-normal.tsx

@@ -0,0 +1,3 @@
+import ToolCall from '../tool-call.spec';
+
+export const ToolCallNormal = (props: any) => <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable {...props} />;

package/src/agent-response/tests/chain-of-thought.tsx

@@ -0,0 +1,46 @@
+import { ChainOfThought } from "..";
+import { Chip } from "../../chip";
+import Thought from "../thought.spec";
+
+export default () => (
+  <div id="test-area" className="k-d-flex k-flex-col" style={{ maxWidth: "680px" }}>
+    <section>
+      <ChainOfThought label="Thought" time="for 4m 18s" completed expandable />
+
+      <ChainOfThought label="Thought" time="for 4m 18s" completed expandable expanded>
+        <Thought icon="search" label="Searched for components" completed />
+        <Thought icon="book" label='Found 12 components matching "button". Reviewing variants — identified 3 candidates with primary intent.' completed />
+        <Thought icon="book" label="Retrieved design system documentation for Button components." completed>
+          <span>
+            Retrieved design system documentation for Button components. Found usage guidelines, spacing specs, and variant definitions across 3 libraries. <Chip text="some-link.com +2" icon="globe" size="small" fillMode="outline" rounded="full" />
+          </span>
+        </Thought>
+        <Thought icon="search" label="Searched for related work" completed />
+      </ChainOfThought>
+
+      <ChainOfThought label="Reviewed" secondaryLabel="and updated _theme.scss" linesAdded={3} linesRemoved={1} completed expanded expandable>
+        <Thought icon="book" label="Read" secondaryLabel="_theme.scss, lines 1 to 15" completed />
+        <Thought icon="search" label="Searched for text" secondaryLabel="text-shimmer, 1 result" completed />
+        <Thought icon="book" label="Read" secondaryLabel="_theme.scss, lines 45 to 56" completed />
+        <Thought icon="pencil" label="Edited" secondaryLabel="_theme.scss" linesAdded={3} linesRemoved={1} completed />
+      </ChainOfThought>
+      <ChainOfThought icon="search" label="Searched for components" completed expandable />
+      <ChainOfThought icon="book" label="Reviewed component variants" time="for 12s" expandable completed />
+
+      <ChainOfThought label="Thinking through request" secondaryLabel="I'm considering the best approach to the problem..." expandable expanded>
+        <Thought icon="search" label="Searched for components" completed />
+        <Thought icon="book" label='Found 12 components matching "button". Reviewing variants — identified 3 candidates with primary intent.' completed />
+        {/* active thought */}
+        <Thought icon="search" label="Searching for related work...">
+          <div className="k-d-flex k-flex-wrap k-gap-1">
+            <Chip text="some-link.com" icon="globe" size="small" fillMode="outline" rounded="full" />
+            <Chip text="some-link.com" icon="globe" size="small" fillMode="outline" rounded="full" />
+            <Chip text="some-link.com" icon="globe" size="small" fillMode="outline" rounded="full" />
+            <Chip text="some-link.com" icon="globe" size="small" fillMode="outline" rounded="full" />
+            <Chip text="some-link.com" icon="globe" size="small" fillMode="outline" rounded="full" />
+          </div>
+        </Thought>
+      </ChainOfThought>
+    </section>
+  </div>
+);

package/src/agent-response/tests/reasoning.tsx

@@ -0,0 +1,21 @@
+import { Reasoning } from "..";
+
+export default () => (
+  <div id="test-area" className="k-d-flex k-flex-col" style={{ maxWidth: "680px" }}>
+    <section>
+      <Reasoning time="for 48s" completed label="Completed" expandable />
+
+      <Reasoning time="for 48s" completed label="Completed" expandable expanded>
+        <span>I'll design a resource component system for an AI chat — covering different resource types, states, and variants. Let me read the relevant skills first.</span>
+        <span>I'll gather local design system context, then create a comprehensive resource component system.</span>
+      </Reasoning>
+
+      <Reasoning expandable secondaryLabel="I'm considering the best approach to the problem..." />
+
+      <Reasoning expandable secondaryLabel="I'm considering the best approach to the problem..." expanded>
+        <span>I'll design a resource component system for an AI chat — covering different resource types, states, and variants. Let me read the relevant skills first.</span>
+        <span>I'll gather local design system context, then create a comprehensive resource component system.</span>
+      </Reasoning>
+    </section>
+  </div>
+);

package/src/agent-response/tests/tool-call.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { ToolCall } from "..";
+import { Card, CardBody } from "../../card";
+import { Button } from "../../button";
+import { ActionButtons } from "../../action-buttons";
+import { MessageBox } from "../../message-box";
+
+export default () => (
+  <div id="test-area" className="k-d-flex k-flex-col">
+    <section>
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable />
+
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable />
+
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable expanded>
+        <div>Parameters</div>
+        <Card>
+          <CardBody>
+            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
+              <code>{`cd packages/html && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
+            </pre>
+          </CardBody>
+        </Card>
+        <div>Result</div>
+        <Card>
+          <CardBody>
+            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
+              <code>{`> @progress/kendo-themes-html@14.4.0-dev.1 typecheck
+> npx tsc --noEmit --emitDeclarationOnly false --project tsconfig.json
+`}</code>
+            </pre>
+          </CardBody>
+        </Card>
+      </ToolCall>
+
+      <ToolCall label="tool_name" status="Awaiting Approval" statusThemeColor="warning" statusIcon="exclamation-circle" expandable expanded>
+        <div>Parameters</div>
+        <Card>
+          <CardBody>
+            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
+              <code>{`cd packages/html && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
+            </pre>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardBody>
+            <p>This command will execute a TS Typecheck in your codebase.</p>
+          </CardBody>
+          <ActionButtons alignment="end" className="k-card-actions">
+            <Button text="Reject" fillMode="outline" />
+            <Button text="Approve" themeColor="primary" fillMode="solid" />
+          </ActionButtons>
+        </Card>
+      </ToolCall>
+
+      <ToolCall label="tool_name" status="Error" statusThemeColor="error" statusIcon="exclamation-circle" expandable expanded>
+        <div>Parameters</div>
+        <Card>
+          <CardBody>
+            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
+              <code>{`cd packages/hmtl && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
+            </pre>
+          </CardBody>
+        </Card>
+        <MessageBox themeColor="error">cd: no such file or directory: packges/hmtl</MessageBox>
+      </ToolCall>
+    </section>
+  </div>
+);

package/src/agent-response/thought.spec.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { Icon } from "../icon";
+import { Badge } from "../badge";
+import { KendoComponent } from "../_types/component";
+import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
+
+export const THOUGHT_CLASSNAME = "k-thought";
+
+const states = [] as const;
+const options = {};
+
+export type KendoThoughtProps = {
+  /** Icon name for the step type (e.g. "sparkles", "search", "wrench", "code", "file-txt") */
+  icon?: string;
+  /** Primary label text (bold) — e.g. "Thinking", "bash", "edit", "read" */
+  label?: string;
+  /** Additional class names applied to the label span (e.g. "k-text-shimmer" for active/streaming state) */
+  labelClassName?: string;
+  /** Secondary descriptive text (subtle) — e.g. "src/utils/formatDate.ts", "git diff --stat" */
+  secondaryLabel?: string;
+  /** Number of lines added (rendered green with + prefix) */
+  linesAdded?: number;
+  /** Number of lines removed (rendered red with - prefix) */
+  linesRemoved?: number;
+  /** Duration string — e.g. "120ms", "4m 18s" */
+  time?: string;
+  /** Status badge text — e.g. "Completed", "Awaiting Approval", "No results found" */
+  status?: string;
+  /** Theme color for the status Badge */
+  statusThemeColor?: "base" | "success" | "warning" | "error" | "info";
+  /** Status Badge icon — e.g. "check-circle", "exclamation-circle", "x-circle" */
+  statusIcon?: string;
+  /** Whether the thought has completed (disables the label shimmer and dims the icon/label) */
+  completed?: boolean;
+};
+
+const defaultOptions = {
+  completed: false,
+};
+
+/**
+ * @ux {Completed state} When completed, the label stops shimmering and the icon/label dim to a subtle color.
+ * @ux {Diff stats} Added/removed line counts always render in success/error colors, regardless of completed state.
+ */
+export const Thought: KendoComponent<KendoThoughtProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoThoughtProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { icon, label, labelClassName, secondaryLabel, linesAdded, linesRemoved, time, status, statusThemeColor = "success", statusIcon, completed = defaultOptions.completed, className, children, ...other } = props;
+
+  return (
+    <div
+      {...other}
+      className={classNames(className, THOUGHT_CLASSNAME, {
+        "k-thought-completed": completed,
+      })}
+    >
+      {icon && (
+        <span className="k-agent-step-icon-col">
+          <Icon icon={icon} size="small" className="k-agent-step-icon" />
+        </span>
+      )}
+      <span className="k-agent-step-content">
+        {label && <span className={classNames("k-agent-step-label", labelClassName)}>{label}</span>}
+        {secondaryLabel && (
+          <>
+            <span className="k-agent-step-sep">·</span>
+            <span className="k-agent-step-secondary">{secondaryLabel}</span>
+          </>
+        )}
+        {linesAdded && <span className="k-agent-step-added">+{linesAdded}</span>}
+        {linesRemoved && <span className="k-agent-step-removed">-{linesRemoved}</span>}
+        {time && (
+          <>
+            <span className="k-agent-step-sep">·</span>
+            <span className="k-agent-step-time">{time}</span>
+          </>
+        )}
+        {status && (
+          <Badge size="small" themeColor={statusThemeColor} rounded="full">
+            {statusIcon && <Icon icon={statusIcon} size="small" />}
+            {status}
+          </Badge>
+        )}
+        {children && <div className="k-agent-step-body">{children}</div>}
+      </span>
+    </div>
+  );
+};
+
+Thought.states = states;
+Thought.options = options;
+Thought.className = THOUGHT_CLASSNAME;
+Thought.defaultOptions = defaultOptions;
+Thought.moduleName = AGENT_RESPONSE_MODULE_NAME;
+Thought.folderName = AGENT_RESPONSE_FOLDER_NAME;
+
+export default Thought;

package/src/agent-response/tool-call.spec.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { KendoComponent, KendoBaseProps } from "../_types/component";
+import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
+
+export const TOOL_CALL_CLASSNAME = "k-tool-call";
+
+const states = [] as const;
+const options = {};
+
+export type KendoToolCallProps = KendoAgentStepProps;
+
+const defaultOptions = {
+  icon: "wrench",
+};
+
+/**
+ * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
+ * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
+ * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
+ * @ux {Expand / Collapse} Clicking or activating the head toggles the tool call body (parameters, results, approval actions) open and closed.
+ * @ux {Status} The optional status Badge reflects the call's outcome (e.g. "Completed", "Awaiting Approval", "Error").
+ * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ */
+export const ToolCall: KendoComponent<KendoToolCallProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoToolCallProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { icon = defaultOptions.icon, className, ...other } = props;
+
+  return <AgentStep {...other} icon={icon} className={classNames(className, TOOL_CALL_CLASSNAME)} />;
+};
+
+ToolCall.states = states;
+ToolCall.options = options;
+ToolCall.className = TOOL_CALL_CLASSNAME;
+ToolCall.defaultOptions = defaultOptions;
+ToolCall.moduleName = AGENT_RESPONSE_MODULE_NAME;
+ToolCall.folderName = AGENT_RESPONSE_FOLDER_NAME;
+
+/**
+ * @keyboard {Enter or Space} Triggers the focused head, toggling the expanded state when expandable.
+ * @keyboard {Tab} Moves focus to the next ToolCall head; each instance is its own stop in the tab sequence.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ WAI-ARIA Authoring Practices: Disclosure (Show/Hide) Pattern
+ */
+
+export default ToolCall;

package/src/checkpoint/checkpoint.spec.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { KendoComponent } from "../_types/component";
+import { CHECKPOINT_FOLDER_NAME, CHECKPOINT_MODULE_NAME } from "./constants";
+
+export const CHECKPOINT_CLASSNAME = "k-checkpoint";
+
+const states = [] as const;
+const options = {};
+
+export type KendoCheckpointProps = {
+  /** Forces the checkpoint to stay visible (opacity 1). By default it's only revealed on hover/focus. */
+  visible?: boolean;
+};
+
+const defaultOptions = {};
+
+/**
+ * @aria {aria-hidden="true"} The gradient separator lines are decorative and hidden from assistive technologies.
+ *
+ * @ux {Hover reveal} Hidden by default and faded in on hover of the checkpoint or when a descendant (e.g. a Button) receives focus.
+ * @ux {Always visible} Set the `visible` prop to keep the checkpoint permanently shown, bypassing the hover/focus reveal.
+ */
+export const Checkpoint: KendoComponent<KendoCheckpointProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoCheckpointProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { className, children, visible, ...other } = props;
+
+  return (
+    <div
+      {...other}
+      className={classNames(className, CHECKPOINT_CLASSNAME, {
+        "k-checkpoint-visible": visible === true,
+      })}
+    >
+      <span className="k-checkpoint-line" aria-hidden="true"></span>
+      {children}
+      <span className="k-checkpoint-line" aria-hidden="true"></span>
+    </div>
+  );
+};
+
+Checkpoint.states = states;
+Checkpoint.options = options;
+Checkpoint.className = CHECKPOINT_CLASSNAME;
+Checkpoint.defaultOptions = defaultOptions;
+Checkpoint.moduleName = CHECKPOINT_MODULE_NAME;
+Checkpoint.folderName = CHECKPOINT_FOLDER_NAME;
+
+/**
+ * @keyboard {Tab} Focusing an interactive descendant (e.g. a Button) reveals the checkpoint via `:focus-within`.
+ */
+
+export default Checkpoint;

package/src/checkpoint/constants.ts

@@ -0,0 +1,2 @@
+export const CHECKPOINT_MODULE_NAME = 'checkpoint';
+export const CHECKPOINT_FOLDER_NAME = CHECKPOINT_MODULE_NAME;

package/src/checkpoint/index.ts

@@ -0,0 +1,2 @@
+export * from './checkpoint.spec';
+export * from './templates/checkpoint-normal';

package/src/checkpoint/templates/checkpoint-normal.tsx

@@ -0,0 +1,8 @@
+import Checkpoint from '../checkpoint.spec';
+import { Button } from '../../button';
+
+export const CheckpointNormal = (props: any) => (
+    <Checkpoint visible {...props}>
+        <Button text="Restore Checkpoint" fillMode="flat" size="small" />
+    </Checkpoint>
+);