feat: add durable AgentOS slice execution

apps/web/src/components/slice-one/slice-one-page.tsx

@@ -17,6 +17,7 @@ import {
   RotateCcw,
   Send,
   Sparkles,
+  Settings,
   X,
 } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
@@ -258,19 +259,61 @@ const WorkCard = ({ onSourceSelect, work, slice }: WorkCardProps) => {
               Build
             </p>
             {latestRun ? (
-              <p className="mt-1 leading-5 text-[#626057]">
-                Run {latestRun.status}:{" "}
-                {latestRun.terminalSummary ??
-                  latestRun.terminalClassification ??
-                  "activity is still arriving"}
-              </p>
+              <div className="mt-1 space-y-2 text-[#626057]">
+                <p className="leading-5">
+                  {latestRun.executionKind === "real"
+                    ? "AgentOS"
+                    : "Simulation"}{" "}
+                  run {latestRun.status}:{" "}
+                  {latestRun.terminalSummary ??
+                    latestRun.terminalClassification ??
+                    "activity is still arriving"}
+                </p>
+                {latestRun.attemptEvents?.slice(-5).map((item) => (
+                  <p
+                    className="border-l-2 border-[#b8c760] pl-2"
+                    key={item._id}
+                  >
+                    {item.message}
+                  </p>
+                ))}
+                {latestRun.baseRevision ? (
+                  <p className="font-mono text-[10px] text-[#747168]">
+                    {latestRun.baseRevision.slice(0, 8)} →{" "}
+                    {latestRun.candidateRevision?.slice(0, 8) ?? "working"}
+                  </p>
+                ) : null}
+                {latestRun.artifacts?.map((artifact) => (
+                  <a
+                    className="block font-medium underline"
+                    href={artifact.uri}
+                    key={artifact._id}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {artifact.title}
+                  </a>
+                ))}
+              </div>
             ) : (
-              <p className="mt-1 text-[#747168]">No simulation Run yet.</p>
+              <p className="mt-1 text-[#747168]">No implementation Run yet.</p>
             )}
             <div className="mt-2 flex flex-wrap gap-2">
               {work.status === "ready" ? (
                 <Button
                   size="sm"
+                  disabled={!slice.projectGitConnection}
+                  onClick={() =>
+                    void slice.startExecution(work._id, design?.slices?.[0]?.id)
+                  }
+                >
+                  <Play className="size-3.5" /> Run
+                </Button>
+              ) : null}
+              {work.status === "ready" ? (
+                <Button
+                  size="sm"
+                  variant="outline"
                   onClick={() =>
                     void slice.startSimulation(
                       work._id,
@@ -286,7 +329,11 @@ const WorkCard = ({ onSourceSelect, work, slice }: WorkCardProps) => {
                 <Button
                   size="sm"
                   variant="outline"
-                  onClick={() => void slice.cancelSimulation(latestRun._id)}
+                  onClick={() =>
+                    void (latestRun.executionKind === "real"
+                      ? slice.cancelExecution(latestRun._id)
+                      : slice.cancelSimulation(latestRun._id))
+                  }
                 >
                   <X className="size-3.5" /> Cancel
                 </Button>
@@ -388,6 +435,10 @@ export const SliceOnePage = () => {
   const attachments = useChatImages();
   const imageInput = useRef<HTMLInputElement>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [giteaUrl, setGiteaUrl] = useState("https://git.openputer.com");
+  const [giteaUsername, setGiteaUsername] = useState("");
+  const [giteaToken, setGiteaToken] = useState("");
   const [highlightedMessageId, setHighlightedMessageId] = useState<string>();
   const highlightTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const works = slice.works ?? EMPTY_WORKS;
@@ -450,7 +501,7 @@ export const SliceOnePage = () => {
       style={viewportStyle}
     >
       <section className="flex min-w-0 flex-1 flex-col">
-        <header className="flex h-14 shrink-0 items-center border-b border-[#d7d3c7] bg-[#faf9f4] px-4">
+        <header className="relative flex h-14 shrink-0 items-center border-b border-[#d7d3c7] bg-[#faf9f4] px-4">
           <div className="min-w-0 flex-1 pr-2">
             <select
               aria-label="Current project"
@@ -468,6 +519,15 @@ export const SliceOnePage = () => {
               Conversation to proposed Work
             </p>
           </div>
+          <Button
+            aria-label="Project settings"
+            className="mr-2 size-9"
+            onClick={() => setSettingsOpen((open) => !open)}
+            size="icon"
+            variant="outline"
+          >
+            <Settings className="size-4" />
+          </Button>
           <button
             className="flex h-9 items-center gap-2 border border-[#c9c5b9] bg-white px-3 text-xs lg:hidden"
             onClick={() => setDrawerOpen(true)}
@@ -476,6 +536,78 @@ export const SliceOnePage = () => {
             <Menu className="size-4" /> Work{" "}
             {slice.works === undefined ? "…" : works.length}
           </button>
+          {settingsOpen ? (
+            <section className="absolute right-4 top-12 z-40 w-[min(92vw,360px)] border border-[#c9c5b9] bg-[#fffefa] p-4 shadow-xl">
+              <div className="flex items-center justify-between">
+                <h2 className="text-sm font-semibold">Project Git</h2>
+                <button
+                  aria-label="Close settings"
+                  onClick={() => setSettingsOpen(false)}
+                  type="button"
+                >
+                  <X className="size-4" />
+                </button>
+              </div>
+              <p className="mt-1 text-xs text-[#747168]">
+                {slice.projectGitConnection
+                  ? `${slice.projectGitConnection.provider} · ${slice.projectGitConnection.serverUrl}`
+                  : "No Git credentials attached"}
+              </p>
+              <div className="mt-4 flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => void slice.authorizeGithub()}
+                >
+                  Authorize GitHub
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={() => void slice.connectLinkedGithub()}
+                >
+                  Use GitHub
+                </Button>
+              </div>
+              <div className="mt-4 space-y-2 border-t border-[#e7e3d9] pt-4">
+                <input
+                  aria-label="Gitea server URL"
+                  className="h-9 w-full border px-2 text-xs"
+                  onChange={(event) => setGiteaUrl(event.target.value)}
+                  value={giteaUrl}
+                />
+                <input
+                  aria-label="Gitea username"
+                  className="h-9 w-full border px-2 text-xs"
+                  onChange={(event) => setGiteaUsername(event.target.value)}
+                  placeholder="Username (optional)"
+                  value={giteaUsername}
+                />
+                <input
+                  aria-label="Gitea access token"
+                  className="h-9 w-full border px-2 text-xs"
+                  onChange={(event) => setGiteaToken(event.target.value)}
+                  placeholder="Personal access token"
+                  type="password"
+                  value={giteaToken}
+                />
+                <Button
+                  className="w-full"
+                  disabled={!giteaToken.trim()}
+                  size="sm"
+                  onClick={() => {
+                    void slice.connectGitea({
+                      serverUrl: giteaUrl,
+                      token: giteaToken,
+                      username: giteaUsername || undefined,
+                    });
+                    setGiteaToken("");
+                  }}
+                >
+                  Connect Gitea
+                </Button>
+              </div>
+            </section>
+          ) : null}
         </header>
         <Conversation className="min-h-0 flex-1">
           <ConversationContent className="mx-auto min-h-full w-full max-w-2xl gap-4 px-4 py-5 sm:px-6">

apps/web/src/hooks/slice-one/use-slice-one.ts

@@ -1,3 +1,4 @@
+import { authClient } from "@code/auth/web";
 import { api } from "@code/backend/convex/_generated/api";
 import type { Id } from "@code/backend/convex/_generated/dataModel";
 import { useAction, useMutation, useQuery } from "convex/react";
@@ -27,6 +28,23 @@ interface WorkRecord {
   readonly designs: readonly unknown[];
   readonly slices: readonly unknown[];
   readonly runs: readonly {
+    readonly artifacts?: readonly {
+      _id: string;
+      kind: string;
+      metadataJson: string;
+      sourceRevision?: string;
+      title: string;
+      uri?: string;
+    }[];
+    readonly attemptEvents?: readonly {
+      _id: string;
+      kind: string;
+      message: string;
+      occurredAt: number;
+    }[];
+    readonly baseRevision?: string;
+    readonly candidateRevision?: string;
+    readonly executionKind?: string;
     _id: Id<"workRuns">;
     status: string;
     terminalClassification?: string;
@@ -96,6 +114,57 @@ const retrySimulationRef = makeFunctionReference<
   { runId: Id<"workRuns"> },
   unknown
 >("workExecution:retrySimulatedExecution");
+const startExecutionRef = makeFunctionReference<
+  "mutation",
+  { workId: Id<"works">; sliceId?: string },
+  unknown
+>("workExecutionWorkflow:startExecution");
+const cancelExecutionRef = makeFunctionReference<
+  "mutation",
+  { runId: Id<"workRuns"> },
+  unknown
+>("workExecutionWorkflow:cancelExecution");
+const listGitConnectionsRef = makeFunctionReference<
+  "query",
+  Record<string, never>,
+  readonly {
+    id: string;
+    provider: "github" | "gitea";
+    serverUrl: string;
+    username?: string;
+  }[]
+>("gitConnectionData:list");
+const projectGitConnectionRef = makeFunctionReference<
+  "query",
+  { projectId: Id<"projects"> },
+  {
+    id: string;
+    provider: "github" | "gitea";
+    serverUrl: string;
+    username?: string;
+  } | null
+>("gitConnectionData:getForProject");
+const connectGiteaRef = makeFunctionReference<
+  "action",
+  { serverUrl: string; token: string; username?: string },
+  { connectionId: Id<"gitConnections"> }
+>("gitConnections:connectGitea");
+const connectGithubRef = makeFunctionReference<
+  "action",
+  Record<string, never>,
+  { connectionId: Id<"gitConnections"> }
+>("gitConnections:connectGithub");
+const attachGitConnectionRef = makeFunctionReference<
+  "mutation",
+  { connectionId: Id<"gitConnections">; projectId: Id<"projects"> },
+  unknown
+>("gitConnectionData:attachToProject");
+
+const authorizeGithub = () =>
+  authClient.signIn.social({
+    callbackURL: window.location.href,
+    provider: "github",
+  });
 
 export const useSliceOne = () => {
   const organization = usePersonalOrganization();
@@ -120,6 +189,14 @@ export const useSliceOne = () => {
     workListRef,
     activeProjectId ? { projectId: activeProjectId } : "skip"
   );
+  const gitConnections = useQuery(
+    listGitConnectionsRef,
+    organization.organizationId ? {} : "skip"
+  );
+  const projectGitConnection = useQuery(
+    projectGitConnectionRef,
+    activeProjectId ? { projectId: activeProjectId } : "skip"
+  );
   const requestDefinitionMutation = useMutation(requestDefinitionRef);
   const saveDefinitionMutation = useMutation(saveDefinitionRef);
   const approveDefinitionMutation = useMutation(approveDefinitionRef);
@@ -128,6 +205,11 @@ export const useSliceOne = () => {
   const startSimulationMutation = useMutation(startSimulationRef);
   const cancelSimulationMutation = useMutation(cancelSimulationRef);
   const retrySimulationMutation = useMutation(retrySimulationRef);
+  const startExecutionMutation = useMutation(startExecutionRef);
+  const cancelExecutionMutation = useMutation(cancelExecutionRef);
+  const attachGitConnectionMutation = useMutation(attachGitConnectionRef);
+  const connectGiteaAction = useAction(connectGiteaRef);
+  const connectGithubAction = useAction(connectGithubRef);
   const selectedProject = useMemo(
     () =>
       projects?.find(
@@ -185,15 +267,46 @@ export const useSliceOne = () => {
     cancelSimulationMutation({ runId });
   const retrySimulation = (runId: Id<"workRuns">) =>
     retrySimulationMutation({ runId });
+  const startExecution = (workId: Id<"works">, sliceId?: string) =>
+    startExecutionMutation({ sliceId, workId });
+  const cancelExecution = (runId: Id<"workRuns">) =>
+    cancelExecutionMutation({ runId });
+  const attachConnection = async (connectionId: Id<"gitConnections">) => {
+    if (!activeProjectId) {
+      throw new Error("Select a project first");
+    }
+    await attachGitConnectionMutation({
+      connectionId,
+      projectId: activeProjectId,
+    });
+  };
+  const connectGitea = async (input: {
+    serverUrl: string;
+    token: string;
+    username?: string;
+  }) => {
+    const result = await connectGiteaAction(input);
+    await attachConnection(result.connectionId);
+  };
+  const connectLinkedGithub = async () => {
+    const result = await connectGithubAction({});
+    await attachConnection(result.connectionId);
+  };
 
   return {
     agent,
     approveDefinition,
     approveDesign,
+    authorizeGithub,
+    cancelExecution,
     cancelSimulation,
+    connectGitea,
+    connectLinkedGithub,
     connectRepository,
     error,
+    gitConnections,
     pending,
+    projectGitConnection,
     projects,
     repository,
     requestDefinition,
@@ -203,6 +316,7 @@ export const useSliceOne = () => {
     selectProject,
     selectedProject,
     setRepository,
+    startExecution,
     startSimulation,
     works,
   } as const;