From 2ade6c0cbcf682bf41cd7c8ce904cd892a5dd7cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Thu, 26 Mar 2026 02:03:11 -0400
Subject: [PATCH] feat(03-02): add agent-centric skill toggles in AgentEditor
 for D-04 dual access

- Import SkillAgentToggles and Zustand skill state into AgentEditor
- Add lazy skill loading for navigation paths that bypass Skills section
- Render Skills section with agent-centric toggle mode between heartbeat and save
---
 .../components/organization/AgentEditor.tsx   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/renderer/components/organization/AgentEditor.tsx b/src/renderer/components/organization/AgentEditor.tsx
index 16550aa8..c1bc6e93 100644
--- a/src/renderer/components/organization/AgentEditor.tsx
+++ b/src/renderer/components/organization/AgentEditor.tsx
@@ -3,7 +3,9 @@ import { Pencil, Trash } from "@phosphor-icons/react";
 import type { AgentRecord, ConnectorRecord, WorkspaceRecord } from "@shared/types";
 import { getConnectorExecutionReadinessIssue, isConnectorExecutionReady } from "@shared/connector-policy";
 import { unwrap } from "../../lib/desktop";
+import { useAppStore } from "../../state/store";
 import { ActionButton, Input, Select, TextArea } from "../ui";
+import { SkillAgentToggles } from "../skills/SkillAgentToggles";
 import { ConfirmDelete, HeartbeatSection } from "./helpers";
 
 export function AgentEditor({
@@ -74,6 +76,17 @@ export function AgentEditor({
     }
   }, [connectorId, agent.connectorId]);
 
+  const skills = useAppStore((s) => s.skills);
+  const setSkills = useAppStore((s) => s.setSkills);
+
+  useEffect(() => {
+    if (skills.length === 0 && companyId) {
+      window.agentCompany.listSkills(companyId).then((result) => {
+        if (result.ok) setSkills(result.data);
+      });
+    }
+  }, [companyId, skills.length, setSkills]);
+
   const managerCandidates = agents.filter((a) => a.id !== agent.id);
 
   return (
@@ -162,6 +175,12 @@ export function AgentEditor({
 
       <HeartbeatSection agent={agent} companyId={companyId} pendingApproval={pendingApproval} persistedConnectorIssue={persistedConnectorIssue} onSaved={onSaved} />
 
+      {/* Skills section (D-04 dual access) */}
+      <div className="mt-6 border-t border-[color:var(--line)] pt-4">
+        <h3 className="text-[13px] font-semibold uppercase tracking-[0.08em] text-[color:var(--accent-text)] mb-3">Skills</h3>
+        <SkillAgentToggles mode="agent" companyId={companyId} agentId={agent.id} skills={skills} />
+      </div>
+
       <div className="flex items-center gap-3">
         <ActionButton
           label="Save changes"