Feat/test run generated agent

frontend/src/adk/client.ts

@@ -279,3 +279,31 @@ export async function* runSSE({
     yield evt as AdkEvent;
   }
 }
+
+/** Deploy a temporary agent for testing. */
+export async function deployTempAgent(
+  name: string,
+  files: { path: string; content: string }[],
+): Promise<string> {
+  const res = await apiFetch("/web/deploy-temp-agent", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name, files }),
+  });
+  if (!res.ok) {
+    const err = await res.text();
+    throw new Error(`Deploy failed: ${err}`);
+  }
+  const data = await res.json();
+  return data.appName;
+}
+
+/** Delete a temporary agent. */
+export async function deleteTempAgent(appName: string): Promise<void> {
+  const res = await apiFetch(`/web/deploy-temp-agent/${appName}`, {
+    method: "DELETE",
+  });
+  if (!res.ok && res.status !== 404) {
+    throw new Error(`Delete failed: ${res.status}`);
+  }
+}

frontend/src/ui/AgentTest.css

@@ -0,0 +1,237 @@
+.agent-test {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
+  border: 1px solid #e8e8e8;
+}
+
+.agent-test-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 24px;
+  border-bottom: 1px solid #e8e8e8;
+  background: #fafafa;
+}
+
+.agent-test-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #262626;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.agent-test-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: #8c8c8c;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.agent-test-close:hover {
+  background: #f0f0f0;
+  color: #262626;
+}
+
+.agent-test-loading,
+.agent-test-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 12px;
+  padding: 48px 24px;
+  color: var(--text-muted);
+}
+
+.agent-test-error {
+  flex-direction: row;
+  color: var(--red);
+}
+
+.agent-test-error .icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.error-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.error-message {
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+.agent-test-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background: #ffffff;
+}
+
+.agent-test-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #bfbfbf;
+  font-size: 14px;
+}
+
+.agent-test-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 70%;
+}
+
+.agent-test-message.user {
+  align-self: flex-end;
+}
+
+.agent-test-message.assistant {
+  align-self: flex-start;
+}
+
+.message-role {
+  font-size: 12px;
+  font-weight: 500;
+  color: #8c8c8c;
+  padding: 0 4px;
+}
+
+.message-content {
+  background: #f5f5f5;
+  border-radius: 16px;
+  padding: 12px 16px;
+  color: #262626;
+  font-size: 14px;
+  line-height: 1.6;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+  min-height: 20px;
+  display: block;
+}
+
+.agent-test-message.user .message-content {
+  background: #0066ff !important;
+  color: white !important;
+  box-shadow: 0 1px 4px rgba(0, 102, 255, 0.2);
+}
+
+.message-text {
+  display: block;
+  min-height: 1em;
+}
+
+
+.message-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: var(--red);
+}
+
+.message-error .icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+.agent-test-input {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid #e8e8e8;
+  background: #fafafa;
+}
+
+.agent-test-input .input {
+  flex: 1;
+  padding: 10px 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #262626;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.agent-test-input .input:focus {
+  border-color: #0066ff;
+  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
+}
+
+.agent-test-input .input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.send-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  background: #0066ff;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 102, 255, 0.2);
+}
+
+.send-button:hover:not(:disabled) {
+  background: #0052cc;
+  box-shadow: 0 4px 8px rgba(0, 102, 255, 0.3);
+}
+
+.send-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.send-button .icon {
+  width: 18px;
+  height: 18px;
+}
+
+.icon.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}