@lazyingart/agintiflow 0.1.0 → 0.2.0

package/public/styles.css

@@ -34,7 +34,8 @@ body {
 
 .stack {
   display: grid;
-  gap: 20px;
+  align-content: start;
+  gap: 14px;
 }
 
 .panel {
@@ -101,7 +102,8 @@ h1 {
 }
 
 .route-hint,
-.wrapper-status {
+.wrapper-status,
+.package-warning {
   margin: -4px 0 0;
   font-size: 0.88rem;
   line-height: 1.45;
@@ -151,11 +153,98 @@ textarea {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.checks label {
+.switch-label {
+  position: relative;
   align-items: center;
-  grid-auto-flow: column;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
   justify-content: start;
-  gap: 10px;
+  gap: 12px;
+  min-height: 44px;
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: rgba(255, 253, 250, 0.72);
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch-label input[type="checkbox"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  width: 62px;
+  height: 32px;
+  align-items: center;
+  border: 1px solid rgba(95, 86, 74, 0.24);
+  border-radius: 999px;
+  background: #d8d0c3;
+  box-shadow: inset 0 2px 8px rgba(62, 49, 26, 0.14);
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.switch::before {
+  position: absolute;
+  left: 4px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #fffdfa;
+  box-shadow: 0 3px 10px rgba(62, 49, 26, 0.24);
+  content: "";
+  transition: transform 180ms ease;
+}
+
+.switch::after {
+  position: absolute;
+  right: 8px;
+  color: rgba(95, 86, 74, 0.8);
+  font-size: 0.64rem;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+  content: "OFF";
+}
+
+.switch-label input[type="checkbox"]:checked + .switch {
+  border-color: rgba(15, 118, 110, 0.46);
+  background: linear-gradient(135deg, var(--accent), #12b8aa);
+  box-shadow: inset 0 2px 10px rgba(4, 88, 81, 0.22);
+}
+
+.switch-label input[type="checkbox"]:checked + .switch::before {
+  transform: translateX(30px);
+}
+
+.switch-label input[type="checkbox"]:checked + .switch::after {
+  right: auto;
+  left: 9px;
+  color: white;
+  content: "ON";
+}
+
+.switch-label input[type="checkbox"]:focus-visible + .switch {
+  outline: 3px solid rgba(15, 118, 110, 0.22);
+  outline-offset: 3px;
+}
+
+.wrapper-controls {
+  grid-template-columns: minmax(0, 1fr) 180px;
+}
+
+.switch-card {
+  min-height: 100%;
 }
 
 button {
@@ -174,6 +263,46 @@ button.secondary {
   color: var(--ink);
 }
 
+button.danger {
+  background: linear-gradient(135deg, #b42318, #dc6803);
+}
+
+.icon-button {
+  position: relative;
+  width: 42px;
+  min-width: 42px;
+  height: 42px;
+  padding: 0;
+  border: 1px solid var(--line);
+  background: #fffdfa;
+  color: var(--ink);
+  box-shadow: none;
+}
+
+.artifact-button {
+  width: auto;
+  min-width: 78px;
+  padding: 0 14px;
+  font-weight: 800;
+}
+
+.artifact-badge {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border: 2px solid #fffdfa;
+  border-radius: 999px;
+  background: #d92d20;
+  color: white;
+  font-size: 0.68rem;
+  font-weight: 900;
+  line-height: 16px;
+  text-align: center;
+}
+
 .actions,
 .header-row {
   display: flex;
@@ -192,6 +321,104 @@ button.secondary {
   background: rgba(255, 253, 250, 0.7);
 }
 
+.capability-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid rgba(217, 119, 6, 0.2);
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgba(255, 253, 250, 0.9), rgba(236, 253, 245, 0.58));
+}
+
+.capability-card h2 {
+  margin: 0 0 4px;
+  font-size: 1.05rem;
+}
+
+.capability-grid {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
+}
+
+.capability-chip {
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fffdfa;
+  font-size: 0.82rem;
+  line-height: 1.25;
+}
+
+.capability-chip strong {
+  display: block;
+  margin-bottom: 2px;
+}
+
+.capability-chip[data-ready="true"] {
+  border-color: rgba(15, 118, 110, 0.35);
+}
+
+.capability-chip[data-ready="false"] {
+  opacity: 0.72;
+}
+
+.capability-chip[data-selected="true"] {
+  border-color: rgba(15, 118, 110, 0.62);
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
+}
+
+.workspace-card {
+  border-color: rgba(0, 111, 238, 0.18);
+  background: linear-gradient(135deg, rgba(255, 253, 250, 0.9), rgba(239, 246, 255, 0.72));
+}
+
+.workspace-changes {
+  display: grid;
+  gap: 8px;
+}
+
+.change-item {
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: rgba(255, 253, 250, 0.82);
+}
+
+.change-item.blocked {
+  border-color: rgba(217, 119, 6, 0.28);
+}
+
+.change-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+
+.change-path {
+  display: block;
+  margin: 4px 0;
+  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
+  font-size: 0.82rem;
+}
+
+.change-diff {
+  max-height: 150px;
+  overflow: auto;
+  margin: 8px 0 0;
+  padding: 10px;
+  border-radius: 10px;
+  background: #111827;
+  color: #dbeafe;
+  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
+  font-size: 0.72rem;
+  line-height: 1.42;
+  white-space: pre-wrap;
+}
+
 .sandbox-card h2 {
   margin: 0 0 4px;
   font-size: 1.05rem;
@@ -223,9 +450,21 @@ button.secondary {
   max-width: 340px;
 }
 
+.session-tools {
+  display: flex;
+  min-width: min(100%, 420px);
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.session-tools .session-select {
+  max-width: none;
+}
+
 .logs {
-  min-height: 360px;
-  max-height: 48vh;
+  min-height: 300px;
+  max-height: 42vh;
   overflow: auto;
   margin: 0;
   padding: 16px;
@@ -239,9 +478,14 @@ button.secondary {
   white-space: pre-wrap;
 }
 
+.chat-panel {
+  display: grid;
+  gap: 12px;
+}
+
 .chat-thread {
-  min-height: 260px;
-  max-height: 40vh;
+  min-height: 200px;
+  max-height: 32vh;
   overflow: auto;
   display: grid;
   gap: 12px;
@@ -273,7 +517,313 @@ button.secondary {
 }
 
 .chat-form {
-  margin-top: 14px;
+  margin: 0;
+}
+
+.modal {
+  width: min(720px, calc(100% - 28px));
+  padding: 0;
+  border: 0;
+  border-radius: 22px;
+  background: transparent;
+  color: var(--ink);
+}
+
+.modal::backdrop {
+  background: rgba(29, 28, 26, 0.42);
+  backdrop-filter: blur(5px);
+}
+
+.modal-card {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: rgba(255, 251, 244, 0.98);
+  box-shadow: 0 30px 90px rgba(29, 28, 26, 0.24);
+}
+
+.modal-header {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.modal-header h2 {
+  margin: 0 0 4px;
+}
+
+.session-manager-list {
+  display: grid;
+  max-height: 300px;
+  gap: 8px;
+  overflow: auto;
+}
+
+.session-row {
+  display: grid;
+  width: 100%;
+  gap: 4px;
+  padding: 11px 12px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fffdfa;
+  color: var(--ink);
+  text-align: left;
+}
+
+.session-row[data-selected="true"] {
+  border-color: rgba(15, 118, 110, 0.62);
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
+}
+
+.session-row strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-row span {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.modal-status {
+  min-height: 20px;
+  margin: 0;
+}
+
+.artifact-modal {
+  width: min(1120px, calc(100% - 28px));
+}
+
+.artifact-modal-card {
+  max-height: min(840px, calc(100vh - 36px));
+  overflow: hidden;
+}
+
+.artifact-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 5px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 253, 250, 0.72);
+}
+
+.artifact-tab {
+  flex: 1;
+  min-width: 130px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  box-shadow: none;
+}
+
+.artifact-tab[data-selected="true"] {
+  border-color: rgba(15, 118, 110, 0.26);
+  background: linear-gradient(135deg, var(--accent), #155e75);
+  color: white;
+}
+
+.artifact-layout {
+  display: grid;
+  min-height: 520px;
+  gap: 14px;
+  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.artifact-list-panel,
+.artifact-viewer {
+  min-height: 0;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 253, 250, 0.82);
+}
+
+.artifact-list-panel {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.artifact-list-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.compact-button {
+  padding: 8px 12px;
+  font-size: 0.82rem;
+}
+
+.artifact-list {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.artifact-row {
+  display: grid;
+  gap: 5px;
+  width: 100%;
+  padding: 11px 12px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fffdfa;
+  color: var(--ink);
+  text-align: left;
+}
+
+.artifact-row[data-selected="true"] {
+  border-color: rgba(15, 118, 110, 0.62);
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
+}
+
+.artifact-row[data-read="false"] {
+  border-color: rgba(217, 45, 32, 0.28);
+  background: linear-gradient(135deg, #fffdfa, rgba(254, 242, 242, 0.96));
+}
+
+.artifact-row[data-read="false"] .artifact-row-top strong::before {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background: #d92d20;
+  content: "";
+  vertical-align: 1px;
+}
+
+.artifact-row-top,
+.artifact-viewer-header {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.artifact-row-top strong,
+.artifact-viewer-header h3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.artifact-row-top strong {
+  white-space: nowrap;
+}
+
+.artifact-row-top span,
+.artifact-kind-pill {
+  flex: none;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: rgba(15, 118, 110, 0.12);
+  color: var(--accent);
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.artifact-row-meta,
+.artifact-row-preview {
+  color: var(--muted);
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+
+.artifact-row-preview {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.artifact-viewer {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.artifact-viewer-header {
+  padding: 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.artifact-viewer-header h3 {
+  margin: 0 0 4px;
+  font-size: 1.05rem;
+}
+
+.artifact-viewer-body {
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
+}
+
+.artifact-image-frame {
+  display: grid;
+  min-height: 100%;
+  place-items: center;
+  margin: 0;
+  padding: 14px;
+  border-radius: 16px;
+  background:
+    linear-gradient(45deg, rgba(15, 118, 110, 0.08) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(15, 118, 110, 0.08) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(15, 118, 110, 0.08) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(15, 118, 110, 0.08) 75%);
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0;
+  background-size: 20px 20px;
+}
+
+.artifact-preview-image {
+  max-width: 100%;
+  max-height: 58vh;
+  border-radius: 14px;
+  object-fit: contain;
+  box-shadow: 0 20px 48px rgba(29, 28, 26, 0.18);
+}
+
+.artifact-pdf-frame {
+  width: 100%;
+  min-height: 62vh;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: white;
+}
+
+.artifact-editor {
+  min-height: 100%;
+  height: 100%;
+  border-radius: 14px;
+  background: #0f172a;
+  color: #dbeafe;
+  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
+  font-size: 0.82rem;
+  line-height: 1.55;
+  white-space: pre;
 }
 
 @media (max-width: 960px) {
@@ -295,11 +845,34 @@ button.secondary {
   }
 
   .logs {
-    min-height: 320px;
-    max-height: 44vh;
+    min-height: 260px;
+    max-height: 40vh;
   }
 
   .chat-thread {
-    max-height: 34vh;
+    max-height: 36vh;
+  }
+
+  .header-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .session-tools {
+    width: 100%;
+  }
+
+  .wrapper-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .artifact-layout {
+    min-height: 620px;
+    grid-template-columns: 1fr;
+    grid-template-rows: 230px minmax(0, 1fr);
+  }
+
+  .artifact-modal-card {
+    overflow: auto;
   }
 }

package/scripts/setup-agent-toolchain-docker.sh

@@ -0,0 +1,51 @@
+#!/usr/bin/env bash
+set -Eeuo pipefail
+
+SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd -- "${SCRIPT_DIR}/.." && pwd)"
+IMAGE="${AGINTIFLOW_TOOLCHAIN_IMAGE:-agintiflow-sandbox:latest}"
+WORKSPACE="${AGINTIFLOW_TOOLCHAIN_WORKSPACE:-${REPO_ROOT}}"
+DOCKERFILE="${AGINTIFLOW_TOOLCHAIN_DOCKERFILE:-${REPO_ROOT}/docker/sandbox.Dockerfile}"
+
+if ! command -v docker >/dev/null 2>&1; then
+  echo "Docker is not installed or not on PATH. Run scripts/install-docker-ubuntu.sh first." >&2
+  exit 1
+fi
+
+mkdir -p "${WORKSPACE}"
+
+echo "Building AgInTiFlow toolchain sandbox image:"
+echo "  image=${IMAGE}"
+echo "  dockerfile=${DOCKERFILE}"
+echo "  context=${REPO_ROOT}"
+docker build -t "${IMAGE}" -f "${DOCKERFILE}" "${REPO_ROOT}"
+
+echo
+echo "Running toolchain preflight inside Docker:"
+docker run --rm \
+  --network none \
+  --cap-drop ALL \
+  --security-opt no-new-privileges \
+  --pids-limit 256 \
+  --memory 2g \
+  --cpus 2 \
+  --tmpfs /tmp:rw,nosuid,nodev,size=512m \
+  -e HOME=/tmp \
+  -v "${WORKSPACE}:/workspace:rw" \
+  -w /workspace \
+  "${IMAGE}" \
+  bash -lc 'set -Eeuo pipefail
+    node -v
+    npm -v
+    python3 --version
+    python3 - <<PY
+import matplotlib, numpy
+print("matplotlib", matplotlib.__version__)
+print("numpy", numpy.__version__)
+PY
+    latexmk -version | head -1
+    pdflatex --version | head -1
+  '
+
+echo
+echo "Toolchain sandbox is ready."