Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,13 @@ server that `veadk frontend` launches — no separate backend.
panels stack vertically instead of squeezing the form. The deployment page
pairs an inspectable Agent topology with a vertically aligned action rail for
YAML export, source download, and the code browser/editor dialog, while keeping
region, message channel,
network, and environment settings primary. Local skills accept a dropped
region, access authentication, message channel, network, and environment
settings primary. New Runtime deployments default to API Key authentication
and can instead select an Identity user pool loaded by the Studio server. The
current Studio pool is marked in the picker; selecting it lets Studio forward
the validated login JWT to the Runtime, while other pools require a JWT issued
by that pool. Runtime updates keep their existing authentication mode. Local
skills accept a dropped
folder or ZIP and detect the format automatically. Component forms omit
credentials that VeADK can resolve automatically, while the Studio server
forwards its Volcengine credentials to debug runs and deployed runtimes. A
Expand Down
41 changes: 41 additions & 0 deletions frontend/src/adk/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1672,6 +1672,45 @@ export interface DeployAgentkitResult {
};
}

export type DeployAuthentication =
| { type: "api_key" }
| { type: "user_pool"; userPoolUid: string };

export interface IdentityUserPool {
uid: string;
name: string;
domain: string;
region: string;
isCurrent: boolean;
}

export async function listIdentityUserPools(
signal?: AbortSignal,
): Promise<IdentityUserPool[]> {
const response = await apiFetch("/web/identity/user-pools", { signal });
if (!response.ok) {
throw new Error(await httpErrorMessage(response, "加载用户池失败"));
}
const payload = (await response.json()) as { items?: unknown };
if (!Array.isArray(payload.items)) {
throw new Error("用户池列表响应格式无效");
}
return payload.items.map((item) => {
if (
!item ||
typeof item !== "object" ||
typeof (item as IdentityUserPool).uid !== "string" ||
typeof (item as IdentityUserPool).name !== "string" ||
typeof (item as IdentityUserPool).domain !== "string" ||
typeof (item as IdentityUserPool).region !== "string" ||
typeof (item as IdentityUserPool).isCurrent !== "boolean"
) {
throw new Error("用户池列表响应格式无效");
}
return item as IdentityUserPool;
});
}

export interface DeployBuildLogSnapshot {
source: "code-pipeline";
status: "running" | "complete" | "error";
Expand Down Expand Up @@ -1733,6 +1772,7 @@ export async function deployAgentkitProject(
minInstance?: number;
maxInstance?: number;
description?: string;
authentication?: DeployAuthentication;
onStage?: (s: DeployStage) => void;
im?: {
feishu?: {
Expand Down Expand Up @@ -1776,6 +1816,7 @@ export async function deployAgentkitProject(
minInstance: opts?.minInstance,
maxInstance: opts?.maxInstance,
description: normalizeRuntimeDescription(opts?.description ?? ""),
authentication: opts?.authentication,
im: opts?.im,
envs: opts?.envs,
}),
Expand Down
239 changes: 239 additions & 0 deletions frontend/src/ui/ProjectPreview.css
Original file line number Diff line number Diff line change
Expand Up @@ -878,6 +878,243 @@
line-height: 1.5;
}

.pp-auth-section {
overflow: visible;
}

.pp-auth-preserved-note {
margin: 0;
}

.pp-auth-fields {
width: min(100%, 560px);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 12px;
}

.pp-auth-fields > label {
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
color: hsl(var(--muted-foreground));
font-size: 12.5px;
}

.pp-deployment-select {
position: relative;
min-width: 0;
}

.pp-deployment-select-trigger {
width: 100%;
height: 36px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 10px 0 12px;
border: 1px solid hsl(var(--border));
border-radius: 6px;
background: hsl(var(--background));
color: hsl(var(--foreground));
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
transition:
border-color 120ms ease,
box-shadow 120ms ease,
background-color 120ms ease;
}

.pp-deployment-select-trigger:hover:not(:disabled) {
border-color: hsl(var(--foreground) / 0.24);
background: hsl(var(--muted) / 0.18);
}

.pp-deployment-select-trigger[aria-expanded="true"] {
border-color: hsl(var(--ring) / 0.42);
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
}

.pp-deployment-select-trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.pp-deployment-select-trigger:disabled {
cursor: not-allowed;
opacity: 0.5;
}

.pp-deployment-select-trigger > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.pp-deployment-select-trigger > .is-placeholder {
color: hsl(var(--muted-foreground));
font-weight: 400;
}

.pp-deployment-select-chevron {
width: 18px;
height: 18px;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
transition: transform 160ms ease;
}

.pp-deployment-select-chevron.is-open {
transform: rotate(180deg);
}

.pp-deployment-select-menu {
position: absolute;
z-index: 40;
top: calc(100% + 6px);
right: 0;
left: 0;
max-height: 224px;
overflow-y: auto;
padding: 4px;
border: 1px solid hsl(var(--border));
border-radius: 6px;
background: hsl(var(--background));
color: hsl(var(--foreground));
box-shadow: 0 8px 24px hsl(var(--foreground) / 0.08);
overscroll-behavior: contain;
}

.pp-deployment-select-option {
width: 100%;
min-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 9px;
border: 0;
border-radius: 4px;
background: transparent;
color: hsl(var(--foreground));
cursor: pointer;
font: inherit;
text-align: left;
}

.pp-deployment-select-option:hover,
.pp-deployment-select-option:focus-visible,
.pp-deployment-select-option.is-selected {
outline: none;
background: hsl(var(--muted) / 0.5);
}

.pp-deployment-select-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}

.pp-deployment-select-name {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
color: hsl(var(--foreground));
font-size: 12px;
font-weight: 560;
text-overflow: ellipsis;
white-space: nowrap;
}

.pp-deployment-select-copy small {
overflow: hidden;
color: hsl(var(--muted-foreground));
font-size: 11px;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}

.pp-deployment-select-option > svg {
width: 15px;
height: 15px;
flex-shrink: 0;
color: hsl(var(--primary));
}

.pp-deployment-select-badge {
flex-shrink: 0;
padding: 1px 5px;
border: 1px solid hsl(var(--primary) / 0.22);
border-radius: 999px;
background: hsl(var(--primary) / 0.07);
color: hsl(var(--primary));
font-size: 10px;
font-weight: 600;
}

.pp-user-pool-picker {
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
}

.pp-user-pool-status {
min-height: 18px;
display: inline-flex;
align-items: center;
gap: 6px;
color: hsl(var(--muted-foreground));
font-size: 11.5px;
line-height: 1.5;
}

.pp-user-pool-spinner {
width: 13px;
height: 13px;
flex-shrink: 0;
animation: pp-spin 0.9s linear infinite;
}

.pp-user-pool-error {
min-height: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: hsl(var(--destructive));
font-size: 11.5px;
line-height: 1.5;
}

.pp-user-pool-error button {
flex-shrink: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-weight: 600;
}

.pp-user-pool-error button:focus-visible {
outline: 2px solid hsl(var(--ring) / 0.45);
outline-offset: 2px;
}

.pp-instance-note {
margin: 10px 0 0;
color: hsl(42 96% 43%);
Expand Down Expand Up @@ -1731,6 +1968,7 @@
@media (prefers-reduced-motion: reduce) {
.pp-channel-card-inner,
.pp-channel-card-front,
.pp-deployment-select-chevron,
.pp-config-actions .pp-deploy {
transition: none;
}
Expand Down Expand Up @@ -1822,6 +2060,7 @@
}

@media (max-width: 520px) {
.pp-auth-fields,
.pp-network-layout {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
Expand Down
Loading
Loading