Add skill for editing card definitions

packages/base/SkillCard/code-module-editing.json

@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "instructions": "Boxel is a platform where people can create Cards, which under the hood are built out of glimmer components and ember.\n\nCards are independent linkable items that get an ID. Fields are contained within cards, so sometimes a user wants a custom field, but usually it's creating a card (derived from CardDef).\n\nUse glimmer templating and typescript for the code. Remember the limitations of logic within glimmer templating code. Basic interaction for editing fields is handled for you by boxel, you don't need to create that (e.g. StringField has an edit template that allows a user to edit the data). Computed fields can support more complex work, and update automatically for you. Interaction (button clicks, filtering on user typed content) may require glimmer & ember functionality (see action and tracked in the example below).\n\nCards you create have three templates. If you do not specify them they are automatically created for you, but users often want custom templates. Each template is a glimmer template and can use ember functionality. These are specified as static in the card definition:\n\nimport { contains, containsMany, linksToMany, field, CardDef, Component, } from 'https://cardstack.com/base/card-api'; \nimport StringField from 'https://cardstack.com/base/string'; \nimport NumberField from 'https://cardstack.com/base/number'; \nimport BooleanField from 'https://cardstack.com/base/boolean'; \n// Important, this is the tracked decorator \nimport { tracked } from '@glimmer/tracking'; \nimport { action } from '@ember/object'; \nimport { fn } from '@ember/helper'; \nimport { on } from '@ember/modifier';\n\nexport class MyCustomCard extends CardDef { \n\nstatic displayName = 'BoxelBuddyGuestList';\n\n// linksTo and linksToMany \n@field linkedData = linksToMany(() => AnotherCard);\n\n// A field that is computed from other data in the card \n@field computedData = contains(NumberField, { computeVia: function (this: MyCustomCard) { \n// implementation logic here \nreturn 1; }, \n});\n\n// Isolated templates are used when items are viewed on their own. Default to the isolated template \nstatic isolated = class Isolated extends Component { \n// Use tracked and action decorators to be able to use interactivity in the templates \n@tracked trackedValue = []; \n@action interactivity(event: InputEvent) {} \n\n// Glimmer template goes here, make sure the style tag is at the top level inside the template tag\n<template></template>\n}; \n\n// Embedded is when they appear in other cards \nstatic embedded = class Embedded extends Component { };\n\n// Fitted templates should be responsive to the size of the container they appear in \nstatic fitted = class Fitted extends Component { };\n\n// Edit is for the user editing the data. Use @fields let the field render itself \nstatic edit = class Edit extends Component { }; \n}\n\n@fields.fieldName lets the field render itself, very useful for editable fields. @model.fieldName gets the value out of the field.\n\nImportant:\n\nIt is extremely important you use the following imports for interactivity: \nimport { tracked } from '@glimmer/tracking'; \nimport { action } from '@ember/object'; \nimport { fn, get } from '@ember/helper'; \nimport { on } from '@ember/modifier';\n\nRemember to define a field the following syntax is used:\n\n@field fieldname = contains(FieldType); @field fieldname = containsMany(FieldType);\n\nIf user asks you to make something editable, use `contains` or `containsMany` syntax for adding a field.\n\nAnd for linking to other cards:\n\n@field fieldname = linksTo(() => CardType); \n@field fieldname = linksToMany(() => CardType);\n\nYou can ask followups\n\nYou can propose new/improved data structures\n\nWhen writing the glimmer template, ensure that the style tags appear within the template tag, as the last item in them. You should use useful class names and a sensible structure as you build this. Use single quotes for the class names.\n\nWhen writing this, take care to remember ember and glimmer oddities. Accessing a list by index should use this format:\n\n{{(get this.args.model.fieldWithAList index)}}\n\nValues from the model can be directly inserted with\n\n{{this.args.model.fieldName}}\n\nand you can delegate rendering to the field with\n\n<@fields.fieldName />\n\nYou must be careful with the templates, remember glimmer rules. Do not put a dollar sign ($) directly in front of the brackets.\n\nAlways use scoped attributed when you generate a style tag, like so: <style scoped> ... CSS code ... </style.\n\nUnless otherwise instructed, use a modern but stylish theme. In responses regarding to attached files, respond with a series of code patches where you output gts code and mark it whether it's for adding or deleting, in a clear succession, so that user can quickly just copy paste and put it in the code file, or delete code. This should include the file name and line numbers where the change should happen.",
+      "title": "Code Module Editing",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../skill-card",
+        "name": "SkillCard"
+      }
+    }
+  }
+}

packages/host/app/components/ai-assistant/panel.gts

@@ -471,7 +471,9 @@ export default class AiAssistantPanel extends Component<Signature> {
       );
       await addSkillsToRoomCommand.execute({
         roomId,
-        skills: await this.matrixService.loadDefaultSkills(),
+        skills: await this.matrixService.loadDefaultSkills(
+          this.operatorModeStateService.state.submode,
+        ),
       });
       window.localStorage.setItem(NewSessionIdPersistenceKey, roomId);
       this.enterRoom(roomId);

packages/host/app/services/matrix-service.ts

@@ -78,6 +78,7 @@ import type {
 import type { Tool } from 'https://cardstack.com/base/matrix-event';
 import { SkillCard } from 'https://cardstack.com/base/skill-card';
 
+import AddSkillsToRoomCommand from '../commands/add-skills-to-room';
 import { importResource } from '../resources/import';
 
 import { RoomResource, getRoom } from '../resources/room';
@@ -100,7 +101,6 @@ import type * as MatrixSDK from 'matrix-js-sdk';
 const { matrixURL } = ENV;
 const MAX_CARD_SIZE_KB = 60;
 const STATE_EVENTS_OF_INTEREST = ['m.room.create', 'm.room.name'];
-const DefaultSkillCards = [`${baseRealm.url}SkillCard/card-editing`];
 
 export type OperatorModeContext = {
   submode: Submode;
@@ -814,9 +814,23 @@ export default class MatrixService extends Service {
     }
   }
 
-  async loadDefaultSkills() {
+  async loadDefaultSkills(submode: Submode) {
+    let interactModeDefaultSkills = [`${baseRealm.url}SkillCard/card-editing`];
+
+    let codeModeDefaultSkills = [
+      `${baseRealm.url}SkillCard/code-module-editing`,
+    ];
+
+    let defaultSkills;
+
+    if (submode === 'code') {
+      defaultSkills = codeModeDefaultSkills;
+    } else {
+      defaultSkills = interactModeDefaultSkills;
+    }
+
     return await Promise.all(
-      DefaultSkillCards.map(async (skillCardURL) => {
+      defaultSkills.map(async (skillCardURL) => {
         return await this.cardService.getCard<SkillCard>(skillCardURL);
       }),
     );
@@ -1365,6 +1379,20 @@ export default class MatrixService extends Service {
     }
   }
 
+  async activateCodingSkill() {
+    if (!this.currentRoomId) {
+      return;
+    }
+
+    let addSkillsToRoomCommand = new AddSkillsToRoomCommand(
+      this.commandService.commandContext,
+    );
+    await addSkillsToRoomCommand.execute({
+      roomId: this.currentRoomId,
+      skills: await this.loadDefaultSkills('code'),
+    });
+  }
+
   async setLLMForCodeMode() {
     this.setLLMModel('anthropic/claude-3.5-sonnet');
   }

packages/host/app/services/operator-mode-state-service.ts

@@ -318,6 +318,7 @@ export default class OperatorModeStateService extends Service {
 
     if (submode === Submodes.Code) {
       this.matrixService.setLLMForCodeMode();
+      this.matrixService.activateCodingSkill();
     }
   }
 

packages/matrix/tests/skills.spec.ts

@@ -66,7 +66,8 @@ test.describe('Skills', () => {
     ).toHaveClass('switch checked');
   }
 
-  const defaultSkillCard = `https://cardstack.com/base/SkillCard/card-editing`;
+  const defaultSkillCardForInteractMode = `https://cardstack.com/base/SkillCard/card-editing`;
+  const defaultSkillCardForCodeMode = `https://cardstack.com/base/SkillCard/code-module-editing`;
   const skillCard1 = `${appURL}/skill-pirate-speak`;
   const skillCard2 = `${appURL}/skill-seo`;
   const skillCard3 = `${appURL}/skill-card-title-editing`;
@@ -111,10 +112,14 @@ test.describe('Skills', () => {
     ).toHaveText('Hide');
     await expect(page.locator('[data-test-pill-menu-item]')).toHaveCount(1);
     await expect(
-      page.locator(`[data-test-pill-menu-item="${defaultSkillCard}"]`),
+      page.locator(
+        `[data-test-pill-menu-item="${defaultSkillCardForInteractMode}"]`,
+      ),
     ).toHaveCount(1);
     await expect(
-      page.locator(`[data-test-card-pill-toggle="${defaultSkillCard}-on"]`),
+      page.locator(
+        `[data-test-card-pill-toggle="${defaultSkillCardForInteractMode}-on"]`,
+      ),
     ).toHaveCount(1);
     await expect(page.locator('[data-test-pill-menu-add-button]')).toHaveCount(
       1,
@@ -172,6 +177,22 @@ test.describe('Skills', () => {
     );
   });
 
+  test('it will attach code editing skill in code mode by default', async ({
+    page,
+  }) => {
+    await login(page, 'user1', 'pass', { url: appURL });
+
+    await page.locator('[data-test-submode-switcher] button').click();
+    await page.locator('[data-test-boxel-menu-item-text="Code"]').click();
+    await page.locator('[data-test-skill-menu]').hover();
+    await page.locator('[data-test-pill-menu-header-button]').click();
+    await expect(
+      page.locator(
+        `[data-test-attached-card="${defaultSkillCardForCodeMode}"]`,
+      ),
+    ).toHaveCount(1);
+  });
+
   test(`room skills state does not leak when switching rooms`, async ({
     page,
   }) => {
@@ -255,7 +276,9 @@ test.describe('Skills', () => {
     await page.locator('[data-test-skill-menu]').hover();
     await page.locator('[data-test-pill-menu-header-button]').click();
     await page
-      .locator(`[data-test-card-pill-toggle="${defaultSkillCard}-on"]`)
+      .locator(
+        `[data-test-card-pill-toggle="${defaultSkillCardForInteractMode}-on"]`,
+      )
       .click(); // toggle off default skill card
     await page
       .locator(`[data-test-card-pill-toggle="${skillCard1}-on"]`)
@@ -264,7 +287,9 @@ test.describe('Skills', () => {
       .locator(`[data-test-card-pill-toggle="${skillCard2}-on"]`)
       .click(); // toggle off skill 2
     await expect(
-      page.locator(`[data-test-card-pill-toggle="${defaultSkillCard}-off"]`),
+      page.locator(
+        `[data-test-card-pill-toggle="${defaultSkillCardForInteractMode}-off"]`,
+      ),
     ).toHaveCount(1);
     await expect(
       page.locator(`[data-test-card-pill-toggle="${skillCard1}-off"]`),