corporateai 0.0.1

package/ui/src/pages/ExecutionWorkspaceDetail.tsx

@@ -0,0 +1,82 @@
+import { Link, useParams } from "@/lib/router";
+import { useQuery } from "@tanstack/react-query";
+import { ExternalLink } from "lucide-react";
+import { executionWorkspacesApi } from "../api/execution-workspaces";
+import { queryKeys } from "../lib/queryKeys";
+
+function isSafeExternalUrl(value: string | null | undefined) {
+  if (!value) return false;
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-3 py-1.5">
+      <div className="w-28 shrink-0 text-xs text-muted-foreground">{label}</div>
+      <div className="min-w-0 flex-1 text-sm">{children}</div>
+    </div>
+  );
+}
+
+export function ExecutionWorkspaceDetail() {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+
+  const { data: workspace, isLoading, error } = useQuery({
+    queryKey: queryKeys.executionWorkspaces.detail(workspaceId!),
+    queryFn: () => executionWorkspacesApi.get(workspaceId!),
+    enabled: Boolean(workspaceId),
+  });
+
+  if (isLoading) return <p className="text-sm text-muted-foreground">Loading...</p>;
+  if (error) return <p className="text-sm text-destructive">{error instanceof Error ? error.message : "Failed to load workspace"}</p>;
+  if (!workspace) return null;
+
+  return (
+    <div className="max-w-2xl space-y-4">
+      <div className="space-y-1">
+        <div className="text-xs text-muted-foreground">Execution workspace</div>
+        <h1 className="text-2xl font-semibold">{workspace.name}</h1>
+        <div className="text-sm text-muted-foreground">
+          {workspace.status} · {workspace.mode} · {workspace.providerType}
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-border p-4">
+        <DetailRow label="Project">
+          {workspace.projectId ? <Link to={`/projects/${workspace.projectId}`} className="hover:underline">{workspace.projectId}</Link> : "None"}
+        </DetailRow>
+        <DetailRow label="Source issue">
+          {workspace.sourceIssueId ? <Link to={`/issues/${workspace.sourceIssueId}`} className="hover:underline">{workspace.sourceIssueId}</Link> : "None"}
+        </DetailRow>
+        <DetailRow label="Branch">{workspace.branchName ?? "None"}</DetailRow>
+        <DetailRow label="Base ref">{workspace.baseRef ?? "None"}</DetailRow>
+        <DetailRow label="Working dir">
+          <span className="break-all font-mono text-xs">{workspace.cwd ?? "None"}</span>
+        </DetailRow>
+        <DetailRow label="Provider ref">
+          <span className="break-all font-mono text-xs">{workspace.providerRef ?? "None"}</span>
+        </DetailRow>
+        <DetailRow label="Repo URL">
+          {workspace.repoUrl && isSafeExternalUrl(workspace.repoUrl) ? (
+            <a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
+              {workspace.repoUrl}
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          ) : workspace.repoUrl ? (
+            <span className="break-all font-mono text-xs">{workspace.repoUrl}</span>
+          ) : "None"}
+        </DetailRow>
+        <DetailRow label="Opened">{new Date(workspace.openedAt).toLocaleString()}</DetailRow>
+        <DetailRow label="Last used">{new Date(workspace.lastUsedAt).toLocaleString()}</DetailRow>
+        <DetailRow label="Cleanup">
+          {workspace.cleanupEligibleAt ? `${new Date(workspace.cleanupEligibleAt).toLocaleString()}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}` : "Not scheduled"}
+        </DetailRow>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/GoalDetail.tsx

@@ -0,0 +1,197 @@
+import { useEffect } from "react";
+import { useParams } from "@/lib/router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { goalsApi } from "../api/goals";
+import { projectsApi } from "../api/projects";
+import { assetsApi } from "../api/assets";
+import { usePanel } from "../context/PanelContext";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { GoalProperties } from "../components/GoalProperties";
+import { GoalTree } from "../components/GoalTree";
+import { StatusBadge } from "../components/StatusBadge";
+import { InlineEditor } from "../components/InlineEditor";
+import { EntityRow } from "../components/EntityRow";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { projectUrl } from "../lib/utils";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Plus } from "lucide-react";
+import type { Goal, Project } from "@corporateai/shared";
+
+export function GoalDetail() {
+  const { goalId } = useParams<{ goalId: string }>();
+  const { selectedCompanyId, setSelectedCompanyId } = useCompany();
+  const { openNewGoal } = useDialog();
+  const { openPanel, closePanel } = usePanel();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const queryClient = useQueryClient();
+
+  const {
+    data: goal,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: queryKeys.goals.detail(goalId!),
+    queryFn: () => goalsApi.get(goalId!),
+    enabled: !!goalId
+  });
+  const resolvedCompanyId = goal?.companyId ?? selectedCompanyId;
+
+  const { data: allGoals } = useQuery({
+    queryKey: queryKeys.goals.list(resolvedCompanyId!),
+    queryFn: () => goalsApi.list(resolvedCompanyId!),
+    enabled: !!resolvedCompanyId
+  });
+
+  const { data: allProjects } = useQuery({
+    queryKey: queryKeys.projects.list(resolvedCompanyId!),
+    queryFn: () => projectsApi.list(resolvedCompanyId!),
+    enabled: !!resolvedCompanyId
+  });
+
+  useEffect(() => {
+    if (!goal?.companyId || goal.companyId === selectedCompanyId) return;
+    setSelectedCompanyId(goal.companyId, { source: "route_sync" });
+  }, [goal?.companyId, selectedCompanyId, setSelectedCompanyId]);
+
+  const updateGoal = useMutation({
+    mutationFn: (data: Record<string, unknown>) =>
+      goalsApi.update(goalId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.goals.detail(goalId!)
+      });
+      if (resolvedCompanyId) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.goals.list(resolvedCompanyId)
+        });
+      }
+    }
+  });
+
+  const uploadImage = useMutation({
+    mutationFn: async (file: File) => {
+      if (!resolvedCompanyId) throw new Error("No company selected");
+      return assetsApi.uploadImage(
+        resolvedCompanyId,
+        file,
+        `goals/${goalId ?? "draft"}`
+      );
+    }
+  });
+
+  const childGoals = (allGoals ?? []).filter((g) => g.parentId === goalId);
+  const linkedProjects = (allProjects ?? []).filter((p) => {
+    if (!goalId) return false;
+    if (p.goalIds.includes(goalId)) return true;
+    if (p.goals.some((goalRef) => goalRef.id === goalId)) return true;
+    return p.goalId === goalId;
+  });
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Goals", href: "/goals" },
+      { label: goal?.title ?? goalId ?? "Goal" }
+    ]);
+  }, [setBreadcrumbs, goal, goalId]);
+
+  useEffect(() => {
+    if (goal) {
+      openPanel(
+        <GoalProperties
+          goal={goal}
+          onUpdate={(data) => updateGoal.mutate(data)}
+        />
+      );
+    }
+    return () => closePanel();
+  }, [goal]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (isLoading) return <PageSkeleton variant="detail" />;
+  if (error) return <p className="text-sm text-destructive">{error.message}</p>;
+  if (!goal) return null;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <span className="text-xs uppercase text-muted-foreground">
+            {goal.level}
+          </span>
+          <StatusBadge status={goal.status} />
+        </div>
+
+        <InlineEditor
+          value={goal.title}
+          onSave={(title) => updateGoal.mutate({ title })}
+          as="h2"
+          className="text-xl font-bold"
+        />
+
+        <InlineEditor
+          value={goal.description ?? ""}
+          onSave={(description) => updateGoal.mutate({ description })}
+          as="p"
+          className="text-sm text-muted-foreground"
+          placeholder="Add a description..."
+          multiline
+          imageUploadHandler={async (file) => {
+            const asset = await uploadImage.mutateAsync(file);
+            return asset.contentPath;
+          }}
+        />
+      </div>
+
+      <Tabs defaultValue="children">
+        <TabsList>
+          <TabsTrigger value="children">
+            Sub-Goals ({childGoals.length})
+          </TabsTrigger>
+          <TabsTrigger value="projects">
+            Projects ({linkedProjects.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="children" className="mt-4 space-y-3">
+          <div className="flex items-center justify-start">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => openNewGoal({ parentId: goalId })}
+            >
+              <Plus className="h-3.5 w-3.5 mr-1.5" />
+              Sub Goal
+            </Button>
+          </div>
+          {childGoals.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No sub-goals.</p>
+          ) : (
+            <GoalTree goals={childGoals} goalLink={(g) => `/goals/${g.id}`} />
+          )}
+        </TabsContent>
+
+        <TabsContent value="projects" className="mt-4">
+          {linkedProjects.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No linked projects.</p>
+          ) : (
+            <div className="border border-border">
+              {linkedProjects.map((project) => (
+                <EntityRow
+                  key={project.id}
+                  title={project.name}
+                  subtitle={project.description ?? undefined}
+                  to={projectUrl(project)}
+                  trailing={<StatusBadge status={project.status} />}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+

package/ui/src/pages/Goals.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { goalsApi } from "../api/goals";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { GoalTree } from "../components/GoalTree";
+import { EmptyState } from "../components/EmptyState";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { Button } from "@/components/ui/button";
+import { Target, Plus } from "lucide-react";
+
+export function Goals() {
+  const { selectedCompanyId } = useCompany();
+  const { openNewGoal } = useDialog();
+  const { setBreadcrumbs } = useBreadcrumbs();
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Goals" }]);
+  }, [setBreadcrumbs]);
+
+  const { data: goals, isLoading, error } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  if (!selectedCompanyId) {
+    return <EmptyState icon={Target} message="Select a company to view goals." />;
+  }
+
+  if (isLoading) {
+    return <PageSkeleton variant="list" />;
+  }
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+
+      {goals && goals.length === 0 && (
+        <EmptyState
+          icon={Target}
+          message="No goals yet."
+          action="Add Goal"
+          onAction={() => openNewGoal()}
+        />
+      )}
+
+      {goals && goals.length > 0 && (
+        <>
+          <div className="flex items-center justify-start">
+            <Button size="sm" variant="outline" onClick={() => openNewGoal()}>
+              <Plus className="h-3.5 w-3.5 mr-1.5" />
+              New Goal
+            </Button>
+          </div>
+          <GoalTree goals={goals} goalLink={(goal) => `/goals/${goal.id}`} />
+        </>
+      )}
+    </div>
+  );
+}