fix(panel): KB playbooks category, LLM-health diagnostic, scorecard tab, feature-flags 2-col + X creds dropdown; fix(a2a): publish live event from direct send path; fix(docker): orchestrator Node 22 (#305)

Co-authored-by: Renn F <rennf93@users.noreply.github.com>

panel/src/components/settings/__tests__/x-credentials-card.test.tsx

@@ -12,7 +12,7 @@ vi.mock("@/lib/api", () => ({
   xApi: { getCredentialsStatus, setCredentials },
 }));
 
-import { XCredentialsCard } from "../x-credentials-card";
+import { XCredentialsForm } from "../x-credentials-card";
 
 function withQueryClient(ui: ReactNode) {
   const client = new QueryClient({
@@ -21,7 +21,7 @@ function withQueryClient(ui: ReactNode) {
   return <QueryClientProvider client={client}>{ui}</QueryClientProvider>;
 }
 
-describe("XCredentialsCard", () => {
+describe("XCredentialsForm", () => {
   beforeEach(() => {
     getCredentialsStatus.mockClear();
     setCredentials.mockClear();
@@ -31,14 +31,14 @@ describe("XCredentialsCard", () => {
   });
 
   it("shows 'no credentials configured' by default and never renders a secret", async () => {
-    render(withQueryClient(<XCredentialsCard />));
+    render(withQueryClient(<XCredentialsForm />));
     expect(
       await screen.findByText("No credentials configured"),
     ).toBeInTheDocument();
   });
 
   it("disables Save until all 4 fields are filled", async () => {
-    render(withQueryClient(<XCredentialsCard />));
+    render(withQueryClient(<XCredentialsForm />));
     await screen.findByText("No credentials configured");
     const saveButton = screen.getByRole("button", { name: "Save" });
     expect(saveButton).toBeDisabled();
@@ -61,7 +61,7 @@ describe("XCredentialsCard", () => {
   });
 
   it("saves all 4 secrets and clears the inputs on success", async () => {
-    render(withQueryClient(<XCredentialsCard />));
+    render(withQueryClient(<XCredentialsForm />));
     await screen.findByText("No credentials configured");
 
     fireEvent.change(screen.getByLabelText("API key"), {

panel/src/components/settings/feature-flags-card.tsx

@@ -10,10 +10,18 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { useState } from "react";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { Separator } from "@/components/ui/separator";
-import { Flag } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { XCredentialsForm } from "@/components/settings/x-credentials-card";
+import { cn } from "@/lib/utils";
+import { Flag, ChevronDown, ChevronRight } from "lucide-react";
 import { toast } from "sonner";
 
 // One-line blurb per flag so the operator knows what each master switch gates.
@@ -60,6 +68,7 @@ const FLAG_DESCRIPTIONS: Record<string, string> = {
 
 export function FeatureFlagsCard() {
   const queryClient = useQueryClient();
+  const [xCredsOpen, setXCredsOpen] = useState(false);
 
   const { data, isLoading } = useQuery({
     queryKey: ["feature-flags"],
@@ -97,7 +106,7 @@ export function FeatureFlagsCard() {
           environment default. {note}
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent>
         {isLoading && (
           <p className="text-sm text-muted-foreground">
             Loading feature flags…
@@ -108,30 +117,65 @@ export function FeatureFlagsCard() {
             No feature flags available.
           </p>
         )}
-        {flags.map((flag, i) => (
-          <div key={flag.key}>
-            {i > 0 && <Separator className="mb-4" />}
-            <div className="flex items-center justify-between gap-4">
-              <div className="min-w-0">
-                <Label htmlFor={`flag-${flag.key}`}>{flag.label}</Label>
-                <p className="text-sm text-muted-foreground">
-                  {FLAG_DESCRIPTIONS[flag.key] ?? ""}
-                </p>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {flags.map((flag) => {
+            const isXEngine = flag.key === "x_engine_enabled";
+            return (
+              <div
+                key={flag.key}
+                className={cn(
+                  "rounded-lg border p-4",
+                  isXEngine && "md:col-span-2",
+                )}
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="min-w-0">
+                    <Label htmlFor={`flag-${flag.key}`}>{flag.label}</Label>
+                    <p className="text-sm text-muted-foreground">
+                      {FLAG_DESCRIPTIONS[flag.key] ?? ""}
+                    </p>
+                  </div>
+                  <Switch
+                    id={`flag-${flag.key}`}
+                    checked={flag.enabled}
+                    disabled={
+                      toggleMutation.isPending &&
+                      toggleMutation.variables?.key === flag.key
+                    }
+                    onCheckedChange={(checked) =>
+                      toggleMutation.mutate({ key: flag.key, enabled: checked })
+                    }
+                  />
+                </div>
+                {isXEngine && (
+                  <Collapsible
+                    open={xCredsOpen}
+                    onOpenChange={setXCredsOpen}
+                    className="mt-3"
+                  >
+                    <CollapsibleTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="w-full justify-between px-2 text-muted-foreground"
+                      >
+                        <span className="text-sm">X (Twitter) credentials</span>
+                        {xCredsOpen ? (
+                          <ChevronDown className="h-4 w-4" />
+                        ) : (
+                          <ChevronRight className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-3">
+                      <XCredentialsForm />
+                    </CollapsibleContent>
+                  </Collapsible>
+                )}
               </div>
-              <Switch
-                id={`flag-${flag.key}`}
-                checked={flag.enabled}
-                disabled={
-                  toggleMutation.isPending &&
-                  toggleMutation.variables?.key === flag.key
-                }
-                onCheckedChange={(checked) =>
-                  toggleMutation.mutate({ key: flag.key, enabled: checked })
-                }
-              />
-            </div>
-          </div>
-        ))}
+            );
+          })}
+        </div>
       </CardContent>
     </Card>
   );

panel/src/components/settings/x-credentials-card.tsx

@@ -3,17 +3,10 @@
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { xApi } from "@/lib/api";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { AtSign, Key, KeyRound, Save } from "lucide-react";
+import { Key, KeyRound, Save } from "lucide-react";
 import { toast } from "sonner";
 
 const FIELDS: Array<{
@@ -29,7 +22,8 @@ const FIELDS: Array<{
 // The CEO's one-time (or rotate) entry of the 4 OAuth 1.0a user-context
 // secrets from the X developer app. Write-only — the stored values are never
 // displayed back, only whether they're set (mirrors the git-token card).
-export function XCredentialsCard() {
+// Rendered chrome-less so it can nest inside the X-engine feature-flag row.
+export function XCredentialsForm() {
   const queryClient = useQueryClient();
   const [values, setValues] = useState({
     api_key: "",
@@ -69,67 +63,61 @@ export function XCredentialsCard() {
   const canSave = allFilled || (noneFilled && !!status?.has_credentials);
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <AtSign className="h-5 w-5" />X (Twitter) Credentials
-        </CardTitle>
-        <CardDescription>
-          The 4 OAuth 1.0a user-context secrets from your X developer app.
-          Stored encrypted server-side; agents never see them and this panel
-          never displays them again once saved.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex items-center gap-2 rounded-md border p-3">
-          {status?.has_credentials ? (
-            <>
-              <Key className="h-4 w-4 text-green-500" />
-              <span className="text-sm text-green-600 dark:text-green-400">
-                Credentials are set
-              </span>
-            </>
-          ) : (
-            <>
-              <KeyRound className="h-4 w-4 text-amber-500" />
-              <span className="text-sm text-amber-600 dark:text-amber-400">
-                {isLoading ? "Checking..." : "No credentials configured"}
-              </span>
-            </>
-          )}
-        </div>
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        The 4 OAuth 1.0a user-context secrets from your X developer app. Stored
+        encrypted server-side; agents never see them and this panel never
+        displays them again once saved.
+      </p>
 
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          {FIELDS.map((field) => (
-            <div key={field.key} className="space-y-2">
-              <Label htmlFor={`x-cred-${field.key}`}>
-                {status?.has_credentials ? `Replace ${field.label}` : field.label}
-              </Label>
-              <Input
-                id={`x-cred-${field.key}`}
-                type="password"
-                value={values[field.key]}
-                onChange={(e) =>
-                  setValues((prev) => ({ ...prev, [field.key]: e.target.value }))
-                }
-                placeholder="••••••••••••"
-              />
-            </div>
-          ))}
-        </div>
+      <div className="flex items-center gap-2 rounded-md border p-3">
+        {status?.has_credentials ? (
+          <>
+            <Key className="h-4 w-4 text-green-500" />
+            <span className="text-sm text-green-600 dark:text-green-400">
+              Credentials are set
+            </span>
+          </>
+        ) : (
+          <>
+            <KeyRound className="h-4 w-4 text-amber-500" />
+            <span className="text-sm text-amber-600 dark:text-amber-400">
+              {isLoading ? "Checking..." : "No credentials configured"}
+            </span>
+          </>
+        )}
+      </div>
 
-        <p className="text-xs text-muted-foreground">
-          Set all 4 to save (or rotate); leave all 4 blank and save to clear.
-        </p>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {FIELDS.map((field) => (
+          <div key={field.key} className="space-y-2">
+            <Label htmlFor={`x-cred-${field.key}`}>
+              {status?.has_credentials ? `Replace ${field.label}` : field.label}
+            </Label>
+            <Input
+              id={`x-cred-${field.key}`}
+              type="password"
+              value={values[field.key]}
+              onChange={(e) =>
+                setValues((prev) => ({ ...prev, [field.key]: e.target.value }))
+              }
+              placeholder="••••••••••••"
+            />
+          </div>
+        ))}
+      </div>
 
-        <Button
-          onClick={() => saveMutation.mutate()}
-          disabled={saveMutation.isPending || !canSave}
-        >
-          <Save className="mr-2 h-4 w-4" />
-          {saveMutation.isPending ? "Saving..." : "Save"}
-        </Button>
-      </CardContent>
-    </Card>
+      <p className="text-xs text-muted-foreground">
+        Set all 4 to save (or rotate); leave all 4 blank and save to clear.
+      </p>
+
+      <Button
+        onClick={() => saveMutation.mutate()}
+        disabled={saveMutation.isPending || !canSave}
+      >
+        <Save className="mr-2 h-4 w-4" />
+        {saveMutation.isPending ? "Saving..." : "Save"}
+      </Button>
+    </div>
   );
 }