fix(skills,tools): audit fixes — autocomplete boundary, resize clipping, error routing

Two real regressions introduced while simplifying the extracted editor:

- The schema-param autocomplete's trigger was rewritten to match a trailing
  identifier, but the completion still split on separators. The two disagreed,
  so typing `data.ci` opened the menu and selecting replaced `data.ci` whole —
  eating the member-access prefix. Both now share one SCHEMA_PARAM_WORD regex.
- The uncapped markdown field measured its height only on value change while
  always setting overflow-hidden, so any width change that re-wrapped lines
  clipped the tail with no scrollbar to reach it. Now re-measures via
  ResizeObserver.

Also from the audit:
- Generation writes bypass the code field's change handler, so an open
  autocomplete stayed over a disabled streaming editor; close it on busy.
- Delete failures rendered in the Schema section's error slot on both custom
  tool surfaces; route them to a toast instead.
- Skill create navigated away while still dirty, stranding the unsaved-changes
  guard's history sentinel so Back landed on an empty create form.
- The Description field on skill create never received its error border.
- Drop a double-applied opacity-50 (the editor already dims when disabled), a
  dead try/catch around a non-throwing call that also shadowed the error prop,
  and a stale reference to a /tools page that does not exist.
- Docs still described the removed GitHub-URL import and the old Add Skill
  dialog; rewrite for the create page and file/paste import.

Author: waleedlatif1

apps/docs/content/docs/en/agents/skills.mdx

@@ -22,9 +22,7 @@ Skills live on the **Integrations** page: click **Integrations** in the workspac
 
 ![The Skills tab on the Integrations page](/static/skills/skills-tab.png)
 
-Click **+ Add to Sim** to open the **Add Skill** dialog. The **Create** tab takes three fields:
-
-![The Add Skill dialog, Create tab](/static/skills/add-skill-create.png)
+Click **+ Add to Sim** to open the skill create page, which takes three fields:
 
 | Field | Description |
 |-------|-------------|
@@ -38,13 +36,10 @@ Click **+ Add to Sim** to open the **Add Skill** dialog. The **Create** tab take
 
 ### Importing skills
 
-The **Import** tab brings in an existing skill in the open [SKILL.md](https://agentskills.io/specification) format, three ways:
-
-![The Add Skill dialog, Import tab](/static/skills/add-skill-import.png)
+Bring in an existing skill in the open [SKILL.md](https://agentskills.io/specification) format two ways:
 
-- **Upload a file** — a `.md` file with YAML frontmatter, or a `.zip` containing a `SKILL.md`.
-- **Import from GitHub** — paste a GitHub URL to a `SKILL.md` and click **Fetch**.
-- **Paste content** — paste the `SKILL.md` directly. The frontmatter carries the `name` and `description`; the markdown body is the content.
+- **Import** — the **Import** action on the create page takes a `.md` file with YAML frontmatter, or a `.zip` containing a `SKILL.md`.
+- **Paste content** — paste the `SKILL.md` straight into **Content**. The frontmatter carries the `name` and `description`; the markdown body is the content.
 
 Integration pages suggest **curated skills** for their service — open one (HubSpot, for example) and add a suggested skill with one click.
 
@@ -174,7 +169,7 @@ import { FAQ } from '@/components/ui/faq'
   { question: "When should I use skills vs. agent instructions?", answer: "Use skills for knowledge that applies across multiple workflows or changes frequently. Skills are reusable packages that can be attached to any agent. Use agent instructions for task-specific context that is unique to a single agent and workflow. If you find yourself copying the same instructions into multiple agents, that content should be a skill instead." },
   { question: "Can permission groups disable skills for certain users?", answer: "Yes. On Enterprise-entitled workspaces, any workspace admin can create a permission group with the disableSkills option enabled. When a user is assigned to such a group in a workspace, the skills dropdown in agent blocks is disabled and they cannot add or use skills in workflows belonging to that workspace." },
   { question: "What is the recommended maximum length for skill content?", answer: "Keep skills focused and under 500 lines. If a skill grows too large, split it into multiple specialized skills. Shorter, focused skills are more effective because the agent can load exactly what it needs. A broad skill with too much content can overwhelm the agent and reduce the quality of its responses." },
-  { question: "Where do I create and manage skills?", answer: "Click Integrations in the workspace sidebar and switch to the Skills tab. Add Skill creates one from a name (kebab-case, max 64 characters), description (max 1024 characters), and markdown content — or imports an existing SKILL.md from a file, a GitHub URL, or pasted content. Click any existing skill to open its detail page, where you edit, share, and delete it." },
+  { question: "Where do I create and manage skills?", answer: "Click Integrations in the workspace sidebar and switch to the Skills tab. Add to Sim opens a create page taking a name (kebab-case, max 64 characters), description (max 1024 characters), and markdown content — or imports an existing SKILL.md from a file or pasted content. Click any existing skill to open its detail page, where you edit, share, and delete it." },
   { question: "Who can edit a skill, and who can use it?", answer: "Everyone in the workspace — including people who join later — sees and uses every skill without being added to anything. Each skill has an editors list: editors and workspace admins (who are always editors, automatically) can edit, delete, and share the skill, and whoever creates a skill becomes an editor. The editors list never affects who can use or run a skill: a workflow that references a skill always executes it." },
   { question: "Can I use skills in Chat?", answer: "Yes. Type / in the Chat message box to open the skills menu and pick a skill — for example /format-markdown. The tag loads the skill's full instructions into the conversation, so Sim follows them for that request without having to decide on its own to load the skill." },
 ]} />

apps/sim/app/workspace/[workspaceId]/components/custom-tool-editor/custom-tool-code-field.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from 'react'
 import {
   ChipTag,
   CODE_LINE_HEIGHT_PX,
-  cn,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -50,14 +49,17 @@ interface TriggerState {
   searchTerm: string
 }
 
+/** Trailing identifier under the caret — the unit both the trigger and the completion act on. */
+const SCHEMA_PARAM_WORD = /[a-zA-Z_]\w*$/
+
 function checkSchemaParamTrigger(
   text: string,
   cursorPos: number,
   parameters: SchemaParameter[]
 ): TriggerState {
   if (parameters.length === 0) return { show: false, searchTerm: '' }
 
-  const currentWord = text.slice(0, cursorPos).match(/[a-zA-Z_]\w*$/)?.[0] ?? ''
+  const currentWord = text.slice(0, cursorPos).match(SCHEMA_PARAM_WORD)?.[0] ?? ''
   if (!currentWord) return { show: false, searchTerm: '' }
 
   const lower = currentWord.toLowerCase()
@@ -96,6 +98,14 @@ export function CustomToolCodeField({
   const busy = generation.isLoading || generation.isStreaming
   const resolvedMinHeight = schemaParameters.length > 0 ? '380px' : '420px'
 
+  /** Generation writes bypass `handleChange`, so close any open menu here instead. */
+  useEffect(() => {
+    if (!busy) return
+    setShowEnvVars(false)
+    setShowTags(false)
+    setShowSchemaParams(false)
+  }, [busy])
+
   useEffect(() => {
     if (!showSchemaParams || schemaParamSelectedIndex < 0) return
     const element = schemaParamItemRefs.current?.get(schemaParamSelectedIndex)
@@ -106,8 +116,9 @@ export function CustomToolCodeField({
     onChange(newValue)
     if (busy) return
 
-    const textarea = codeEditorRef.current?.querySelector('textarea')
-    if (!textarea) return
+    const container = codeEditorRef.current
+    const textarea = container?.querySelector('textarea')
+    if (!container || !textarea) return
 
     const pos = textarea.selectionStart
     setCursorPosition(pos)
@@ -117,17 +128,11 @@ export function CustomToolCodeField({
     const currentLine = lines.length
     const currentCol = lines[lines.length - 1].length
 
-    try {
-      if (codeEditorRef.current) {
-        const editorRect = codeEditorRef.current.getBoundingClientRect()
-        setDropdownPosition({
-          top: currentLine * CODE_LINE_HEIGHT_PX + 5,
-          left: Math.min(currentCol * 8, editorRect.width - 260),
-        })
-      }
-    } catch (error) {
-      logger.error('Error calculating cursor position:', { error })
-    }
+    const editorRect = container.getBoundingClientRect()
+    setDropdownPosition({
+      top: currentLine * CODE_LINE_HEIGHT_PX + 5,
+      left: Math.min(currentCol * 8, editorRect.width - 260),
+    })
 
     const envVarTrigger = checkEnvVarTrigger(newValue, pos)
     setShowEnvVars(envVarTrigger.show)
@@ -158,9 +163,10 @@ export function CustomToolCodeField({
     const beforeCursor = value.substring(0, pos)
     const afterCursor = value.substring(pos)
 
-    const words = beforeCursor.split(/[\s=();,{}[\]]+/)
-    const currentWord = words[words.length - 1] || ''
-    const wordStart = beforeCursor.lastIndexOf(currentWord)
+    // Must match checkSchemaParamTrigger's boundary exactly — a looser split
+    // here would replace text the trigger never matched (e.g. eat `data.`).
+    const currentWord = beforeCursor.match(SCHEMA_PARAM_WORD)?.[0] ?? ''
+    const wordStart = pos - currentWord.length
 
     onChange(beforeCursor.substring(0, wordStart) + paramName + afterCursor)
     setShowSchemaParams(false)
@@ -252,7 +258,6 @@ export function CustomToolCodeField({
           placeholder={CODE_PLACEHOLDER}
           minHeight={resolvedMinHeight}
           error={error && !generation.isStreaming}
-          className={cn(busy && 'cursor-not-allowed opacity-50')}
           highlightVariables={true}
           disabled={busy}
           onKeyDown={handleKeyDown}

apps/sim/app/workspace/[workspaceId]/components/custom-tool-editor/custom-tool-schema-field.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { cn } from '@sim/emcn'
 import { SCHEMA_PLACEHOLDER } from '@/app/workspace/[workspaceId]/components/custom-tool-editor/custom-tool-schema'
 import type { useSchemaGeneration } from '@/app/workspace/[workspaceId]/components/custom-tool-editor/use-custom-tool-generation'
 import { CodeEditor } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor'
@@ -33,7 +32,6 @@ export function CustomToolSchemaField({
       placeholder={SCHEMA_PLACEHOLDER}
       minHeight='420px'
       error={error}
-      className={cn(busy && 'cursor-not-allowed opacity-50')}
       disabled={busy}
     />
   )

apps/sim/app/workspace/[workspaceId]/components/custom-tool-editor/custom-tool-schema.ts

@@ -1,7 +1,7 @@
 /**
  * Shared parsing/validation for a custom tool's OpenAI function-calling JSON
- * schema. Used by every custom-tool editing surface (the canvas modal and the
- * `/tools` pages) so they agree on what a valid schema is.
+ * schema. Used by both custom-tool editing surfaces (the canvas modal and the
+ * Settings > Custom Tools detail page) so they agree on what a valid schema is.
  */
 
 export interface SchemaParameter {

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx

@@ -238,8 +238,19 @@ function RawMarkdownField({
     if (!autoGrow) return
     const el = textareaRef.current
     if (!el) return
-    el.style.height = 'auto'
-    el.style.height = `${Math.max(el.scrollHeight, minHeight)}px`
+
+    const measure = () => {
+      el.style.height = 'auto'
+      el.style.height = `${Math.max(el.scrollHeight, minHeight)}px`
+    }
+    measure()
+
+    // The box is `overflow-hidden` while uncapped, so a width change that
+    // re-wraps lines without touching `value` would clip the tail with no
+    // scrollbar to reach it — re-measure whenever the element resizes.
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
   }, [autoGrow, value, minHeight])
 
   return (

apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ChipConfirmModal } from '@sim/emcn'
+import { ChipConfirmModal, toast } from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -176,7 +176,9 @@ export function CustomToolDetail({ workspaceId, tool, onBack }: CustomToolDetail
       onBack()
     } catch (error) {
       logger.error('Failed to delete custom tool', error)
-      setSchemaError(getErrorMessage(error, 'Failed to delete custom tool'))
+      toast.error("Couldn't delete tool", {
+        description: getErrorMessage(error, 'Please try again in a moment.'),
+      })
     }
   }
 

apps/sim/app/workspace/[workspaceId]/skills/new/skill-create.tsx

@@ -73,7 +73,11 @@ export function SkillCreate({ workspaceId }: SkillCreateProps) {
   const [contentSeed, setContentSeed] = useState(0)
   const [errors, setErrors] = useState<FieldErrors>({})
 
-  const isDirty = !!nameDraft.trim() || !!descriptionDraft.trim() || !!contentDraft.trim()
+  // Drops on success so the guard pops its history sentinel before we navigate —
+  // otherwise Back from the new skill lands on a stale, empty create form.
+  const isDirty =
+    !createSkill.isSuccess &&
+    (!!nameDraft.trim() || !!descriptionDraft.trim() || !!contentDraft.trim())
 
   const guard = useUnsavedChangesGuard({ isDirty, backHref: skillsHref })
 
@@ -195,6 +199,7 @@ export function SkillCreate({ workspaceId }: SkillCreateProps) {
             autoComplete='off'
             data-lpignore='true'
             disabled={createSkill.isPending}
+            error={!!errors.description}
           />
           {errors.description && (
             <p className='mt-[9px] text-[var(--text-error)] text-caption'>{errors.description}</p>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx

@@ -8,6 +8,7 @@ import {
   ChipModalFooter,
   ChipModalHeader,
   ChipModalTabs,
+  toast,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -310,9 +311,10 @@ export function CustomToolModal({
       handleClose()
     } catch (error) {
       logger.error('Error deleting custom tool:', error)
-      const errorMessage = getErrorMessage(error, 'Failed to delete custom tool')
-      setSchemaError(`${errorMessage}. Please try again.`)
-      setActiveSection('schema')
+      // A delete failure is not a schema problem — keep it out of the Schema slot.
+      toast.error("Couldn't delete tool", {
+        description: getErrorMessage(error, 'Please try again in a moment.'),
+      })
       setShowDeleteConfirm(false)
     }
   }