feat(frontend): replace technical block terminology with user-friendly labels (#12389)

## Summary - Replaces all user-facing "block" terminology in the CoPilot activity stream with plain-English labels ("Step failed", "action", "Credentials", etc.) - Adds `humanizeFileName()` utility to display file names without extensions, with title-case and spaces (e.g. `executive_memo.md` → `"Executive Memo"`) - Updates error messages across RunBlock, RunAgent, and FindBlocks tools to use friendly language ## Test plan - [ ] Open CoPilot and trigger a block execution — verify animation text says "Running" / "Step failed" instead of "Running the block" / "Error running block" - [ ] Trigger a file read/write action — verify the activity shows humanized file names (e.g. `Reading "Executive Memo"` not `Reading executive_memo.md`) - [ ] Trigger FindBlocks — verify labels say "Searching for actions" and "Results" instead of "Searching for blocks" and "Block results" - [ ] Check the work-done stats bar — verify it shows "action" / "actions" instead of "block run" / "block runs" - [ ] Trigger a setup requirements card — verify labels say "Credentials" and "Inputs" instead of "Block credentials" and "Block inputs" - [ ] Visit `/copilot/styleguide` — verify error test data no longer contains "Block execution" text Resolves: [SECRT-2025](https://linear.app/autogpt/issue/SECRT-2025) 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-08 03:00:28 -04:00 · 2026-03-16 17:00:25 +08:00
parent fa04fb41d8
commit 53d58e21d3
8 changed files with 58 additions and 35 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
@@ -5,7 +5,7 @@ const TOOL_TO_CATEGORY: Record<string, string> = {
  find_agent: "search",
  find_library_agent: "search",
  run_agent: "agent run",
-  run_block: "block run",
+  run_block: "action",
  create_agent: "agent created",
  edit_agent: "agent edited",
  schedule_agent: "agent scheduled",
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/page.tsx
@@ -706,8 +706,8 @@ export default function StyleguidePage() {
                    input: { block_id: "weather-block-123" },
                    output: {
                      type: ResponseType.error,
-                      message: "Failed to run the block.",
-                      error: "Block execution timed out after 30 seconds.",
+                      message: "Something went wrong while running this step.",
+                      error: "Execution timed out after 30 seconds.",
                      details: {
                        block_id: "weather-block-123",
                        timeout_ms: 30000,
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindBlocks/FindBlocks.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindBlocks/FindBlocks.tsx
@@ -61,7 +61,7 @@ export function FindBlocksTool({ part }: Props) {

  const query = (part.input as FindBlockInput | undefined)?.query?.trim();
  const accordionDescription = parsed
-    ? `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${query ? ` for "${query}"` : ""}`
+    ? `Found ${parsed.count} action${parsed.count === 1 ? "" : "s"}${query ? ` for "${query}"` : ""}`
    : undefined;

  return (
@@ -77,7 +77,7 @@ export function FindBlocksTool({ part }: Props) {
      {hasBlocks && parsed && (
        <ToolAccordion
          icon={<AccordionIcon />}
-          title="Block results"
+          title="Results"
          description={accordionDescription}
        >
          <HorizontalScroll dependencyList={[parsed.blocks.length]}>
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindBlocks/helpers.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindBlocks/helpers.tsx
@@ -30,21 +30,21 @@ export function getAnimationText(part: FindBlockToolPart): string {
  switch (part.state) {
    case "input-streaming":
    case "input-available":
-      return `Searching for blocks${queryText}`;
+      return `Searching for actions${queryText}`;

    case "output-available": {
      const parsed = parseOutput(part.output);
      if (parsed) {
-        return `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${queryText}`;
+        return `Found ${parsed.count} action${parsed.count === 1 ? "" : "s"}${queryText}`;
      }
-      return `Searching for blocks${queryText}`;
+      return `Searching for actions${queryText}`;
    }

    case "output-error":
-      return `Error finding blocks${queryText}`;
+      return `Search failed${query ? ` for "${query}"` : ""}`;

    default:
-      return "Searching for blocks";
+      return "Searching for actions";
  }
 }

--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/helpers.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/helpers.ts
@@ -144,6 +144,23 @@ export function truncate(text: string, maxLen: number): string {
  return text.slice(0, maxLen).trimEnd() + "\u2026";
 }

+const STRIPPABLE_EXTENSIONS =
+  /\.(md|csv|json|txt|yaml|yml|xml|html|js|ts|py|sh|toml|cfg|ini|log|pdf|png|jpg|jpeg|gif|svg|mp4|mp3|wav|zip|tar|gz)$/i;
+
+export function humanizeFileName(filePath: string): string {
+  const fileName = filePath.split("/").pop() ?? filePath;
+  const stem = fileName.replace(STRIPPABLE_EXTENSIONS, "");
+  const words = stem
+    .replace(/[_-]/g, " ")
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((w) => {
+      if (w === w.toUpperCase()) return w;
+      return w.charAt(0).toUpperCase() + w.slice(1).toLowerCase();
+    });
+  return `"${words.join(" ")}"`;
+}
+
 /* ------------------------------------------------------------------ */
 /*  Exit code helper                                                   */
 /* ------------------------------------------------------------------ */
@@ -191,16 +208,16 @@ export function getAnimationText(
            ? `Browsing ${shortSummary}`
            : "Interacting with browser\u2026";
        case "file-read":
-          return shortSummary
-            ? `Reading ${shortSummary}`
+          return summary
+            ? `Reading ${humanizeFileName(summary)}`
            : "Reading file\u2026";
        case "file-write":
-          return shortSummary
-            ? `Writing ${shortSummary}`
+          return summary
+            ? `Writing ${humanizeFileName(summary)}`
            : "Writing file\u2026";
        case "file-delete":
-          return shortSummary
-            ? `Deleting ${shortSummary}`
+          return summary
+            ? `Deleting ${humanizeFileName(summary)}`
            : "Deleting file\u2026";
        case "file-list":
          return shortSummary
@@ -211,8 +228,8 @@ export function getAnimationText(
            ? `Searching for "${shortSummary}"`
            : "Searching\u2026";
        case "edit":
-          return shortSummary
-            ? `Editing ${shortSummary}`
+          return summary
+            ? `Editing ${humanizeFileName(summary)}`
            : "Editing file\u2026";
        case "todo":
          return shortSummary ? `${shortSummary}` : "Updating task list\u2026";
@@ -246,11 +263,17 @@ export function getAnimationText(
            ? `Browsed ${shortSummary}`
            : "Browser action completed";
        case "file-read":
-          return shortSummary ? `Read ${shortSummary}` : "File read completed";
+          return summary
+            ? `Read ${humanizeFileName(summary)}`
+            : "File read completed";
        case "file-write":
-          return shortSummary ? `Wrote ${shortSummary}` : "File written";
+          return summary
+            ? `Wrote ${humanizeFileName(summary)}`
+            : "File written";
        case "file-delete":
-          return shortSummary ? `Deleted ${shortSummary}` : "File deleted";
+          return summary
+            ? `Deleted ${humanizeFileName(summary)}`
+            : "File deleted";
        case "file-list":
          return "Listed files";
        case "search":
@@ -258,7 +281,9 @@ export function getAnimationText(
            ? `Searched for "${shortSummary}"`
            : "Search completed";
        case "edit":
-          return shortSummary ? `Edited ${shortSummary}` : "Edit completed";
+          return summary
+            ? `Edited ${humanizeFileName(summary)}`
+            : "Edit completed";
        case "todo":
          return "Updated task list";
        case "compaction":
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx
@@ -149,10 +149,10 @@ export function getAnimationText(part: {
      }
      if (isRunAgentNeedLoginOutput(output))
        return "Sign in required to run agent";
-      return "Error running agent";
+      return "Something went wrong";
    }
    case "output-error":
-      return "Error running agent";
+      return "Something went wrong";
    default:
      return actionPhrase;
  }
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
@@ -18,10 +18,10 @@ import {
 interface Props {
  output: SetupRequirementsResponse;
  /** Override the message sent to the chat when the user clicks Proceed after connecting credentials.
-   * Defaults to "Please re-run the block now." */
+   * Defaults to "Please re-run this step now." */
  retryInstruction?: string;
  /** Override the label shown above the credentials section.
-   * Defaults to "Block credentials". */
+   * Defaults to "Credentials". */
  credentialsLabel?: string;
 }

@@ -87,11 +87,9 @@ export function SetupRequirementsCard({
          ([, v]) => v !== undefined && v !== null && v !== "",
        ),
      );
-      parts.push(
-        `Run the block with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
-      );
+      parts.push(`Run with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`);
    } else {
-      parts.push(retryInstruction ?? "Please re-run the block now.");
+      parts.push(retryInstruction ?? "Please re-run this step now.");
    }

    onSend(parts.join(" "));
@@ -105,7 +103,7 @@ export function SetupRequirementsCard({
      {needsCredentials && (
        <div className="rounded-2xl border bg-background p-3">
          <Text variant="small" className="w-fit border-b text-zinc-500">
-            {credentialsLabel ?? "Block credentials"}
+            {credentialsLabel ?? "Credentials"}
          </Text>
          <div className="mt-6">
            <CredentialsGroupedView
@@ -122,7 +120,7 @@ export function SetupRequirementsCard({
      {inputSchema && (
        <div className="rounded-2xl border bg-background p-3 pt-4">
          <Text variant="small" className="w-fit border-b text-zinc-500">
-            Block inputs
+            Inputs
          </Text>
          <FormRenderer
            jsonSchema={inputSchema}
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx
@@ -165,12 +165,12 @@ export function getAnimationText(part: {
      if (isRunBlockReviewRequiredOutput(output)) {
        return `Review needed for "${output.block_name}"`;
      }
-      return "Error running block";
+      return "Action failed";
    }
    case "output-error":
-      return "Error running block";
+      return "Action failed";
    default:
-      return "Running the block";
+      return "Running";
  }
 }