@greatapps/greatagents-ui 0.3.16 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/agents/agent-objectives-list.tsx

@@ -56,10 +56,29 @@ function slugify(text: string): string {
 interface ObjectiveFormState {
   title: string;
   slug: string;
+  instruction: string;
   prompt: string;
 }
 
-const EMPTY_FORM: ObjectiveFormState = { title: "", slug: "", prompt: "" };
+const EMPTY_FORM: ObjectiveFormState = { title: "", slug: "", instruction: "", prompt: "" };
+
+/** Split a stored prompt into instruction (first line) and body (rest). */
+function splitPrompt(prompt: string | null | undefined): { instruction: string; body: string } {
+  if (!prompt) return { instruction: "", body: "" };
+  const idx = prompt.indexOf("\n");
+  if (idx === -1) return { instruction: prompt.trim(), body: "" };
+  return { instruction: prompt.slice(0, idx).trim(), body: prompt.slice(idx + 1).trim() };
+}
+
+/** Merge instruction + body into a single prompt string. */
+function mergePrompt(instruction: string, body: string): string {
+  const i = instruction.trim();
+  const b = body.trim();
+  if (!i && !b) return "";
+  if (!b) return i;
+  if (!i) return b;
+  return `${i}\n${b}`;
+}
 
 export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps) {
   const { data: objectivesData, isLoading } = useObjectives(config, agent.id);
@@ -104,10 +123,12 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
 
   function openEdit(objective: Objective) {
     setEditTarget(objective);
+    const { instruction, body } = splitPrompt(objective.prompt);
     setForm({
       title: objective.title,
       slug: objective.slug || "",
-      prompt: objective.prompt || "",
+      instruction,
+      prompt: body,
     });
     setSlugManual(true);
     setFormOpen(true);
@@ -117,6 +138,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
     if (!form.title.trim()) return;
 
     const effectiveSlug = form.slug.trim() || slugify(form.title);
+    const mergedPrompt = mergePrompt(form.instruction, form.prompt) || null;
     const nextOrder =
       sortedObjectives.length > 0
         ? Math.max(...sortedObjectives.map((o) => o.order)) + 1
@@ -130,7 +152,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
           body: {
             title: form.title.trim(),
             slug: effectiveSlug,
-            prompt: form.prompt.trim() || null,
+            prompt: mergedPrompt,
           },
         });
         toast.success("Objetivo atualizado");
@@ -140,7 +162,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
           body: {
             title: form.title.trim(),
             slug: effectiveSlug,
-            prompt: form.prompt.trim() || null,
+            prompt: mergedPrompt,
             order: nextOrder,
           },
         });
@@ -252,11 +274,23 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                       </Badge>
                     )}
                   </div>
-                  {objective.prompt && (
-                    <p className="line-clamp-2 text-xs text-muted-foreground">
-                      {objective.prompt}
-                    </p>
-                  )}
+                  {objective.prompt && (() => {
+                    const { instruction, body } = splitPrompt(objective.prompt);
+                    return (
+                      <div className="space-y-0.5">
+                        {instruction && (
+                          <p className="text-xs font-medium text-muted-foreground">
+                            Quando: {instruction}
+                          </p>
+                        )}
+                        {body && (
+                          <p className="line-clamp-1 text-xs text-muted-foreground">
+                            {body}
+                          </p>
+                        )}
+                      </div>
+                    );
+                  })()}
                 </div>
 
                 <Switch
@@ -350,7 +384,23 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="objective-prompt">Instruções do Objetivo</Label>
+              <Label htmlFor="objective-instruction">Quando ativar (instrução curta) *</Label>
+              <Input
+                id="objective-instruction"
+                name="instruction"
+                value={form.instruction}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, instruction: e.target.value }))
+                }
+                placeholder="Ex: Quando o utilizador quer agendar uma consulta"
+              />
+              <p className="text-xs text-muted-foreground">
+                Instrução curta que diz ao agente QUANDO ativar este objetivo. Aparece na secção [SKILLS] do prompt.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="objective-prompt">Instruções detalhadas</Label>
               <Textarea
                 id="objective-prompt"
                 name="prompt"
@@ -358,11 +408,11 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 onChange={(e) =>
                   setForm((f) => ({ ...f, prompt: e.target.value }))
                 }
-                placeholder="Instru\u00e7\u00f5es detalhadas que o agente seguir\u00e1 quando este objetivo for ativado\u2026"
-                rows={8}
+                placeholder="Instruções detalhadas que o agente seguirá quando este objetivo for ativado..."
+                rows={6}
               />
               <p className="text-xs text-muted-foreground">
-                Estas instruções são carregadas automaticamente quando o agente detecta que o utilizador precisa deste objetivo.
+                Passos, regras e contexto detalhado para o agente seguir quando este objetivo está ativo.
               </p>
             </div>
           </div>

package/src/components/agents/agent-prompt-editor.tsx

@@ -62,60 +62,39 @@ function buildPreview(
 ): string {
   let preview = promptText;
 
-  const activeObjectives = objectives.filter((o) => o.active);
+  const activeObjectives = objectives.filter((o) => o.active && o.slug);
   const enabledAgentTools = agentTools.filter((at) => at.enabled);
-
   const toolMap = new Map(allTools.map((t) => [t.id, t]));
 
-  // Separate capabilities vs integrations
-  const capabilityTools: { at: AgentTool; tool: Tool }[] = [];
-  const integrationTools: { at: AgentTool; tool: Tool }[] = [];
-  for (const at of enabledAgentTools) {
-    const tool = toolMap.get(at.id_tool);
-    if (!tool) continue;
-    if (tool.type === "integration") {
-      integrationTools.push({ at, tool });
-    } else {
-      capabilityTools.push({ at, tool });
+  // [SKILLS] section — objectives
+  if (activeObjectives.length > 0) {
+    preview += "\n\n[SKILLS]";
+    for (const obj of activeObjectives) {
+      preview += `\n- ${obj.slug}: ${obj.title}`;
+      if (obj.prompt) {
+        // Show first line of prompt as summary
+        const firstLine = obj.prompt.split("\n")[0].trim();
+        if (firstLine) preview += ` — ${firstLine}`;
+      }
     }
   }
 
-  const hasContent = activeObjectives.length > 0 || capabilityTools.length > 0 || integrationTools.length > 0;
-
-  if (hasContent) {
-    preview += "\n\n[CAPACIDADES E INTEGRAÇÕES]";
-
-    // Internal capabilities
-    if (activeObjectives.length > 0 || capabilityTools.length > 0) {
-      preview += "\n\n## Capacidades Internas (GClinic)";
-
-      for (const obj of activeObjectives) {
-        preview += `\n\n### ${obj.title} (${obj.slug})`;
-        if (obj.prompt) preview += `\n${obj.prompt}`;
-      }
-
-      for (const { at, tool } of capabilityTools) {
+  // [TOOLS] section — capabilities + integrations
+  const toolBindings = enabledAgentTools
+    .map((at) => ({ at, tool: toolMap.get(at.id_tool) }))
+    .filter((x): x is { at: AgentTool; tool: Tool } => !!x.tool);
+
+  if (toolBindings.length > 0) {
+    preview += "\n\n[TOOLS]";
+    for (const { at, tool } of toolBindings) {
+      if (at.custom_instructions) {
+        preview += `\n\n${at.custom_instructions}`;
+      } else {
+        // Fallback: show tool name and description
         preview += `\n\n### ${tool.name} (${tool.slug})`;
         if (tool.description) preview += `\n${tool.description}`;
-        if (at.custom_instructions) preview += `\n${at.custom_instructions}`;
       }
     }
-
-    // External integrations
-    if (integrationTools.length > 0) {
-      preview += "\n\n## Integrações Externas";
-
-      for (const { at, tool } of integrationTools) {
-        preview += `\n\n### ${tool.name} (${tool.slug})`;
-        if (at.custom_instructions) preview += `\n${at.custom_instructions}`;
-      }
-    }
-
-    // Rules
-    preview += "\n\n## Regras";
-    preview += "\n- Sempre confirme com o usuário antes de criar ou alterar registros.";
-    preview += "\n- Nunca invente dados — sempre consulte primeiro.";
-    preview += "\n- Use EXATAMENTE os nomes de função listados acima.";
   }
 
   return preview;
@@ -307,7 +286,7 @@ export function AgentPromptEditor({ config, agent }: AgentPromptEditorProps) {
             <div className="border-t px-4 py-3">
               <pre className="max-h-96 overflow-auto whitespace-pre-wrap font-mono text-sm leading-relaxed">
                 {previewText.split("\n").map((line, i) => {
-                  const isTopSection = line.startsWith("[CAPACIDADES E INTEGRAÇÕES]");
+                  const isTopSection = line.startsWith("[TOOLS]") || line.startsWith("[SKILLS]");
                   const isH2 = line.startsWith("## ");
                   const isH3 = line.startsWith("### ");
                   const cls = isTopSection

package/src/components/capabilities/capabilities-tab.tsx

@@ -153,9 +153,13 @@ function cloneInstructions(state: InstructionsState): InstructionsState {
 }
 
 function statesEqual(a: CapabilityState, b: CapabilityState): boolean {
-  if (a.size !== b.size) return false;
-  for (const [mod, opsA] of a) {
-    const opsB = b.get(mod);
+  // Compare only modules that have operations (non-empty sets)
+  const aEffective = new Map([...a].filter(([, ops]) => ops.size > 0));
+  const bEffective = new Map([...b].filter(([, ops]) => ops.size > 0));
+
+  if (aEffective.size !== bEffective.size) return false;
+  for (const [mod, opsA] of aEffective) {
+    const opsB = bEffective.get(mod);
     if (!opsB || opsA.size !== opsB.size) return false;
     for (const op of opsA) {
       if (!opsB.has(op)) return false;
@@ -164,11 +168,14 @@ function statesEqual(a: CapabilityState, b: CapabilityState): boolean {
   return true;
 }
 
-function instructionsEqual(a: InstructionsState, b: InstructionsState): boolean {
-  if (a.size !== b.size) return false;
-  for (const [mod, instrA] of a) {
-    const instrB = b.get(mod);
-    if (!instrB) return false;
+function instructionsEqual(a: InstructionsState, b: InstructionsState, activeModules: CapabilityState): boolean {
+  // Only compare instructions for modules that are active in the current state.
+  // Orphaned instructions (for disabled modules) are irrelevant.
+  const relevantModules = new Set([...activeModules.keys()].filter(k => (activeModules.get(k)?.size ?? 0) > 0));
+
+  for (const mod of relevantModules) {
+    const instrA = a.get(mod) ?? {};
+    const instrB = b.get(mod) ?? {};
     const keysA = Object.keys(instrA);
     const keysB = Object.keys(instrB);
     if (keysA.length !== keysB.length) return false;
@@ -176,6 +183,16 @@ function instructionsEqual(a: InstructionsState, b: InstructionsState): boolean
       if (instrA[k] !== instrB[k]) return false;
     }
   }
+
+  // Also check if server had instructions for modules that are now active but local doesn't
+  for (const mod of relevantModules) {
+    const instrA = a.get(mod);
+    const instrB = b.get(mod);
+    const hasA = instrA && Object.keys(instrA).length > 0;
+    const hasB = instrB && Object.keys(instrB).length > 0;
+    if (hasA !== hasB) return false;
+  }
+
   return true;
 }
 
@@ -225,7 +242,7 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
   const hasChanges = useMemo(
     () =>
       initialized &&
-      (!statesEqual(localState, serverState) || !instructionsEqual(localInstructions, serverInstructions)),
+      (!statesEqual(localState, serverState) || !instructionsEqual(localInstructions, serverInstructions, localState)),
     [localState, serverState, localInstructions, serverInstructions, initialized],
   );
 

package/src/hooks/use-integrations.ts

@@ -99,22 +99,26 @@ export function useIntegrationState(
         ? credentials.filter((c) => c.id_tool === matchedTool.id)
         : [];
 
-      // Also check credentials linked via platform_integration slug
-      // (platform_integrations use the same slug convention)
+      // Also check credentials linked via platform_integration
+      // These credentials have id_platform_integration set but no id_tool,
+      // typically created by OAuth callbacks (e.g. Google Calendar)
       const piCredentials = credentials.filter(
         (c) =>
           c.id_platform_integration != null &&
-          !c.id_tool &&
-          // We can't directly match slug here since we don't have
-          // platform_integrations data, but credentials with
-          // id_platform_integration are for calendar integrations
-          // which match by the registry slug
-          matchedTool == null,
+          !c.id_tool,
       );
 
-      // Combine — prefer tool-based credentials, fallback to PI-based
-      const allCredentials =
-        matchedCredentials.length > 0 ? matchedCredentials : piCredentials;
+      // Combine: merge tool-based and PI-based credentials, dedup by id.
+      // Previously PI credentials were only included when matchedTool was null,
+      // which caused connected integrations to not appear after OAuth.
+      const seenIds = new Set<number>();
+      const allCredentials: ToolCredential[] = [];
+      for (const cred of [...matchedCredentials, ...piCredentials]) {
+        if (!seenIds.has(cred.id)) {
+          seenIds.add(cred.id);
+          allCredentials.push(cred);
+        }
+      }
 
       // Check if this agent has a linked agent_tool for this tool
       const linkedToAgent = matchedTool

package/src/pages/integrations-management-page.tsx

@@ -79,10 +79,13 @@ export function IntegrationsManagementPage({
   }, []);
 
   const handleWizardComplete = useCallback(() => {
-    // Invalidate queries BEFORE closing so data refreshes
+    // Invalidate ALL queries that useIntegrationState and related hooks depend on.
+    // Use broad prefix-based invalidation to cover every accountId/param variant.
     queryClient.invalidateQueries({ queryKey: ["greatagents", "tool-credentials"] });
     queryClient.invalidateQueries({ queryKey: ["greatagents", "tools"] });
     queryClient.invalidateQueries({ queryKey: ["greatagents", "agent-tools"] });
+    queryClient.invalidateQueries({ queryKey: ["greatagents", "agent-capabilities"] });
+    queryClient.invalidateQueries({ queryKey: ["greatagents", "capabilities"] });
 
     setWizardOpen(false);
     setActiveCard(null);