fix: refresh skills settings after mutations

Author: jsourcebot

packages/web/src/ee/features/chat/skills/actions.test.ts

@@ -28,6 +28,11 @@ vi.mock("@/features/git", () => ({
     resolveFileBlobShaForRepo: vi.fn(),
 }));
 
+vi.mock("next/cache", () => ({
+    refresh: vi.fn(),
+    revalidatePath: vi.fn(),
+}));
+
 const {
     adoptSharedSkill,
     createSharedAgentSkill,
@@ -48,6 +53,7 @@ const {
 } = await import("./actions");
 
 const gitMock = await import("@/features/git");
+const nextCache = await import("next/cache");
 
 function createPrismaMock() {
     const prisma = {
@@ -1137,6 +1143,9 @@ describe("setSharedSkillFlag", () => {
             id: "skill-1",
             autoEnrolled: true,
         });
+        expect(nextCache.revalidatePath).toHaveBeenCalledWith("/settings/skills");
+        expect(nextCache.revalidatePath).toHaveBeenCalledWith("/settings/workspaceAskAgent");
+        expect(nextCache.refresh).toHaveBeenCalled();
         expect(result).not.toHaveProperty("isAdopted");
         expect(result).not.toHaveProperty("isVisibleToUser");
         expect(result).not.toHaveProperty("isCreatedByUser");
@@ -1158,6 +1167,7 @@ describe("setSharedSkillFlag", () => {
         // The owner gate returns before its callback runs, so the skill is never looked up or updated.
         expect(prisma.agentSkill.findFirst).not.toHaveBeenCalled();
         expect(prisma.agentSkill.update).not.toHaveBeenCalled();
+        expect(nextCache.refresh).not.toHaveBeenCalled();
     });
 
     test("rejects updates with no flag", async () => {

packages/web/src/ee/features/chat/skills/actions.ts

@@ -12,6 +12,7 @@ import { withAuth } from "@/middleware/withAuth";
 import { withMinimumOrgRole } from "@/middleware/withMinimumOrgRole";
 import { OrgRole, Prisma, sharedAgentSkillAuthScope, sharedAgentSkillScope, sharedAgentSkillVisibleToUserWhere, personalAgentSkillAuthScope, personalAgentSkillScope, type AgentSkill, type Org, type PrismaClient } from "@sourcebot/db";
 import { StatusCodes } from "http-status-codes";
+import { refresh, revalidatePath } from "next/cache";
 import { z } from "zod";
 import {
     agentSkillInputSchema,
@@ -66,6 +67,12 @@ const skillSourceInvalid = (): ServiceError => ({
     message: "The source file is no longer a valid skill.",
 });
 
+const refreshSkillSettingsViews = () => {
+    revalidatePath("/settings/skills");
+    revalidatePath("/settings/workspaceAskAgent");
+    refresh();
+};
+
 const sharedCatalogSkillSelect = (userId: string, orgId: number) => ({
     id: true,
     visibility: true,
@@ -421,6 +428,7 @@ export const createPersonalAgentSkill = async (
                     },
                 });
 
+                refreshSkillSettingsViews();
                 return toAgentSkillListItem(skill);
             } catch (error) {
                 if (isUniqueConstraintError(error)) {
@@ -484,6 +492,7 @@ export const updatePersonalAgentSkill = async (
                         },
                 });
 
+                refreshSkillSettingsViews();
                 return toAgentSkillListItem(skill);
             } catch (error) {
                 if (isUniqueConstraintError(error)) {
@@ -655,6 +664,7 @@ export const updatePersonalAgentSkillFromSource = async (
             },
         });
 
+        refreshSkillSettingsViews();
         return toAgentSkillListItem(updated);
     }));
 
@@ -720,6 +730,7 @@ export const updateSharedAgentSkillFromSource = async (
             select: sharedCatalogSkillSelect(user.id, org.id),
         });
 
+        refreshSkillSettingsViews();
         return toSharedAgentSkillCatalogItem(updated, user.id);
     }));
 
@@ -743,6 +754,7 @@ export const deletePersonalAgentSkill = async (
             return skillNotFound();
         }
 
+        refreshSkillSettingsViews();
         return { success: true };
     }));
 
@@ -812,6 +824,7 @@ export const publishPersonalAgentSkillToShared = async (
                 return selectedSkill;
             });
 
+            refreshSkillSettingsViews();
             return toSharedAgentSkillCatalogItem(sharedSkill, user.id);
         } catch (error) {
             if (isUniqueConstraintError(error)) {
@@ -908,6 +921,7 @@ export const makeSharedAgentSkillPersonal = async (
                 return createdSkill;
             });
 
+            refreshSkillSettingsViews();
             return toAgentSkillListItem(personalSkill);
         } catch (error) {
             if (isUniqueConstraintError(error)) {
@@ -1016,6 +1030,7 @@ export const createSharedAgentSkill = async (
                     });
                 });
 
+                refreshSkillSettingsViews();
                 return toAgentSkillListItem(skill);
             } catch (error) {
                 if (isUniqueConstraintError(error)) {
@@ -1078,6 +1093,7 @@ export const updateSharedAgentSkill = async (
                         },
                 });
 
+                refreshSkillSettingsViews();
                 return toAgentSkillListItem(skill);
             } catch (error) {
                 if (isUniqueConstraintError(error)) {
@@ -1115,6 +1131,7 @@ export const deleteSharedAgentSkill = async (
             where: { id: existingSkill.id },
         });
 
+        refreshSkillSettingsViews();
         return { success: true };
     }));
 
@@ -1159,6 +1176,7 @@ export const setSharedSkillFlag = async (
                     select: sharedManagementSkillSelect,
                 });
 
+                refreshSkillSettingsViews();
                 return toSharedAgentSkillManagementItem(skill);
             });
         }));
@@ -1213,6 +1231,7 @@ export const adoptSharedSkill = async (
             },
         });
 
+        refreshSkillSettingsViews();
         return { success: true };
     }));
 
@@ -1247,5 +1266,6 @@ export const unadoptSharedSkill = async (
             skill,
         });
 
+        refreshSkillSettingsViews();
         return { success: true };
     }));

packages/web/src/ee/features/chat/skills/components/skillsPage.test.tsx

@@ -281,6 +281,29 @@ describe('SkillsPage', () => {
         expect(screen.getByRole('switch', { name: 'Enable Deploy Checklist', checked: true })).toBeTruthy();
     });
 
+    test('keeps list skill names readable when status badges are present', () => {
+        const longBadgedSkill: SharedAgentSkillCatalogItem = {
+            ...sharedSyncedSkill,
+            id: 'long-badged-skill',
+            name: 'Code Contribution Guidelines',
+            slug: 'contributing',
+            autoEnrolled: true,
+            isCreatedByUser: false,
+        };
+
+        renderSkillsPage({ sharedSkills: [longBadgedSkill] });
+
+        const rowButton = screen.getByRole('button', { name: /Code Contribution Guidelines/ });
+        const name = within(rowButton).getByText('Code Contribution Guidelines');
+        const command = within(rowButton).getByText('/contributing');
+        const syncedBadge = within(rowButton).getByText('Synced');
+        expect(name.className).not.toContain('truncate');
+        expect(name.className).toContain('break-words');
+        expect(syncedBadge.parentElement?.className).toContain('mt-1');
+        expect(syncedBadge.parentElement).not.toBe(command.parentElement);
+        expect(within(rowButton).getByText('Auto')).toBeTruthy();
+    });
+
     test('shows a repo-synced skill as read-only and updates it from source', async () => {
         vi.mocked(clientApi.getSkillSourceStatus).mockResolvedValue({ status: 'update_available' });
         vi.mocked(skillActions.updatePersonalAgentSkillFromSource).mockResolvedValue({
@@ -385,6 +408,30 @@ describe('SkillsPage', () => {
         expect(screen.getByTestId('markdown-preview').textContent).toContain('Say hi.');
     });
 
+    test('updates the list when refreshed server props include a new shared skill', async () => {
+        const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+        const renderPage = (sharedSkills: SharedAgentSkillCatalogItem[]) => (
+            <QueryClientProvider client={queryClient}>
+                <TooltipProvider>
+                    <SkillsPage
+                        initialPersonalSkills={[]}
+                        initialSharedSkills={sharedSkills}
+                        currentUserEmail="jack@sourcebot.dev"
+                        isOwner={true}
+                        permissionSyncEnabled={true}
+                    />
+                </TooltipProvider>
+            </QueryClientProvider>
+        );
+
+        const { rerender } = render(renderPage([]));
+        expect(screen.getByText('No shared skills yet.')).toBeTruthy();
+
+        rerender(renderPage([sharedSkill]));
+
+        await waitFor(() => expect(screen.getByText('Deploy Checklist')).toBeTruthy());
+    });
+
     test('lets an owner jump to workspace settings for a shared skill', async () => {
         renderSkillsPage({ sharedSkills: [sharedSkill], isOwner: true });
 

packages/web/src/ee/features/chat/skills/components/skillsPage.tsx

@@ -191,15 +191,21 @@ function SkillListRow({ name, slug, isActive, badge, enabled, togglePending, onT
             <button
                 type="button"
                 onClick={onSelect}
-                className="flex min-w-0 flex-1 items-center gap-3 rounded-lg px-3 py-2.5 text-left"
+                className="flex min-w-0 flex-1 items-start gap-3 rounded-lg px-3 py-2.5 text-left"
             >
                 <SkillAvatar name={name} size="sm" />
-                <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                        <p className="truncate text-sm font-medium text-foreground">{name}</p>
-                        {badge}
+                <div className="min-w-0 flex-1 space-y-1">
+                    <p className="max-w-full whitespace-normal break-words text-sm font-medium leading-5 text-foreground">
+                        {name}
+                    </p>
+                    <div className="min-w-0">
+                        <p className="min-w-0 break-all font-mono text-xs text-muted-foreground">/{slug}</p>
+                        {badge && (
+                            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-1.5">
+                                {badge}
+                            </div>
+                        )}
                     </div>
-                    <p className="truncate font-mono text-xs text-muted-foreground">/{slug}</p>
                 </div>
             </button>
             {onToggleEnabled && (
@@ -247,6 +253,14 @@ export function SkillsPage({
     const [sharedSkills, setSharedSkills] = useState(() => sortSharedAgentSkillCatalogItems(initialSharedSkills));
     const [searchQuery, setSearchQuery] = useState("");
 
+    useEffect(() => {
+        setPersonalSkills(sortAgentSkillListItems(initialPersonalSkills));
+    }, [initialPersonalSkills]);
+
+    useEffect(() => {
+        setSharedSkills(sortSharedAgentSkillCatalogItems(initialSharedSkills));
+    }, [initialSharedSkills]);
+
     const [selectedId, setSelectedId] = useState<string | null>(() => {
         // Honor a deep-linked selection, but only when it matches a skill visible
         // on this page; otherwise fall back to the first skill.