Function SkillRow

apps/web/src/components/cloud-agent/profile-editor/SkillsTab.tsx:201–275

({
  skill,
  profileId,
  organizationId,
  onEdit,
}: {
  skill: ProfileSkill;
  profileId: string;
  organizationId: string | undefined;
  onEdit: () => void;
})

  if (!taken.has(base)) return base;
  for (let i = 2; i < 1000; i += 1) {
    const candidate = `${base}-${i}`;
    if (!taken.has(candidate)) return candidate;
  }
  return `${base}-${Date.now()}`;
}

function SkillRow({
  skill,
  profileId,
  organizationId,
  onEdit,
}: {
  skill: ProfileSkill;
  profileId: string;
  organizationId: string | undefined;
  onEdit: () => void;
}) {
  const { deleteSkill } = useProfileMutations({ organizationId });
  const [deleting, setDeleting] = useState(false);

  const fileCount = Object.keys(skill.files ?? {}).length;
  const companionBytes = Object.values(skill.files ?? {}).reduce((sum, c) => sum + c.length, 0);
  const totalBytes = skill.rawMarkdown.length + companionBytes;
  const sizeKb = (totalBytes / 1024).toFixed(1);

  return (
    <div className="hover:bg-accent/50 rounded-lg border p-3 transition-colors">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <Sparkles className="text-muted-foreground h-4 w-4" />
            <code className="bg-muted rounded px-2 py-0.5 font-mono text-sm">{skill.name}</code>
            <span className="text-muted-foreground text-xs uppercase tracking-wide">
              {skill.sourceType}
            </span>
            <span className="text-muted-foreground text-xs">{sizeKb} KB</span>
            {fileCount > 0 && (
              <span className="text-muted-foreground text-xs">
                +{fileCount} file{fileCount === 1 ? '' : 's'}
              </span>
            )}
          </div>
          {skill.description && (
            <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs">{skill.description}</p>
          )}
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <Button
            variant="ghost"
            size="sm"
            className="h-7"
            onClick={onEdit}
            disabled={deleting}
            aria-label="Edit skill"
          >
            <Pencil className="h-3.5 w-3.5" />
          </Button>
          <InlineDeleteConfirmation