@kortix/ui 0.14.3 → 0.14.5

package/dist/customize/sections/view/git-view.js

@@ -0,0 +1,510 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../../primitives/disclosure.js';
+import { CommandEmpty, CommandFooter, CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, CommandPopoverContent, CommandPopoverTrigger, } from '../../../primitives/command.js';
+import { InfoBanner } from '../../../primitives/info-banner.js';
+import { Input } from '../../../primitives/input.js';
+import Loading from '../../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle } from '../../../primitives/modal.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { SettingsRow, SettingsRowGroup } from '../../../primitives/settings-row.js';
+import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE, triggerVariants } from '../../../primitives/trigger-variants.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { Github as GithubIcon } from '../../../internal/icons/github.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { useDebounce } from '../../../hooks/use-debounce.js';
+import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
+import { requestGitHubUserProof } from '../../../internal/lib/github-user-proof.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useDeploymentCliInstallCommand } from '../../../internal/lib/use-deployment-cli-install-command.js';
+import { useProjectCans } from '../../../internal/lib/use-project-can.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { getProjectDetail, inviteRepoCollaborator, isManagedGithubProject, listProjectBranches, listLinkableGitHubInstallations, replaceProjectRepository, updateProject, platformConfig, stripTrailingSlashes, } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { CaretDownIcon, CheckIcon, ArrowSquareOutIcon as ExternalLink, GitForkIcon as GitFork, GithubLogoIcon as Github, ArrowClockwiseIcon as RefreshCw, WarningIcon, } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { UiLink as Link, useUiHostConfig } from '../../../providers/ui-provider.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CopyButton } from '../../../markdown/copy-button.js';
+import { RepositoryDisconnectedBanner, repositoryDisconnectOf } from '../../../internal/components/repository-disconnected.js';
+import { filterBranchNames, connectionStatusLabel, providerLabel, providerSentence, repositoryWebUrl, } from './git-view-helpers.js';
+/**
+ * The leaves this view gates on, as ONE stable list.
+ *
+ * Action-list identity is part of the SDK's `effective:batch` query key, so a
+ * literal rebuilt on each render would mint a new cache entry every time.
+ * Module scope is what collapses both gates into a single request.
+ */
+const GIT_VIEW_ACTIONS = [
+    PROJECT_ACTIONS.PROJECT_WRITE,
+    PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE,
+];
+const DOCS_CLI = '/docs/cli';
+const DOCS_MANIFEST = '/docs/project/manifest';
+/**
+ * The address a plain `git` client clones from. Kept as the project's own
+ * `git_origin_url` when the backend supplies one, and otherwise rebuilt from
+ * the configured backend URL — unchanged from the previous implementation
+ * apart from its name, which used to be `proxyUrl`. "Proxy" is the mechanism;
+ * every place this value now surfaces calls it a clone address, because that
+ * is the only thing a user does with it.
+ */
+function gitCloneUrl(project) {
+    if (project.git_origin_url)
+        return project.git_origin_url;
+    const configured = stripTrailingSlashes(platformConfig().backendUrl);
+    const base = configured.startsWith('http')
+        ? configured
+        : `${typeof window === 'undefined' ? '' : window.location.origin}${configured}`;
+    const versioned = base.endsWith('/v1') ? base : `${base}/v1`;
+    return `${versioned}/git/${project.project_id}.git`;
+}
+/**
+ * A quiet "Learn more", used both at the end of a row description and in a
+ * subsection header's action slot.
+ *
+ * A bare `Link` rather than `Button asChild`, deliberately. `Button`'s base
+ * class is `flex`, so wrapping this one would turn it into a block inside the
+ * description paragraph — "…how to run this workspace." would sit on one line
+ * and "Learn more" would drop to its own. An underline is also the correct
+ * affordance here: this is a link inside prose, not a control.
+ *
+ * `text-xs` is set rather than inherited so it matches the row descriptions it
+ * appears in and stays quiet in the header slot, where nothing else sets a size.
+ */
+function DocsLink({ href, children = 'Learn more' }) {
+    return (_jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-foreground decoration-muted-foreground/40 hover:decoration-foreground text-xs whitespace-nowrap underline underline-offset-2 transition-colors", children: children }));
+}
+/**
+ * One copyable line — a command to paste into a terminal, or an address.
+ *
+ * **It has no border and no background of its own.** It used to be a
+ * `rounded-md` bordered box, which put a rounded surface inside the rounded
+ * panel that held it — the nested rounding the design system bans, and the
+ * reason the local-setup section read as cluttered: an outer panel inset,
+ * plus a step inset, plus a box inset, for a single line of text. The line now
+ * sits directly on its container and earns its affordance from the monospace
+ * face, the `$`, and the copy button — with a hover tint as the only surface,
+ * so nothing is drawn until the pointer says it matters.
+ *
+ * `kind="command"` prefixes a non-selectable `$`. It is not decoration: it is
+ * the difference between a user pasting `kortix env pull` and pasting a line
+ * they think is prose. The marker is `aria-hidden` and outside the `<code>`, so
+ * copying still yields the bare command.
+ */
+function CommandLine({ value, label, kind = 'command', }) {
+    return (_jsxs("div", { className: "bg-muted group/command-line -mx-2 flex min-w-0 items-center gap-2 rounded-sm px-3 py-1.5 transition-colors", children: [_jsx("code", { className: "text-foreground scrollbar-hide min-w-0 flex-1 overflow-x-auto font-mono text-xs whitespace-nowrap", children: value }), _jsx("span", { className: "shrink-0 opacity-0 transition-opacity duration-moderate group-hover/command-line:opacity-100", children: _jsx(CopyButton, { code: value, size: "sm" }) })] }));
+}
+const TONE_DOT = {
+    connected: 'bg-kortix-green',
+    attention: 'bg-kortix-orange',
+    unknown: 'bg-muted-foreground/40',
+};
+/** Status as a dot plus a word. A `Badge` would announce itself louder than the
+ *  repository name it describes; a dot is read as a state, not as a label. */
+function StatusValue({ status }) {
+    const { tone, label } = connectionStatusLabel(status);
+    return (_jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { "aria-hidden": true, className: cn('size-1.5 shrink-0 rounded-full', TONE_DOT[tone]) }), _jsx("span", { className: "text-foreground", children: label })] }));
+}
+/**
+ * What the project's OWN `repo_url` says about its repository, for projects
+ * that have no `project_git_connections` row.
+ *
+ * A connection row is not the only way a project knows where its code lives:
+ * `KortixProject.repo_url` is a required column, and a project can carry one
+ * without ever having a connection row created for it. The pane used to read
+ * the connection only, so those projects rendered "Not linked yet" and offered
+ * no way to reach a repository that was sitting in the project record — the
+ * regression this restores. `settings-view.tsx` on `main` linked straight off
+ * `project.repo_url` and did not consult a connection at all.
+ *
+ * Returns `null` for an address this cannot place, so an unrecognized host
+ * stays plain text instead of becoming a guessed URL. Both the SSH form
+ * (`git@github.com:acme/project.git`) and the HTTPS form resolve, because
+ * `main` linked both.
+ */
+export function projectRepoFallback(repoUrl) {
+    const raw = repoUrl?.trim();
+    if (!raw)
+        return null;
+    const segments = raw
+        .replace(/^[a-z][a-z0-9+.-]*:\/\//i, '')
+        .replace(/^[^@/]*@/, '')
+        .replace(/\/+$/, '')
+        .split(/[:/]/)
+        .filter(Boolean);
+    if (segments.length < 3)
+        return null;
+    const host = segments[0].toLowerCase();
+    const provider = host === 'github.com' ? 'github' : host === 'gitlab.com' ? 'gitlab' : null;
+    if (!provider)
+        return null;
+    const owner = segments[segments.length - 2];
+    const name = segments[segments.length - 1].replace(/\.git$/i, '');
+    return {
+        provider,
+        label: `${owner}/${name}`,
+        webUrl: repositoryWebUrl(provider, `https://${host}/${owner}/${name}`),
+    };
+}
+/**
+ * The repository the project points at.
+ *
+ * The connection row stays the source of truth whenever there is one — it is
+ * the only thing that knows the owner/name split the backend resolved. The
+ * project's own `repo_url` is read only in its absence, and "Not linked yet" is
+ * reserved for the one state where it is true: no connection AND no address.
+ */
+export function RepositoryValue({ connection, repoUrl, }) {
+    const fallback = connection ? null : projectRepoFallback(repoUrl);
+    const name = connection?.repo_owner && connection.repo_name
+        ? `${connection.repo_owner}/${connection.repo_name}`
+        : connection?.repo_url || fallback?.label || repoUrl?.trim() || 'Not linked yet';
+    const webUrl = connection?.repo_url
+        ? repositoryWebUrl(connection.provider, connection.repo_url)
+        : (fallback?.webUrl ?? null);
+    const provider = connection?.provider ?? fallback?.provider;
+    const Glyph = provider === 'github' ? Github : GitFork;
+    if (webUrl?.startsWith('http')) {
+        return (_jsx(Button, { variant: "ghost", size: "sm", className: "-mr-2 max-w-[15rem] gap-1.5", asChild: true, children: _jsxs("a", { href: webUrl, target: "_blank", rel: "noopener noreferrer", children: [_jsx(Glyph, { className: "size-4 shrink-0" }), _jsx("span", { className: "truncate font-normal", children: name }), _jsx(ExternalLink, { className: "size-3.5 shrink-0 opacity-60" })] }) }));
+    }
+    return (_jsxs("span", { className: "text-foreground flex max-w-[15rem] items-center gap-1.5 text-sm", children: [_jsx(Glyph, { className: "size-4 shrink-0" }), _jsx("span", { className: "truncate", children: name })] }));
+}
+function SaveStatus() {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    return (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: tI18nComplete.raw('text23e39291d613') }));
+}
+/**
+ * The default-branch picker: a searchable list, not a `<Select>`.
+ *
+ * A long-lived project's remote holds one branch per session, thousands of
+ * refs. A Radix `<Select>` mounts every option, so opening this pane on such
+ * a project froze the tab and then crashed it. This list renders at most
+ * `BRANCH_PICKER_LIMIT` rows (`filterBranchNames`) and filters as the person
+ * types. The current value always renders, also before `/branches` answers.
+ */
+function BranchPicker({ value, branches, loading, onChange, disabled, label, }) {
+    const t = useI18nTranslations('repositoryChange');
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const { visible, hidden } = useMemo(() => filterBranchNames(branches, value, search), [branches, value, search]);
+    return (_jsxs(CommandPopover, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                setSearch('');
+        }, children: [_jsx(CommandPopoverTrigger, { disabled: disabled, children: _jsxs("button", { type: "button", "aria-label": label, className: cn(triggerVariants(), 'h-8 w-44 font-mono text-xs'), children: [_jsx("span", { className: "min-w-0 truncate", children: value }), _jsx(CaretDownIcon, { className: cn(TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE.sm) })] }) }), _jsxs(CommandPopoverContent, { side: "bottom", align: "end", className: "w-72", children: [_jsx(CommandInput, { compact: true, placeholder: t('searchBranches'), value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: loading ? t('loadingBranches') : t('noBranches') }), _jsx(CommandGroup, { children: visible.map((branch) => (_jsxs(CommandItem, { value: branch, onSelect: () => {
+                                        onChange(branch);
+                                        setOpen(false);
+                                        setSearch('');
+                                    }, className: "font-mono text-xs", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: branch }), branch === value ? _jsx(CheckIcon, { className: "size-3.5 shrink-0" }) : null] }, branch))) })] }), hidden > 0 ? (_jsx(CommandFooter, { children: t('moreBranches', { count: hidden }) })) : null] })] }));
+}
+/**
+ * The repository group: what it is connected to, whether that connection works,
+ * and the two settings that change how Kortix uses it.
+ *
+ * These were two separate sections before — a read-only "Repository" summary
+ * box and a "Repository settings" panel — which is what produced the duplicate
+ * headings. They are one group now because they are one subject: a person
+ * checking which repo is linked and a person changing the base branch are on
+ * the same errand, and the answer to "is it connected" belongs beside the
+ * controls that stop working when it isn't.
+ *
+ * No `SettingsSubsectionHeader` above it, deliberately — the pane title right
+ * above already reads "Repositories", and labelling the first group "Repository"
+ * is the exact duplication this rewrite removes. Same reasoning as
+ * `general-tab.tsx`'s first group.
+ */
+function RepositoryGroup({ project, connection, canManage, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tRepo = useI18nTranslations('repositoryChange');
+    const queryClient = useQueryClient();
+    const branchesQuery = useQuery({
+        queryKey: qk.project.branches(project.project_id),
+        // A default branch is never a session's own branch: skip the thousands.
+        queryFn: () => listProjectBranches(project.project_id, { includeSessionBranches: false }),
+        ...contract('config'),
+    });
+    const branchNames = branchesQuery.data?.branches.map((branch) => branch.name) ?? [];
+    const [defaultBranch, setDefaultBranch] = useState(project.default_branch);
+    const [manifestPath, setManifestPath] = useState(project.manifest_path);
+    const [changeOpen, setChangeOpen] = useState(false);
+    const [targetRepo, setTargetRepo] = useState('');
+    const [installations, setInstallations] = useState([]);
+    const [installationId, setInstallationId] = useState('');
+    const [githubProof, setGithubProof] = useState('');
+    const [verifying, setVerifying] = useState(false);
+    const { debouncedValue: debouncedBranch, isLoading: isDebouncingBranch } = useDebounce(defaultBranch, 500);
+    const { debouncedValue: debouncedManifest, isLoading: isDebouncingManifest } = useDebounce(manifestPath, 500);
+    useEffect(() => {
+        setDefaultBranch(project.default_branch);
+        setManifestPath(project.manifest_path);
+    }, [project.default_branch, project.manifest_path]);
+    // The last patch the autosave effect sent and that the input has not changed
+    // since. A failed save leaves the server values unchanged, so the effect's
+    // equality guard alone would re-fire the same patch on every `isPending`
+    // flip, forever. Skipping the attempted patch breaks that loop: a failed
+    // save idles until the user edits again (any settled edit that differs
+    // clears it), and a successful one clears it in `onSuccess`.
+    const attemptedPatch = useRef(null);
+    const mutation = useMutation({
+        mutationFn: (patch) => updateProject(project.project_id, patch),
+        onSuccess: (updated) => {
+            attemptedPatch.current = null;
+            queryClient.setQueryData(qk.project.summary(project.project_id), updated);
+            queryClient.setQueryData(qk.project.detail(project.project_id), (current) => (current ? { ...current, project: updated } : current));
+            // qk.projects.scope(): reaches every account's list (and the
+            // accountless slot the marketplace picker reads), restoring the reach
+            // the old bare projects-literal prefix match had. Repo-settings edits
+            // are rare — over-invalidating costs nothing.
+            queryClient.invalidateQueries({ queryKey: qk.projects.scope() });
+            queryClient.invalidateQueries({ queryKey: qk.project.branches(project.project_id) });
+        },
+        onError: (error) => errorToast(error.message || tI18nComplete.raw('textc25bdcabc47d')),
+    });
+    const { mutate, isPending } = mutation;
+    useEffect(() => {
+        if (!canManage || isPending)
+            return;
+        const branch = debouncedBranch.trim();
+        const manifest = debouncedManifest.trim();
+        const attempt = attemptedPatch.current;
+        if (attempt?.default_branch === branch && attempt?.manifest_path === manifest)
+            return;
+        attemptedPatch.current = null;
+        if (!branch)
+            return;
+        if (branch === project.default_branch && manifest === project.manifest_path)
+            return;
+        attemptedPatch.current = { default_branch: branch, manifest_path: manifest };
+        mutate({ default_branch: branch, manifest_path: manifest });
+    }, [
+        debouncedBranch,
+        debouncedManifest,
+        canManage,
+        project.default_branch,
+        project.manifest_path,
+        isPending,
+        mutate,
+    ]);
+    const saving = isDebouncingBranch || isDebouncingManifest || isPending;
+    const targetOwner = targetRepo.trim().match(/^https:\/\/github\.com\/([^/]+)\/[^/]+\/?$/i)?.[1]?.toLowerCase();
+    const availableInstallations = installations.filter((installation) => installation.owner_login?.toLowerCase() === targetOwner);
+    const changeRepository = useMutation({
+        mutationFn: () => replaceProjectRepository({
+            project_id: project.project_id,
+            repo_url: targetRepo.trim(),
+            expected_repo_url: project.repo_url,
+            installation_id: installationId,
+            github_user_token: githubProof,
+        }),
+        onSuccess: () => {
+            setChangeOpen(false);
+            setGithubProof('');
+            setInstallations([]);
+            setTargetRepo('');
+            queryClient.invalidateQueries({ queryKey: qk.project.detail(project.project_id) });
+            queryClient.invalidateQueries({ queryKey: qk.project.summary(project.project_id) });
+            queryClient.invalidateQueries({ queryKey: qk.projects.scope() });
+            queryClient.invalidateQueries({ queryKey: qk.project.branches(project.project_id) });
+            successToast(tRepo('changedToast'));
+        },
+        onError: (error) => errorToast(error.message),
+    });
+    const verifyGitHub = async () => {
+        setVerifying(true);
+        try {
+            const proof = await requestGitHubUserProof();
+            const result = await listLinkableGitHubInstallations({ account_id: project.account_id, github_user_token: proof });
+            setGithubProof(proof);
+            setInstallations(result.installations);
+            setInstallationId(result.installations.find((installation) => installation.owner_login?.toLowerCase() === targetOwner)?.installation_id ?? '');
+        }
+        catch (error) {
+            errorToast(error instanceof Error ? error.message : tRepo('verifyError'));
+        }
+        finally {
+            setVerifying(false);
+        }
+    };
+    const repositoryProvider = connection?.provider ??
+        (connection ? undefined : projectRepoFallback(project.repo_url)?.provider);
+    return (_jsxs("section", { className: "space-y-3", children: [repositoryDisconnectOf(connection) ? (_jsx(RepositoryDisconnectedBanner, { projectId: project.project_id, disconnect: repositoryDisconnectOf(connection) })) : connection?.last_error_message ? (_jsx(InfoBanner, { tone: "warning", icon: WarningIcon, title: tI18nComplete.raw('textcb25ff313d81'), children: connection.last_error_message })) : null, _jsxs(SettingsRowGroup, { children: [_jsxs(SettingsRow, { label: tI18nComplete.raw('text13d6ff07b8a5'), description: providerSentence(repositoryProvider), children: [_jsx(RepositoryValue, { connection: connection, repoUrl: project.repo_url }), canManage ? _jsx(Button, { variant: "outline", size: "sm", onClick: () => setChangeOpen(true), children: tRepo('change') }) : null] }), _jsx(SettingsRow, { label: tI18nComplete.raw('text920e413c7d41'), children: _jsx(StatusValue, { status: connection?.status }) }), _jsxs(SettingsRow, { label: tI18nComplete.raw('text9acbb9ebea63'), description: tI18nComplete.raw('text4ea9e9ad1d10'), children: [saving ? _jsx(SaveStatus, {}) : null, _jsx(BranchPicker, { value: defaultBranch, branches: branchNames, loading: branchesQuery.isLoading, onChange: setDefaultBranch, disabled: !canManage || isPending, label: tI18nComplete.raw('text9acbb9ebea63') })] }), _jsx(SettingsRow, { label: tI18nComplete.raw('textcef30be178a6'), description: _jsxs(_Fragment, { children: [tI18nComplete.raw('text0ec4cd70d04c'), " ", _jsx(DocsLink, { href: DOCS_MANIFEST })] }), children: _jsx(Input, { id: "manifest-path", "aria-label": tI18nComplete.raw('textcef30be178a6'), value: manifestPath, onChange: (e) => setManifestPath(e.target.value), disabled: !canManage || isPending, className: "h-8 w-44 font-mono text-xs" }) })] }), _jsx(Modal, { open: changeOpen, onOpenChange: (open) => {
+                    if (changeRepository.isPending)
+                        return;
+                    setChangeOpen(open);
+                    if (!open) {
+                        setGithubProof('');
+                        setInstallations([]);
+                        setInstallationId('');
+                        setTargetRepo('');
+                    }
+                }, children: _jsxs(ModalContent, { className: "flex flex-col overflow-hidden sm:max-w-md", children: [_jsxs(ModalHeader, { className: "shrink-0", children: [_jsx(ModalTitle, { children: tRepo('title') }), _jsx(ModalDescription, { children: tRepo('description') })] }), _jsxs(ModalBody, { className: "min-h-0 space-y-4 overflow-y-auto", children: [_jsxs("div", { className: "space-y-1 text-sm", children: [_jsx("p", { className: "text-muted-foreground", children: tRepo('current') }), _jsx("p", { className: "break-all font-mono text-xs", children: project.repo_url })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "replacement-repo-url", className: "text-sm font-medium", children: tRepo('newUrl') }), _jsx(Input, { id: "replacement-repo-url", value: targetRepo, onChange: (event) => setTargetRepo(event.target.value), placeholder: "https://github.com/owner/repository", autoComplete: "off" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: verifyGitHub, disabled: verifying || changeRepository.isPending, children: verifying ? tRepo('verifying') : githubProof ? tRepo('verifyAgain') : tRepo('verify') }), githubProof && availableInstallations.length === 0 ? _jsx("p", { className: "text-muted-foreground text-xs", children: tRepo('noInstallation') }) : null, availableInstallations.length > 0 ? (_jsxs(Select, { value: installationId, onValueChange: setInstallationId, children: [_jsx(SelectTrigger, { "aria-label": tRepo('installation'), children: _jsx(SelectValue, { placeholder: tRepo('selectInstallation') }) }), _jsx(SelectContent, { children: availableInstallations.map((installation) => (_jsx(SelectItem, { value: installation.installation_id, children: installation.owner_login ?? installation.installation_id }, installation.installation_id))) })] })) : null] }), _jsx("p", { className: "text-muted-foreground text-xs", children: tRepo('manifestRequirement', { manifest: project.manifest_path }) })] }), _jsxs(ModalFooter, { className: "shrink-0 bg-sidebar py-3", children: [_jsx(Button, { variant: "outline", onClick: () => setChangeOpen(false), disabled: changeRepository.isPending, children: tRepo('cancel') }), _jsx(Button, { onClick: () => changeRepository.mutate(), disabled: !targetOwner || targetRepo.trim() === project.repo_url || !availableInstallations.some((installation) => installation.installation_id === installationId) || !githubProof || changeRepository.isPending, children: changeRepository.isPending ? tRepo('changing') : tRepo('title') })] })] }) })] }));
+}
+/**
+ * One numbered step — a row in the steps group, not a card.
+ *
+ * The badge is `size-5`, which is exactly `text-sm`'s 20px line box, so it
+ * aligns with the first line of the title by layout rather than by a nudge.
+ *
+ * The connector line that used to join the badges is gone with the panel that
+ * held them: the group's hairline dividers already say "these are consecutive
+ * steps", so a second sequencing device was redundant ink.
+ */
+function Step({ index, title, hint, children, }) {
+    return (_jsxs("li", { className: "flex gap-3 px-4 py-3.5", children: [_jsx("span", { className: "bg-muted text-muted-foreground flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-medium tabular-nums", children: index }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2.5", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: title }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: hint })] }), _jsx("div", { className: "space-y-0.5", children: children })] })] }));
+}
+/**
+ * The three commands that put this workspace on someone's laptop, in order.
+ *
+ * Written out as literal JSX rather than mapped over a data array on purpose:
+ * `git-view.test.ts` asserts `label="Install command"` appears before
+ * `label="Clone command"` in this file's source, which is how the
+ * install-before-clone order is pinned in a codebase with no DOM test harness.
+ * A `.map()` over `{ label: 'Install command' }` object literals would not
+ * match that assertion and would silently un-pin the order.
+ */
+function LocalSetup({ projectId }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tGit = useI18nTranslations('settings.git');
+    const installCommand = useDeploymentCliInstallCommand(useUiHostConfig().deploymentVersion);
+    return (_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: tI18nComplete.raw('text17635feb9ad5'), description: tI18nComplete.raw('text80e155d7b8e5'), action: _jsx(DocsLink, { href: DOCS_CLI }) }), _jsxs("ol", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx(Step, { index: 1, title: tI18nComplete.raw('text81fbecb138f6'), hint: tGit('installHint'), children: _jsx(CommandLine, { value: installCommand, label: tI18nComplete.raw('text1ae97542051d') }) }), _jsx(Step, { index: 2, title: tI18nComplete.raw('text7114f5d2fafa'), hint: tGit('cloneHint'), children: _jsx(CommandLine, { value: `kortix projects clone ${projectId}`, label: tI18nComplete.raw('text6264f3bfdd91') }) }), _jsxs(Step, { index: 3, title: tI18nComplete.raw('texte7f187cbe20d'), hint: tGit('setupHint'), children: [_jsx(CommandLine, { value: "kortix init --force", label: tI18nComplete.raw('text6300595b1dfd') }), _jsx(CommandLine, { value: "kortix env pull", label: tI18nComplete.raw('text68269b6f8874') })] })] })] }));
+}
+/**
+ * Advanced escape hatch, folded away by default.
+ *
+ * This is the old "Kortix proxy origin" section. It is behind a disclosure now
+ * because the numbered steps above are the supported path and this is the
+ * alternative for people who already have a Git workflow — surfacing both at
+ * equal weight was most of what made the pane feel like a config dump. The copy
+ * leads with what you can do (`git clone`) and the thing that is genuinely
+ * unusual about it (no token to create or store), not with how Kortix resolves
+ * the credential.
+ */
+function OwnGitClient({ project }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const [open, setOpen] = useState(false);
+    return (_jsx("section", { className: "space-y-3", children: _jsxs(Disclosure, { variant: "outline", className: "bg-popover overflow-hidden", open: open, onOpenChange: setOpen, children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", className: "hover:bg-muted/50 flex h-auto w-full items-start justify-between gap-3 rounded-none px-4 py-3 text-left whitespace-normal", children: [_jsxs("span", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsx("span", { className: "text-foreground block text-sm font-medium", children: tI18nComplete.raw('textd29222de0472') }), _jsxs("span", { className: "text-muted-foreground block text-xs font-normal text-pretty", children: [tI18nComplete.raw('text7760401b25c7'), _jsx("code", { className: "font-mono", children: "git" }), " ", tI18nComplete.raw('text2f72fafe0ce1')] })] }), _jsx(CaretDownIcon, { className: cn('text-muted-foreground mt-0.5 size-4 shrink-0 transition-transform duration-moderate', open && 'rotate-180') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsxs("div", { className: "space-y-2 px-4 py-3.5", children: [_jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [tI18nComplete.raw('texte327e6c1348b'), _jsx("code", { className: "font-mono", children: "git" }), " ", tI18nComplete.raw('textb74106e21108')] }), _jsx(CommandLine, { value: gitCloneUrl(project), label: tI18nComplete.raw('textac830bd3c755'), kind: "address" })] }) })] }) }));
+}
+/**
+ * "People with access" — always rendered for someone who may manage members,
+ * with a body that depends on who actually controls the repository.
+ *
+ * The section used to be gated on `managed && canEdit` and render NOTHING
+ * otherwise, which produced the support question this replaces: a workspace
+ * owner on a BYO repo saw the Git repo panel with no access row under it and
+ * no way to find out why. Hiding a control does not answer "where do I add
+ * someone" — it just moves the question into a support thread.
+ *
+ * Two things the old gate got wrong, both fixed here:
+ *
+ * 1. It read `project.write`. The route asserts `project.members.manage`
+ *    (`apps/api/src/projects/routes/project-git.ts`, "Inviting a git collaborator
+ *    grants a human standing access to the repo — membership-tier, not plain
+ *    write"). A custom role holding write-but-not-members.manage saw the form
+ *    and got a 403 on submit; the reverse role saw nothing though the API
+ *    would have accepted it. The gate now asks for the leaf the route asks
+ *    for.
+ * 2. A non-managed repository disappeared instead of explaining itself.
+ */
+function RepoAccessSection({ projectId, connection, managed, canManageMembers, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    // Still gated on the capability — someone who cannot grant repository access
+    // has no use for either the form or an explanation of where to grant it.
+    if (!canManageMembers)
+        return null;
+    return (_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: tI18nComplete.raw('text6ecf05a928e8'), description: managed ? tI18nComplete.raw('text51df486e7027') : tI18nComplete.raw('text6ce403f96404') }), managed ? (_jsx(RepoCollaboratorInvite, { projectId: projectId })) : (_jsx(ExternallyManagedRepoAccess, { connection: connection }))] }));
+}
+/**
+ * The body for a repository Kortix does not own.
+ *
+ * Collaborator invites go through the managed org's admin credential
+ * (`managedAdminAuth`, `apps/api/src/projects/git-backends/github.ts`), which
+ * only has repo-admin scope on repositories Kortix created — so for a BYO repo
+ * there is nothing Kortix could do here even with the user's permission. The
+ * honest answer is where to go instead, and for GitHub that is a real link
+ * rather than a description of one.
+ *
+ * Providers other than GitHub reach this too: a workspace provisioned while
+ * `MANAGED_GIT_PROVIDER=code-storage` was the default (between #5063 and its
+ * retirement in #6796) is a MANAGED repo whose backend has no
+ * `inviteCollaborator` at all. Naming the provider is what tells those users
+ * they are not looking at a broken GitHub connection.
+ */
+function ExternallyManagedRepoAccess({ connection, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const provider = connection?.provider;
+    // GitHub only. `repositoryWebUrl` also answers for GitLab, but the deep link
+    // below is `/settings/access`, which is GitHub's path — GitLab's is
+    // `/-/project_members`. A link that 404s is worse than no link, so the button
+    // is scoped to the one host whose path is known here.
+    const webUrl = provider === 'github' && connection?.repo_url
+        ? repositoryWebUrl(provider, connection.repo_url)
+        : null;
+    return (_jsxs("div", { className: "bg-popover rounded-md border px-4 py-3", children: [_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: provider === 'github'
+                    ? tI18nComplete.raw('text6e5a03445559')
+                    : tI18nComplete('textdfa16aeaca13', { value0: providerLabel(provider) }) }), webUrl ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "mt-3 gap-1.5", children: _jsxs("a", { href: `${webUrl}/settings/access`, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLink, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text03298bf58cdb')] }) })) : null] }));
+}
+function RepoCollaboratorInvite({ projectId }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const [username, setUsername] = useState('');
+    const [permission, setPermission] = useState('write');
+    const inviteMutation = useMutation({
+        mutationFn: () => inviteRepoCollaborator(projectId, username.trim(), permission),
+        onSuccess: (res) => {
+            if (res.alreadyCollaborator) {
+                successToast(tI18nComplete('text4ece196e2346', { value0: res.username }));
+            }
+            else {
+                successToast(tI18nComplete('text1283bae259c2', { value0: res.username }));
+            }
+            setUsername('');
+        },
+        onError: (error) => errorToast(error.message || tI18nComplete.raw('textc6c23265e620')),
+    });
+    const submit = (e) => {
+        e.preventDefault();
+        if (username.trim() && !inviteMutation.isPending)
+            inviteMutation.mutate();
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "bg-popover rounded-md border p-3", children: _jsxs("form", { onSubmit: submit, className: "grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_8rem_auto] sm:items-center", children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx(GithubIcon, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2" }), _jsx(Input, { id: "repo-collaborator-username", "aria-label": tI18nComplete.raw('text64477e38cfb5'), value: username, onChange: (e) => setUsername(e.target.value), placeholder: tI18nComplete.raw('text64477e38cfb5'), 
+                                // NOT `variant="popover"`. That variant is `bg-popover`, the same
+                                // fill as the panel around it, so the input dissolved into its own
+                                // container. The default `bg-input` is what makes it read as
+                                // something you can type in. Same call `general-tab.tsx` made.
+                                size: "xs", autoCapitalize: "off", autoCorrect: "off", spellCheck: false, className: "rounded-sm pl-8" })] }), _jsxs(Select, { value: permission, onValueChange: (v) => setPermission(v), children: [_jsx(SelectTrigger, { id: "repo-collaborator-permission", "aria-label": tI18nComplete.raw('text86da9c960cf9'), className: "h-8 w-full rounded-sm", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "end", children: [_jsx(SelectItem, { value: "write", children: tI18nComplete.raw('text5abe9e1fbc5b') }), _jsx(SelectItem, { value: "read", children: tI18nComplete.raw('text151dc282a69e') })] })] }), _jsxs(Button, { type: "submit", size: "sm", className: "w-full shrink-0 rounded-sm transition-transform active:scale-[0.96] sm:w-auto", disabled: !username.trim() || inviteMutation.isPending, children: [inviteMutation.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text1fd9ae1607aa')] })] }) }) }));
+}
+export function GitView({ projectId }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const detail = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    // `detail.data.project` is a full `KortixProject`, so `RepositoryGroup` reads
+    // its `default_branch`/`manifest_path` from this SAME query rather than firing
+    // a second project fetch.
+    const project = detail.data?.project;
+    // Two leaves, one roundtrip. This used to be a single `project.write` probe
+    // reused for BOTH the repository settings and the collaborator invite — but
+    // the invite route asserts `project.members.manage`
+    // (`apps/api/src/projects/routes/project-git.ts`), a strictly different leaf, so the
+    // one probe was answering a question the server never asked. `GIT_VIEW_ACTIONS`
+    // is module-level and stable because the action-list identity is part of the
+    // SDK query key.
+    const cans = useProjectCans(projectId, GIT_VIEW_ACTIONS);
+    const canEdit = cans[PROJECT_ACTIONS.PROJECT_WRITE]?.allowed === true;
+    const canManageMembers = cans[PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE]?.allowed === true;
+    // Managed = Kortix created this repository, so the managed-org admin
+    // credential has repo-admin scope on it. False for a BYO repo and for a
+    // repository on any provider other than GitHub.
+    // The connection row is the truth since repositories moved out of
+    // `metadata.git` (`project_git_connections.managed`); the metadata check
+    // is the fallback for a server that predates the field. Reading metadata
+    // alone said "Kortix did not create this repository" for every managed
+    // repo — the block only holds `seed` and `fast_boot` now.
+    const managed = detail.data?.git_connection?.managed ?? (project ? isManagedGithubProject(project) : false);
+    return (_jsxs("div", { className: "space-y-8", children: [detail.isLoading ? (_jsxs("div", { className: "space-y-5", children: [_jsx(Skeleton, { className: "h-44 rounded-md" }), _jsx(Skeleton, { className: "h-56 rounded-md" })] })) : null, detail.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text6c07047e9e83'), description: detail.error.message, action: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => detail.refetch(), children: [_jsx(RefreshCw, { className: "size-3.5" }), tI18nComplete.raw('text942087cc2d41')] }) })) : null, project ? (_jsxs(_Fragment, { children: [_jsx(RepositoryGroup, { project: project, connection: detail.data?.git_connection, canManage: canEdit }), _jsx(OwnGitClient, { project: project }), _jsx(RepoAccessSection, { projectId: projectId, connection: detail.data?.git_connection, managed: managed, canManageMembers: canManageMembers }), _jsx(LocalSetup, { projectId: projectId })] })) : null] }));
+}

package/dist/customize/sections/view/grant-mode-field.d.ts

@@ -0,0 +1,54 @@
+import type { UiTranslator } from '../../../i18n/index.js';
+import type { AgentGrantSetV2 } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+export type GrantMode = 'all' | 'pick' | 'none';
+/** Summarize a grant set — "All", "None", "3 picked" — for a card header. */
+export declare function grantSummary(v: AgentGrantSetV2 | undefined, tI18nComplete?: UiTranslator): {
+    label: string;
+    tone: 'muted' | 'outline';
+};
+export declare function GrantModeField({ value, onChange, allLabel, noneLabel, alwaysRender, children, }: {
+    value: AgentGrantSetV2 | undefined;
+    onChange: (v: AgentGrantSetV2) => void;
+    allLabel: string;
+    noneLabel: string;
+    /** Render `children` in every mode, not only Pick — for a catalog that
+     *  stays on screen and shows each card as included / excluded. */
+    alwaysRender?: boolean;
+    children: (ctx: {
+        selected: Set<string>;
+        toggle: (id: string) => void;
+        mode: GrantMode;
+    }) => React.ReactNode;
+}): import("react").JSX.Element;
+/** All · Pick · None, with a checklist of the project's declared items when
+ *  in Pick mode. The one governance control reused for skills/connectors/secrets. */
+/** One pickable row: the id the grant stores, and what a person needs to
+ *  recognise it — a name, a second line, a status chip. */
+export interface GrantOption {
+    id: string;
+    label: string;
+    /** A second line under the label — a skill's description, a connector's
+     *  slug, a secret's purpose. */
+    description?: string;
+    /** At the row's right edge — a `Badge` for a connector that needs auth. */
+    trailing?: ReactNode;
+}
+export declare function GrantSetField({ value, onChange, options, emptyLabel, allLabel, rowAccessory, }: {
+    value: AgentGrantSetV2 | undefined;
+    onChange: (v: AgentGrantSetV2) => void;
+    options: GrantOption[];
+    emptyLabel: string;
+    allLabel: string;
+    /** Optional control rendered BESIDE each granted row (e.g. the connectors
+     *  field's "personal" toggle). The row itself is a `<button>`, so an
+     *  interactive accessory cannot be nested inside it — when this returns a
+     *  node the row is wrapped in a flex container and the accessory becomes a
+     *  sibling. Fields that pass nothing render exactly as before. */
+    rowAccessory?: (id: string, isSelected: boolean) => ReactNode;
+}): import("react").JSX.Element;
+/** All · Pick · None over the grouped grantable Kortix permission catalog. */
+export declare function KortixPermissionsField({ value, onChange, }: {
+    value: AgentGrantSetV2 | undefined;
+    onChange: (v: AgentGrantSetV2) => void;
+}): import("react").JSX.Element;