summaryrefslogtreecommitdiff
path: root/makima/frontend/src/routes
diff options
context:
space:
mode:
Diffstat (limited to 'makima/frontend/src/routes')
-rw-r--r--makima/frontend/src/routes/contracts.tsx86
1 files changed, 40 insertions, 46 deletions
diff --git a/makima/frontend/src/routes/contracts.tsx b/makima/frontend/src/routes/contracts.tsx
index dde78b1..acb6789 100644
--- a/makima/frontend/src/routes/contracts.tsx
+++ b/makima/frontend/src/routes/contracts.tsx
@@ -531,11 +531,25 @@ function ContractsPageContent() {
</div>
)}
- {/* Create contract modal */}
- {isCreating && (
- <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
- <div className="w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)]">
- <h3 className="font-mono text-sm text-[#75aafc] uppercase mb-4">
+ <div className="flex-1 grid grid-cols-[350px_1fr] gap-4 min-h-0">
+ {/* Contract list */}
+ <ContractList
+ contracts={contracts}
+ loading={loading}
+ onSelect={handleSelect}
+ onCreate={handleCreate}
+ selectedId={id}
+ onMarkComplete={handleContextMarkComplete}
+ onMarkActive={handleContextMarkActive}
+ onArchive={handleContextArchive}
+ onDelete={handleContextDelete}
+ onGoToSupervisor={handleContextGoToSupervisor}
+ />
+
+ {/* Contract detail, creation form, or empty state */}
+ {isCreating ? (
+ <div className="p-4 max-w-lg overflow-y-auto h-full bg-[#0a1628]">
+ <h3 className="font-mono text-[10px] text-[#9bc3ff] uppercase tracking-wide mb-4">
Create Contract
</h3>
@@ -548,7 +562,7 @@ function ContractsPageContent() {
<div className="space-y-4">
{/* Contract name */}
<div>
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Contract Name
</label>
<input
@@ -556,14 +570,14 @@ function ContractsPageContent() {
value={newContractName}
onChange={(e) => setNewContractName(e.target.value)}
placeholder="Contract name"
- className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+ className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
autoFocus
/>
</div>
{/* Description */}
<div>
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Description (optional)
</label>
<textarea
@@ -571,13 +585,13 @@ function ContractsPageContent() {
onChange={(e) => setNewContractDescription(e.target.value)}
placeholder="Describe what this contract is for..."
rows={2}
- className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
+ className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc] resize-none"
/>
</div>
{/* Contract Type */}
<div>
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Contract Type
</label>
{contractTypesLoading ? (
@@ -598,7 +612,7 @@ function ContractsPageContent() {
className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
contractType === type.id
? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
- : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+ : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
}`}
>
{type.name}
@@ -615,13 +629,13 @@ function ContractsPageContent() {
{/* Starting Phase */}
<div>
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Starting Phase
</label>
<select
value={initialPhase}
onChange={(e) => setInitialPhase(e.target.value as ContractPhase)}
- className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+ className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
>
{(() => {
const template = contractTypes.find((t) => t.id === contractType);
@@ -651,7 +665,7 @@ function ContractsPageContent() {
className={`w-5 h-5 flex items-center justify-center border transition-colors ${
localOnly
? "bg-[#0f3c78] border-[#75aafc] text-[#dbe7ff]"
- : "bg-[#0d1b2d] border-[#3f6fb3] text-transparent"
+ : "bg-[#0d1b2d] border-[rgba(117,170,252,0.2)] text-transparent"
}`}
>
{localOnly && (
@@ -682,10 +696,9 @@ function ContractsPageContent() {
</p>
</div>
- {/* Red Team Monitoring */}
{/* Repository Configuration */}
<div className="border-t border-[rgba(117,170,252,0.2)] pt-4">
- <label className="block font-mono text-xs text-[#75aafc] uppercase mb-3">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-3">
Repository Configuration (Required)
</label>
@@ -697,7 +710,7 @@ function ContractsPageContent() {
className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
repoType === "remote"
? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
- : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+ : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
}`}
>
Remote
@@ -708,7 +721,7 @@ function ContractsPageContent() {
className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
repoType === "local"
? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
- : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+ : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
}`}
>
Local
@@ -719,7 +732,7 @@ function ContractsPageContent() {
className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
repoType === "managed"
? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
- : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+ : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
}`}
>
Managed
@@ -729,7 +742,7 @@ function ContractsPageContent() {
{/* Repository suggestions */}
{showRepoSuggestions && repoSuggestions.length > 0 && (
<div className="mb-3">
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Recent Repositories
</label>
<div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto">
@@ -757,7 +770,7 @@ function ContractsPageContent() {
{/* Repository name */}
<div className="mb-3">
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Repository Name
</label>
<input
@@ -765,14 +778,14 @@ function ContractsPageContent() {
value={repoName}
onChange={(e) => setRepoName(e.target.value)}
placeholder="e.g., my-project"
- className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+ className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
/>
</div>
{/* Repository URL (for remote) */}
{repoType === "remote" && (
<div>
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Repository URL
</label>
<input
@@ -780,7 +793,7 @@ function ContractsPageContent() {
value={repoUrl}
onChange={(e) => setRepoUrl(e.target.value)}
placeholder="https://github.com/user/repo.git"
- className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+ className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
/>
</div>
)}
@@ -788,7 +801,7 @@ function ContractsPageContent() {
{/* Repository path (for local) */}
{repoType === "local" && (
<div>
- <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+ <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
Local Path
</label>
<DirectoryInput
@@ -819,33 +832,14 @@ function ContractsPageContent() {
<button
onClick={handleCreateSubmit}
disabled={!newContractName.trim() || !isRepoValid()}
- className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+ className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[rgba(117,170,252,0.2)] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Create
</button>
</div>
</div>
</div>
- </div>
- )}
-
- <div className="flex-1 grid grid-cols-[350px_1fr] gap-4 min-h-0">
- {/* Contract list */}
- <ContractList
- contracts={contracts}
- loading={loading}
- onSelect={handleSelect}
- onCreate={handleCreate}
- selectedId={id}
- onMarkComplete={handleContextMarkComplete}
- onMarkActive={handleContextMarkActive}
- onArchive={handleContextArchive}
- onDelete={handleContextDelete}
- onGoToSupervisor={handleContextGoToSupervisor}
- />
-
- {/* Contract detail or empty state */}
- {contractDetail ? (
+ ) : contractDetail ? (
<ContractDetail
contract={contractDetail}
loading={detailLoading}
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-21 02:31:56 +0000