fix: skill install 500 error and chart dimension warnings

[vsumner]

Summary

Fixes two issues causing browser console errors:

1. Skill Install 500 Error

The frontend sent bare owner/repo format for single-skill repos (where repo name equals skill ID), but the backend explicitly rejects 2-part specs with:

bare owner/repo format is not supported — specify the skill name: owner/repo/SKILL_NAME

Fix: Always use 3-part spec format owner/repo/skill-name regardless of repo structure.

2. Chart Dimension Warnings

Recharts was logging warnings about negative dimensions:

The width(-1) and height(-1) of chart should be greater than 0

Fix: Added minWidth={100} minHeight={100} to all ResponsiveContainer components and min-h-[192px] / min-h-[160px] to parent containers.

Test Plan

• Install a single-skill repo (e.g., vercel-labs/agent-browser) - should succeed with 200
• Install a multi-skill repo (e.g., anthropics/skills/pdf) - should continue to work
• Navigate to Agent Detail page - chart warnings should not appear in console

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9e1e59ff-1a86-48de-966e-4bd5978280c3

📥 Commits

Reviewing files that changed from the base of the PR and between ed3aebe and f6feb22.

📒 Files selected for processing (2)

• interface/src/routes/AgentDetail.tsx
• interface/src/routes/AgentSkills.tsx

---

Walkthrough

Two files updated: AgentDetail.tsx with layout constraint adjustments to chart wrapper containers and ResponsiveContainer components for rendering stability, and AgentSkills.tsx with a logic change to enforce a consistent three-part installation specification format (owner/repo/skill-name).

Changes

Cohort / File(s)	Summary
Chart Layout Constraints interface/src/routes/AgentDetail.tsx	Modified MemoryGrowthChart, ProcessActivityChart, and MemoryDonut to replace fixed heights with minimum heights; added explicit minWidth and minHeight properties (100px) to ResponsiveContainer instances.
Skill Installation Specification interface/src/routes/AgentSkills.tsx	Simplified installSpec logic to unconditionally return three-part format (owner/repo/skill-name) by using ${skill.source}/${skill.skillId}; removed conditional branch for single-skill repository handling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: match installed skills by source repo, not just name #205: Modifies AgentSkills.tsx to standardize installed skill identification using composite owner/repo/skill-name format matching this PR's approach.

Suggested reviewers

• jamiepine

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main changes: fixing a skill install 500 error and addressing chart dimension warnings that are both mentioned in the PR objectives.
Description check	✅ Passed	The description is directly related to the changeset, providing detailed context about both issues being fixed, the specific backend error behavior, and a concrete test plan for verification.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.