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>
This commit is contained in:
Renzo F
2026-07-03 21:29:12 +02:00
committed by GitHub
co-authored by Renn F
parent 607e13f3dd
commit a807904999
16 changed files with 255 additions and 116 deletions
+7 -1
View File
@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { GoalsTab } from "@/components/business/goals-tab";
import { CompanyScorecardCard } from "@/components/business/company-scorecard-card";
import { SecretaryTab } from "@/components/business/secretary-tab";
import { PitchesTab } from "@/components/business/pitches-tab";
@@ -12,7 +13,7 @@ import { PitchesTab } from "@/components/business/pitches-tab";
// Valid tab values
// ---------------------------------------------------------------------------
const TAB_VALUES = ["goals", "secretary", "pitches"] as const;
const TAB_VALUES = ["goals", "scorecard", "secretary", "pitches"] as const;
type TabValue = (typeof TAB_VALUES)[number];
function isValidTab(value: string | null): value is TabValue {
@@ -50,6 +51,7 @@ function BusinessPageContent() {
<Tabs value={activeTab} onValueChange={handleTabChange}>
<TabsList>
<TabsTrigger value="goals">Goals</TabsTrigger>
<TabsTrigger value="scorecard">Scorecard</TabsTrigger>
<TabsTrigger value="secretary">Secretary</TabsTrigger>
<TabsTrigger value="pitches">Pitches</TabsTrigger>
</TabsList>
@@ -58,6 +60,10 @@ function BusinessPageContent() {
<GoalsTab />
</TabsContent>
<TabsContent value="scorecard" className="mt-4">
<CompanyScorecardCard />
</TabsContent>
<TabsContent value="secretary" className="mt-4">
<SecretaryTab />
</TabsContent>
+3 -6
View File
@@ -27,7 +27,6 @@ import { toast } from "sonner";
import { API_URL, WS_URL } from "@/lib/constants";
import { TranscriptRetentionCard } from "@/components/settings/transcript-retention-card";
import { FeatureFlagsCard } from "@/components/settings/feature-flags-card";
import { XCredentialsCard } from "@/components/settings/x-credentials-card";
export default function SettingsPage() {
const { theme, setTheme } = useTheme();
@@ -55,8 +54,7 @@ export default function SettingsPage() {
{/* Cards grid — two columns on large screens. Order (row,col):
User Info (1,1) · Appearance (1,2) · Data & Refresh (2,1) ·
Transcript Retention (2,2) · Notifications (3,1) · Connection Info (3,2) ·
X Credentials (4,1). */}
Transcript Retention (2,2) · Notifications (3,1) · Connection Info (3,2). */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* User Info */}
<Card>
@@ -248,12 +246,11 @@ export default function SettingsPage() {
</CardContent>
</Card>
{/* X (Twitter) Credentials (4,1) — write-only, panel-tunable */}
<XCredentialsCard />
</div>
{/* Feature Flags — master switches for optional subsystems (full width;
persisted server-side, applied on next restart). */}
persisted server-side, applied on next restart). The X (Twitter)
credentials form nests as a collapsible under the X-engine flag. */}
<FeatureFlagsCard />
{/* Save Button */}
@@ -22,7 +22,6 @@ import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { OfflineState } from "@/components/ui/offline-state";
import { CompanyScorecardCard } from "@/components/business/company-scorecard-card";
// ---------------------------------------------------------------------------
// Helpers
@@ -376,7 +375,6 @@ export function GoalsTab() {
) : (
<GoalsForm goals={data} refetch={() => void refetch()} />
)}
<CompanyScorecardCard />
</div>
);
}
@@ -11,6 +11,7 @@ import {
GitBranch,
ClipboardCheck,
Lightbulb,
ScrollText,
} from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
@@ -60,6 +61,11 @@ const categoryConfig: Record<
description: "Cross-agent shared learnings",
icon: <Lightbulb className="h-5 w-5 text-yellow-500" />,
},
[KBIndexType.PLAYBOOKS]: {
label: "Playbooks",
description: "Curated, reusable procedures",
icon: <ScrollText className="h-5 w-5 text-emerald-500" />,
},
};
interface KBCategoryNavProps {
@@ -12,6 +12,7 @@ import {
GitBranch,
ClipboardCheck,
Lightbulb,
ScrollText,
} from "lucide-react";
const indexTypeConfig: Record<
@@ -50,6 +51,10 @@ const indexTypeConfig: Record<
label: "Learnings",
icon: <Lightbulb className="h-4 w-4 text-yellow-500" />,
},
[KBIndexType.PLAYBOOKS]: {
label: "Playbooks",
icon: <ScrollText className="h-4 w-4 text-emerald-500" />,
},
};
interface KBFiltersProps {
@@ -11,6 +11,7 @@ import {
GitBranch,
ClipboardCheck,
Lightbulb,
ScrollText,
} from "lucide-react";
const indexTypeConfig: Record<
@@ -60,6 +61,12 @@ const indexTypeConfig: Record<
"bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
icon: <Lightbulb className="h-3 w-3" />,
},
[KBIndexType.PLAYBOOKS]: {
label: "Playbooks",
color:
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
icon: <ScrollText className="h-3 w-3" />,
},
};
interface KBIndexTypeBadgeProps {
@@ -13,6 +13,7 @@ import {
GitBranch,
ClipboardCheck,
Lightbulb,
ScrollText,
} from "lucide-react";
import { formatDistanceToNow } from "date-fns";
@@ -27,6 +28,7 @@ const indexIcons: Record<KBIndexType, React.ReactNode> = {
[KBIndexType.DECISIONS]: <GitBranch className="h-4 w-4 text-indigo-500" />,
[KBIndexType.REVIEWS]: <ClipboardCheck className="h-4 w-4 text-pink-500" />,
[KBIndexType.LEARNINGS]: <Lightbulb className="h-4 w-4 text-yellow-500" />,
[KBIndexType.PLAYBOOKS]: <ScrollText className="h-4 w-4 text-emerald-500" />,
};
const indexLabels: Record<KBIndexType, string> = {
@@ -38,6 +40,7 @@ const indexLabels: Record<KBIndexType, string> = {
[KBIndexType.DECISIONS]: "Decisions",
[KBIndexType.REVIEWS]: "Reviews",
[KBIndexType.LEARNINGS]: "Learnings",
[KBIndexType.PLAYBOOKS]: "Playbooks",
};
interface KBStatsCardProps {
@@ -72,6 +72,7 @@ const INDEX_LABELS: Record<KBIndexType, string> = {
[KBIndexType.DECISIONS]: "Decisions",
[KBIndexType.REVIEWS]: "Code Reviews",
[KBIndexType.LEARNINGS]: "Learnings",
[KBIndexType.PLAYBOOKS]: "Playbooks",
};
// Valid KB index types for URL param validation
@@ -84,6 +85,7 @@ const VALID_INDEX_TYPES: KBIndexType[] = [
KBIndexType.DECISIONS,
KBIndexType.REVIEWS,
KBIndexType.LEARNINGS,
KBIndexType.PLAYBOOKS,
];
function KnowledgeBaseBrowserContent() {
@@ -454,6 +456,16 @@ function KnowledgeBaseBrowserContent() {
<div>LLM: {health.llm_status}</div>
<div>Vector: {health.vector_store_status}</div>
</div>
{(["llm_error", "embedding_error", "vector_store_error"] as const)
.filter((k) => typeof health.details?.[k] === "string")
.map((k) => (
<p
key={k}
className="text-xs text-red-600 dark:text-red-400 break-words"
>
{health.details[k] as string}
</p>
))}
</div>
) : (
<p className="text-muted-foreground text-sm">
@@ -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"), {
@@ -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>
);
@@ -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>
);
}
+1
View File
@@ -757,6 +757,7 @@ export enum KBIndexType {
DECISIONS = "decisions",
REVIEWS = "reviews",
LEARNINGS = "learnings",
PLAYBOOKS = "playbooks",
}
export interface KBSearchRequest {