Tool card args: structured key/value layout with syntax highlighting and image preview

[ashwin-pc]

Problem

Tool card arguments are currently rendered as raw pre-wrapped text, making it hard to distinguish between different parameters (e.g. path, command, content) especially for tools with large payloads like edit or write.

Proposed Solution

Replace the flat .toolCardArgs pre-wrap layout with a structured key/value display:

CSS changes (src/styles/toolCards.css)

.toolCardArgs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* remove white-space: pre-wrap and overflow-wrap: anywhere */
}
.toolCardArgRow {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toolCardArgKey {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  opacity: .75;
}
.toolCardArgValue {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.toolCardArgCode {
  margin: 0;
  padding: 6px 8px;
  background: var(--surface, rgba(127, 127, 127, .08));
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: auto;
}
.toolCardArgCode code {
  display: block;
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 12px;
  white-space: pre;
}
.toolCardImage {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
}
.toolCardImage img {
  max-width: 100%;
  max-height: 420px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}

JS changes (src/tools/toolCards.ts)

• Parse tool args as JSON and render each key as a .toolCardArgRow with a label (.toolCardArgKey) and value (.toolCardArgValue)
• For multi-line string values (code, file content), wrap in .toolCardArgCode > code for syntax highlighting
• For image-type results, render inline <img> previews in a .toolCardImage container
• Pass api.headers to createToolCards() so authenticated image fetches work (src/main.ts change)

Benefits

• Each arg is visually distinct with a small uppercase label
• Code/file content gets a bordered code block instead of being inline
• Image tool results (screenshots, artifacts) preview inline
• Much easier to scan long tool calls like multi-edit operations