The Access list, note placeholder, and 'what the agent sees' rail now render a connection's display label (its identityLabel, falling back to the name) instead of the raw connection name/slug — matching how accounts-section and the rest of the console show a connection. Display-only; the stored connection name (keys, toolkit entries, policy pattern ids) is unchanged.
Unified · Split
| @@ -80,6 +80,12 @@ type ToolRow = { · 79 unmodified lines | |||
| 80 | readonly requiresApproval?: boolean; | 80 | readonly requiresApproval?: boolean; |
| 81 | }; | 81 | }; |
| 82 | 82 | ||
| 83 | /** Connection's human display name — its "which account" label, falling back to | ||
| 84 | * the (slug-like) connection name. Matches how the rest of the console renders | ||
| 85 | * a connection (see accounts-section). */ | ||
| 86 | const connLabel = (c: { readonly name: string; readonly identityLabel?: string | null }): string => | ||
| 87 | c.identityLabel && c.identityLabel.length > 0 ? c.identityLabel : c.name; | ||
| 88 | |||
| 83 | const ACCESS_OPTIONS: ReadonlyArray<{ value: ToolkitAccess; label: string }> = [ | 89 | const ACCESS_OPTIONS: ReadonlyArray<{ value: ToolkitAccess; label: string }> = [ |
| 84 | { value: "off", label: "Off" }, | 90 | { value: "off", label: "Off" }, |
| 85 | { value: "read", label: "Read" }, | 91 | { value: "read", label: "Read" }, |
| @@ -455,7 +461,15 @@ function ToolkitEditor(props: EditorProps) { · 369 unmodified lines | |||
| 455 | 461 | ||
| 456 | // Live "what the agent sees" — derived from the in-progress form. | 462 | // Live "what the agent sees" — derived from the in-progress form. |
| 457 | const previewGroups = useMemo(() => { | 463 | const previewGroups = useMemo(() => { |
| 458 | const byInt = new Map<string, Array<{ name: string; access: ToolkitAccess; note?: string }>>(); | 464 | const byInt = new Map< |
| 465 | string, | ||
| 466 | Array<{ | ||
| 467 | name: string; | ||
| 468 | identityLabel?: string | null; | ||
| 469 | access: ToolkitAccess; | ||
| 470 | note?: string; | ||
| 471 | }> | ||
| 472 | >(); | ||
| 459 | for (const tier of tiers) { | 473 | for (const tier of tiers) { |
| 460 | for (const c of tier.conns) { | 474 | for (const c of tier.conns) { |
| 461 | const key = connKey(c.integration, c.name); | 475 | const key = connKey(c.integration, c.name); |
| @@ -464,6 +478,7 @@ function ToolkitEditor(props: EditorProps) { · 2 unmodified lines | |||
| 464 | const list = byInt.get(c.integration) ?? []; | 478 | const list = byInt.get(c.integration) ?? []; |
| 465 | list.push({ | 479 | list.push({ |
| 466 | name: c.name, | 480 | name: c.name, |
| 481 | identityLabel: c.identityLabel, | ||
| 467 | access: a, | 482 | access: a, |
| 468 | note: notes[key]?.trim() || undefined, | 483 | note: notes[key]?.trim() || undefined, |
| 469 | }); | 484 | }); |
| @@ -570,11 +585,11 @@ function ToolkitEditor(props: EditorProps) { · 100 unmodified lines | |||
| 570 | <div className="flex items-center gap-3 py-1"> | 585 | <div className="flex items-center gap-3 py-1"> |
| 571 | <div className="min-w-0 flex-1"> | 586 | <div className="min-w-0 flex-1"> |
| 572 | <div className="truncate text-[13px] font-semibold text-foreground"> | 587 | <div className="truncate text-[13px] font-semibold text-foreground"> |
| 573 | {c.name} | 588 | {connLabel(c)} |
| 574 | </div> | 589 | </div> |
| 575 | {(c.identityLabel || c.description) && ( | 590 | {c.description && ( |
| 576 | <div className="truncate text-[11.5px] text-muted-foreground"> | 591 | <div className="truncate text-[11.5px] text-muted-foreground"> |
| 577 | {c.identityLabel || c.description} | 592 | {c.description} |
| 578 | </div> | 593 | </div> |
| 579 | )} | 594 | )} |
| 580 | </div> | 595 | </div> |
| @@ -586,7 +601,7 @@ function ToolkitEditor(props: EditorProps) { · 5 unmodified lines | |||
| 586 | onChange={(e) => | 601 | onChange={(e) => |
| 587 | setNote(key, (e.target as HTMLInputElement).value) | 602 | setNote(key, (e.target as HTMLInputElement).value) |
| 588 | } | 603 | } |
| 589 | placeholder={`Note to the agent about ${c.name} (optional)`} | 604 | placeholder={`Note to the agent about ${connLabel(c)} (optional)`} |
| 590 | className="mb-1.5 h-7 border-transparent bg-transparent px-0 text-[12px] italic shadow-none focus-visible:border-input" | 605 | className="mb-1.5 h-7 border-transparent bg-transparent px-0 text-[12px] italic shadow-none focus-visible:border-input" |
| 591 | /> | 606 | /> |
| 592 | )} | 607 | )} |
| @@ -743,7 +758,7 @@ function ToolkitEditor(props: EditorProps) { · 150 unmodified lines | |||
| 743 | {conns.map((c) => ( | 758 | {conns.map((c) => ( |
| 744 | <div key={c.name} className="mt-1 pl-6"> | 759 | <div key={c.name} className="mt-1 pl-6"> |
| 745 | <div className="flex items-center gap-2"> | 760 | <div className="flex items-center gap-2"> |
| 746 | <span className="text-[12px] text-foreground">{c.name}</span> | 761 | <span className="text-[12px] text-foreground">{connLabel(c)}</span> |
| 747 | <Badge | 762 | <Badge |
| 748 | variant={c.access === "full" ? "default" : "secondary"} | 763 | variant={c.access === "full" ? "default" : "secondary"} |
| 749 | className="px-1.5 py-0 text-[10px]" | 764 | className="px-1.5 py-0 text-[10px]" |