refactor canonical components and remove slice 1
This commit is contained in:
-Puter
@@ -1,887 +0,0 @@
|
|||||||
import { projectWorkNotices } from "@code/primitives/work";
|
|
||||||
import {
|
|
||||||
Conversation,
|
|
||||||
ConversationContent,
|
|
||||||
} from "@code/ui/components/ai-elements/conversation";
|
|
||||||
import { Button } from "@code/ui/components/button";
|
|
||||||
import {
|
|
||||||
AlertTriangle,
|
|
||||||
ChevronRight,
|
|
||||||
Check,
|
|
||||||
FileCode2,
|
|
||||||
FolderGit2,
|
|
||||||
Hammer,
|
|
||||||
LoaderCircle,
|
|
||||||
Menu,
|
|
||||||
MessageSquareText,
|
|
||||||
ImagePlus,
|
|
||||||
Play,
|
|
||||||
RotateCcw,
|
|
||||||
ScrollText,
|
|
||||||
Send,
|
|
||||||
Sparkles,
|
|
||||||
Settings,
|
|
||||||
X,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useMemo, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { PendingChatAttachments } from "@/components/chat/chat-attachments";
|
|
||||||
import { ChatMessage } from "@/components/chat/chat-message";
|
|
||||||
import { ChatThinkingResponse } from "@/components/chat/chat-thinking-response";
|
|
||||||
import { useChatImages } from "@/hooks/chat/use-chat-images";
|
|
||||||
import { useSliceOne } from "@/hooks/slice-one/use-slice-one";
|
|
||||||
import { useVisualViewportStyle } from "@/hooks/slice-one/use-visual-viewport";
|
|
||||||
import {
|
|
||||||
buildSliceOneTimeline,
|
|
||||||
findSourceMessageTarget,
|
|
||||||
} from "@/lib/slice-one/presentation";
|
|
||||||
|
|
||||||
type SliceWork = NonNullable<ReturnType<typeof useSliceOne>["works"]>[number];
|
|
||||||
const EMPTY_WORKS: readonly SliceWork[] = [];
|
|
||||||
|
|
||||||
type SliceArtifact = NonNullable<
|
|
||||||
NonNullable<SliceWork["runs"][number]["artifacts"]>[number]
|
|
||||||
>;
|
|
||||||
|
|
||||||
interface ArtifactMetadata {
|
|
||||||
readonly changedFiles?: readonly string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const parseArtifactMetadata = (artifact: SliceArtifact): ArtifactMetadata => {
|
|
||||||
if (!artifact.metadataJson) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
return JSON.parse(artifact.metadataJson) as ArtifactMetadata;
|
|
||||||
} catch {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const changedFilesFor = (artifact: SliceArtifact): readonly string[] =>
|
|
||||||
parseArtifactMetadata(artifact).changedFiles ?? [];
|
|
||||||
|
|
||||||
interface WorkCardProps {
|
|
||||||
readonly onSourceSelect: (rawText: string) => void;
|
|
||||||
readonly work: SliceWork;
|
|
||||||
readonly slice: SliceOneState;
|
|
||||||
}
|
|
||||||
|
|
||||||
const starterDefinition = (work: SliceWork) => ({
|
|
||||||
acceptanceCriteria: ["The requested outcome is observable and documented"],
|
|
||||||
affectedUsers: ["Project users"],
|
|
||||||
assumptions: [],
|
|
||||||
constraints: [],
|
|
||||||
desiredOutcome: work.objective,
|
|
||||||
inScope: [work.objective],
|
|
||||||
outOfScope: ["Unrelated product changes"],
|
|
||||||
problem: work.objective,
|
|
||||||
questions: [],
|
|
||||||
requiredArtifacts: ["Simulation activity and terminal outcome"],
|
|
||||||
risk: "medium",
|
|
||||||
});
|
|
||||||
|
|
||||||
const starterDesign = (work: SliceWork) => ({
|
|
||||||
architectureSummary:
|
|
||||||
"Validate the approved Definition, then exercise one deterministic fake slice.",
|
|
||||||
callFlowDelta: [
|
|
||||||
"Work -> Run -> Attempt -> normalized events -> terminal outcome",
|
|
||||||
],
|
|
||||||
concerns: [],
|
|
||||||
evidenceRequirements: ["Terminal Run classification"],
|
|
||||||
fileTreeDelta: [],
|
|
||||||
impactMap: {
|
|
||||||
files: [],
|
|
||||||
modules: [],
|
|
||||||
risks: [],
|
|
||||||
summary: "Compact vertical-slice simulation",
|
|
||||||
},
|
|
||||||
invariants: [
|
|
||||||
"Simulation never claims implementation",
|
|
||||||
"Every Attempt reaches a terminal classification",
|
|
||||||
],
|
|
||||||
keyInterfaces: ["HarnessRuntime", "AttemptOutcome"],
|
|
||||||
slices: [
|
|
||||||
{
|
|
||||||
codeBoundaries: ["workExecution"],
|
|
||||||
dependsOn: [],
|
|
||||||
evidenceRequirements: ["Normalized activity events"],
|
|
||||||
id: "slice-1",
|
|
||||||
objective: work.objective,
|
|
||||||
observableBehavior: "A terminal fake Run is visible",
|
|
||||||
reviewRequired: false,
|
|
||||||
title: "Deterministic simulation",
|
|
||||||
verification: ["Run completes with a terminal classification"],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tradeoffs: ["Fake runtime proves contract before sandbox integration"],
|
|
||||||
});
|
|
||||||
|
|
||||||
// oxlint-disable-next-line complexity -- the expanded card intentionally keeps the three review sections together.
|
|
||||||
const WorkCard = ({ onSourceSelect, work, slice }: WorkCardProps) => {
|
|
||||||
const [sourcesOpen, setSourcesOpen] = useState(false);
|
|
||||||
const [expanded, setExpanded] = useState(false);
|
|
||||||
const [logsOpen, setLogsOpen] = useState(false);
|
|
||||||
const sources = work.signals.flatMap((signal) => signal.sources);
|
|
||||||
const { definition } = work;
|
|
||||||
const { design } = work;
|
|
||||||
const [latestRun] = work.runs;
|
|
||||||
return (
|
|
||||||
<article className="border border-[#d7d3c7] bg-[#fffefa] p-4 text-[#20201d] shadow-[0_10px_30px_rgba(30,30,20,0.06)]">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<span className="grid size-8 shrink-0 place-items-center bg-[#dcff68]">
|
|
||||||
<Sparkles className="size-4" />
|
|
||||||
</span>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p className="text-[10px] font-semibold uppercase text-[#65713a]">
|
|
||||||
Proposed Work
|
|
||||||
</p>
|
|
||||||
<h2 className="mt-1 text-[15px] font-semibold leading-5">
|
|
||||||
{work.title}
|
|
||||||
</h2>
|
|
||||||
<p className="mt-1.5 text-[13px] leading-5 text-[#626057]">
|
|
||||||
{work.objective}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="mt-3 flex w-full items-center justify-between border-t border-[#e7e3d9] pt-3 text-left text-xs text-[#69675e]"
|
|
||||||
onClick={() => setSourcesOpen((open) => !open)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{sources.length} exact source{" "}
|
|
||||||
{sources.length === 1 ? "message" : "messages"}
|
|
||||||
</span>
|
|
||||||
<ChevronRight
|
|
||||||
className={`size-4 transition-transform ${sourcesOpen ? "rotate-90" : ""}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="mt-2 flex w-full items-center justify-between border-t border-[#e7e3d9] pt-3 text-left text-xs font-medium text-[#20201d]"
|
|
||||||
onClick={() => setExpanded((open) => !open)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>{expanded ? "Hide Work details" : "Open Work details"}</span>
|
|
||||||
<ChevronRight
|
|
||||||
className={`size-4 transition-transform ${expanded ? "rotate-90" : ""}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
{sourcesOpen ? (
|
|
||||||
<div className="mt-3 space-y-2">
|
|
||||||
{sources.map((source) => (
|
|
||||||
<button
|
|
||||||
className="flex w-full items-start gap-2 border-l-2 border-[#a8b750] bg-[#f4f2e9] px-3 py-2 text-left text-xs leading-5 hover:bg-[#ece9dd]"
|
|
||||||
key={source.messageId}
|
|
||||||
onClick={() => onSourceSelect(source.rawText)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<MessageSquareText className="mt-1 size-3.5 shrink-0 text-[#65713a]" />
|
|
||||||
<span className="min-w-0 flex-1">{source.rawText}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{expanded ? (
|
|
||||||
<div className="mt-4 space-y-4 border-t border-[#e7e3d9] pt-4 text-xs">
|
|
||||||
<section>
|
|
||||||
<p className="font-semibold uppercase tracking-wide text-[#65713a]">
|
|
||||||
Outcome
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 leading-5 text-[#626057]">{work.objective}</p>
|
|
||||||
<p className="mt-2 text-[#747168]">
|
|
||||||
Risk: {definition?.risk ?? "not defined"}
|
|
||||||
</p>
|
|
||||||
{definition?.questions?.length ? (
|
|
||||||
<p className="mt-1 text-amber-800">
|
|
||||||
{
|
|
||||||
definition.questions.filter(
|
|
||||||
(question) => question.status === "open"
|
|
||||||
).length
|
|
||||||
}{" "}
|
|
||||||
open question(s)
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
<div className="mt-2 flex flex-wrap gap-2">
|
|
||||||
{work.status === "proposed" ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => void slice.requestDefinition(work._id)}
|
|
||||||
>
|
|
||||||
<Sparkles className="size-3.5" /> Define
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
{work.status === "defining" ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() =>
|
|
||||||
void slice.saveDefinition(work._id, starterDefinition(work))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Hammer className="size-3.5" /> Save definition
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
{work.status === "awaiting-definition-approval" &&
|
|
||||||
work.definitionVersion ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() =>
|
|
||||||
void slice.approveDefinition(
|
|
||||||
work._id,
|
|
||||||
work.definitionVersion as number
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Check className="size-3.5" /> Approve
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<p className="font-semibold uppercase tracking-wide text-[#65713a]">
|
|
||||||
Design
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 leading-5 text-[#626057]">
|
|
||||||
{design?.architectureSummary ?? "No Design Packet yet."}
|
|
||||||
</p>
|
|
||||||
{design?.slices?.map((item) => (
|
|
||||||
<p className="mt-1 text-[#747168]" key={item.id}>
|
|
||||||
{item.title}: {item.observableBehavior}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
<div className="mt-2 flex flex-wrap gap-2">
|
|
||||||
{work.status === "designing" ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() =>
|
|
||||||
void slice.saveDesign(work._id, starterDesign(work))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Hammer className="size-3.5" /> Save design
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
{work.status === "awaiting-design-approval" &&
|
|
||||||
work.definitionApprovalVersion &&
|
|
||||||
work.designVersion ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() =>
|
|
||||||
void slice.approveDesign(
|
|
||||||
work._id,
|
|
||||||
work.definitionApprovalVersion as number,
|
|
||||||
work.designVersion as number
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Check className="size-3.5" /> Approve design
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<p className="font-semibold uppercase tracking-wide text-[#65713a]">
|
|
||||||
Build
|
|
||||||
</p>
|
|
||||||
{slice.operationError ? (
|
|
||||||
<p className="mt-2 flex items-start gap-1.5 border border-red-300 bg-red-50 px-2 py-1.5 text-red-800">
|
|
||||||
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
||||||
<span className="min-w-0 flex-1 leading-5">
|
|
||||||
{slice.operationError.message}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
aria-label="Dismiss error"
|
|
||||||
className="shrink-0"
|
|
||||||
onClick={() => slice.clearOperationError()}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<X className="size-3.5" />
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
{latestRun ? (
|
|
||||||
<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.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) => {
|
|
||||||
const changedFiles = changedFilesFor(artifact);
|
|
||||||
return (
|
|
||||||
<div key={artifact._id} className="space-y-1">
|
|
||||||
{artifact.uri ? (
|
|
||||||
<a
|
|
||||||
className="block font-medium underline"
|
|
||||||
href={artifact.uri}
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{artifact.title}
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<p className="font-medium">{artifact.title}</p>
|
|
||||||
)}
|
|
||||||
{changedFiles.length > 0 ? (
|
|
||||||
<ul className="space-y-0.5">
|
|
||||||
{changedFiles.map((file) => (
|
|
||||||
<li
|
|
||||||
className="flex items-start gap-1.5 font-mono text-[11px] leading-5 text-[#747168]"
|
|
||||||
key={file}
|
|
||||||
>
|
|
||||||
<FileCode2 className="mt-0.5 size-3 shrink-0 text-[#9a985f]" />
|
|
||||||
<span className="min-w-0 break-all">{file}</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{latestRun.attemptEvents &&
|
|
||||||
latestRun.attemptEvents.length > 0 ? (
|
|
||||||
<div className="space-y-1">
|
|
||||||
{(logsOpen
|
|
||||||
? latestRun.attemptEvents
|
|
||||||
: latestRun.attemptEvents.slice(-3)
|
|
||||||
).map((item) => (
|
|
||||||
<p
|
|
||||||
className="border-l-2 border-[#b8c760] pl-2 leading-5"
|
|
||||||
key={item._id}
|
|
||||||
>
|
|
||||||
{item.message}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
{latestRun.attemptEvents.length > 3 ? (
|
|
||||||
<button
|
|
||||||
className="flex items-center gap-1 font-medium text-[#65713a] hover:underline"
|
|
||||||
onClick={() => setLogsOpen((open) => !open)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<ScrollText className="size-3.5" />
|
|
||||||
{logsOpen
|
|
||||||
? "Show recent activity"
|
|
||||||
: `Show full activity log (${latestRun.attemptEvents.length})`}
|
|
||||||
<ChevronRight
|
|
||||||
className={`size-3.5 transition-transform ${logsOpen ? "rotate-90" : ""}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<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)}
|
|
||||||
>
|
|
||||||
<Play className="size-3.5" /> Run
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
{work.status === "ready" ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() =>
|
|
||||||
void slice.startSimulation(work._id, "success")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Play className="size-3.5" /> Simulate
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
{latestRun?.status === "running" ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() =>
|
|
||||||
void (latestRun.executionKind === "real"
|
|
||||||
? slice.cancelExecution(latestRun._id)
|
|
||||||
: slice.cancelSimulation(latestRun._id))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<X className="size-3.5" /> Cancel
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
{latestRun?.executionKind !== "real" &&
|
|
||||||
latestRun?.status === "terminal" &&
|
|
||||||
latestRun.terminalClassification === "RetryableFailure" ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => void slice.retrySimulation(latestRun._id)}
|
|
||||||
>
|
|
||||||
<RotateCcw className="size-3.5" /> Retry
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</article>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ConversationLoading = () => (
|
|
||||||
<output
|
|
||||||
aria-label="Loading conversation"
|
|
||||||
className="mx-auto flex min-h-[55vh] w-full max-w-md flex-col justify-center gap-4"
|
|
||||||
>
|
|
||||||
<span className="h-16 w-4/5 animate-pulse rounded-sm bg-[#e3e0d5]" />
|
|
||||||
<span className="ml-auto h-12 w-3/5 animate-pulse rounded-sm bg-[#dedbd0]" />
|
|
||||||
<span className="h-24 w-full animate-pulse rounded-sm bg-[#e3e0d5]" />
|
|
||||||
<span className="sr-only">Loading conversation…</span>
|
|
||||||
</output>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ConversationEmptyState = () => (
|
|
||||||
<div className="grid min-h-[55vh] place-items-center text-center">
|
|
||||||
<div>
|
|
||||||
<MessageSquareText className="mx-auto size-7 text-[#8a887f]" />
|
|
||||||
<h1 className="mt-4 text-xl font-semibold">What should move forward?</h1>
|
|
||||||
<p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-[#69675f]">
|
|
||||||
Describe an outcome or problem. Casual conversation stays conversation.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
type SliceOneState = ReturnType<typeof useSliceOne>;
|
|
||||||
|
|
||||||
const ProjectsLoading = () => (
|
|
||||||
<div className="grid min-h-svh place-items-center bg-[#f2f0e7]">
|
|
||||||
<LoaderCircle className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
const ConnectProject = ({ slice }: { slice: SliceOneState }) => (
|
|
||||||
<main className="grid min-h-svh place-items-center bg-[#f2f0e7] px-5 text-[#20201d]">
|
|
||||||
<form
|
|
||||||
className="w-full max-w-sm"
|
|
||||||
onSubmit={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
void slice.connectRepository();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="grid size-11 place-items-center bg-[#20201d] text-white">
|
|
||||||
<FolderGit2 className="size-5" />
|
|
||||||
</span>
|
|
||||||
<h1 className="mt-6 text-2xl font-semibold">Connect one project</h1>
|
|
||||||
<p className="mt-2 text-sm leading-6 text-[#68665e]">
|
|
||||||
Slice 1 turns actionable conversation into proposed Work with exact
|
|
||||||
provenance.
|
|
||||||
</p>
|
|
||||||
<input
|
|
||||||
aria-label="Public Git repository URL"
|
|
||||||
className="mt-6 h-12 w-full border border-[#c9c5b9] bg-[#fffefa] px-3 text-sm outline-none focus:border-[#55564e]"
|
|
||||||
onChange={(event) => slice.setRepository(event.target.value)}
|
|
||||||
placeholder="https://github.com/owner/repository"
|
|
||||||
required
|
|
||||||
value={slice.repository}
|
|
||||||
/>
|
|
||||||
{slice.error ? (
|
|
||||||
<p className="mt-2 text-xs text-red-700">{slice.error.message}</p>
|
|
||||||
) : null}
|
|
||||||
<Button
|
|
||||||
className="mt-3 h-12 w-full"
|
|
||||||
disabled={slice.pending}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{slice.pending ? (
|
|
||||||
<LoaderCircle className="size-4 animate-spin" />
|
|
||||||
) : null}
|
|
||||||
{slice.pending ? "Connecting" : "Connect project"}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
|
|
||||||
// oxlint-disable-next-line complexity -- this page coordinates the existing mobile shell without owning domain logic.
|
|
||||||
export const SliceOnePage = () => {
|
|
||||||
const slice = useSliceOne();
|
|
||||||
const viewportStyle = useVisualViewportStyle();
|
|
||||||
const [draft, setDraft] = useState("");
|
|
||||||
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;
|
|
||||||
const workById = useMemo(
|
|
||||||
() => new Map(works.map((work) => [String(work._id), work])),
|
|
||||||
[works]
|
|
||||||
);
|
|
||||||
const notices = useMemo(() => projectWorkNotices(works), [works]);
|
|
||||||
const timeline = useMemo(
|
|
||||||
() => buildSliceOneTimeline(slice.agent.messages, notices),
|
|
||||||
[notices, slice.agent.messages]
|
|
||||||
);
|
|
||||||
const busy =
|
|
||||||
slice.agent.status === "submitted" || slice.agent.status === "streaming";
|
|
||||||
|
|
||||||
const revealSourceMessage = (rawText: string) => {
|
|
||||||
const messageId = findSourceMessageTarget(slice.agent.messages, rawText);
|
|
||||||
if (!messageId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setDrawerOpen(false);
|
|
||||||
setHighlightedMessageId(messageId);
|
|
||||||
if (highlightTimer.current) {
|
|
||||||
clearTimeout(highlightTimer.current);
|
|
||||||
}
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
document
|
|
||||||
.querySelector(`#${CSS.escape(`slice-message-${messageId}`)}`)
|
|
||||||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
||||||
});
|
|
||||||
highlightTimer.current = setTimeout(
|
|
||||||
() => setHighlightedMessageId(undefined),
|
|
||||||
1800
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (slice.projects === undefined) {
|
|
||||||
return <ProjectsLoading />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!slice.selectedProject) {
|
|
||||||
return <ConnectProject slice={slice} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const send = async () => {
|
|
||||||
const message = draft.trim();
|
|
||||||
if (!message || busy) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
await slice.agent.sendMessage(message, {
|
|
||||||
images: attachments.images.map((image) => image.file),
|
|
||||||
});
|
|
||||||
setDraft("");
|
|
||||||
attachments.clear();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main
|
|
||||||
className="slice-one-surface fixed inset-x-0 top-0 flex min-h-0 overflow-hidden bg-[#f2f0e7] text-[#20201d]"
|
|
||||||
style={viewportStyle}
|
|
||||||
>
|
|
||||||
<section className="flex min-w-0 flex-1 flex-col">
|
|
||||||
<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"
|
|
||||||
className="block h-7 max-w-full border-0 bg-transparent pr-7 text-sm font-semibold text-[#20201d] outline-none"
|
|
||||||
onChange={(event) => slice.selectProject(event.target.value)}
|
|
||||||
value={slice.selectedProject.id}
|
|
||||||
>
|
|
||||||
{slice.projects.map((project) => (
|
|
||||||
<option key={project.id} value={project.id}>
|
|
||||||
{project.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<p className="text-[10px] uppercase text-[#858277]">
|
|
||||||
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)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
{slice.operationError ? (
|
|
||||||
<p className="mt-2 flex items-start gap-1.5 border border-red-300 bg-red-50 px-2 py-1.5 text-xs text-red-800">
|
|
||||||
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
||||||
<span className="min-w-0 flex-1 leading-5">
|
|
||||||
{slice.operationError.message}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
aria-label="Dismiss error"
|
|
||||||
className="shrink-0"
|
|
||||||
onClick={() => slice.clearOperationError()}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<X className="size-3.5" />
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
<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">
|
|
||||||
{!slice.agent.historyReady && timeline.length === 0 ? (
|
|
||||||
<ConversationLoading />
|
|
||||||
) : null}
|
|
||||||
{slice.agent.historyReady && timeline.length === 0 ? (
|
|
||||||
<ConversationEmptyState />
|
|
||||||
) : null}
|
|
||||||
{timeline.map((item) => {
|
|
||||||
if (item.kind === "work") {
|
|
||||||
const work = workById.get(item.notice.workId);
|
|
||||||
return work ? (
|
|
||||||
<div
|
|
||||||
className="chat-message ml-7"
|
|
||||||
key={`notice-${item.notice.eventId}`}
|
|
||||||
>
|
|
||||||
<p className="mb-2 text-[10px] font-semibold uppercase text-[#65713a]">
|
|
||||||
Work proposed from this conversation
|
|
||||||
</p>
|
|
||||||
<WorkCard
|
|
||||||
onSourceSelect={revealSourceMessage}
|
|
||||||
slice={slice}
|
|
||||||
work={work}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`rounded-sm transition-colors duration-300 ${
|
|
||||||
highlightedMessageId === item.message.id
|
|
||||||
? "bg-[#dcff68]/70 ring-2 ring-[#7f9130] ring-offset-4 ring-offset-[#f2f0e7]"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
id={`slice-message-${item.message.id}`}
|
|
||||||
key={item.message.id}
|
|
||||||
>
|
|
||||||
<ChatMessage message={item.message} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{slice.agent.status === "submitted" ? (
|
|
||||||
<ChatThinkingResponse />
|
|
||||||
) : null}
|
|
||||||
</ConversationContent>
|
|
||||||
</Conversation>
|
|
||||||
<div className="shrink-0 border-t border-[#d7d3c7] bg-[#faf9f4] p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
|
|
||||||
{attachments.images.length > 0 ? (
|
|
||||||
<div className="mx-auto max-w-2xl">
|
|
||||||
<PendingChatAttachments
|
|
||||||
images={attachments.images}
|
|
||||||
onRemove={attachments.handleRemove}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{slice.agent.error ? (
|
|
||||||
<p className="mx-auto mb-2 max-w-2xl text-xs text-red-700">
|
|
||||||
{slice.agent.error.message}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
{attachments.error ? (
|
|
||||||
<p className="mx-auto mb-2 max-w-2xl text-xs text-red-700">
|
|
||||||
{attachments.error}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
<div className="mx-auto flex max-w-2xl items-end gap-2">
|
|
||||||
<input
|
|
||||||
accept="image/*"
|
|
||||||
aria-label="Attach images"
|
|
||||||
className="sr-only"
|
|
||||||
multiple
|
|
||||||
onChange={(event) => {
|
|
||||||
attachments.addFiles(event.target.files);
|
|
||||||
event.target.value = "";
|
|
||||||
}}
|
|
||||||
ref={imageInput}
|
|
||||||
type="file"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
aria-label="Attach images"
|
|
||||||
className="size-11 shrink-0"
|
|
||||||
disabled={busy}
|
|
||||||
onClick={() => imageInput.current?.click()}
|
|
||||||
size="icon"
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
>
|
|
||||||
<ImagePlus className="size-4" />
|
|
||||||
</Button>
|
|
||||||
<textarea
|
|
||||||
aria-label="Message Zopu"
|
|
||||||
className="max-h-32 min-h-11 flex-1 resize-none border border-[#c9c5b9] bg-white px-3 py-2.5 text-sm outline-none focus:border-[#55564e]"
|
|
||||||
disabled={busy}
|
|
||||||
onChange={(event) => setDraft(event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === "Enter" && !event.shiftKey) {
|
|
||||||
event.preventDefault();
|
|
||||||
void send();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="Describe an outcome or problem…"
|
|
||||||
rows={1}
|
|
||||||
value={draft}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
aria-label="Send message"
|
|
||||||
className="size-11 shrink-0"
|
|
||||||
disabled={!draft.trim() || busy}
|
|
||||||
onClick={() => void send()}
|
|
||||||
size="icon"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
{busy ? (
|
|
||||||
<LoaderCircle className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Send className="size-4" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<aside className="hidden w-[380px] shrink-0 overflow-y-auto border-l border-[#d7d3c7] bg-[#e9e7de] p-4 lg:block">
|
|
||||||
<h2 className="text-sm font-semibold">Proposed Work</h2>
|
|
||||||
<p className="mb-4 text-xs text-[#747168]">
|
|
||||||
{works.length} durable outcomes
|
|
||||||
</p>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{works.map((work) => (
|
|
||||||
<WorkCard
|
|
||||||
key={work._id}
|
|
||||||
onSourceSelect={revealSourceMessage}
|
|
||||||
slice={slice}
|
|
||||||
work={work}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
{drawerOpen ? (
|
|
||||||
<div className="fixed inset-0 z-50 bg-black/30 lg:hidden">
|
|
||||||
<button
|
|
||||||
aria-label="Close Work drawer"
|
|
||||||
className="absolute inset-0"
|
|
||||||
onClick={() => setDrawerOpen(false)}
|
|
||||||
type="button"
|
|
||||||
/>
|
|
||||||
<section className="absolute inset-y-0 right-0 flex w-[min(92vw,380px)] flex-col bg-[#e9e7de] shadow-2xl">
|
|
||||||
<header className="flex h-14 items-center border-b border-[#cfcbc0] px-4">
|
|
||||||
<h2 className="flex-1 text-sm font-semibold">Proposed Work</h2>
|
|
||||||
<button
|
|
||||||
aria-label="Close Work drawer"
|
|
||||||
className="grid size-9 place-items-center"
|
|
||||||
onClick={() => setDrawerOpen(false)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<X className="size-4" />
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<div className="flex-1 space-y-3 overflow-y-auto p-4">
|
|
||||||
{works.length === 0 ? (
|
|
||||||
<p className="py-12 text-center text-sm text-[#747168]">
|
|
||||||
Actionable messages will appear here.
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
{works.map((work) => (
|
|
||||||
<WorkCard
|
|
||||||
key={work._id}
|
|
||||||
onSourceSelect={revealSourceMessage}
|
|
||||||
slice={slice}
|
|
||||||
work={work}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
112
apps/web/src/components/workspace/conversation-composer.tsx
Normal file
112
apps/web/src/components/workspace/conversation-composer.tsx
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
import { Button } from "@code/ui/components/button";
|
||||||
|
import { ImagePlus, LoaderCircle, Send } from "lucide-react";
|
||||||
|
import { useRef } from "react";
|
||||||
|
|
||||||
|
import { PendingChatAttachments } from "@/components/chat/chat-attachments";
|
||||||
|
import { useChatImages } from "@/hooks/chat/use-chat-images";
|
||||||
|
import type { WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
export const ConversationComposer = ({
|
||||||
|
draft,
|
||||||
|
onDraftChange,
|
||||||
|
workspace,
|
||||||
|
}: {
|
||||||
|
readonly draft: string;
|
||||||
|
readonly onDraftChange: (draft: string) => void;
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}) => {
|
||||||
|
const imageInput = useRef<HTMLInputElement>(null);
|
||||||
|
const attachments = useChatImages();
|
||||||
|
const busy =
|
||||||
|
workspace.agent.status === "submitted" ||
|
||||||
|
workspace.agent.status === "streaming";
|
||||||
|
|
||||||
|
const send = async () => {
|
||||||
|
const message = draft.trim();
|
||||||
|
if (!message || busy) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await workspace.agent.sendMessage(message, {
|
||||||
|
images: attachments.images.map((image) => image.file),
|
||||||
|
});
|
||||||
|
onDraftChange("");
|
||||||
|
attachments.clear();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="shrink-0 border-t border-[#d7d3c7] bg-[#faf9f4] p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
|
||||||
|
{attachments.images.length > 0 ? (
|
||||||
|
<div className="mx-auto max-w-2xl">
|
||||||
|
<PendingChatAttachments
|
||||||
|
images={attachments.images}
|
||||||
|
onRemove={attachments.handleRemove}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{workspace.agent.error ? (
|
||||||
|
<p className="mx-auto mb-2 max-w-2xl text-xs text-red-700">
|
||||||
|
{workspace.agent.error.message}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{attachments.error ? (
|
||||||
|
<p className="mx-auto mb-2 max-w-2xl text-xs text-red-700">
|
||||||
|
{attachments.error}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
<div className="mx-auto flex max-w-2xl items-end gap-2">
|
||||||
|
<input
|
||||||
|
accept="image/*"
|
||||||
|
aria-label="Attach images"
|
||||||
|
className="sr-only"
|
||||||
|
multiple
|
||||||
|
onChange={(event) => {
|
||||||
|
attachments.addFiles(event.target.files);
|
||||||
|
event.target.value = "";
|
||||||
|
}}
|
||||||
|
ref={imageInput}
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
aria-label="Attach images"
|
||||||
|
className="size-11 shrink-0"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => imageInput.current?.click()}
|
||||||
|
size="icon"
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
<ImagePlus className="size-4" />
|
||||||
|
</Button>
|
||||||
|
<textarea
|
||||||
|
aria-label="Message Zopu"
|
||||||
|
className="max-h-32 min-h-11 flex-1 resize-none border border-[#c9c5b9] bg-white px-3 py-2.5 text-sm outline-none focus:border-[#55564e]"
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(event) => onDraftChange(event.target.value)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === "Enter" && !event.shiftKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
void send();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder="Describe an outcome or problem…"
|
||||||
|
rows={1}
|
||||||
|
value={draft}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
aria-label="Send message"
|
||||||
|
className="size-11 shrink-0"
|
||||||
|
disabled={!draft.trim() || busy}
|
||||||
|
onClick={() => void send()}
|
||||||
|
size="icon"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{busy ? (
|
||||||
|
<LoaderCircle className="size-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Send className="size-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
108
apps/web/src/components/workspace/conversation-feed.tsx
Normal file
108
apps/web/src/components/workspace/conversation-feed.tsx
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
import { projectWorkNotices } from "@code/primitives/work";
|
||||||
|
import {
|
||||||
|
Conversation,
|
||||||
|
ConversationContent,
|
||||||
|
} from "@code/ui/components/ai-elements/conversation";
|
||||||
|
import { MessageSquareText } from "lucide-react";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
import { ChatMessage } from "@/components/chat/chat-message";
|
||||||
|
import { ChatThinkingResponse } from "@/components/chat/chat-thinking-response";
|
||||||
|
import { buildWorkspaceTimeline } from "@/lib/workspace/presentation";
|
||||||
|
import type { WorkRecord, WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
import { WorkCard } from "./work-card";
|
||||||
|
|
||||||
|
const ConversationLoading = () => (
|
||||||
|
<output
|
||||||
|
aria-label="Loading conversation"
|
||||||
|
className="mx-auto flex min-h-[55vh] w-full max-w-md flex-col justify-center gap-4"
|
||||||
|
>
|
||||||
|
<span className="h-16 w-4/5 animate-pulse rounded-sm bg-[#e3e0d5]" />
|
||||||
|
<span className="ml-auto h-12 w-3/5 animate-pulse rounded-sm bg-[#dedbd0]" />
|
||||||
|
<span className="h-24 w-full animate-pulse rounded-sm bg-[#e3e0d5]" />
|
||||||
|
<span className="sr-only">Loading conversation…</span>
|
||||||
|
</output>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ConversationEmptyState = () => (
|
||||||
|
<div className="grid min-h-[55vh] place-items-center text-center">
|
||||||
|
<div>
|
||||||
|
<MessageSquareText className="mx-auto size-7 text-[#8a887f]" />
|
||||||
|
<h1 className="mt-4 text-xl font-semibold">What should move forward?</h1>
|
||||||
|
<p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-[#69675f]">
|
||||||
|
Describe an outcome or problem. Casual conversation stays conversation.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ConversationFeed = ({
|
||||||
|
highlightedMessageId,
|
||||||
|
onSourceSelect,
|
||||||
|
workspace,
|
||||||
|
}: {
|
||||||
|
readonly highlightedMessageId?: string;
|
||||||
|
readonly onSourceSelect: (rawText: string) => void;
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}) => {
|
||||||
|
const works = workspace.works ?? [];
|
||||||
|
const workById = new Map(
|
||||||
|
works.map((work) => [String(work._id), work] as const)
|
||||||
|
);
|
||||||
|
const notices = projectWorkNotices(works);
|
||||||
|
const timeline = useMemo(
|
||||||
|
() => buildWorkspaceTimeline(workspace.agent.messages, notices),
|
||||||
|
[notices, workspace.agent.messages]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
{!workspace.agent.historyReady && timeline.length === 0 ? (
|
||||||
|
<ConversationLoading />
|
||||||
|
) : null}
|
||||||
|
{workspace.agent.historyReady && timeline.length === 0 ? (
|
||||||
|
<ConversationEmptyState />
|
||||||
|
) : null}
|
||||||
|
{timeline.map((item) => {
|
||||||
|
if (item.kind === "work") {
|
||||||
|
const work = workById.get(item.notice.workId) as
|
||||||
|
| WorkRecord
|
||||||
|
| undefined;
|
||||||
|
return work ? (
|
||||||
|
<div
|
||||||
|
className="chat-message ml-7"
|
||||||
|
key={`notice-${item.notice.eventId}`}
|
||||||
|
>
|
||||||
|
<p className="mb-2 text-[10px] font-semibold uppercase text-[#65713a]">
|
||||||
|
Work proposed from this conversation
|
||||||
|
</p>
|
||||||
|
<div className="rounded-sm">
|
||||||
|
<span className="sr-only">Proposed Work</span>
|
||||||
|
<WorkCard
|
||||||
|
onSourceSelect={onSourceSelect}
|
||||||
|
work={work}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-sm transition-colors duration-300 ${highlightedMessageId === item.message.id ? "bg-[#dcff68]/70 ring-2 ring-[#7f9130] ring-offset-4 ring-offset-[#f2f0e7]" : ""}`}
|
||||||
|
id={`workspace-message-${item.message.id}`}
|
||||||
|
key={item.message.id}
|
||||||
|
>
|
||||||
|
<ChatMessage message={item.message} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{workspace.agent.status === "submitted" ? (
|
||||||
|
<ChatThinkingResponse />
|
||||||
|
) : null}
|
||||||
|
</ConversationContent>
|
||||||
|
</Conversation>
|
||||||
|
);
|
||||||
|
};
|
||||||
50
apps/web/src/components/workspace/project-connect-form.tsx
Normal file
50
apps/web/src/components/workspace/project-connect-form.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { Button } from "@code/ui/components/button";
|
||||||
|
import { FolderGit2, LoaderCircle } from "lucide-react";
|
||||||
|
|
||||||
|
import type { WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
export const ProjectConnectForm = ({
|
||||||
|
workspace,
|
||||||
|
}: {
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}) => (
|
||||||
|
<main className="grid min-h-svh place-items-center bg-[#f2f0e7] px-5 text-[#20201d]">
|
||||||
|
<form
|
||||||
|
className="w-full max-w-sm"
|
||||||
|
onSubmit={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
void workspace.connectRepository();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="grid size-11 place-items-center bg-[#20201d] text-white">
|
||||||
|
<FolderGit2 className="size-5" />
|
||||||
|
</span>
|
||||||
|
<h1 className="mt-6 text-2xl font-semibold">Connect a project</h1>
|
||||||
|
<p className="mt-2 text-sm leading-6 text-[#68665e]">
|
||||||
|
Turn actionable project conversation into proposed Work with exact
|
||||||
|
provenance.
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
aria-label="Public Git repository URL"
|
||||||
|
className="mt-6 h-12 w-full border border-[#c9c5b9] bg-[#fffefa] px-3 text-sm outline-none focus:border-[#55564e]"
|
||||||
|
onChange={(event) => workspace.setRepository(event.target.value)}
|
||||||
|
placeholder="https://github.com/owner/repository"
|
||||||
|
required
|
||||||
|
value={workspace.repository}
|
||||||
|
/>
|
||||||
|
{workspace.error ? (
|
||||||
|
<p className="mt-2 text-xs text-red-700">{workspace.error.message}</p>
|
||||||
|
) : null}
|
||||||
|
<Button
|
||||||
|
className="mt-3 h-12 w-full"
|
||||||
|
disabled={workspace.pending}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{workspace.pending ? (
|
||||||
|
<LoaderCircle className="size-4 animate-spin" />
|
||||||
|
) : null}
|
||||||
|
{workspace.pending ? "Connecting" : "Connect project"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
63
apps/web/src/components/workspace/project-header.tsx
Normal file
63
apps/web/src/components/workspace/project-header.tsx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { Button } from "@code/ui/components/button";
|
||||||
|
import { Menu, Settings } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import type { WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
import { ProjectSettingsPanel } from "./project-settings-panel";
|
||||||
|
|
||||||
|
export const ProjectHeader = ({
|
||||||
|
onOpenDrawer,
|
||||||
|
workspace,
|
||||||
|
}: {
|
||||||
|
readonly onOpenDrawer: () => void;
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}) => {
|
||||||
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||||
|
const works = workspace.works ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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"
|
||||||
|
className="block h-7 max-w-full border-0 bg-transparent pr-7 text-sm font-semibold text-[#20201d] outline-none"
|
||||||
|
onChange={(event) => workspace.selectProject(event.target.value)}
|
||||||
|
value={workspace.selectedProject?.id ?? ""}
|
||||||
|
>
|
||||||
|
{(workspace.projects ?? []).map((project) => (
|
||||||
|
<option key={project.id} value={project.id}>
|
||||||
|
{project.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<p className="text-[10px] uppercase text-[#858277]">
|
||||||
|
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={onOpenDrawer}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<Menu className="size-4" /> Work{" "}
|
||||||
|
{workspace.works === undefined ? "…" : works.length}
|
||||||
|
</button>
|
||||||
|
{settingsOpen ? (
|
||||||
|
<ProjectSettingsPanel
|
||||||
|
onClose={() => setSettingsOpen(false)}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
100
apps/web/src/components/workspace/project-settings-panel.tsx
Normal file
100
apps/web/src/components/workspace/project-settings-panel.tsx
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
import { Button } from "@code/ui/components/button";
|
||||||
|
import { AlertTriangle, X } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import type { WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
export const ProjectSettingsPanel = ({
|
||||||
|
onClose,
|
||||||
|
workspace,
|
||||||
|
}: {
|
||||||
|
readonly onClose: () => void;
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}) => {
|
||||||
|
const [serverUrl, setServerUrl] = useState("https://git.openputer.com");
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [token, setToken] = useState("");
|
||||||
|
const handleClearOperationError = () => workspace.clearOperationError();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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={onClose} type="button">
|
||||||
|
<X className="size-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-xs text-[#747168]">
|
||||||
|
{workspace.projectGitConnection
|
||||||
|
? `${workspace.projectGitConnection.provider} · ${workspace.projectGitConnection.serverUrl}`
|
||||||
|
: "No Git credentials attached"}
|
||||||
|
</p>
|
||||||
|
{workspace.operationError ? (
|
||||||
|
<p className="mt-2 flex items-start gap-1.5 border border-red-300 bg-red-50 px-2 py-1.5 text-xs text-red-800">
|
||||||
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
||||||
|
<span className="min-w-0 flex-1 leading-5">
|
||||||
|
{workspace.operationError.message}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-label="Dismiss error"
|
||||||
|
className="shrink-0"
|
||||||
|
onClick={handleClearOperationError}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<X className="size-3.5" />
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
<div className="mt-4 flex gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => void workspace.authorizeGithub()}
|
||||||
|
>
|
||||||
|
Authorize GitHub
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" onClick={() => void workspace.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) => setServerUrl(event.target.value)}
|
||||||
|
value={serverUrl}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
aria-label="Gitea username"
|
||||||
|
className="h-9 w-full border px-2 text-xs"
|
||||||
|
onChange={(event) => setUsername(event.target.value)}
|
||||||
|
placeholder="Username (optional)"
|
||||||
|
value={username}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
aria-label="Gitea access token"
|
||||||
|
className="h-9 w-full border px-2 text-xs"
|
||||||
|
onChange={(event) => setToken(event.target.value)}
|
||||||
|
placeholder="Personal access token"
|
||||||
|
type="password"
|
||||||
|
value={token}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
disabled={!token.trim()}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
void workspace.connectGitea({
|
||||||
|
serverUrl,
|
||||||
|
token,
|
||||||
|
username: username || undefined,
|
||||||
|
});
|
||||||
|
setToken("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Connect Gitea
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
123
apps/web/src/components/workspace/project-workspace-page.tsx
Normal file
123
apps/web/src/components/workspace/project-workspace-page.tsx
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
import { useRef, useState } from "react";
|
||||||
|
|
||||||
|
import { useProjectWorkspace } from "@/hooks/workspace/use-project-workspace";
|
||||||
|
import { useVisualViewportStyle } from "@/hooks/workspace/use-visual-viewport";
|
||||||
|
import { findSourceMessageTarget } from "@/lib/workspace/presentation";
|
||||||
|
|
||||||
|
import { ConversationComposer } from "./conversation-composer";
|
||||||
|
import { ConversationFeed } from "./conversation-feed";
|
||||||
|
import { ProjectConnectForm } from "./project-connect-form";
|
||||||
|
import { ProjectHeader } from "./project-header";
|
||||||
|
import { WorkFeed } from "./work-feed";
|
||||||
|
|
||||||
|
const ProjectLoading = () => (
|
||||||
|
<main className="grid min-h-svh place-items-center bg-[#f2f0e7]">
|
||||||
|
<span className="size-5 animate-spin rounded-full border-2 border-[#20201d] border-t-transparent" />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ProjectWorkspacePage = () => {
|
||||||
|
const workspace = useProjectWorkspace();
|
||||||
|
const viewportStyle = useVisualViewportStyle();
|
||||||
|
const [draft, setDraft] = useState("");
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
|
const [highlightedMessageId, setHighlightedMessageId] = useState<string>();
|
||||||
|
const highlightTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
if (workspace.projects === undefined) {
|
||||||
|
return <ProjectLoading />;
|
||||||
|
}
|
||||||
|
if (!workspace.selectedProject) {
|
||||||
|
return <ProjectConnectForm workspace={workspace} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const works = workspace.works ?? [];
|
||||||
|
const revealSourceMessage = (rawText: string) => {
|
||||||
|
const messageId = findSourceMessageTarget(
|
||||||
|
workspace.agent.messages,
|
||||||
|
rawText
|
||||||
|
);
|
||||||
|
if (!messageId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setDrawerOpen(false);
|
||||||
|
setHighlightedMessageId(messageId);
|
||||||
|
if (highlightTimer.current) {
|
||||||
|
clearTimeout(highlightTimer.current);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(() =>
|
||||||
|
document
|
||||||
|
.querySelector(`#workspace-message-${CSS.escape(messageId)}`)
|
||||||
|
?.scrollIntoView({ behavior: "smooth", block: "center" })
|
||||||
|
);
|
||||||
|
highlightTimer.current = setTimeout(
|
||||||
|
() => setHighlightedMessageId(undefined),
|
||||||
|
1800
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main
|
||||||
|
className="workspace-surface fixed inset-x-0 top-0 flex min-h-0 overflow-hidden bg-[#f2f0e7] text-[#20201d]"
|
||||||
|
style={viewportStyle}
|
||||||
|
>
|
||||||
|
<section className="flex min-w-0 flex-1 flex-col">
|
||||||
|
<ProjectHeader
|
||||||
|
onOpenDrawer={() => setDrawerOpen(true)}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
<ConversationFeed
|
||||||
|
highlightedMessageId={highlightedMessageId}
|
||||||
|
onSourceSelect={revealSourceMessage}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
<ConversationComposer
|
||||||
|
draft={draft}
|
||||||
|
onDraftChange={setDraft}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<aside className="hidden w-[380px] shrink-0 overflow-y-auto border-l border-[#d7d3c7] bg-[#e9e7de] p-4 lg:block">
|
||||||
|
<h2 className="text-sm font-semibold">Proposed Work</h2>
|
||||||
|
<p className="mb-4 text-xs text-[#747168]">
|
||||||
|
{works.length} durable outcomes
|
||||||
|
</p>
|
||||||
|
<WorkFeed
|
||||||
|
onSourceSelect={revealSourceMessage}
|
||||||
|
works={works}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
{drawerOpen ? (
|
||||||
|
<div className="fixed inset-0 z-50 bg-black/30 lg:hidden">
|
||||||
|
<button
|
||||||
|
aria-label="Close Work drawer"
|
||||||
|
className="absolute inset-0"
|
||||||
|
onClick={() => setDrawerOpen(false)}
|
||||||
|
type="button"
|
||||||
|
/>
|
||||||
|
<section className="absolute inset-y-0 right-0 flex w-[min(92vw,380px)] flex-col bg-[#e9e7de] shadow-2xl">
|
||||||
|
<header className="flex h-14 items-center border-b border-[#cfcbc0] px-4">
|
||||||
|
<h2 className="flex-1 text-sm font-semibold">Proposed Work</h2>
|
||||||
|
<button
|
||||||
|
aria-label="Close Work drawer"
|
||||||
|
className="grid size-9 place-items-center"
|
||||||
|
onClick={() => setDrawerOpen(false)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
<WorkFeed
|
||||||
|
onSourceSelect={revealSourceMessage}
|
||||||
|
works={works}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
395
apps/web/src/components/workspace/work-card.tsx
Normal file
395
apps/web/src/components/workspace/work-card.tsx
Normal file
@@ -0,0 +1,395 @@
|
|||||||
|
import { Button } from "@code/ui/components/button";
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
Check,
|
||||||
|
ChevronRight,
|
||||||
|
FileCode2,
|
||||||
|
Hammer,
|
||||||
|
Play,
|
||||||
|
RotateCcw,
|
||||||
|
ScrollText,
|
||||||
|
Sparkles,
|
||||||
|
X,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import { changedFilesFor } from "@/lib/workspace/types";
|
||||||
|
import type { WorkRecord, WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
interface WorkCardProps {
|
||||||
|
readonly onSourceSelect: (rawText: string) => void;
|
||||||
|
readonly work: WorkRecord;
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}
|
||||||
|
|
||||||
|
const starterDefinition = (work: WorkRecord) => ({
|
||||||
|
acceptanceCriteria: ["The requested outcome is observable and documented"],
|
||||||
|
affectedUsers: ["Project users"],
|
||||||
|
assumptions: [],
|
||||||
|
constraints: [],
|
||||||
|
desiredOutcome: work.objective,
|
||||||
|
inScope: [work.objective],
|
||||||
|
outOfScope: ["Unrelated product changes"],
|
||||||
|
problem: work.objective,
|
||||||
|
questions: [],
|
||||||
|
requiredArtifacts: ["Simulation activity and terminal outcome"],
|
||||||
|
risk: "medium",
|
||||||
|
});
|
||||||
|
|
||||||
|
const starterDesign = (work: WorkRecord) => ({
|
||||||
|
architectureSummary:
|
||||||
|
"Validate the approved Definition, then exercise one deterministic fake slice.",
|
||||||
|
callFlowDelta: [
|
||||||
|
"Work -> Run -> Attempt -> normalized events -> terminal outcome",
|
||||||
|
],
|
||||||
|
concerns: [],
|
||||||
|
evidenceRequirements: ["Terminal Run classification"],
|
||||||
|
fileTreeDelta: [],
|
||||||
|
impactMap: {
|
||||||
|
files: [],
|
||||||
|
modules: [],
|
||||||
|
risks: [],
|
||||||
|
summary: "Compact vertical-slice simulation",
|
||||||
|
},
|
||||||
|
invariants: [
|
||||||
|
"Simulation never claims implementation",
|
||||||
|
"Every Attempt reaches a terminal classification",
|
||||||
|
],
|
||||||
|
keyInterfaces: ["HarnessRuntime", "AttemptOutcome"],
|
||||||
|
slices: [
|
||||||
|
{
|
||||||
|
codeBoundaries: ["workExecution"],
|
||||||
|
dependsOn: [],
|
||||||
|
evidenceRequirements: ["Normalized activity events"],
|
||||||
|
id: "deterministic-simulation",
|
||||||
|
objective: work.objective,
|
||||||
|
observableBehavior: "A terminal fake Run is visible",
|
||||||
|
reviewRequired: false,
|
||||||
|
title: "Deterministic simulation",
|
||||||
|
verification: ["Run completes with a terminal classification"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tradeoffs: ["Fake runtime proves contract before sandbox integration"],
|
||||||
|
});
|
||||||
|
|
||||||
|
// oxlint-disable-next-line complexity -- this card intentionally coordinates review actions and run evidence.
|
||||||
|
export const WorkCard = ({
|
||||||
|
onSourceSelect,
|
||||||
|
work,
|
||||||
|
workspace,
|
||||||
|
}: WorkCardProps) => {
|
||||||
|
const [sourcesOpen, setSourcesOpen] = useState(false);
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
const [logsOpen, setLogsOpen] = useState(false);
|
||||||
|
const sources = work.signals.flatMap((signal) => signal.sources);
|
||||||
|
const [latestRun] = work.runs;
|
||||||
|
const openQuestions =
|
||||||
|
work.definition?.questions?.filter((question) => question.status === "open")
|
||||||
|
.length ?? 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article className="border border-[#d7d3c7] bg-[#fffefa] p-4 text-[#20201d] shadow-[0_10px_30px_rgba(30,30,20,0.06)]">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<span className="grid size-8 shrink-0 place-items-center bg-[#dcff68]">
|
||||||
|
<Sparkles className="size-4" />
|
||||||
|
</span>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-[10px] font-semibold uppercase text-[#65713a]">
|
||||||
|
Proposed Work
|
||||||
|
</p>
|
||||||
|
<h2 className="mt-1 text-[15px] font-semibold leading-5">
|
||||||
|
{work.title}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-1.5 text-[13px] leading-5 text-[#626057]">
|
||||||
|
{work.objective}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="mt-3 flex w-full items-center justify-between border-t border-[#e7e3d9] pt-3 text-left text-xs text-[#69675e]"
|
||||||
|
onClick={() => setSourcesOpen((open) => !open)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{sources.length} exact source{" "}
|
||||||
|
{sources.length === 1 ? "message" : "messages"}
|
||||||
|
</span>
|
||||||
|
<ChevronRight
|
||||||
|
className={`size-4 transition-transform ${sourcesOpen ? "rotate-90" : ""}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="mt-2 flex w-full items-center justify-between border-t border-[#e7e3d9] pt-3 text-left text-xs font-medium text-[#20201d]"
|
||||||
|
onClick={() => setExpanded((open) => !open)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>{expanded ? "Hide Work details" : "Open Work details"}</span>
|
||||||
|
<ChevronRight
|
||||||
|
className={`size-4 transition-transform ${expanded ? "rotate-90" : ""}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
{sourcesOpen ? (
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
{sources.map((source) => (
|
||||||
|
<button
|
||||||
|
className="flex w-full items-start gap-2 border-l-2 border-[#a8b750] bg-[#f4f2e9] px-3 py-2 text-left text-xs leading-5 hover:bg-[#ece9dd]"
|
||||||
|
key={source.messageId}
|
||||||
|
onClick={() => onSourceSelect(source.rawText)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span className="min-w-0 flex-1">{source.rawText}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{expanded ? (
|
||||||
|
<div className="mt-4 space-y-4 border-t border-[#e7e3d9] pt-4 text-xs">
|
||||||
|
<section>
|
||||||
|
<p className="font-semibold uppercase tracking-wide text-[#65713a]">
|
||||||
|
Outcome
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 leading-5 text-[#626057]">{work.objective}</p>
|
||||||
|
<p className="mt-2 text-[#747168]">
|
||||||
|
Risk: {work.definition?.risk ?? "not defined"}
|
||||||
|
</p>
|
||||||
|
{openQuestions > 0 ? (
|
||||||
|
<p className="mt-1 text-amber-800">
|
||||||
|
{openQuestions} open question(s)
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
<div className="mt-2 flex flex-wrap gap-2">
|
||||||
|
{work.status === "proposed" ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => void workspace.requestDefinition(work._id)}
|
||||||
|
>
|
||||||
|
<Sparkles className="size-3.5" /> Define
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
{work.status === "defining" ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() =>
|
||||||
|
void workspace.saveDefinition(
|
||||||
|
work._id,
|
||||||
|
starterDefinition(work)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Hammer className="size-3.5" /> Save definition
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
{work.status === "awaiting-definition-approval" &&
|
||||||
|
work.definitionVersion ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
void workspace.approveDefinition(
|
||||||
|
work._id,
|
||||||
|
work.definitionVersion as number
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Check className="size-3.5" /> Approve
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p className="font-semibold uppercase tracking-wide text-[#65713a]">
|
||||||
|
Design
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 leading-5 text-[#626057]">
|
||||||
|
{work.design?.architectureSummary ?? "No Design Packet yet."}
|
||||||
|
</p>
|
||||||
|
{work.design?.slices?.map((item) => (
|
||||||
|
<p className="mt-1 text-[#747168]" key={item.id}>
|
||||||
|
{item.title}: {item.observableBehavior}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
<div className="mt-2 flex flex-wrap gap-2">
|
||||||
|
{work.status === "designing" ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() =>
|
||||||
|
void workspace.saveDesign(work._id, starterDesign(work))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Hammer className="size-3.5" /> Save design
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
{work.status === "awaiting-design-approval" &&
|
||||||
|
work.definitionApprovalVersion &&
|
||||||
|
work.designVersion ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
void workspace.approveDesign(
|
||||||
|
work._id,
|
||||||
|
work.definitionApprovalVersion as number,
|
||||||
|
work.designVersion as number
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Check className="size-3.5" /> Approve design
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p className="font-semibold uppercase tracking-wide text-[#65713a]">
|
||||||
|
Build
|
||||||
|
</p>
|
||||||
|
{workspace.operationError ? (
|
||||||
|
<p className="mt-2 flex items-start gap-1.5 border border-red-300 bg-red-50 px-2 py-1.5 text-red-800">
|
||||||
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
||||||
|
<span className="min-w-0 flex-1 leading-5">
|
||||||
|
{workspace.operationError.message}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-label="Dismiss error"
|
||||||
|
className="shrink-0"
|
||||||
|
onClick={() => workspace.clearOperationError()}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<X className="size-3.5" />
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{latestRun ? (
|
||||||
|
<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.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) => (
|
||||||
|
<div key={artifact._id} className="space-y-1">
|
||||||
|
<p className="font-medium">
|
||||||
|
{artifact.uri ? (
|
||||||
|
<a
|
||||||
|
className="underline"
|
||||||
|
href={artifact.uri}
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{artifact.title}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
artifact.title
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{changedFilesFor(artifact).length > 0 ? (
|
||||||
|
<ul className="space-y-0.5">
|
||||||
|
{changedFilesFor(artifact).map((file) => (
|
||||||
|
<li
|
||||||
|
className="flex items-start gap-1.5 font-mono text-[11px] leading-5 text-[#747168]"
|
||||||
|
key={file}
|
||||||
|
>
|
||||||
|
<FileCode2 className="mt-0.5 size-3 shrink-0 text-[#9a985f]" />
|
||||||
|
<span className="min-w-0 break-all">{file}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{latestRun.attemptEvents &&
|
||||||
|
latestRun.attemptEvents.length > 0 ? (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{(logsOpen
|
||||||
|
? latestRun.attemptEvents
|
||||||
|
: latestRun.attemptEvents.slice(-3)
|
||||||
|
).map((item) => (
|
||||||
|
<p
|
||||||
|
className="border-l-2 border-[#b8c760] pl-2 leading-5"
|
||||||
|
key={item._id}
|
||||||
|
>
|
||||||
|
{item.message}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
{latestRun.attemptEvents.length > 3 ? (
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1 font-medium text-[#65713a] hover:underline"
|
||||||
|
onClick={() => setLogsOpen((open) => !open)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<ScrollText className="size-3.5" />
|
||||||
|
{logsOpen
|
||||||
|
? "Show recent activity"
|
||||||
|
: `Show full activity log (${latestRun.attemptEvents.length})`}
|
||||||
|
<ChevronRight
|
||||||
|
className={`size-3.5 transition-transform ${logsOpen ? "rotate-90" : ""}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<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={!workspace.projectGitConnection}
|
||||||
|
onClick={() => void workspace.startExecution(work._id)}
|
||||||
|
>
|
||||||
|
<Play className="size-3.5" /> Run
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() =>
|
||||||
|
void workspace.startSimulation(work._id, "success")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Play className="size-3.5" /> Simulate
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
{latestRun?.status === "running" ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() =>
|
||||||
|
void (latestRun.executionKind === "real"
|
||||||
|
? workspace.cancelExecution(latestRun._id)
|
||||||
|
: workspace.cancelSimulation(latestRun._id))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<X className="size-3.5" /> Cancel
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
{latestRun?.executionKind !== "real" &&
|
||||||
|
latestRun?.status === "terminal" &&
|
||||||
|
latestRun.terminalClassification === "RetryableFailure" ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => void workspace.retrySimulation(latestRun._id)}
|
||||||
|
>
|
||||||
|
<RotateCcw className="size-3.5" /> Retry
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
};
|
||||||
29
apps/web/src/components/workspace/work-feed.tsx
Normal file
29
apps/web/src/components/workspace/work-feed.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import type { WorkRecord, WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
|
import { WorkCard } from "./work-card";
|
||||||
|
|
||||||
|
export const WorkFeed = ({
|
||||||
|
onSourceSelect,
|
||||||
|
works,
|
||||||
|
workspace,
|
||||||
|
}: {
|
||||||
|
readonly onSourceSelect: (rawText: string) => void;
|
||||||
|
readonly works: readonly WorkRecord[];
|
||||||
|
readonly workspace: WorkspaceState;
|
||||||
|
}) => (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{works.length === 0 ? (
|
||||||
|
<p className="py-12 text-center text-sm text-[#747168]">
|
||||||
|
Actionable messages will appear here.
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{works.map((work) => (
|
||||||
|
<WorkCard
|
||||||
|
key={work._id}
|
||||||
|
onSourceSelect={onSourceSelect}
|
||||||
|
work={work}
|
||||||
|
workspace={workspace}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -7,60 +7,17 @@ import { useMemo, useState } from "react";
|
|||||||
|
|
||||||
import { useOrganizationChatAgent } from "@/hooks/chat/use-chat-agent";
|
import { useOrganizationChatAgent } from "@/hooks/chat/use-chat-agent";
|
||||||
import { usePersonalOrganization } from "@/hooks/use-personal-organization";
|
import { usePersonalOrganization } from "@/hooks/use-personal-organization";
|
||||||
|
import type { WorkRecord, WorkspaceState } from "@/lib/workspace/types";
|
||||||
|
|
||||||
const toError = (error: unknown) =>
|
const toError = (error: unknown) =>
|
||||||
error instanceof Error ? error : new Error(String(error));
|
error instanceof Error ? error : new Error(String(error));
|
||||||
|
|
||||||
interface WorkRecord {
|
type ExecutionScenario =
|
||||||
readonly _id: Id<"works">;
|
| "success"
|
||||||
readonly title: string;
|
| "transient-failure-then-success"
|
||||||
readonly objective: string;
|
| "needs-input"
|
||||||
readonly status: string;
|
| "permanent-failure"
|
||||||
readonly definitionVersion?: number;
|
| "cancelled";
|
||||||
readonly definitionApprovalVersion?: number;
|
|
||||||
readonly designVersion?: number;
|
|
||||||
readonly designApprovalVersion?: number;
|
|
||||||
readonly signals: readonly {
|
|
||||||
sources: readonly { messageId: string; rawText: string }[];
|
|
||||||
}[];
|
|
||||||
readonly events: readonly { _id: string; createdAt: number; kind: string }[];
|
|
||||||
readonly definitions: readonly unknown[];
|
|
||||||
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;
|
|
||||||
metadataJson: string;
|
|
||||||
occurredAt: number;
|
|
||||||
sequence: number;
|
|
||||||
}[];
|
|
||||||
readonly baseRevision?: string;
|
|
||||||
readonly candidateRevision?: string;
|
|
||||||
readonly executionKind?: string;
|
|
||||||
_id: Id<"workRuns">;
|
|
||||||
status: string;
|
|
||||||
terminalClassification?: string;
|
|
||||||
terminalSummary?: string;
|
|
||||||
}[];
|
|
||||||
readonly definition: {
|
|
||||||
risk?: string;
|
|
||||||
questions?: { status: string }[];
|
|
||||||
} | null;
|
|
||||||
readonly design: {
|
|
||||||
architectureSummary?: string;
|
|
||||||
slices?: { id: string; title: string; observableBehavior: string }[];
|
|
||||||
} | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const workListRef = makeFunctionReference<
|
const workListRef = makeFunctionReference<
|
||||||
"query",
|
"query",
|
||||||
@@ -94,16 +51,7 @@ const approveDesignRef = makeFunctionReference<
|
|||||||
>("workPlanning:approveDesign");
|
>("workPlanning:approveDesign");
|
||||||
const startSimulationRef = makeFunctionReference<
|
const startSimulationRef = makeFunctionReference<
|
||||||
"mutation",
|
"mutation",
|
||||||
{
|
{ workId: Id<"works">; scenario: ExecutionScenario; sliceId?: string },
|
||||||
workId: Id<"works">;
|
|
||||||
scenario:
|
|
||||||
| "success"
|
|
||||||
| "transient-failure-then-success"
|
|
||||||
| "needs-input"
|
|
||||||
| "permanent-failure"
|
|
||||||
| "cancelled";
|
|
||||||
sliceId?: string;
|
|
||||||
},
|
|
||||||
unknown
|
unknown
|
||||||
>("workExecution:startSimulatedExecution");
|
>("workExecution:startSimulatedExecution");
|
||||||
const cancelSimulationRef = makeFunctionReference<
|
const cancelSimulationRef = makeFunctionReference<
|
||||||
@@ -162,13 +110,7 @@ const attachGitConnectionRef = makeFunctionReference<
|
|||||||
unknown
|
unknown
|
||||||
>("gitConnectionData:attachToProject");
|
>("gitConnectionData:attachToProject");
|
||||||
|
|
||||||
const authorizeGithub = () =>
|
export const useProjectWorkspace = (): WorkspaceState => {
|
||||||
authClient.signIn.social({
|
|
||||||
callbackURL: window.location.href,
|
|
||||||
provider: "github",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const useSliceOne = () => {
|
|
||||||
const organization = usePersonalOrganization();
|
const organization = usePersonalOrganization();
|
||||||
const projects = useQuery(
|
const projects = useQuery(
|
||||||
api.projects.list,
|
api.projects.list,
|
||||||
@@ -182,19 +124,7 @@ export const useSliceOne = () => {
|
|||||||
const [pending, setPending] = useState(false);
|
const [pending, setPending] = useState(false);
|
||||||
const [error, setError] = useState<Error>();
|
const [error, setError] = useState<Error>();
|
||||||
const [operationError, setOperationError] = useState<Error>();
|
const [operationError, setOperationError] = useState<Error>();
|
||||||
const captureOperationError =
|
|
||||||
<TArgs extends unknown[], TResult>(
|
|
||||||
operation: (...args: TArgs) => Promise<TResult>
|
|
||||||
) =>
|
|
||||||
async (...args: TArgs): Promise<TResult> => {
|
|
||||||
setOperationError(undefined);
|
|
||||||
try {
|
|
||||||
return await operation(...args);
|
|
||||||
} catch (caughtError) {
|
|
||||||
setOperationError(toError(caughtError));
|
|
||||||
throw caughtError;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const selectedProjectStillExists = projects?.some(
|
const selectedProjectStillExists = projects?.some(
|
||||||
(project) => project.id === (selectedProjectId as unknown as string)
|
(project) => project.id === (selectedProjectId as unknown as string)
|
||||||
);
|
);
|
||||||
@@ -234,6 +164,16 @@ export const useSliceOne = () => {
|
|||||||
[activeProjectId, projects]
|
[activeProjectId, projects]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const runOperation = async <T>(operation: () => Promise<T>): Promise<T> => {
|
||||||
|
setOperationError(undefined);
|
||||||
|
try {
|
||||||
|
return await operation();
|
||||||
|
} catch (caughtError) {
|
||||||
|
setOperationError(toError(caughtError));
|
||||||
|
throw caughtError;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const connectRepository = async () => {
|
const connectRepository = async () => {
|
||||||
const repositoryUrl = repository.trim();
|
const repositoryUrl = repository.trim();
|
||||||
if (!repositoryUrl || pending) {
|
if (!repositoryUrl || pending) {
|
||||||
@@ -252,44 +192,6 @@ export const useSliceOne = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectProject = (projectId: string) => {
|
|
||||||
setSelectedProjectId(projectId as unknown as Id<"projects">);
|
|
||||||
};
|
|
||||||
|
|
||||||
const requestDefinition = (workId: Id<"works">) =>
|
|
||||||
requestDefinitionMutation({ workId });
|
|
||||||
const saveDefinition = (workId: Id<"works">, payload: unknown) =>
|
|
||||||
saveDefinitionMutation({ payloadJson: JSON.stringify(payload), workId });
|
|
||||||
const approveDefinition = (workId: Id<"works">, version: number) =>
|
|
||||||
approveDefinitionMutation({ version, workId });
|
|
||||||
const saveDesign = (workId: Id<"works">, payload: unknown) =>
|
|
||||||
saveDesignMutation({ payloadJson: JSON.stringify(payload), workId });
|
|
||||||
const approveDesign = (
|
|
||||||
workId: Id<"works">,
|
|
||||||
definitionVersion: number,
|
|
||||||
designVersion: number
|
|
||||||
) => approveDesignMutation({ definitionVersion, designVersion, workId });
|
|
||||||
const startSimulation = (
|
|
||||||
workId: Id<"works">,
|
|
||||||
scenario:
|
|
||||||
| "success"
|
|
||||||
| "transient-failure-then-success"
|
|
||||||
| "needs-input"
|
|
||||||
| "permanent-failure"
|
|
||||||
| "cancelled",
|
|
||||||
sliceId?: string
|
|
||||||
) =>
|
|
||||||
captureOperationError(() =>
|
|
||||||
startSimulationMutation({ scenario, sliceId, workId })
|
|
||||||
)();
|
|
||||||
const cancelSimulation = (runId: Id<"workRuns">) =>
|
|
||||||
captureOperationError(() => cancelSimulationMutation({ runId }))();
|
|
||||||
const retrySimulation = (runId: Id<"workRuns">) =>
|
|
||||||
captureOperationError(() => retrySimulationMutation({ runId }))();
|
|
||||||
const startExecution = (workId: Id<"works">, sliceId?: string) =>
|
|
||||||
captureOperationError(() => startExecutionMutation({ sliceId, workId }))();
|
|
||||||
const cancelExecution = (runId: Id<"workRuns">) =>
|
|
||||||
captureOperationError(() => cancelExecutionMutation({ runId }))();
|
|
||||||
const attachConnection = async (connectionId: Id<"gitConnections">) => {
|
const attachConnection = async (connectionId: Id<"gitConnections">) => {
|
||||||
if (!activeProjectId) {
|
if (!activeProjectId) {
|
||||||
throw new Error("Select a project first");
|
throw new Error("Select a project first");
|
||||||
@@ -299,24 +201,41 @@ export const useSliceOne = () => {
|
|||||||
projectId: activeProjectId,
|
projectId: activeProjectId,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const connectGitea = captureOperationError(
|
|
||||||
async (input: { serverUrl: string; token: string; username?: string }) => {
|
const connectGitea = (input: {
|
||||||
|
serverUrl: string;
|
||||||
|
token: string;
|
||||||
|
username?: string;
|
||||||
|
}) =>
|
||||||
|
runOperation(async () => {
|
||||||
const result = await connectGiteaAction(input);
|
const result = await connectGiteaAction(input);
|
||||||
await attachConnection(result.connectionId);
|
await attachConnection(result.connectionId);
|
||||||
}
|
});
|
||||||
);
|
|
||||||
const connectLinkedGithub = captureOperationError(async () => {
|
const connectLinkedGithub = () =>
|
||||||
const result = await connectGithubAction({});
|
runOperation(async () => {
|
||||||
await attachConnection(result.connectionId);
|
const result = await connectGithubAction({});
|
||||||
});
|
await attachConnection(result.connectionId);
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
agent,
|
agent,
|
||||||
approveDefinition,
|
approveDefinition: (workId: Id<"works">, version: number) =>
|
||||||
approveDesign,
|
approveDefinitionMutation({ version, workId }),
|
||||||
authorizeGithub,
|
approveDesign: (
|
||||||
cancelExecution,
|
workId: Id<"works">,
|
||||||
cancelSimulation,
|
definitionVersion: number,
|
||||||
|
designVersion: number
|
||||||
|
) => approveDesignMutation({ definitionVersion, designVersion, workId }),
|
||||||
|
authorizeGithub: () =>
|
||||||
|
authClient.signIn.social({
|
||||||
|
callbackURL: window.location.href,
|
||||||
|
provider: "github",
|
||||||
|
}),
|
||||||
|
cancelExecution: (runId: Id<"workRuns">) =>
|
||||||
|
runOperation(() => cancelExecutionMutation({ runId })),
|
||||||
|
cancelSimulation: (runId: Id<"workRuns">) =>
|
||||||
|
runOperation(() => cancelSimulationMutation({ runId })),
|
||||||
clearOperationError: () => setOperationError(undefined),
|
clearOperationError: () => setOperationError(undefined),
|
||||||
connectGitea,
|
connectGitea,
|
||||||
connectLinkedGithub,
|
connectLinkedGithub,
|
||||||
@@ -328,15 +247,30 @@ export const useSliceOne = () => {
|
|||||||
projectGitConnection,
|
projectGitConnection,
|
||||||
projects,
|
projects,
|
||||||
repository,
|
repository,
|
||||||
requestDefinition,
|
requestDefinition: (workId: Id<"works">) =>
|
||||||
retrySimulation,
|
requestDefinitionMutation({ workId }),
|
||||||
saveDefinition,
|
retrySimulation: (runId: Id<"workRuns">) =>
|
||||||
saveDesign,
|
runOperation(() => retrySimulationMutation({ runId })),
|
||||||
selectProject,
|
saveDefinition: (workId: Id<"works">, payload: unknown) =>
|
||||||
selectedProject,
|
saveDefinitionMutation({ payloadJson: JSON.stringify(payload), workId }),
|
||||||
|
saveDesign: (workId: Id<"works">, payload: unknown) =>
|
||||||
|
saveDesignMutation({ payloadJson: JSON.stringify(payload), workId }),
|
||||||
|
selectProject: (projectId: string) =>
|
||||||
|
setSelectedProjectId(projectId as unknown as Id<"projects">),
|
||||||
|
selectedProject: selectedProject
|
||||||
|
? { id: selectedProject.id, name: selectedProject.name }
|
||||||
|
: null,
|
||||||
setRepository,
|
setRepository,
|
||||||
startExecution,
|
startExecution: (workId: Id<"works">, sliceId?: string) =>
|
||||||
startSimulation,
|
runOperation(() => startExecutionMutation({ sliceId, workId })),
|
||||||
|
startSimulation: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
scenario: ExecutionScenario,
|
||||||
|
sliceId?: string
|
||||||
|
) =>
|
||||||
|
runOperation(() =>
|
||||||
|
startSimulationMutation({ scenario, sliceId, workId })
|
||||||
|
),
|
||||||
works,
|
works,
|
||||||
} as const;
|
};
|
||||||
};
|
};
|
||||||
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
|
|||||||
|
|
||||||
import { visualViewportStyle } from "./use-visual-viewport";
|
import { visualViewportStyle } from "./use-visual-viewport";
|
||||||
|
|
||||||
describe("Slice 1 visual viewport", () => {
|
describe("Workspace visual viewport", () => {
|
||||||
test("shrinks the application surface to the keyboard-visible height", () => {
|
test("shrinks the application surface to the keyboard-visible height", () => {
|
||||||
expect(visualViewportStyle({ height: 500, offsetTop: 0 })).toEqual({
|
expect(visualViewportStyle({ height: 500, offsetTop: 0 })).toEqual({
|
||||||
height: "500px",
|
height: "500px",
|
||||||
@@ -33,7 +33,7 @@ export const useVisualViewportStyle = (): CSSProperties => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
root.classList.add("slice-one-viewport-lock");
|
root.classList.add("workspace-viewport-lock");
|
||||||
update();
|
update();
|
||||||
window.addEventListener("resize", update);
|
window.addEventListener("resize", update);
|
||||||
viewport?.addEventListener("resize", update);
|
viewport?.addEventListener("resize", update);
|
||||||
@@ -41,7 +41,7 @@ export const useVisualViewportStyle = (): CSSProperties => {
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
cancelAnimationFrame(animationFrame);
|
cancelAnimationFrame(animationFrame);
|
||||||
root.classList.remove("slice-one-viewport-lock");
|
root.classList.remove("workspace-viewport-lock");
|
||||||
window.removeEventListener("resize", update);
|
window.removeEventListener("resize", update);
|
||||||
viewport?.removeEventListener("resize", update);
|
viewport?.removeEventListener("resize", update);
|
||||||
viewport?.removeEventListener("scroll", update);
|
viewport?.removeEventListener("scroll", update);
|
||||||
@@ -6,8 +6,8 @@ body {
|
|||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.slice-one-viewport-lock,
|
html.workspace-viewport-lock,
|
||||||
html.slice-one-viewport-lock body {
|
html.workspace-viewport-lock body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -116,9 +116,9 @@ html.slice-one-viewport-lock body {
|
|||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slice-one-surface .chat-markdown,
|
.workspace-surface .chat-markdown,
|
||||||
.slice-one-surface .chat-reasoning,
|
.workspace-surface .chat-reasoning,
|
||||||
.slice-one-surface .thinking-line {
|
.workspace-surface .thinking-line {
|
||||||
color: #232321;
|
color: #232321;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,27 +5,36 @@ import { describe, expect, test } from "vitest";
|
|||||||
const source = (relativePath: string) =>
|
const source = (relativePath: string) =>
|
||||||
readFileSync(new URL(relativePath, import.meta.url), "utf-8");
|
readFileSync(new URL(relativePath, import.meta.url), "utf-8");
|
||||||
|
|
||||||
describe("Slice 1 frontend regression contracts", () => {
|
describe("Workspace frontend regression contracts", () => {
|
||||||
test("keeps keyboard resizing on the visual viewport instead of page scroll", () => {
|
test("keeps keyboard resizing on the visual viewport instead of page scroll", () => {
|
||||||
const page = source("../../components/slice-one/slice-one-page.tsx");
|
const page = source(
|
||||||
|
"../../components/workspace/project-workspace-page.tsx"
|
||||||
|
);
|
||||||
|
const viewport = source("../../hooks/workspace/use-visual-viewport.ts");
|
||||||
const root = source("../../root.tsx");
|
const root = source("../../root.tsx");
|
||||||
const styles = source("../../index.css");
|
const styles = source("../../index.css");
|
||||||
|
|
||||||
expect(root).toContain("interactive-widget=resizes-content");
|
expect(root).toContain("interactive-widget=resizes-content");
|
||||||
expect(page).toContain("style={viewportStyle}");
|
expect(page).toContain("style={viewportStyle}");
|
||||||
expect(page).toContain("fixed inset-x-0 top-0");
|
expect(page).toContain("fixed inset-x-0 top-0");
|
||||||
expect(page).not.toContain("slice-one-surface flex h-svh");
|
expect(viewport).toContain("workspace-viewport-lock");
|
||||||
expect(styles).toContain("html.slice-one-viewport-lock body");
|
expect(styles).toContain("html.workspace-viewport-lock body");
|
||||||
expect(styles).toContain("overflow: hidden");
|
expect(styles).toContain("overflow: hidden");
|
||||||
});
|
});
|
||||||
|
|
||||||
test("keeps the responsive shell shrinkable with a pinned composer", () => {
|
test("keeps the responsive shell shrinkable with a pinned composer", () => {
|
||||||
const page = source("../../components/slice-one/slice-one-page.tsx");
|
const page = source(
|
||||||
|
"../../components/workspace/project-workspace-page.tsx"
|
||||||
|
);
|
||||||
|
const feed = source("../../components/workspace/conversation-feed.tsx");
|
||||||
|
const composer = source(
|
||||||
|
"../../components/workspace/conversation-composer.tsx"
|
||||||
|
);
|
||||||
|
|
||||||
expect(page).toContain('className="flex min-w-0 flex-1 flex-col"');
|
expect(page).toContain('className="flex min-w-0 flex-1 flex-col"');
|
||||||
expect(page).toContain('<Conversation className="min-h-0 flex-1">');
|
expect(feed).toContain('<Conversation className="min-h-0 flex-1">');
|
||||||
expect(page).toContain('className="shrink-0 border-t');
|
expect(composer).toContain('className="shrink-0 border-t');
|
||||||
expect(page).toContain(
|
expect(composer).toContain(
|
||||||
'className="mx-auto flex max-w-2xl items-end gap-2"'
|
'className="mx-auto flex max-w-2xl items-end gap-2"'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@@ -3,7 +3,10 @@ import { describe, expect, test } from "vitest";
|
|||||||
|
|
||||||
import type { ConversationMessage } from "@/lib/chat/types";
|
import type { ConversationMessage } from "@/lib/chat/types";
|
||||||
|
|
||||||
import { buildSliceOneTimeline, findSourceMessageTarget } from "./presentation";
|
import {
|
||||||
|
buildWorkspaceTimeline,
|
||||||
|
findSourceMessageTarget,
|
||||||
|
} from "./presentation";
|
||||||
|
|
||||||
const textMessage = (
|
const textMessage = (
|
||||||
id: string,
|
id: string,
|
||||||
@@ -23,9 +26,9 @@ const notice: WorkNotice = {
|
|||||||
workId: "work-1",
|
workId: "work-1",
|
||||||
};
|
};
|
||||||
|
|
||||||
describe("Slice 1 presentation", () => {
|
describe("Workspace presentation", () => {
|
||||||
test("places proposed Work after the assistant response to its source", () => {
|
test("places proposed Work after the assistant response to its source", () => {
|
||||||
const timeline = buildSliceOneTimeline(
|
const timeline = buildWorkspaceTimeline(
|
||||||
[
|
[
|
||||||
textMessage("user-1", "user", "Build the phone flow."),
|
textMessage("user-1", "user", "Build the phone flow."),
|
||||||
textMessage("assistant-1", "assistant", "Captured and proposed Work."),
|
textMessage("assistant-1", "assistant", "Captured and proposed Work."),
|
||||||
@@ -7,14 +7,9 @@ import {
|
|||||||
} from "@/lib/chat/transforms";
|
} from "@/lib/chat/transforms";
|
||||||
import type { ConversationMessage } from "@/lib/chat/types";
|
import type { ConversationMessage } from "@/lib/chat/types";
|
||||||
|
|
||||||
export type SliceTimelineItem =
|
import type { WorkspaceTimelineItem } from "./types";
|
||||||
| {
|
|
||||||
readonly kind: "message";
|
|
||||||
readonly message: ConversationMessage;
|
|
||||||
}
|
|
||||||
| { readonly kind: "work"; readonly notice: WorkNotice };
|
|
||||||
|
|
||||||
export const isSliceOneVisibleMessage = (
|
export const isVisibleConversationMessage = (
|
||||||
message: ConversationMessage
|
message: ConversationMessage
|
||||||
): boolean =>
|
): boolean =>
|
||||||
message.role === "user" ||
|
message.role === "user" ||
|
||||||
@@ -42,11 +37,11 @@ const targetIndexForNotice = (
|
|||||||
return responseOffset === -1 ? sourceIndex : sourceIndex + responseOffset + 1;
|
return responseOffset === -1 ? sourceIndex : sourceIndex + responseOffset + 1;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const buildSliceOneTimeline = (
|
export const buildWorkspaceTimeline = (
|
||||||
allMessages: readonly ConversationMessage[],
|
allMessages: readonly ConversationMessage[],
|
||||||
notices: readonly WorkNotice[]
|
notices: readonly WorkNotice[]
|
||||||
): readonly SliceTimelineItem[] => {
|
): readonly WorkspaceTimelineItem[] => {
|
||||||
const messages = allMessages.filter(isSliceOneVisibleMessage);
|
const messages = allMessages.filter(isVisibleConversationMessage);
|
||||||
const noticesByMessageIndex = new Map<number, WorkNotice[]>();
|
const noticesByMessageIndex = new Map<number, WorkNotice[]>();
|
||||||
for (const notice of notices) {
|
for (const notice of notices) {
|
||||||
const targetIndex = targetIndexForNotice(messages, notice);
|
const targetIndex = targetIndexForNotice(messages, notice);
|
||||||
@@ -55,7 +50,7 @@ export const buildSliceOneTimeline = (
|
|||||||
noticesByMessageIndex.set(targetIndex, atTarget);
|
noticesByMessageIndex.set(targetIndex, atTarget);
|
||||||
}
|
}
|
||||||
|
|
||||||
const timeline: SliceTimelineItem[] = [];
|
const timeline: WorkspaceTimelineItem[] = [];
|
||||||
for (const [index, message] of messages.entries()) {
|
for (const [index, message] of messages.entries()) {
|
||||||
timeline.push({ kind: "message", message });
|
timeline.push({ kind: "message", message });
|
||||||
for (const notice of noticesByMessageIndex.get(index) ?? []) {
|
for (const notice of noticesByMessageIndex.get(index) ?? []) {
|
||||||
163
apps/web/src/lib/workspace/types.ts
Normal file
163
apps/web/src/lib/workspace/types.ts
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
import type { Id } from "@code/backend/convex/_generated/dataModel";
|
||||||
|
import type { WorkNotice } from "@code/primitives/work";
|
||||||
|
|
||||||
|
import type { ConversationMessage } from "@/lib/chat/types";
|
||||||
|
|
||||||
|
export interface WorkRecord {
|
||||||
|
readonly _id: Id<"works">;
|
||||||
|
readonly title: string;
|
||||||
|
readonly objective: string;
|
||||||
|
readonly status: string;
|
||||||
|
readonly definitionVersion?: number;
|
||||||
|
readonly definitionApprovalVersion?: number;
|
||||||
|
readonly designVersion?: number;
|
||||||
|
readonly signals: readonly {
|
||||||
|
readonly sources: readonly { messageId: string; rawText: string }[];
|
||||||
|
}[];
|
||||||
|
readonly runs: readonly WorkRun[];
|
||||||
|
readonly definition: {
|
||||||
|
readonly risk?: string;
|
||||||
|
readonly questions?: readonly { status: string }[];
|
||||||
|
} | null;
|
||||||
|
readonly design: {
|
||||||
|
readonly architectureSummary?: string;
|
||||||
|
readonly slices?: readonly {
|
||||||
|
readonly id: string;
|
||||||
|
readonly title: string;
|
||||||
|
readonly observableBehavior: string;
|
||||||
|
}[];
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkRun {
|
||||||
|
readonly artifacts?: readonly WorkArtifact[];
|
||||||
|
readonly attemptEvents?: readonly WorkAttemptEvent[];
|
||||||
|
readonly baseRevision?: string;
|
||||||
|
readonly candidateRevision?: string;
|
||||||
|
readonly executionKind?: string;
|
||||||
|
readonly _id: Id<"workRuns">;
|
||||||
|
readonly status: string;
|
||||||
|
readonly terminalClassification?: string;
|
||||||
|
readonly terminalSummary?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkArtifact {
|
||||||
|
readonly _id: string;
|
||||||
|
readonly metadataJson: string;
|
||||||
|
readonly title: string;
|
||||||
|
readonly uri?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkAttemptEvent {
|
||||||
|
readonly _id: string;
|
||||||
|
readonly message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GitConnection {
|
||||||
|
readonly id: string;
|
||||||
|
readonly provider: "github" | "gitea";
|
||||||
|
readonly serverUrl: string;
|
||||||
|
readonly username?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectListItem {
|
||||||
|
readonly id: string;
|
||||||
|
readonly name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceState {
|
||||||
|
readonly agent: {
|
||||||
|
readonly error?: Error;
|
||||||
|
readonly historyReady: boolean;
|
||||||
|
readonly messages: readonly ConversationMessage[];
|
||||||
|
readonly sendMessage: (
|
||||||
|
message: string,
|
||||||
|
options?: { readonly images?: readonly File[] }
|
||||||
|
) => Promise<void>;
|
||||||
|
readonly status:
|
||||||
|
| "connecting"
|
||||||
|
| "error"
|
||||||
|
| "idle"
|
||||||
|
| "streaming"
|
||||||
|
| "submitted";
|
||||||
|
};
|
||||||
|
readonly approveDefinition: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
version: number
|
||||||
|
) => Promise<unknown>;
|
||||||
|
readonly approveDesign: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
definitionVersion: number,
|
||||||
|
designVersion: number
|
||||||
|
) => Promise<unknown>;
|
||||||
|
readonly authorizeGithub: () => Promise<unknown>;
|
||||||
|
readonly cancelExecution: (runId: Id<"workRuns">) => Promise<unknown>;
|
||||||
|
readonly cancelSimulation: (runId: Id<"workRuns">) => Promise<unknown>;
|
||||||
|
readonly clearOperationError: () => void;
|
||||||
|
readonly connectGitea: (input: {
|
||||||
|
readonly serverUrl: string;
|
||||||
|
readonly token: string;
|
||||||
|
readonly username?: string;
|
||||||
|
}) => Promise<void>;
|
||||||
|
readonly connectLinkedGithub: () => Promise<void>;
|
||||||
|
readonly connectRepository: () => Promise<void>;
|
||||||
|
readonly error?: Error;
|
||||||
|
readonly gitConnections: readonly GitConnection[] | undefined;
|
||||||
|
readonly operationError?: Error;
|
||||||
|
readonly pending: boolean;
|
||||||
|
readonly projectGitConnection: GitConnection | null | undefined;
|
||||||
|
readonly projects: readonly ProjectListItem[] | undefined;
|
||||||
|
readonly repository: string;
|
||||||
|
readonly requestDefinition: (workId: Id<"works">) => Promise<unknown>;
|
||||||
|
readonly retrySimulation: (runId: Id<"workRuns">) => Promise<unknown>;
|
||||||
|
readonly saveDefinition: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
payload: unknown
|
||||||
|
) => Promise<unknown>;
|
||||||
|
readonly saveDesign: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
payload: unknown
|
||||||
|
) => Promise<unknown>;
|
||||||
|
readonly selectProject: (projectId: string) => void;
|
||||||
|
readonly selectedProject: ProjectListItem | null;
|
||||||
|
readonly setRepository: (value: string) => void;
|
||||||
|
readonly startExecution: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
sliceId?: string
|
||||||
|
) => Promise<unknown>;
|
||||||
|
readonly startSimulation: (
|
||||||
|
workId: Id<"works">,
|
||||||
|
scenario:
|
||||||
|
| "success"
|
||||||
|
| "transient-failure-then-success"
|
||||||
|
| "needs-input"
|
||||||
|
| "permanent-failure"
|
||||||
|
| "cancelled",
|
||||||
|
sliceId?: string
|
||||||
|
) => Promise<unknown>;
|
||||||
|
readonly works: readonly WorkRecord[] | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type WorkspaceTimelineItem =
|
||||||
|
| { readonly kind: "message"; readonly message: ConversationMessage }
|
||||||
|
| { readonly kind: "work"; readonly notice: WorkNotice };
|
||||||
|
|
||||||
|
export interface ArtifactMetadata {
|
||||||
|
readonly changedFiles?: readonly string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const parseArtifactMetadata = (
|
||||||
|
artifact: WorkArtifact
|
||||||
|
): ArtifactMetadata => {
|
||||||
|
if (!artifact.metadataJson) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
return JSON.parse(artifact.metadataJson) as ArtifactMetadata;
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const changedFilesFor = (artifact: WorkArtifact): readonly string[] =>
|
||||||
|
parseArtifactMetadata(artifact).changedFiles ?? [];
|
||||||
@@ -7,7 +7,6 @@ export default [
|
|||||||
route("signup", "./routes/auth/signup/page.tsx"),
|
route("signup", "./routes/auth/signup/page.tsx"),
|
||||||
]),
|
]),
|
||||||
layout("./routes/app/layout.tsx", [
|
layout("./routes/app/layout.tsx", [
|
||||||
index("./routes/app/mobile/page.tsx"),
|
index("./routes/app/workspace/page.tsx"),
|
||||||
route("dashboard", "./routes/app/dashboard/page.tsx"),
|
|
||||||
]),
|
]),
|
||||||
] satisfies RouteConfig;
|
] satisfies RouteConfig;
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
import { SliceOnePage } from "@/components/slice-one/slice-one-page";
|
|
||||||
|
|
||||||
export default function Dashboard() {
|
|
||||||
return <SliceOnePage />;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { SliceOnePage } from "@/components/slice-one/slice-one-page";
|
|
||||||
|
|
||||||
export default function MobileLandingRedirect() {
|
|
||||||
return <SliceOnePage />;
|
|
||||||
}
|
|
||||||
5
apps/web/src/routes/app/workspace/page.tsx
Normal file
5
apps/web/src/routes/app/workspace/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { ProjectWorkspacePage } from "@/components/workspace/project-workspace-page";
|
||||||
|
|
||||||
|
export default function ProjectWorkspaceRoute() {
|
||||||
|
return <ProjectWorkspacePage />;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user