Skip to content

refactor(tools): overhaul tool creation UX with auto-derivation badges, persistent preview, and test drawer - #430

Closed
esafwan wants to merge 8 commits into
developfrom
refactor/tool-creation-ux
Closed

refactor(tools): overhaul tool creation UX with auto-derivation badges, persistent preview, and test drawer#430
esafwan wants to merge 8 commits into
developfrom
refactor/tool-creation-ux

Conversation

@esafwan

@esafwan esafwan commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Summary

Simplifies and modernizes the tool creation UI (ToolCreationForm.tsx & toolCreationForm.utils.ts) by implementing patterns from docs/tool.md (auto-derivation defaults, persistent live preview, and test call drawer).

Key Changes

  • Auto-Derivation for CRUD Verbs (toolCreationForm.utils.ts):
    • Automatically derives default tool name (e.g. get_sales_order), description, read-only flag, required permission, and parameter schema for all 12 Document Operation verbs (Get, Create, Update, Delete, Get List, etc.).
    • Added Auto badge chips next to auto-derived fields that dynamically flip to Edited the moment a user manually changes that field.
  • Persistent Live Function Definition Preview:
    • Removed the hidden Settings / Function Def view toggle.
    • Added a persistent side panel showing the exact live function definition JSON schema (buildFunctionDefinition()) updating on every keystroke.
  • Test Call Drawer (TestToolDrawer.tsx):
    • Added a Test call button next to the preview panel opening a drawer to test tool execution with live SDK calls for read verbs and dry-run execution for mutating operations.

Follow-up polish (this PR, later commits)

  • Curated tool categories: seeded 6 general-purpose Agent Tool Type categories (Data Operations, Integrations, Automation & Workflow, Communication, AI & Generation, Miscellaneous) idempotently on migrate; each of the 5 tool types now auto-selects a sensible default category via the same Auto/Edited badge mechanism, instead of requiring a manual pick from a narrow, integration-specific list.
  • Visual polish pass: fixed a mismatched white background/padding on the sticky "Back" bar, unified input/combobox surface colors, established a consistent section-header type scale, and added real borders/grouping between form zones (previously one undifferentiated scroll of headings).
  • Right-rail reorg: moved the category/description ("Details") and permission/read-only/guest ("Guardrails") fields into the right-hand rail, stacked above the live Function Definition preview — the left column now holds only the operation "sentence" and Parameters, the two things that actually differ per tool type.
  • Input contrast: panel-wrapped each form zone and gave every field control a recessed bg-background fill, matching the same contrast convention established in the HUF Table add/edit record form (PR style(frontend): polish add data form card layout and design tokens #428).
  • Renamed "Contract" → "Details": the original tool.md terminology ("contract" between agent and system) is developer jargon that doesn't read clearly to a non-technical user setting up an agent.

Proof of Test

Tool Page Auto Badges and Live Preview

Verification

  • Built frontend with zero TypeScript errors (tsc -b && vite build) after every commit.
  • Verified live on the bench container at http://huf.localhost:8100/huf/agents/:agentName, re-deploying (migrate, build, clear-cache) and re-checking in-browser after each change.

esafwan added 8 commits July 25, 2026 04:51
…apsible contract section

- Seed curated Agent Tool Type categories (Data Operations, Integrations,
  Automation & Workflow, Communication, AI & Generation, Miscellaneous)
  idempotently on install/migrate via sync_default_tool_categories()
- Auto-fill Tool Category from a per-template default mapping using the
  existing auto-derive/Auto-badge mechanism (flips to Edited on manual change)
- Move Tool Category and Description into a collapsed-by-default Contract
  section with a one-line summary when collapsed
- Make Description optional in the form schema (already auto-derived)
@esafwan

esafwan commented Jul 26, 2026

Copy link
Copy Markdown
Contributor Author

Superseded by consolidated Tool UX PR #461, now included in integration PR #468.

@esafwan esafwan closed this Jul 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant