@lazyingart/agintiflow 0.1.0 → 0.3.0

package/public/styles.css

@@ -14,6 +14,13 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
 body {
   margin: 0;
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
@@ -25,19 +32,24 @@ body {
 }
 
 .page {
-  width: min(1240px, calc(100% - 32px));
+  width: min(1240px, 100%);
+  max-width: 100%;
   margin: 32px auto;
+  padding: 0 16px;
   display: grid;
   gap: 20px;
-  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
 }
 
 .stack {
   display: grid;
-  gap: 20px;
+  min-width: 0;
+  align-content: start;
+  gap: 14px;
 }
 
 .panel {
+  min-width: 0;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 18px;
@@ -101,7 +113,8 @@ h1 {
 }
 
 .route-hint,
-.wrapper-status {
+.wrapper-status,
+.package-warning {
   margin: -4px 0 0;
   font-size: 0.88rem;
   line-height: 1.45;
@@ -135,6 +148,7 @@ button {
 input,
 textarea,
 select {
+  min-width: 0;
   width: 100%;
   border: 1px solid var(--line);
   background: #fffdfa;
@@ -151,11 +165,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,9 +275,51 @@ 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;
+  min-width: 0;
+  flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
@@ -192,6 +335,105 @@ 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;
+  overflow-wrap: anywhere;
+}
+
 .sandbox-card h2 {
   margin: 0 0 4px;
   font-size: 1.05rem;
@@ -217,15 +459,33 @@ button.secondary {
   font-size: 0.78rem;
   line-height: 1.45;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .session-select {
   max-width: 340px;
 }
 
+.session-tools {
+  display: flex;
+  flex: 1 1 420px;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.session-tools .session-select {
+  flex: 1 1 220px;
+  min-width: 0;
+  max-width: none;
+}
+
 .logs {
-  min-height: 360px;
-  max-height: 48vh;
+  min-height: 300px;
+  max-height: 42vh;
   overflow: auto;
   margin: 0;
   padding: 16px;
@@ -237,11 +497,17 @@ button.secondary {
   font-size: 0.9rem;
   line-height: 1.5;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.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;
@@ -270,14 +536,367 @@ button.secondary {
 
 .chat-content {
   line-height: 1.5;
+  overflow-wrap: anywhere;
 }
 
 .chat-form {
-  margin-top: 14px;
+  margin: 0;
+}
+
+.modal {
+  width: min(720px, calc(100% - 28px));
+  max-width: 100%;
+  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));
+  max-width: 100%;
+}
+
+.artifact-modal-card {
+  max-height: min(840px, calc(100vh - 36px));
+  overflow: hidden;
+}
+
+.artifact-tabs {
+  display: flex;
+  max-width: 100%;
+  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: min(130px, 100%);
+  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;
+  max-width: 100%;
+  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;
+  min-width: 0;
+  gap: 8px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.artifact-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  width: 100%;
+  padding: 11px 12px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fffdfa;
+  color: var(--ink);
+  text-align: left;
+}
+
+.artifact-row-main {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  text-align: left;
+}
+
+.artifact-menu-button {
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  align-self: start;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 253, 250, 0.9);
+  color: var(--muted);
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  box-shadow: none;
+}
+
+.artifact-menu-button:hover,
+.artifact-menu-button:focus-visible {
+  border-color: rgba(15, 118, 110, 0.34);
+  color: var(--accent);
+}
+
+.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;
+  min-width: 0;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.artifact-row-top strong,
+.artifact-viewer-header h3 {
+  min-width: 0;
+  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;
+  overflow-wrap: anywhere;
+  -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%;
+  max-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) {
   .page {
+    margin: 16px auto;
+    padding: 0 12px;
     grid-template-columns: 1fr;
   }
 
@@ -295,11 +914,54 @@ 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;
+  }
+}
+
+@media (max-width: 720px) {
+  .grid,
+  .checks,
+  .wrapper-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .panel {
+    padding: 15px;
+  }
+
+  .artifact-tabs {
+    border-radius: 18px;
+  }
+
+  .artifact-tab {
+    min-width: 120px;
   }
 }