fix(platform): give live suggested skills Emir's skill editor

A live app page's suggested skill opened a Description detail and an
instructions box, and an added one went disabled. It opens his editor
again: the skill's name as the title, editable Name, Description and
Instructions with his placeholders, and Add to Skills. An added skill
stays openable, as on his page, with Save changes and a confirmed
Remove from Skills, through the workspace's own skill operations.

Author: waleedlatif1

apps/sim/app/(product)/o/[organizationId]/integrations/_components/integration-capabilities/workspace-capabilities.tsx

@@ -2,17 +2,25 @@
 
 import { useState } from 'react'
 import { ActivityRow } from '@sim/emcn/activity-row'
-import { TextAreaField } from '@sim/emcn/field'
-import { DetailsField } from '@sim/emcn/field/details-field'
+import { TextAreaField, TextField } from '@sim/emcn/field'
 import { Icon } from '@sim/emcn/icon'
 import { Modal } from '@sim/emcn/modal'
 import { getErrorMessage } from '@sim/utils/errors'
 import { IntegrationTemplates } from '@/app/(product)/o/[organizationId]/integrations/_components/integration-capabilities/integration-capabilities'
 import styles from '@/app/(product)/o/[organizationId]/integrations/_components/integration-capabilities/integration-capabilities.module.css'
-import { isSkillNameConflictError, useCreateSkill, useSkills } from '@/platform/lib/data/skills'
+import {
+  isSkillNameConflictError,
+  SKILL_DESCRIPTION_MAX_LENGTH,
+  type SkillDefinition,
+  useCreateSkill,
+  useDeleteSkill,
+  useSkills,
+  useUpdateSkill,
+} from '@/platform/lib/data/skills'
 import type { IntegrationCatalogEntry } from '@/platform/lib/integrations/catalog-model'
 
 type CatalogSkill = IntegrationCatalogEntry['skills'][number]
+type SkillDraft = { name: string; description: string; content: string }
 
 interface WorkspaceCapabilitiesProps {
   workspaceId: string
@@ -22,19 +30,20 @@ interface WorkspaceCapabilitiesProps {
 
 /**
  * An app's suggested skills and agent templates in one workspace, as legacy's workspace app page
- * offered them. A skill is added to the workspace through the Skills tab's own create operation,
- * and the workspace's skill list decides which already read Added.
+ * offered them. A suggestion is added to the workspace through the Skills tab's own create
+ * operation; one already added, by name, opens for editing or removal.
  */
 export function WorkspaceCapabilities({
   workspaceId,
   skills,
   templates,
 }: WorkspaceCapabilitiesProps) {
   const existing = useSkills(workspaceId)
-  const createSkill = useCreateSkill()
-  const [adding, setAdding] = useState<{ skill: CatalogSkill; instructions: string } | null>(null)
+  const [open, setOpen] = useState<{ skill: CatalogSkill; installed?: SkillDefinition } | null>(
+    null
+  )
   const listed = existing.isPlaceholderData ? undefined : existing.data
-  const added = new Set((listed ?? []).map((skill) => skill.name))
+  const installed = new Map((listed ?? []).map((skill) => [skill.name, skill]))
 
   return (
     <>
@@ -48,53 +57,159 @@ export function WorkspaceCapabilities({
                 leading={<Icon name='I044' />}
                 title={entry.name}
                 detail={entry.description}
-                textMetadata={added.has(entry.name) ? 'Added' : undefined}
-                disabled={!listed || added.has(entry.name)}
-                onOpen={() => setAdding({ skill: entry, instructions: entry.content })}
+                textMetadata={installed.has(entry.name) ? 'Added' : undefined}
+                onOpen={() => setOpen({ skill: entry, installed: installed.get(entry.name) })}
               />
             ))}
           </ul>
         </section>
       )}
       <IntegrationTemplates templates={templates} />
-      {adding && (
+      {open && (
+        <SuggestedSkillEditor
+          key={open.installed?.id ?? open.skill.name}
+          workspaceId={workspaceId}
+          skill={open.skill}
+          installed={open.installed}
+          onClose={() => setOpen(null)}
+        />
+      )}
+    </>
+  )
+}
+
+interface SuggestedSkillEditorProps {
+  workspaceId: string
+  skill: CatalogSkill
+  /** The workspace's copy of the suggestion, which the editor saves to or removes. */
+  installed?: SkillDefinition
+  onClose: () => void
+}
+
+/** A suggested skill's editable fields before adding it, or its added copy's. */
+function SuggestedSkillEditor({
+  workspaceId,
+  skill,
+  installed,
+  onClose,
+}: SuggestedSkillEditorProps) {
+  const createSkill = useCreateSkill()
+  const updateSkill = useUpdateSkill()
+  const deleteSkill = useDeleteSkill()
+  const saved: SkillDraft = installed
+    ? { name: installed.name, description: installed.description, content: installed.content }
+    : { name: skill.name, description: skill.description, content: skill.content }
+  const [draft, setDraft] = useState(saved)
+  const [removing, setRemoving] = useState(false)
+  const editable = !installed || (installed.canEdit && !installed.readOnly)
+  const dirty =
+    draft.name !== saved.name ||
+    draft.description !== saved.description ||
+    draft.content !== saved.content
+  const complete = Boolean(draft.name.trim() && draft.description.trim() && draft.content.trim())
+
+  async function save() {
+    const next = {
+      name: draft.name.trim(),
+      description: draft.description.trim(),
+      content: draft.content.trim(),
+    }
+    try {
+      if (!installed) {
+        await createSkill.mutateAsync({ workspaceId, skill: next })
+        return
+      }
+      await updateSkill.mutateAsync({
+        workspaceId,
+        skillId: installed.id,
+        updates: {
+          ...(next.name !== installed.name ? { name: next.name } : {}),
+          ...(next.description !== installed.description ? { description: next.description } : {}),
+          ...(next.content !== installed.content ? { content: next.content } : {}),
+        },
+      })
+    } catch (error) {
+      throw new Error(
+        isSkillNameConflictError(error)
+          ? `"${next.name}" is already in this workspace`
+          : getErrorMessage(error, `Could not save "${next.name}". Try again.`)
+      )
+    }
+  }
+
+  return (
+    <>
+      <Modal
+        open
+        title={skill.name}
+        confirmLabel={installed ? 'Save changes' : 'Add to Skills'}
+        confirmDisabled={!editable || !complete || Boolean(installed && !dirty)}
+        onOpenChange={(next) => {
+          if (!next) onClose()
+        }}
+        onConfirm={save}
+        footerStartAction={
+          installed && editable
+            ? {
+                label: 'Remove from Skills',
+                variant: 'quiet',
+                destructive: true,
+                onClick: () => setRemoving(true),
+              }
+            : undefined
+        }
+      >
+        <TextField
+          label='Name'
+          placeholder='Skill name'
+          name='name'
+          value={draft.name}
+          onChange={(name) => setDraft({ ...draft, name })}
+          viewOnly={!editable}
+          required
+          maxLength={64}
+        />
+        <TextAreaField
+          label='Description'
+          placeholder='Describe what this is for'
+          name='description'
+          value={draft.description}
+          onChange={(description) => setDraft({ ...draft, description })}
+          viewOnly={!editable}
+          required
+          maxLength={SKILL_DESCRIPTION_MAX_LENGTH}
+        />
+        <TextAreaField
+          label='Instructions'
+          placeholder='Describe what this skill should do'
+          name='instructions'
+          defaultSize='large'
+          value={draft.content}
+          onChange={(content) => setDraft({ ...draft, content })}
+          viewOnly={!editable}
+          required
+        />
+      </Modal>
+      {removing && installed && (
         <Modal
           open
-          onOpenChange={(open) => {
-            if (!open) setAdding(null)
+          title='Remove from Skills?'
+          description={`This removes ${installed.name} from your integrations.`}
+          variant='confirm'
+          destructive
+          confirmLabel='Remove from Skills'
+          onOpenChange={(next) => {
+            if (!next) setRemoving(false)
           }}
-          title={adding.skill.name}
-          confirmLabel='Add to Skills'
-          confirmDisabled={!adding.instructions.trim()}
           onConfirm={async () => {
             try {
-              await createSkill.mutateAsync({
-                workspaceId,
-                skill: {
-                  name: adding.skill.name,
-                  description: adding.skill.description,
-                  content: adding.instructions.trim(),
-                },
-              })
+              await deleteSkill.mutateAsync({ workspaceId, skillId: installed.id })
             } catch (error) {
-              throw new Error(
-                isSkillNameConflictError(error)
-                  ? `"${adding.skill.name}" is already in this workspace`
-                  : getErrorMessage(error, `Could not add "${adding.skill.name}". Try again.`)
-              )
+              throw new Error(getErrorMessage(error, `Could not remove "${installed.name}".`))
             }
+            onClose()
           }}
-        >
-          <DetailsField label='Description'>{adding.skill.description}</DetailsField>
-          <TextAreaField
-            label='Instructions'
-            placeholder='What should the agent do with this skill?'
-            value={adding.instructions}
-            onChange={(instructions) => setAdding({ ...adding, instructions })}
-            defaultSize='large'
-            required
-          />
-        </Modal>
+        />
       )}
     </>
   )