feat(studio): skills at the top

Author: mutewinter

apps/studio/src/client/components/files-grid.tsx

@@ -36,14 +36,16 @@ export function FilesGrid({
   const navigate = useNavigate({ from: "/projects/$subdomain" });
   const [isExpanded, setIsExpanded] = useState(false);
   const [isScriptsExpanded, setIsScriptsExpanded] = useState(false);
+  const [isSkillsExpanded, setIsSkillsExpanded] = useState(false);
   const [isUserProvidedExpanded, setIsUserProvidedExpanded] = useState(false);
   const [isAgentRetrievedExpanded, setIsAgentRetrievedExpanded] =
     useState(false);
 
   const [outputFiles, nonOutputFiles] = fork(files, isOutputFile);
   const [scriptFiles, nonScriptFiles] = fork(nonOutputFiles, isScriptFile);
+  const [skillFiles, nonSkillFiles] = fork(nonScriptFiles, isSkillFile);
   const [userProvidedFiles, nonUserProvidedFiles] = fork(
-    nonScriptFiles,
+    nonSkillFiles,
     isUserProvidedFile,
   );
   const [agentRetrievedFiles, regularFiles] = fork(
@@ -81,6 +83,7 @@ export function FilesGrid({
   const hasMoreFiles =
     mainFiles.length > initialVisibleCount ||
     scriptFiles.length > 0 ||
+    skillFiles.length > 0 ||
     collapsedUserProvidedFiles.length > 0 ||
     agentRetrievedFiles.length > 0;
 
@@ -89,6 +92,7 @@ export function FilesGrid({
   const hiddenFileCount =
     expandedFiles.length +
     scriptFiles.length +
+    skillFiles.length +
     collapsedUserProvidedFiles.length +
     agentRetrievedFiles.length;
 
@@ -174,6 +178,7 @@ export function FilesGrid({
                 collapsedUserProvidedFiles.length === 0
               ) {
                 setIsScriptsExpanded(true);
+                setIsSkillsExpanded(true);
                 setIsUserProvidedExpanded(true);
                 setIsAgentRetrievedExpanded(true);
               }
@@ -208,6 +213,19 @@ export function FilesGrid({
         />
       )}
 
+      {isExpanded && skillFiles.length > 0 && (
+        <CategorizedFileSection
+          alignEnd={alignEnd}
+          files={skillFiles}
+          isExpanded={isSkillsExpanded}
+          onFileClick={handleFileClick}
+          onToggle={() => {
+            setIsSkillsExpanded(!isSkillsExpanded);
+          }}
+          title="Skills"
+        />
+      )}
+
       {isExpanded && collapsedUserProvidedFiles.length > 0 && (
         <CategorizedFileSection
           alignEnd={alignEnd}
@@ -240,6 +258,7 @@ export function FilesGrid({
             onClick={() => {
               setIsExpanded(false);
               setIsScriptsExpanded(false);
+              setIsSkillsExpanded(false);
               setIsUserProvidedExpanded(false);
               setIsAgentRetrievedExpanded(false);
             }}
@@ -338,6 +357,10 @@ function isScriptFile(file: ProjectFileViewerFile) {
   return file.filePath.startsWith(`${APP_FOLDER_NAMES.scripts}/`);
 }
 
+function isSkillFile(file: ProjectFileViewerFile) {
+  return file.filePath.startsWith(`${APP_FOLDER_NAMES.skills}/`);
+}
+
 function isUserProvidedFile(file: ProjectFileViewerFile) {
   return file.filePath.startsWith(`${APP_FOLDER_NAMES.userProvided}/`);
 }

apps/studio/src/client/lib/project-file-groups.ts

@@ -40,12 +40,7 @@ const ROOT_SOURCE_EXTENSIONS = [
   ".tsx",
 ];
 
-const FILTERED_DIRECTORY_PREFIXES = [".agents/"];
-
 export function shouldFilterProjectFile(filePath: string): boolean {
-  if (isFilteredFolder(filePath)) {
-    return true;
-  }
   const baseName = filenameFromFilePath(filePath).toLowerCase();
   if (
     FILTERED_FILENAMES.some((filtered) => baseName === filtered.toLowerCase())
@@ -58,10 +53,3 @@ export function shouldFilterProjectFile(filePath: string): boolean {
   }
   return false;
 }
-
-function isFilteredFolder(filePath: string): boolean {
-  const normalized = filePath.startsWith("./") ? filePath.slice(2) : filePath;
-  return FILTERED_DIRECTORY_PREFIXES.some((prefix) =>
-    normalized.startsWith(prefix),
-  );
-}

apps/studio/src/client/lib/tool-display.ts

@@ -81,7 +81,7 @@ const TOOL_STREAMING_DISPLAY_NAMES_WITH_VALUE: Record<
   generate_image: "Generating",
   glob: "Searching for",
   grep: "Searching for",
-  load_skill: "Loading",
+  load_skill: "Loading skill",
   read_file: "Reading",
   run_diagnostics: TOOL_STREAMING_DISPLAY_NAMES.run_diagnostics,
   run_shell_command: TOOL_STREAMING_DISPLAY_NAMES.run_shell_command,

packages/workspace/src/agents/main.ts

@@ -189,12 +189,12 @@ export const mainAgent = setupAgent({
     - No other runtimes are bundled with this product.
     - You can use the \`${agentTools.RunDiagnostics.name}\` tool to check for errors in your scripts.
     - You don't need to add shebangs to TypeScript script files.
-    - Before running scripts, add dependencies with \`${PNPM_COMMAND.name}\`. No \`cd\` is available -- to target a skill folder use \`${PNPM_COMMAND.name} add <package> --filter ./${APP_FOLDER_NAMES.agents}/${APP_FOLDER_NAMES.agentsSkills}/<skill-name>\`.
+    - Before running scripts, add dependencies with \`${PNPM_COMMAND.name}\`. No \`cd\` is available -- to target a skill folder use \`${PNPM_COMMAND.name} add <package> --filter ./${APP_FOLDER_NAMES.skills}/<skill-name>\`.
 
     ## Where to place scripts
     Each skill folder has its own \`package.json\` with dependencies already installed. The skill files are yours to edit freely -- treat them as a starting point, not read-only templates.
 
-    - **Skill folder** (\`${APP_FOLDER_NAMES.agents}/${APP_FOLDER_NAMES.agentsSkills}/<skill-name>/scripts/\`): Default whenever any skill is involved. New scripts placed here get the skill's dependencies for free with no extra setup.
+    - **Skill folder** (\`${APP_FOLDER_NAMES.skills}/<skill-name>/scripts/\`): Default whenever any skill is involved. New scripts placed here get the skill's dependencies for free with no extra setup.
     - **Project scripts** (\`${APP_FOLDER_NAMES.scripts}/\`): Only when no skills are involved, or when combining multiple skills requires deps that span more than one skill folder. Install any needed deps at the project root first.
       
     # Output Files

packages/workspace/src/constants.ts

@@ -5,11 +5,10 @@ export const REGISTRY_FOLDER_NAMES = {
 
 export const APP_FOLDER_NAMES = {
   agentRetrieved: "agent-retrieved",
-  agents: ".agents",
-  agentsSkills: "skills",
   output: "output",
   private: ".quests",
   scripts: "scripts",
+  skills: "skills",
   src: "src",
   userProvided: "user-provided",
 } as const;

packages/workspace/src/lib/copy-skill.ts

@@ -19,18 +19,13 @@ export async function copySkill({
   skillDir: AbsolutePath;
   skillName: string;
 }): Promise<Result<AbsolutePath, TypedError.Conflict>> {
-  const destDir = absolutePathJoin(
-    appDir,
-    APP_FOLDER_NAMES.agents,
-    APP_FOLDER_NAMES.agentsSkills,
-    skillName,
-  );
+  const destDir = absolutePathJoin(appDir, APP_FOLDER_NAMES.skills, skillName);
 
   try {
     await fs.access(destDir);
     return err(
       new TypedError.Conflict(
-        `Skill "${skillName}" is already loaded at ${path.join(APP_FOLDER_NAMES.agents, APP_FOLDER_NAMES.agentsSkills, skillName)}.`,
+        `Skill "${skillName}" is already loaded at ${path.join(APP_FOLDER_NAMES.skills, skillName)}.`,
       ),
     );
   } catch (error) {

packages/workspace/src/tools/load-skill.test.ts

@@ -110,12 +110,7 @@ describe("LoadSkill", () => {
       input: { explanation: "loading", name: "my-skill" },
     });
 
-    const destBase = path.join(
-      appDir,
-      APP_FOLDER_NAMES.agents,
-      APP_FOLDER_NAMES.agentsSkills,
-      "my-skill",
-    );
+    const destBase = path.join(appDir, APP_FOLDER_NAMES.skills, "my-skill");
     const md = await fs.readFile(path.join(destBase, "SKILL.md"), "utf8");
     expect(md).toMatchInlineSnapshot(`
       "---
@@ -161,9 +156,9 @@ describe("LoadSkill", () => {
       The skill files below are copied into your project and are yours to edit. Before writing anything new, read the relevant script(s) with read_file and run them with \`ts\` if they fit. Only write a custom script if the existing ones cannot handle the task even with modification.
 
       <skill_files>
-      <file>.agents/skills/my-skill/references/notes.md</file>
-      <file>.agents/skills/my-skill/scripts/lib/helper.ts</file>
-      <file>.agents/skills/my-skill/scripts/run.ts</file>
+      <file>skills/my-skill/references/notes.md</file>
+      <file>skills/my-skill/scripts/lib/helper.ts</file>
+      <file>skills/my-skill/scripts/run.ts</file>
       </skill_files>
       </skill_content>"
     `);
@@ -184,8 +179,7 @@ describe("LoadSkill", () => {
 
     const destScript = path.join(
       appDir,
-      APP_FOLDER_NAMES.agents,
-      APP_FOLDER_NAMES.agentsSkills,
+      APP_FOLDER_NAMES.skills,
       "my-skill",
       "scripts",
       "run.ts",
@@ -198,7 +192,7 @@ describe("LoadSkill", () => {
     const fileContent = await fs.readFile(destScript, "utf8");
     expect(fileContent).toMatchInlineSnapshot(`"modified"`);
     expect(result.content).toMatchInlineSnapshot(
-      `"Skill "my-skill" is already loaded at .agents/skills/my-skill."`,
+      `"Skill "my-skill" is already loaded at skills/my-skill."`,
     );
   });
 

packages/workspace/src/tools/load-skill.ts

@@ -119,11 +119,7 @@ export const LoadSkill = setupTool({
     }
 
     const destDir = copyResult.value;
-    const relativeSkillRoot = path.join(
-      APP_FOLDER_NAMES.agents,
-      APP_FOLDER_NAMES.agentsSkills,
-      skill.name,
-    );
+    const relativeSkillRoot = path.join(APP_FOLDER_NAMES.skills, skill.name);
     const { files: copiedFiles, truncated } = await listSkillFiles(
       destDir,
       signal,