@zaip-ai/cli 1.0.6 → 1.0.7

package/templates/.agents/dashboard/apps/frontend/src/ProjectSettingsPage.tsx

@@ -0,0 +1,719 @@
+import { type FormEvent, type ReactNode, useEffect, useState } from "react";
+import type { DashboardApiClient, ProjectConfigSettings } from "./dashboard-api.js";
+import {
+  buildProjectSettingsPayload,
+  defaultAutonomousExecution,
+  defaultModelOrchestration,
+  type LanguagesDraft,
+  lineList,
+  modelOrchestrationForMode,
+  projectSettingsDraft,
+} from "./project-settings-model.js";
+import "./project-settings-page.css";
+
+type Locale = "pt-BR" | "en-US";
+
+const copy = {
+  "pt-BR": {
+    eyebrow: "Configurações",
+    title: "Configuração do projeto",
+    intro:
+      "Edite o arquivo central do projeto com validação do schema antes da gravação. Nenhuma credencial deve ser adicionada aqui.",
+    loading: "Carregando configurações do projeto…",
+    back: "Voltar ao dashboard",
+    save: "Salvar configurações",
+    saving: "Validando e salvando…",
+    saved: "Configurações salvas e validadas.",
+    framework: "Framework ZAIP-AIOS",
+    frameworkHint: "Ativa ou desativa o framework para este projeto.",
+    identity: "Identidade do projeto",
+    stack: "Stack e linguagens",
+    clients: "Clientes e rastreamento",
+    models: "Orquestração de modelos",
+    execution: "Execução",
+    assurance: "Assurance",
+    context: "Contexto",
+  },
+  "en-US": {
+    eyebrow: "Settings",
+    title: "Project settings",
+    intro:
+      "Edit the central project file with schema validation before writing. Do not add credentials here.",
+    loading: "Loading project settings…",
+    back: "Back to dashboard",
+    save: "Save settings",
+    saving: "Validating and saving…",
+    saved: "Settings saved and validated.",
+    framework: "ZAIP-AIOS framework",
+    frameworkHint: "Enable or disable the framework for this project.",
+    identity: "Project identity",
+    stack: "Stack and languages",
+    clients: "Clients and tracking",
+    models: "Model orchestration",
+    execution: "Execution",
+    assurance: "Assurance",
+    context: "Context",
+  },
+} as const;
+
+export function ProjectSettingsPage({
+  api,
+  locale,
+  onClose,
+}: {
+  api: DashboardApiClient;
+  locale: Locale;
+  onClose: () => void;
+}) {
+  const text = copy[locale];
+  const [config, setConfig] = useState<ProjectConfigSettings | null>(null);
+  const [languages, setLanguages] = useState<LanguagesDraft>({
+    frontend: "",
+    backend: "",
+    site: "",
+  });
+  const [otherOverrides, setOtherOverrides] = useState("{}");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  useEffect(() => {
+    void api
+      .projectSettings()
+      .then((loaded) => {
+        const draft = projectSettingsDraft(loaded);
+        setConfig(loaded);
+        setLanguages(draft.languages);
+        setOtherOverrides(draft.otherOverrides);
+      })
+      .catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+  }, [api]);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (config === null) return;
+    setSaving(true);
+    setError(null);
+    setNotice(null);
+    try {
+      const saved = await api.saveProjectSettings(
+        buildProjectSettingsPayload(config, languages, otherOverrides),
+      );
+      const draft = projectSettingsDraft(saved);
+      setConfig(saved);
+      setLanguages(draft.languages);
+      setOtherOverrides(draft.otherOverrides);
+      setNotice(text.saved);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (config === null) {
+    return (
+      <main className="project-settings-state">
+        <p>{text.eyebrow}</p>
+        <h1>{error ?? text.loading}</h1>
+        <button onClick={onClose} type="button">
+          {text.back}
+        </button>
+      </main>
+    );
+  }
+
+  return (
+    <main className="project-settings-page">
+      <form onSubmit={submit}>
+        <header className="project-settings-header">
+          <div>
+            <p>{text.eyebrow}</p>
+            <h1>{text.title}</h1>
+            <span>{text.intro}</span>
+          </div>
+          <button className="project-settings-back" onClick={onClose} type="button">
+            ← {text.back}
+          </button>
+        </header>
+
+        {error ? <div className="project-settings-message is-error">{error}</div> : null}
+        {notice ? (
+          <div className="project-settings-message is-success" role="status">
+            {notice}
+          </div>
+        ) : null}
+
+        <section className="project-settings-feature">
+          <div>
+            <h2>{text.framework}</h2>
+            <p>{text.frameworkHint}</p>
+          </div>
+          <Toggle
+            checked={config.zaip?.enabled === true}
+            label={locale === "pt-BR" ? "Framework ativo" : "Framework enabled"}
+            onChange={(enabled) => setConfig({ ...config, zaip: { enabled } })}
+          />
+        </section>
+
+        <div className="project-settings-grid">
+          <SettingsCard title={text.identity}>
+            <Field label="Schema">
+              <input readOnly value={config.schema_version} />
+            </Field>
+            <Field label={locale === "pt-BR" ? "ID do projeto" : "Project ID"}>
+              <input
+                required
+                value={config.project.id}
+                onChange={(event) =>
+                  setConfig({
+                    ...config,
+                    project: { ...config.project, id: event.target.value },
+                  })
+                }
+              />
+            </Field>
+            <Field label={locale === "pt-BR" ? "Nome do projeto" : "Project name"}>
+              <input
+                required
+                value={config.project.name}
+                onChange={(event) =>
+                  setConfig({
+                    ...config,
+                    project: { ...config.project, name: event.target.value },
+                  })
+                }
+              />
+            </Field>
+            <Field label="Timezone IANA">
+              <input
+                required
+                value={config.project.timezone}
+                onChange={(event) =>
+                  setConfig({
+                    ...config,
+                    project: { ...config.project, timezone: event.target.value },
+                  })
+                }
+              />
+            </Field>
+          </SettingsCard>
+
+          <SettingsCard className="is-wide" title={text.stack}>
+            <div className="project-settings-fields two-columns">
+              <Field label="Stack profile">
+                <input
+                  required
+                  value={config.stack.profile}
+                  onChange={(event) =>
+                    setConfig({
+                      ...config,
+                      stack: { ...config.stack, profile: event.target.value },
+                    })
+                  }
+                />
+              </Field>
+              <Field label={locale === "pt-BR" ? "Frontend" : "Frontend"}>
+                <input
+                  placeholder="TypeScript, JavaScript"
+                  value={languages.frontend}
+                  onChange={(event) => setLanguages({ ...languages, frontend: event.target.value })}
+                />
+              </Field>
+              <Field label={locale === "pt-BR" ? "Backend" : "Backend"}>
+                <input
+                  placeholder="TypeScript, Python"
+                  value={languages.backend}
+                  onChange={(event) => setLanguages({ ...languages, backend: event.target.value })}
+                />
+              </Field>
+              <Field label={locale === "pt-BR" ? "Site" : "Site"}>
+                <input
+                  placeholder="Astro, TypeScript"
+                  value={languages.site}
+                  onChange={(event) => setLanguages({ ...languages, site: event.target.value })}
+                />
+              </Field>
+            </div>
+            <Field
+              hint={
+                locale === "pt-BR"
+                  ? "Objeto JSON. Chaves existentes são preservadas; linguagens são controladas pelos campos acima."
+                  : "JSON object. Existing keys are preserved; languages are controlled by the fields above."
+              }
+              label={locale === "pt-BR" ? "Demais overrides" : "Additional overrides"}
+            >
+              <textarea
+                rows={7}
+                value={otherOverrides}
+                onChange={(event) => setOtherOverrides(event.target.value)}
+              />
+            </Field>
+          </SettingsCard>
+
+          <SettingsCard title={text.clients}>
+            <Toggle
+              checked={config.clients.codex}
+              label="Codex"
+              onChange={(codex) => setConfig({ ...config, clients: { ...config.clients, codex } })}
+            />
+            <Toggle
+              checked={config.clients.claude}
+              label="Claude"
+              onChange={(claude) =>
+                setConfig({ ...config, clients: { ...config.clients, claude } })
+              }
+            />
+            <Toggle
+              checked={config.tracking.enabled}
+              label={locale === "pt-BR" ? "Rastreamento ativo" : "Tracking enabled"}
+              onChange={(enabled) =>
+                setConfig({ ...config, tracking: { ...config.tracking, enabled } })
+              }
+            />
+            <Field label={locale === "pt-BR" ? "Moeda ISO 4217" : "ISO 4217 currency"}>
+              <input
+                maxLength={3}
+                required
+                value={config.tracking.currency}
+                onChange={(event) =>
+                  setConfig({
+                    ...config,
+                    tracking: {
+                      ...config.tracking,
+                      currency: event.target.value.toUpperCase(),
+                    },
+                  })
+                }
+              />
+            </Field>
+            <Field label="Storage mode">
+              <select
+                value={config.tracking.storage_mode}
+                onChange={(event) =>
+                  setConfig({
+                    ...config,
+                    tracking: {
+                      ...config.tracking,
+                      storage_mode: event.target.value as "tracked_sanitized" | "local_only",
+                    },
+                  })
+                }
+              >
+                <option value="tracked_sanitized">tracked_sanitized</option>
+                <option value="local_only">local_only</option>
+              </select>
+            </Field>
+          </SettingsCard>
+
+          <SettingsCard className="is-wide" title={text.models}>
+            <OptionalSectionToggle
+              checked={config.model_orchestration !== undefined}
+              label={
+                locale === "pt-BR"
+                  ? "Incluir configuração de modelos"
+                  : "Include model configuration"
+              }
+              onChange={(checked) =>
+                setConfig({
+                  ...config,
+                  model_orchestration: checked ? defaultModelOrchestration() : undefined,
+                })
+              }
+            />
+            {config.model_orchestration ? (
+              <ModelOrchestrationFields config={config} setConfig={setConfig} />
+            ) : null}
+          </SettingsCard>
+
+          <SettingsCard title={text.execution}>
+            <OptionalSectionToggle
+              checked={config.execution !== undefined}
+              label={
+                locale === "pt-BR"
+                  ? "Incluir configuração de execução"
+                  : "Include execution configuration"
+              }
+              onChange={(checked) =>
+                setConfig({
+                  ...config,
+                  execution: checked ? { runtime: "manual" } : undefined,
+                })
+              }
+            />
+            {config.execution ? (
+              <>
+                <Field label="Runtime">
+                  <select
+                    value={config.execution.runtime}
+                    onChange={(event) =>
+                      setConfig({
+                        ...config,
+                        execution:
+                          event.target.value === "manual"
+                            ? { runtime: "manual" }
+                            : defaultAutonomousExecution(),
+                      })
+                    }
+                  >
+                    <option value="manual">manual</option>
+                    <option value="autonomous">autonomous</option>
+                  </select>
+                </Field>
+                {config.execution.runtime === "autonomous" ? (
+                  <AutonomousExecutionFields config={config} setConfig={setConfig} />
+                ) : null}
+              </>
+            ) : null}
+          </SettingsCard>
+
+          <SettingsCard title={text.assurance}>
+            <OptionalSectionToggle
+              checked={config.assurance !== undefined}
+              label={locale === "pt-BR" ? "Incluir assurance" : "Include assurance"}
+              onChange={(checked) =>
+                setConfig({
+                  ...config,
+                  assurance: checked
+                    ? { version: 1, standard_depth: "auto", require_final_commit: true }
+                    : undefined,
+                })
+              }
+            />
+            {config.assurance ? (
+              <>
+                <Field label="Version">
+                  <input readOnly value={config.assurance.version} />
+                </Field>
+                <Field label="Standard depth">
+                  <select
+                    value={config.assurance.standard_depth}
+                    onChange={(event) =>
+                      setConfig({
+                        ...config,
+                        assurance: {
+                          ...(config.assurance ?? {
+                            version: 1,
+                            standard_depth: "auto",
+                            require_final_commit: true,
+                          }),
+                          standard_depth: event.target.value as "auto" | "base" | "elevated",
+                        },
+                      })
+                    }
+                  >
+                    <option value="auto">auto</option>
+                    <option value="base">base</option>
+                    <option value="elevated">elevated</option>
+                  </select>
+                </Field>
+                <Toggle
+                  checked={config.assurance.require_final_commit}
+                  label="Require final commit"
+                  onChange={(require_final_commit) =>
+                    setConfig({
+                      ...config,
+                      assurance: {
+                        ...(config.assurance ?? {
+                          version: 1,
+                          standard_depth: "auto",
+                          require_final_commit: true,
+                        }),
+                        require_final_commit,
+                      },
+                    })
+                  }
+                />
+              </>
+            ) : null}
+          </SettingsCard>
+
+          <SettingsCard className="is-wide" title={text.context}>
+            <OptionalSectionToggle
+              checked={config.context !== undefined}
+              label={locale === "pt-BR" ? "Incluir raízes de contexto" : "Include context roots"}
+              onChange={(checked) =>
+                setConfig({
+                  ...config,
+                  context: checked
+                    ? { canonical_roots: ["packages"], projection_roots: [] }
+                    : undefined,
+                })
+              }
+            />
+            {config.context ? (
+              <div className="project-settings-fields two-columns">
+                <Field
+                  hint={locale === "pt-BR" ? "Uma raiz por linha." : "One root per line."}
+                  label="Canonical roots"
+                >
+                  <textarea
+                    required
+                    rows={5}
+                    value={config.context.canonical_roots.join("\n")}
+                    onChange={(event) =>
+                      setConfig({
+                        ...config,
+                        context: {
+                          ...(config.context ?? {
+                            canonical_roots: ["packages"],
+                            projection_roots: [],
+                          }),
+                          canonical_roots: lineList(event.target.value),
+                        },
+                      })
+                    }
+                  />
+                </Field>
+                <Field
+                  hint={locale === "pt-BR" ? "Uma raiz por linha." : "One root per line."}
+                  label="Projection roots"
+                >
+                  <textarea
+                    rows={5}
+                    value={config.context.projection_roots.join("\n")}
+                    onChange={(event) =>
+                      setConfig({
+                        ...config,
+                        context: {
+                          ...(config.context ?? {
+                            canonical_roots: ["packages"],
+                            projection_roots: [],
+                          }),
+                          projection_roots: lineList(event.target.value),
+                        },
+                      })
+                    }
+                  />
+                </Field>
+              </div>
+            ) : null}
+          </SettingsCard>
+        </div>
+
+        <footer className="project-settings-footer">
+          <span>.agents/config/project.yaml</span>
+          <button disabled={saving} type="submit">
+            {saving ? text.saving : text.save}
+          </button>
+        </footer>
+      </form>
+    </main>
+  );
+}
+
+function SettingsCard({
+  children,
+  className = "",
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  title: string;
+}) {
+  return (
+    <section className={`project-settings-card ${className}`}>
+      <h2>{title}</h2>
+      <div className="project-settings-fields">{children}</div>
+    </section>
+  );
+}
+
+function Field({ children, hint, label }: { children: ReactNode; hint?: string; label: string }) {
+  return (
+    <div className="project-settings-field">
+      <span>{label}</span>
+      {children}
+      {hint ? <small>{hint}</small> : null}
+    </div>
+  );
+}
+
+function Toggle({
+  checked,
+  label,
+  onChange,
+}: {
+  checked: boolean;
+  label: string;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label className="project-settings-toggle">
+      <input
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+        type="checkbox"
+      />
+      <span aria-hidden="true" />
+      <strong>{label}</strong>
+    </label>
+  );
+}
+
+function OptionalSectionToggle(props: Parameters<typeof Toggle>[0]) {
+  return <Toggle {...props} />;
+}
+
+function ModelOrchestrationFields({
+  config,
+  setConfig,
+}: {
+  config: ProjectConfigSettings;
+  setConfig: (config: ProjectConfigSettings) => void;
+}) {
+  const model = config.model_orchestration ?? modelOrchestrationForMode("auto");
+  return (
+    <div className="project-settings-fields two-columns">
+      <Field label="Mode">
+        <select
+          value={model.mode}
+          onChange={(event) =>
+            setConfig({
+              ...config,
+              model_orchestration: modelOrchestrationForMode(
+                event.target.value as "manual" | "off" | "auto",
+              ),
+            })
+          }
+        >
+          <option value="manual">manual</option>
+          <option value="off">off</option>
+          <option value="auto">auto</option>
+        </select>
+      </Field>
+      <Field label="Notice">
+        <select
+          value={model.notice}
+          onChange={(event) =>
+            setConfig({
+              ...config,
+              model_orchestration: {
+                ...model,
+                notice: event.target.value as "always" | "mismatch",
+              },
+            })
+          }
+        >
+          <option value="mismatch">mismatch</option>
+          <option value="always">always</option>
+        </select>
+      </Field>
+      {model.mode === "off" ? (
+        <>
+          <Field label="Default model">
+            <input
+              required
+              value={model.default_model}
+              onChange={(event) =>
+                setConfig({
+                  ...config,
+                  model_orchestration: { ...model, default_model: event.target.value },
+                })
+              }
+            />
+          </Field>
+          <Field label="Default effort">
+            <input
+              required
+              value={model.default_effort}
+              onChange={(event) =>
+                setConfig({
+                  ...config,
+                  model_orchestration: { ...model, default_effort: event.target.value },
+                })
+              }
+            />
+          </Field>
+          <Field label="Default velocity">
+            <input
+              required
+              value={model.default_velocity}
+              onChange={(event) =>
+                setConfig({
+                  ...config,
+                  model_orchestration: { ...model, default_velocity: event.target.value },
+                })
+              }
+            />
+          </Field>
+        </>
+      ) : (
+        <div className="project-settings-fixed">
+          <strong>
+            {model.default_model} · {model.default_effort} · {model.default_velocity}
+          </strong>
+          {model.mode === "auto" ? (
+            <span>
+              {model.allowed_models.join(", ")} · {model.allowed_efforts.join(", ")} · spec, prd
+            </span>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AutonomousExecutionFields({
+  config,
+  setConfig,
+}: {
+  config: ProjectConfigSettings;
+  setConfig: (config: ProjectConfigSettings) => void;
+}) {
+  const execution =
+    config.execution?.runtime === "autonomous" ? config.execution : defaultAutonomousExecution();
+  const update = (autonomous: typeof execution.autonomous) =>
+    setConfig({ ...config, execution: { runtime: "autonomous", autonomous } });
+  return (
+    <>
+      <Field label="Provider">
+        <select
+          value={execution.autonomous.provider}
+          onChange={(event) =>
+            update({
+              ...execution.autonomous,
+              provider: event.target.value as "codex" | "claude",
+            })
+          }
+        >
+          <option value="codex">codex</option>
+          <option value="claude">claude</option>
+        </select>
+      </Field>
+      <Field label="Model">
+        <input
+          required
+          value={execution.autonomous.model}
+          onChange={(event) => update({ ...execution.autonomous, model: event.target.value })}
+        />
+      </Field>
+      <Field label="Max parallelism">
+        <input
+          max={8}
+          min={1}
+          type="number"
+          value={execution.autonomous.max_parallelism}
+          onChange={(event) =>
+            update({
+              ...execution.autonomous,
+              max_parallelism: Number(event.target.value),
+            })
+          }
+        />
+      </Field>
+      <Field label="Lease (ms)">
+        <input
+          max={3_600_000}
+          min={5_000}
+          step={1_000}
+          type="number"
+          value={execution.autonomous.lease_ms}
+          onChange={(event) =>
+            update({ ...execution.autonomous, lease_ms: Number(event.target.value) })
+          }
+        />
+      </Field>
+    </>
+  );
+}