ad494e74ad
- Remove the collision strategy dropdown; always default to "rename" - Add a "Conflicts to resolve" chores list above the package file tree showing each collision with editable rename fields (oldname → newname) - Default rename uses source folder prefix (e.g. gstack-CEO) - Per-item "skip" button that syncs with file tree checkboxes - COMPANY.md defaults to skip when importing to an existing company - Add nameOverrides support to API types and server so user-edited renames are passed through to the import Co-Authored-By: Paperclip <noreply@paperclip.ing>
955 lines
33 KiB
TypeScript
955 lines
33 KiB
TypeScript
import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import type {
|
|
CompanyPortabilityPreviewResult,
|
|
CompanyPortabilitySource,
|
|
} from "@paperclipai/shared";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { useToast } from "../context/ToastContext";
|
|
import { companiesApi } from "../api/companies";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { MarkdownBody } from "../components/MarkdownBody";
|
|
import { Button } from "@/components/ui/button";
|
|
import { EmptyState } from "../components/EmptyState";
|
|
import { cn } from "../lib/utils";
|
|
import {
|
|
ArrowRight,
|
|
Download,
|
|
Github,
|
|
Link2,
|
|
Package,
|
|
Upload,
|
|
} from "lucide-react";
|
|
import { Field } from "../components/agent-config-primitives";
|
|
import {
|
|
type FileTreeNode,
|
|
type FrontmatterData,
|
|
buildFileTree,
|
|
countFiles,
|
|
collectAllPaths,
|
|
parseFrontmatter,
|
|
FRONTMATTER_FIELD_LABELS,
|
|
PackageFileTree,
|
|
} from "../components/PackageFileTree";
|
|
|
|
// ── Import-specific helpers ───────────────────────────────────────────
|
|
|
|
/** Build a map from file path → planned action (create/update/skip) using the manifest + plan */
|
|
function buildActionMap(preview: CompanyPortabilityPreviewResult): Map<string, string> {
|
|
const map = new Map<string, string>();
|
|
const manifest = preview.manifest;
|
|
|
|
for (const ap of preview.plan.agentPlans) {
|
|
const agent = manifest.agents.find((a) => a.slug === ap.slug);
|
|
if (agent) {
|
|
const path = ensureMarkdownPath(agent.path);
|
|
map.set(path, ap.action);
|
|
}
|
|
}
|
|
|
|
for (const pp of preview.plan.projectPlans) {
|
|
const project = manifest.projects.find((p) => p.slug === pp.slug);
|
|
if (project) {
|
|
const path = ensureMarkdownPath(project.path);
|
|
map.set(path, pp.action);
|
|
}
|
|
}
|
|
|
|
for (const ip of preview.plan.issuePlans) {
|
|
const issue = manifest.issues.find((i) => i.slug === ip.slug);
|
|
if (issue) {
|
|
const path = ensureMarkdownPath(issue.path);
|
|
map.set(path, ip.action);
|
|
}
|
|
}
|
|
|
|
for (const skill of manifest.skills) {
|
|
const path = ensureMarkdownPath(skill.path);
|
|
map.set(path, "create");
|
|
// Also mark skill file inventory
|
|
for (const file of skill.fileInventory) {
|
|
if (preview.files[file.path]) {
|
|
map.set(file.path, "create");
|
|
}
|
|
}
|
|
}
|
|
|
|
// Company file
|
|
if (manifest.company) {
|
|
const path = ensureMarkdownPath(manifest.company.path);
|
|
map.set(path, preview.plan.companyAction === "none" ? "skip" : preview.plan.companyAction);
|
|
}
|
|
|
|
return map;
|
|
}
|
|
|
|
function ensureMarkdownPath(p: string): string {
|
|
return p.endsWith(".md") ? p : `${p}.md`;
|
|
}
|
|
|
|
const ACTION_COLORS: Record<string, string> = {
|
|
create: "text-emerald-500 border-emerald-500/30",
|
|
update: "text-amber-500 border-amber-500/30",
|
|
overwrite: "text-red-500 border-red-500/30",
|
|
replace: "text-red-500 border-red-500/30",
|
|
skip: "text-muted-foreground border-border",
|
|
none: "text-muted-foreground border-border",
|
|
};
|
|
|
|
function FrontmatterCard({ data }: { data: FrontmatterData }) {
|
|
return (
|
|
<div className="rounded-md border border-border bg-accent/20 px-4 py-3 mb-4">
|
|
<dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-sm">
|
|
{Object.entries(data).map(([key, value]) => (
|
|
<div key={key} className="contents">
|
|
<dt className="text-muted-foreground whitespace-nowrap py-0.5">
|
|
{FRONTMATTER_FIELD_LABELS[key] ?? key}
|
|
</dt>
|
|
<dd className="py-0.5">
|
|
{Array.isArray(value) ? (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{value.map((item) => (
|
|
<span
|
|
key={item}
|
|
className="inline-flex items-center rounded-md border border-border bg-background px-2 py-0.5 text-xs"
|
|
>
|
|
{item}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span>{value}</span>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Import file tree customization ───────────────────────────────────
|
|
|
|
function renderImportFileExtra(node: FileTreeNode, checked: boolean) {
|
|
if (!node.action) return null;
|
|
const actionColor = ACTION_COLORS[node.action] ?? ACTION_COLORS.skip;
|
|
return (
|
|
<span className={cn(
|
|
"shrink-0 rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-wide",
|
|
actionColor,
|
|
)}>
|
|
{checked ? node.action : "skip"}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function importFileRowClassName(_node: FileTreeNode, checked: boolean) {
|
|
return !checked ? "opacity-50" : undefined;
|
|
}
|
|
|
|
// ── Preview pane ──────────────────────────────────────────────────────
|
|
|
|
function ImportPreviewPane({
|
|
selectedFile,
|
|
content,
|
|
action,
|
|
}: {
|
|
selectedFile: string | null;
|
|
content: string | null;
|
|
action: string | null;
|
|
}) {
|
|
if (!selectedFile || content === null) {
|
|
return (
|
|
<EmptyState icon={Package} message="Select a file to preview its contents." />
|
|
);
|
|
}
|
|
|
|
const isMarkdown = selectedFile.endsWith(".md");
|
|
const parsed = isMarkdown ? parseFrontmatter(content) : null;
|
|
const actionColor = action ? (ACTION_COLORS[action] ?? ACTION_COLORS.skip) : "";
|
|
|
|
return (
|
|
<div className="min-w-0">
|
|
<div className="border-b border-border px-5 py-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="truncate font-mono text-sm">{selectedFile}</div>
|
|
{action && (
|
|
<span className={cn(
|
|
"shrink-0 rounded-full border px-2 py-0.5 text-xs uppercase tracking-wide",
|
|
actionColor,
|
|
)}>
|
|
{action}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="min-h-[560px] px-5 py-5">
|
|
{parsed ? (
|
|
<>
|
|
<FrontmatterCard data={parsed.data} />
|
|
{parsed.body.trim() && <MarkdownBody>{parsed.body}</MarkdownBody>}
|
|
</>
|
|
) : isMarkdown ? (
|
|
<MarkdownBody>{content}</MarkdownBody>
|
|
) : (
|
|
<pre className="overflow-x-auto whitespace-pre-wrap break-words border-0 bg-transparent p-0 font-mono text-sm text-foreground">
|
|
<code>{content}</code>
|
|
</pre>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Conflict item type ───────────────────────────────────────────────
|
|
|
|
interface ConflictItem {
|
|
slug: string;
|
|
kind: "agent" | "project" | "issue" | "company" | "skill";
|
|
originalName: string;
|
|
plannedName: string;
|
|
filePath: string | null;
|
|
action: "rename" | "update";
|
|
}
|
|
|
|
function buildConflictList(
|
|
preview: CompanyPortabilityPreviewResult,
|
|
targetMode: "existing" | "new",
|
|
): ConflictItem[] {
|
|
const conflicts: ConflictItem[] = [];
|
|
const manifest = preview.manifest;
|
|
|
|
// COMPANY.md when importing to existing company
|
|
if (targetMode === "existing" && manifest.company && preview.plan.companyAction === "update") {
|
|
conflicts.push({
|
|
slug: "__company__",
|
|
kind: "company",
|
|
originalName: manifest.company.name,
|
|
plannedName: manifest.company.name,
|
|
filePath: ensureMarkdownPath(manifest.company.path),
|
|
action: "update",
|
|
});
|
|
}
|
|
|
|
// Agents with collisions
|
|
for (const ap of preview.plan.agentPlans) {
|
|
if (ap.existingAgentId) {
|
|
const agent = manifest.agents.find((a) => a.slug === ap.slug);
|
|
conflicts.push({
|
|
slug: ap.slug,
|
|
kind: "agent",
|
|
originalName: agent?.name ?? ap.slug,
|
|
plannedName: ap.plannedName,
|
|
filePath: agent ? ensureMarkdownPath(agent.path) : null,
|
|
action: ap.action === "update" ? "update" : "rename",
|
|
});
|
|
}
|
|
}
|
|
|
|
// Projects with collisions
|
|
for (const pp of preview.plan.projectPlans) {
|
|
if (pp.existingProjectId) {
|
|
const project = manifest.projects.find((p) => p.slug === pp.slug);
|
|
conflicts.push({
|
|
slug: pp.slug,
|
|
kind: "project",
|
|
originalName: project?.name ?? pp.slug,
|
|
plannedName: pp.plannedName,
|
|
filePath: project ? ensureMarkdownPath(project.path) : null,
|
|
action: pp.action === "update" ? "update" : "rename",
|
|
});
|
|
}
|
|
}
|
|
|
|
return conflicts;
|
|
}
|
|
|
|
/** Extract a prefix from the import source URL or local folder name */
|
|
function deriveSourcePrefix(sourceMode: string, importUrl: string, localRootPath: string | null): string | null {
|
|
if (sourceMode === "local" && localRootPath) {
|
|
return localRootPath.split("/").pop() ?? null;
|
|
}
|
|
if (sourceMode === "github" || sourceMode === "url") {
|
|
const url = importUrl.trim();
|
|
if (!url) return null;
|
|
try {
|
|
const pathname = new URL(url.startsWith("http") ? url : `https://${url}`).pathname;
|
|
// For github URLs like /owner/repo/tree/branch/path - take last segment
|
|
const segments = pathname.split("/").filter(Boolean);
|
|
return segments.length > 0 ? segments[segments.length - 1] : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/** Generate a prefix-based rename: e.g. "gstack" + "CEO" → "gstack-CEO" */
|
|
function prefixedName(prefix: string | null, originalName: string): string {
|
|
if (!prefix) return originalName;
|
|
return `${prefix}-${originalName}`;
|
|
}
|
|
|
|
// ── Conflict resolution UI ───────────────────────────────────────────
|
|
|
|
function ConflictResolutionList({
|
|
conflicts,
|
|
nameOverrides,
|
|
skippedSlugs,
|
|
onRename,
|
|
onToggleSkip,
|
|
}: {
|
|
conflicts: ConflictItem[];
|
|
nameOverrides: Record<string, string>;
|
|
skippedSlugs: Set<string>;
|
|
onRename: (slug: string, newName: string) => void;
|
|
onToggleSkip: (slug: string, filePath: string | null) => void;
|
|
}) {
|
|
if (conflicts.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mx-5 mt-3">
|
|
<div className="rounded-md border border-amber-500/30 bg-amber-500/5">
|
|
<div className="flex items-center gap-2 border-b border-amber-500/20 px-4 py-2.5">
|
|
<h3 className="text-sm font-medium text-amber-500">
|
|
Conflicts to resolve
|
|
</h3>
|
|
<span className="text-xs text-amber-500/70">
|
|
{conflicts.length} item{conflicts.length === 1 ? "" : "s"}
|
|
</span>
|
|
</div>
|
|
<div className="divide-y divide-amber-500/10">
|
|
{conflicts.map((item) => {
|
|
const isSkipped = skippedSlugs.has(item.slug);
|
|
const currentName = nameOverrides[item.slug] ?? item.plannedName;
|
|
const kindLabel = item.kind === "company" ? "COMPANY.md" : item.kind;
|
|
return (
|
|
<div
|
|
key={item.slug}
|
|
className={cn(
|
|
"flex items-center gap-3 px-4 py-2.5 text-sm",
|
|
isSkipped && "opacity-50",
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
"shrink-0 rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-wide",
|
|
isSkipped
|
|
? "text-muted-foreground border-border"
|
|
: "text-amber-500 border-amber-500/30",
|
|
)}>
|
|
{kindLabel}
|
|
</span>
|
|
|
|
<span className="shrink-0 font-mono text-xs text-muted-foreground">
|
|
{item.originalName}
|
|
</span>
|
|
|
|
{item.kind !== "company" && !isSkipped && (
|
|
<>
|
|
<ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
|
|
<input
|
|
className="min-w-0 flex-1 rounded-md border border-border bg-transparent px-2 py-1 font-mono text-xs outline-none focus:border-foreground"
|
|
value={currentName}
|
|
onChange={(e) => onRename(item.slug, e.target.value)}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"ml-auto shrink-0 rounded-md border px-2.5 py-1 text-xs transition-colors",
|
|
isSkipped
|
|
? "border-foreground bg-accent text-foreground"
|
|
: "border-border text-muted-foreground hover:bg-accent/50",
|
|
)}
|
|
onClick={() => onToggleSkip(item.slug, item.filePath)}
|
|
>
|
|
{isSkipped ? "skipping" : "skip"}
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────
|
|
|
|
async function readLocalPackageSelection(fileList: FileList): Promise<{
|
|
rootPath: string | null;
|
|
files: Record<string, string>;
|
|
}> {
|
|
const files: Record<string, string> = {};
|
|
let rootPath: string | null = null;
|
|
for (const file of Array.from(fileList)) {
|
|
const relativePath =
|
|
(file as File & { webkitRelativePath?: string }).webkitRelativePath?.replace(
|
|
/\\/g,
|
|
"/",
|
|
) || file.name;
|
|
const isMarkdown = relativePath.endsWith(".md");
|
|
const isPaperclipYaml =
|
|
relativePath.endsWith(".paperclip.yaml") || relativePath.endsWith(".paperclip.yml");
|
|
if (!isMarkdown && !isPaperclipYaml) continue;
|
|
const topLevel = relativePath.split("/")[0] ?? null;
|
|
if (!rootPath && topLevel) rootPath = topLevel;
|
|
files[relativePath] = await file.text();
|
|
}
|
|
if (Object.keys(files).length === 0) {
|
|
throw new Error("No package files were found in the selected folder.");
|
|
}
|
|
return { rootPath, files };
|
|
}
|
|
|
|
// ── Main page ─────────────────────────────────────────────────────────
|
|
|
|
export function CompanyImport() {
|
|
const {
|
|
selectedCompanyId,
|
|
selectedCompany,
|
|
setSelectedCompanyId,
|
|
} = useCompany();
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
const { pushToast } = useToast();
|
|
const queryClient = useQueryClient();
|
|
const packageInputRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
// Source state
|
|
const [sourceMode, setSourceMode] = useState<"github" | "url" | "local">("github");
|
|
const [importUrl, setImportUrl] = useState("");
|
|
const [localPackage, setLocalPackage] = useState<{
|
|
rootPath: string | null;
|
|
files: Record<string, string>;
|
|
} | null>(null);
|
|
|
|
// Target state
|
|
const [targetMode, setTargetMode] = useState<"existing" | "new">("existing");
|
|
const [newCompanyName, setNewCompanyName] = useState("");
|
|
|
|
// Preview state
|
|
const [importPreview, setImportPreview] =
|
|
useState<CompanyPortabilityPreviewResult | null>(null);
|
|
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
|
const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
|
|
const [checkedFiles, setCheckedFiles] = useState<Set<string>>(new Set());
|
|
|
|
// Conflict resolution state
|
|
const [nameOverrides, setNameOverrides] = useState<Record<string, string>>({});
|
|
const [skippedSlugs, setSkippedSlugs] = useState<Set<string>>(new Set());
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([
|
|
{ label: "Org Chart", href: "/org" },
|
|
{ label: "Import" },
|
|
]);
|
|
}, [setBreadcrumbs]);
|
|
|
|
function buildSource(): CompanyPortabilitySource | null {
|
|
if (sourceMode === "local") {
|
|
if (!localPackage) return null;
|
|
return { type: "inline", rootPath: localPackage.rootPath, files: localPackage.files };
|
|
}
|
|
const url = importUrl.trim();
|
|
if (!url) return null;
|
|
if (sourceMode === "github") return { type: "github", url };
|
|
return { type: "url", url };
|
|
}
|
|
|
|
const sourcePrefix = useMemo(
|
|
() => deriveSourcePrefix(sourceMode, importUrl, localPackage?.rootPath ?? null),
|
|
[sourceMode, importUrl, localPackage],
|
|
);
|
|
|
|
// Preview mutation
|
|
const previewMutation = useMutation({
|
|
mutationFn: () => {
|
|
const source = buildSource();
|
|
if (!source) throw new Error("No source configured.");
|
|
return companiesApi.importPreview({
|
|
source,
|
|
include: { company: true, agents: true, projects: true, issues: true },
|
|
target:
|
|
targetMode === "new"
|
|
? { mode: "new_company", newCompanyName: newCompanyName || null }
|
|
: { mode: "existing_company", companyId: selectedCompanyId! },
|
|
collisionStrategy: "rename",
|
|
});
|
|
},
|
|
onSuccess: (result) => {
|
|
setImportPreview(result);
|
|
|
|
// Build conflicts and set default name overrides with prefix
|
|
const conflicts = buildConflictList(result, targetMode);
|
|
const prefix = deriveSourcePrefix(sourceMode, importUrl, localPackage?.rootPath ?? null);
|
|
const defaultOverrides: Record<string, string> = {};
|
|
const defaultSkipped = new Set<string>();
|
|
|
|
for (const c of conflicts) {
|
|
if (c.kind === "company") {
|
|
// COMPANY.md defaults to skip when importing to existing company
|
|
defaultSkipped.add(c.slug);
|
|
} else if (c.action === "rename" && prefix) {
|
|
// Use prefix-based default rename
|
|
defaultOverrides[c.slug] = prefixedName(prefix, c.originalName);
|
|
}
|
|
}
|
|
setNameOverrides(defaultOverrides);
|
|
setSkippedSlugs(defaultSkipped);
|
|
|
|
// Check all files by default, then uncheck skipped conflict files
|
|
const allFiles = new Set(Object.keys(result.files));
|
|
for (const c of conflicts) {
|
|
if (defaultSkipped.has(c.slug) && c.filePath && allFiles.has(c.filePath)) {
|
|
allFiles.delete(c.filePath);
|
|
}
|
|
}
|
|
setCheckedFiles(allFiles);
|
|
|
|
// Expand top-level dirs + all ancestor dirs of files with conflicts (update action)
|
|
const am = buildActionMap(result);
|
|
const tree = buildFileTree(result.files, am);
|
|
const dirsToExpand = new Set<string>();
|
|
for (const node of tree) {
|
|
if (node.kind === "dir") dirsToExpand.add(node.path);
|
|
}
|
|
// Auto-expand directories containing conflicting files so they're visible
|
|
for (const [filePath, action] of am) {
|
|
if (action === "update") {
|
|
const segments = filePath.split("/").filter(Boolean);
|
|
let current = "";
|
|
for (let i = 0; i < segments.length - 1; i++) {
|
|
current = current ? `${current}/${segments[i]}` : segments[i];
|
|
dirsToExpand.add(current);
|
|
}
|
|
}
|
|
}
|
|
setExpandedDirs(dirsToExpand);
|
|
// Select first file
|
|
const firstFile = Object.keys(result.files)[0];
|
|
if (firstFile) setSelectedFile(firstFile);
|
|
},
|
|
onError: (err) => {
|
|
pushToast({
|
|
tone: "error",
|
|
title: "Preview failed",
|
|
body: err instanceof Error ? err.message : "Failed to preview import.",
|
|
});
|
|
},
|
|
});
|
|
|
|
// Build the final nameOverrides to send (only overrides that differ from plannedName)
|
|
function buildFinalNameOverrides(): Record<string, string> | undefined {
|
|
if (!importPreview) return undefined;
|
|
const overrides: Record<string, string> = {};
|
|
for (const [slug, name] of Object.entries(nameOverrides)) {
|
|
if (name.trim()) {
|
|
overrides[slug] = name.trim();
|
|
}
|
|
}
|
|
return Object.keys(overrides).length > 0 ? overrides : undefined;
|
|
}
|
|
|
|
// Apply mutation
|
|
const importMutation = useMutation({
|
|
mutationFn: () => {
|
|
const source = buildSource();
|
|
if (!source) throw new Error("No source configured.");
|
|
return companiesApi.importBundle({
|
|
source,
|
|
include: { company: true, agents: true, projects: true, issues: true },
|
|
target:
|
|
targetMode === "new"
|
|
? { mode: "new_company", newCompanyName: newCompanyName || null }
|
|
: { mode: "existing_company", companyId: selectedCompanyId! },
|
|
collisionStrategy: "rename",
|
|
nameOverrides: buildFinalNameOverrides(),
|
|
});
|
|
},
|
|
onSuccess: async (result) => {
|
|
await queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
|
if (result.company.action === "created") {
|
|
setSelectedCompanyId(result.company.id);
|
|
}
|
|
pushToast({
|
|
tone: "success",
|
|
title: "Import complete",
|
|
body: `${result.company.name}: ${result.agents.length} agent${result.agents.length === 1 ? "" : "s"} processed.`,
|
|
});
|
|
// Reset
|
|
setImportPreview(null);
|
|
setLocalPackage(null);
|
|
setImportUrl("");
|
|
setNameOverrides({});
|
|
setSkippedSlugs(new Set());
|
|
},
|
|
onError: (err) => {
|
|
pushToast({
|
|
tone: "error",
|
|
title: "Import failed",
|
|
body: err instanceof Error ? err.message : "Failed to apply import.",
|
|
});
|
|
},
|
|
});
|
|
|
|
async function handleChooseLocalPackage(e: ChangeEvent<HTMLInputElement>) {
|
|
const fileList = e.target.files;
|
|
if (!fileList || fileList.length === 0) return;
|
|
try {
|
|
const pkg = await readLocalPackageSelection(fileList);
|
|
setLocalPackage(pkg);
|
|
setImportPreview(null);
|
|
} catch (err) {
|
|
pushToast({
|
|
tone: "error",
|
|
title: "Package read failed",
|
|
body: err instanceof Error ? err.message : "Failed to read folder.",
|
|
});
|
|
}
|
|
}
|
|
|
|
const actionMap = useMemo(
|
|
() => (importPreview ? buildActionMap(importPreview) : new Map<string, string>()),
|
|
[importPreview],
|
|
);
|
|
|
|
const tree = useMemo(
|
|
() => (importPreview ? buildFileTree(importPreview.files, actionMap) : []),
|
|
[importPreview, actionMap],
|
|
);
|
|
|
|
const conflicts = useMemo(
|
|
() => (importPreview ? buildConflictList(importPreview, targetMode) : []),
|
|
[importPreview, targetMode],
|
|
);
|
|
|
|
const totalFiles = useMemo(() => countFiles(tree), [tree]);
|
|
const selectedCount = checkedFiles.size;
|
|
|
|
function handleToggleDir(path: string) {
|
|
setExpandedDirs((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(path)) next.delete(path);
|
|
else next.add(path);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function handleToggleCheck(path: string, kind: "file" | "dir") {
|
|
if (!importPreview) return;
|
|
setCheckedFiles((prev) => {
|
|
const next = new Set(prev);
|
|
if (kind === "file") {
|
|
if (next.has(path)) next.delete(path);
|
|
else next.add(path);
|
|
} else {
|
|
const findNode = (nodes: FileTreeNode[], target: string): FileTreeNode | null => {
|
|
for (const n of nodes) {
|
|
if (n.path === target) return n;
|
|
const found = findNode(n.children, target);
|
|
if (found) return found;
|
|
}
|
|
return null;
|
|
};
|
|
const dirNode = findNode(tree, path);
|
|
if (dirNode) {
|
|
const childFiles = collectAllPaths(dirNode.children, "file");
|
|
for (const child of dirNode.children) {
|
|
if (child.kind === "file") childFiles.add(child.path);
|
|
}
|
|
const allChecked = [...childFiles].every((p) => next.has(p));
|
|
for (const f of childFiles) {
|
|
if (allChecked) next.delete(f);
|
|
else next.add(f);
|
|
}
|
|
}
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function handleConflictRename(slug: string, newName: string) {
|
|
setNameOverrides((prev) => ({ ...prev, [slug]: newName }));
|
|
}
|
|
|
|
function handleConflictToggleSkip(slug: string, filePath: string | null) {
|
|
setSkippedSlugs((prev) => {
|
|
const next = new Set(prev);
|
|
const wasSkipped = next.has(slug);
|
|
if (wasSkipped) {
|
|
next.delete(slug);
|
|
} else {
|
|
next.add(slug);
|
|
}
|
|
|
|
// Sync with file tree checkboxes
|
|
if (filePath) {
|
|
setCheckedFiles((prevChecked) => {
|
|
const nextChecked = new Set(prevChecked);
|
|
if (wasSkipped) {
|
|
nextChecked.add(filePath);
|
|
} else {
|
|
nextChecked.delete(filePath);
|
|
}
|
|
return nextChecked;
|
|
});
|
|
}
|
|
|
|
return next;
|
|
});
|
|
}
|
|
|
|
const hasSource =
|
|
sourceMode === "local" ? !!localPackage : importUrl.trim().length > 0;
|
|
const hasErrors = importPreview ? importPreview.errors.length > 0 : false;
|
|
|
|
const previewContent = selectedFile && importPreview
|
|
? (importPreview.files[selectedFile] ?? null)
|
|
: null;
|
|
const selectedAction = selectedFile ? (actionMap.get(selectedFile) ?? null) : null;
|
|
|
|
if (!selectedCompanyId) {
|
|
return <EmptyState icon={Download} message="Select a company to import into." />;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Source form section */}
|
|
<div className="border-b border-border px-5 py-5 space-y-4">
|
|
<div>
|
|
<h2 className="text-base font-semibold">Import source</h2>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Choose a GitHub repo, direct URL, or local folder to import from.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-2 md:grid-cols-3">
|
|
{(
|
|
[
|
|
{ key: "github", icon: Github, label: "GitHub repo" },
|
|
{ key: "url", icon: Link2, label: "Direct URL" },
|
|
{ key: "local", icon: Upload, label: "Local folder" },
|
|
] as const
|
|
).map(({ key, icon: Icon, label }) => (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
className={cn(
|
|
"rounded-md border px-3 py-2 text-left text-sm transition-colors",
|
|
sourceMode === key
|
|
? "border-foreground bg-accent"
|
|
: "border-border hover:bg-accent/50",
|
|
)}
|
|
onClick={() => setSourceMode(key)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Icon className="h-4 w-4" />
|
|
{label}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{sourceMode === "local" ? (
|
|
<div className="rounded-md border border-dashed border-border px-3 py-3">
|
|
<input
|
|
ref={packageInputRef}
|
|
type="file"
|
|
multiple
|
|
className="hidden"
|
|
// @ts-expect-error webkitdirectory is supported by Chromium-based browsers
|
|
webkitdirectory=""
|
|
onChange={handleChooseLocalPackage}
|
|
/>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => packageInputRef.current?.click()}
|
|
>
|
|
Choose folder
|
|
</Button>
|
|
{localPackage && (
|
|
<span className="text-xs text-muted-foreground">
|
|
{localPackage.rootPath ?? "package"} with{" "}
|
|
{Object.keys(localPackage.files).length} file
|
|
{Object.keys(localPackage.files).length === 1 ? "" : "s"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{!localPackage && (
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Select a folder that contains COMPANY.md and any referenced AGENTS.md files.
|
|
</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<Field
|
|
label={sourceMode === "github" ? "GitHub URL" : "Package URL"}
|
|
hint={
|
|
sourceMode === "github"
|
|
? "Repo tree path or blob URL to COMPANY.md (e.g. github.com/owner/repo/tree/main/company)."
|
|
: "Point directly at COMPANY.md or a directory that contains it."
|
|
}
|
|
>
|
|
<input
|
|
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
|
type="text"
|
|
value={importUrl}
|
|
placeholder={
|
|
sourceMode === "github"
|
|
? "https://github.com/owner/repo/tree/main/company"
|
|
: "https://example.com/company/COMPANY.md"
|
|
}
|
|
onChange={(e) => {
|
|
setImportUrl(e.target.value);
|
|
setImportPreview(null);
|
|
}}
|
|
/>
|
|
</Field>
|
|
)}
|
|
|
|
<Field label="Target" hint="Import into this company or create a new one.">
|
|
<select
|
|
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
|
value={targetMode}
|
|
onChange={(e) => {
|
|
setTargetMode(e.target.value as "existing" | "new");
|
|
setImportPreview(null);
|
|
}}
|
|
>
|
|
<option value="existing">
|
|
Existing company: {selectedCompany?.name}
|
|
</option>
|
|
<option value="new">Create new company</option>
|
|
</select>
|
|
</Field>
|
|
|
|
{targetMode === "new" && (
|
|
<Field
|
|
label="New company name"
|
|
hint="Optional override. Leave blank to use the package name."
|
|
>
|
|
<input
|
|
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
|
type="text"
|
|
value={newCompanyName}
|
|
onChange={(e) => setNewCompanyName(e.target.value)}
|
|
placeholder="Imported Company"
|
|
/>
|
|
</Field>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => previewMutation.mutate()}
|
|
disabled={previewMutation.isPending || !hasSource}
|
|
>
|
|
{previewMutation.isPending ? "Previewing..." : "Preview import"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preview results */}
|
|
{importPreview && (
|
|
<>
|
|
{/* Sticky import action bar */}
|
|
<div className="sticky top-0 z-10 border-b border-border bg-background px-5 py-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<span className="font-medium">
|
|
Import preview
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
{selectedCount} / {totalFiles} file{totalFiles === 1 ? "" : "s"} selected
|
|
</span>
|
|
{conflicts.length > 0 && (
|
|
<span className="text-amber-500">
|
|
{conflicts.length} conflict{conflicts.length === 1 ? "" : "s"}
|
|
</span>
|
|
)}
|
|
{importPreview.errors.length > 0 && (
|
|
<span className="text-destructive">
|
|
{importPreview.errors.length} error{importPreview.errors.length === 1 ? "" : "s"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => importMutation.mutate()}
|
|
disabled={importMutation.isPending || hasErrors || selectedCount === 0}
|
|
>
|
|
<Download className="mr-1.5 h-3.5 w-3.5" />
|
|
{importMutation.isPending
|
|
? "Importing..."
|
|
: `Import ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conflict resolution list */}
|
|
<ConflictResolutionList
|
|
conflicts={conflicts}
|
|
nameOverrides={nameOverrides}
|
|
skippedSlugs={skippedSlugs}
|
|
onRename={handleConflictRename}
|
|
onToggleSkip={handleConflictToggleSkip}
|
|
/>
|
|
|
|
{/* Warnings */}
|
|
{importPreview.warnings.length > 0 && (
|
|
<div className="mx-5 mt-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3">
|
|
{importPreview.warnings.map((w) => (
|
|
<div key={w} className="text-xs text-amber-500">{w}</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Errors */}
|
|
{importPreview.errors.length > 0 && (
|
|
<div className="mx-5 mt-3 rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3">
|
|
{importPreview.errors.map((e) => (
|
|
<div key={e} className="text-xs text-destructive">{e}</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Two-column layout */}
|
|
<div className="grid h-[calc(100vh-16rem)] gap-0 xl:grid-cols-[19rem_minmax(0,1fr)]">
|
|
<aside className="flex flex-col border-r border-border overflow-hidden">
|
|
<div className="border-b border-border px-4 py-3 shrink-0">
|
|
<h2 className="text-base font-semibold">Package files</h2>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto">
|
|
<PackageFileTree
|
|
nodes={tree}
|
|
selectedFile={selectedFile}
|
|
expandedDirs={expandedDirs}
|
|
checkedFiles={checkedFiles}
|
|
onToggleDir={handleToggleDir}
|
|
onSelectFile={setSelectedFile}
|
|
onToggleCheck={handleToggleCheck}
|
|
renderFileExtra={renderImportFileExtra}
|
|
fileRowClassName={importFileRowClassName}
|
|
/>
|
|
</div>
|
|
</aside>
|
|
<div className="min-w-0 overflow-y-auto pl-6">
|
|
<ImportPreviewPane
|
|
selectedFile={selectedFile}
|
|
content={previewContent}
|
|
action={selectedAction}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|