{
  "name": "ToolCallCard",
  "category": "AI",
  "subcategory": null,
  "description": "AI tool-invocation card showing call + result.",
  "thumbnail": "/preview-cards/tool-call-card.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/ToolCallCard/ToolCallCard.razor"
  ],
  "dependencies": [
    "icon",
    "spinner"
  ],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-destructive",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--color-primary",
    "--radius"
  ],
  "api": {
    "name": "ToolCallCard",
    "category": "AI",
    "subcategory": null,
    "description": "AI tool-invocation card showing call + result.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/ToolCallCard/ToolCallCard.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ToolName",
        "type": "string",
        "default": "string.Empty",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Status",
        "type": "ToolCallStatus",
        "default": "ToolCallStatus.Pending",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Input",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Output",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ErrorMessage",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DurationMs",
        "type": "long?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DefaultOpen",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "ToolCallStatus",
        "values": [
          "Pending",
          "Running",
          "Success",
          "Error"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-destructive",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--color-primary",
      "--radius"
    ],
    "examples": [
      {
        "title": "Status Variants",
        "code": "<ToolCallCard ToolName=\"search_web\" Status=\"ToolCallCard.ToolCallStatus.Pending\"\n              Input=\"{&quot;query&quot;: &quot;latest Blazor news&quot;}\" />\n\n<ToolCallCard ToolName=\"read_file\" Status=\"ToolCallCard.ToolCallStatus.Running\"\n              Input=\"{&quot;path&quot;: &quot;/src/app.razor&quot;}\" />\n\n<ToolCallCard ToolName=\"execute_code\" Status=\"ToolCallCard.ToolCallStatus.Success\"\n              Input=\"{&quot;language&quot;: &quot;csharp&quot;}\" Output=\"Hello\" DurationMs=\"342\" />\n\n<ToolCallCard ToolName=\"fetch_url\" Status=\"ToolCallCard.ToolCallStatus.Error\"\n              ErrorMessage=\"Connection timeout after 5000ms\" DurationMs=\"5001\" />"
      },
      {
        "title": "Expanded by Default",
        "code": "<ToolCallCard ToolName=\"analyze_sentiment\"\n              Status=\"ToolCallCard.ToolCallStatus.Success\"\n              Input=\"{&quot;text&quot;: &quot;Lumeo makes Blazor development a joy!&quot;}\"\n              Output=\"{&quot;sentiment&quot;: &quot;positive&quot;, &quot;score&quot;: 0.96}\"\n              DurationMs=\"128\"\n              DefaultOpen=\"true\" />"
      },
      {
        "title": "Status (interactive)",
        "code": "<Segmented @bind-Value=\"_status\">\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Pending\">Pending</SegmentedItem>\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Running\">Running</SegmentedItem>\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Success\">Success</SegmentedItem>\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Error\">Error</SegmentedItem>\n</Segmented>\n<ToolCallCard ToolName=\"run_query\" Status=\"@_status\"\n              Input=\"{&quot;sql&quot;: &quot;SELECT * FROM users&quot;}\"\n              Output=\"@(_status == Success ? \"10 rows\" : null)\"\n              ErrorMessage=\"@(_status == Error ? \"Timeout\" : null)\" />\n\n@code { private ToolCallCard.ToolCallStatus _status = ToolCallCard.ToolCallStatus.Pending; }"
      },
      {
        "title": "Multiple Tool Calls",
        "code": "@foreach (var call in _toolCalls)\n{\n    <ToolCallCard ToolName=\"@call.Name\"\n                  Status=\"@call.Status\"\n                  Input=\"@call.Input\"\n                  Output=\"@call.Output\"\n                  DurationMs=\"@call.DurationMs\" />\n}"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "tool-call-card",
  "docsUrl": "https://lumeo.nativ.sh/components/tool-call-card",
  "sourceUrl": [
    {
      "file": "UI/ToolCallCard/ToolCallCard.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/ToolCallCard/ToolCallCard.razor"
    }
  ],
  "source": [
    {
      "path": "UI/ToolCallCard/ToolCallCard.razor",
      "content": "@namespace Lumeo\n\n<details class=\"@RootClass\" open=\"@DefaultOpen\" @attributes=\"AdditionalAttributes\">\n    <summary class=\"@SummaryClass\">\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground transition-transform duration-150 [details[open]_&]:rotate-90\">\n            <Icon Name=\"ChevronRight\" Size=\"Icon.IconSize.Sm\" />\n        </span>\n\n        <span class=\"@StatusDotClass\" aria-hidden=\"true\"></span>\n\n        <span class=\"min-w-0 flex-1 truncate font-mono text-xs text-foreground\">@ToolName</span>\n\n        <span class=\"@StatusChipClass\">\n            @if (Status == ToolCallStatus.Running)\n            {\n                <Spinner Size=\"Spinner.SpinnerSize.Sm\" Class=\"h-3 w-3\" />\n            }\n            <span>@StatusLabel</span>\n        </span>\n\n        @if (DurationMs is long ms)\n        {\n            <span class=\"text-xs font-mono text-muted-foreground\">@FormatDuration(ms)</span>\n        }\n    </summary>\n\n    <div class=\"space-y-3 border-t border-border/60 px-3 py-3\">\n        @if (!string.IsNullOrEmpty(Input))\n        {\n            <div class=\"space-y-1\">\n                <div class=\"font-semibold uppercase tracking-wider text-muted-foreground\" style=\"font-size: 10px\">Input</div>\n                <pre class=\"max-h-48 overflow-auto rounded-md bg-muted/40 p-2 text-xs font-mono text-foreground whitespace-pre-wrap break-words\"><code>@Input</code></pre>\n            </div>\n        }\n\n        @if (Status == ToolCallStatus.Error && !string.IsNullOrEmpty(ErrorMessage))\n        {\n            <div class=\"space-y-1\">\n                <div class=\"font-semibold uppercase tracking-wider text-destructive\" style=\"font-size: 10px\">Error</div>\n                <pre class=\"max-h-48 overflow-auto rounded-md border border-destructive/30 bg-destructive/10 p-2 text-xs font-mono text-destructive whitespace-pre-wrap break-words\"><code>@ErrorMessage</code></pre>\n            </div>\n        }\n        else if (!string.IsNullOrEmpty(Output))\n        {\n            <div class=\"space-y-1\">\n                <div class=\"font-semibold uppercase tracking-wider text-muted-foreground\" style=\"font-size: 10px\">Output</div>\n                <pre class=\"max-h-48 overflow-auto rounded-md bg-muted/40 p-2 text-xs font-mono text-foreground whitespace-pre-wrap break-words\"><code>@Output</code></pre>\n            </div>\n        }\n    </div>\n</details>\n\n@code {\n    [Parameter] public string ToolName { get; set; } = string.Empty;\n    [Parameter] public ToolCallStatus Status { get; set; } = ToolCallStatus.Pending;\n    [Parameter] public string? Input { get; set; }\n    [Parameter] public string? Output { get; set; }\n    [Parameter] public string? ErrorMessage { get; set; }\n    [Parameter] public long? DurationMs { get; set; }\n    [Parameter] public bool DefaultOpen { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string RootClass =>\n        $\"w-full overflow-hidden rounded-lg border border-border bg-muted/20 {Class}\".Trim();\n\n    private string SummaryClass =>\n        \"flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm hover:bg-muted/40 transition-colors select-none [&::-webkit-details-marker]:hidden\";\n\n    private string StatusDotClass => Status switch\n    {\n        ToolCallStatus.Pending => \"inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50\",\n        ToolCallStatus.Running => \"inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-primary animate-pulse\",\n        ToolCallStatus.Success => \"inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-positive\",\n        ToolCallStatus.Error => \"inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-destructive\",\n        _ => \"inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50\"\n    };\n\n    private string StatusChipClass\n    {\n        get\n        {\n            var baseChip = \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium\";\n            var tone = Status switch\n            {\n                ToolCallStatus.Pending => \"bg-muted text-muted-foreground\",\n                ToolCallStatus.Running => \"bg-primary/10 text-primary\",\n                ToolCallStatus.Success => \"bg-positive-light text-positive-text\",\n                ToolCallStatus.Error => \"bg-destructive/10 text-destructive\",\n                _ => \"bg-muted text-muted-foreground\"\n            };\n            return $\"{baseChip} {tone}\";\n        }\n    }\n\n    private string StatusLabel => Status switch\n    {\n        ToolCallStatus.Pending => \"pending\",\n        ToolCallStatus.Running => \"running\",\n        ToolCallStatus.Success => \"success\",\n        ToolCallStatus.Error => \"error\",\n        _ => string.Empty\n    };\n\n    private static string FormatDuration(long ms)\n    {\n        if (ms < 1000) return $\"{ms}ms\";\n        return $\"{ms / 1000.0:0.##}s\";\n    }\n\n    public enum ToolCallStatus\n    {\n        Pending,\n        Running,\n        Success,\n        Error\n    }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "Icon",
      "reason": "used internally"
    },
    {
      "name": "Spinner",
      "reason": "used internally"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/ToolCallCard/ToolCallCardTests.cs"
  ],
  "mdSummary": "# ToolCallCard\n\nAI tool-invocation card showing call + result.\n\n**Package:** `Lumeo` · **Category:** AI\n**Docs:** https://lumeo.nativ.sh/components/tool-call-card\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| ToolCallCard | ToolName | `string` | `string.Empty` |  |\n| ToolCallCard | Status | `ToolCallStatus` | `ToolCallStatus.Pending` |  |\n| ToolCallCard | Input | `string?` | `` |  |\n| ToolCallCard | Output | `string?` | `` |  |\n| ToolCallCard | ErrorMessage | `string?` | `` |  |\n| ToolCallCard | DurationMs | `long?` | `` |  |\n| ToolCallCard | DefaultOpen | `bool` | `` |  |\n| ToolCallCard | Class | `string?` | `` |  |\n| ToolCallCard | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<ToolCallCard />\n```\n\n## CSS variables\n`--color-border`, `--color-destructive`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-primary`, `--radius`\n\n## Files\n- `UI/ToolCallCard/ToolCallCard.razor`\n"
}