@qnote/q-ai-note 1.0.13 → 1.0.14

package/dist/web/styles.css

@@ -120,6 +120,46 @@ body {
   color: var(--primary);
 }
 
+.nav-group {
+  display: block;
+}
+
+.nav-group-header {
+  display: flex;
+  align-items: center;
+}
+
+.nav-group-toggle {
+  margin-right: 10px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+  line-height: 1;
+  border-radius: 6px;
+}
+
+.nav-group-toggle:hover {
+  background: var(--hover);
+}
+
+.nav-group.nav-group-collapsed .nav-sub-list {
+  display: none;
+}
+
+.nav-sub-list {
+  list-style: none;
+  padding: 2px 0 6px;
+  margin: 0;
+}
+
+.nav-sub-list a {
+  padding-left: 34px;
+  font-size: 13px;
+}
+
 /* Main Content */
 .content {
   flex: 1;
@@ -134,6 +174,11 @@ body {
   animation: fadeIn 0.2s ease;
 }
 
+#page-aser-runtime {
+  max-width: none;
+  margin: 0;
+}
+
 #page-sandbox-detail {
   max-width: none;
   margin: 0;
@@ -177,227 +222,1525 @@ h2 {
   margin-bottom: 16px;
 }
 
-.summary-card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 12px;
-  min-width: 180px;
-  flex: 1 1 220px;
+.summary-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  min-width: 180px;
+  flex: 1 1 220px;
+}
+
+.summary-card .label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.summary-card .value {
+  margin-top: 4px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.action-strip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.action-strip input,
+.action-strip select,
+.inline-actions input,
+.inline-actions select {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  background: var(--bg);
+}
+
+.inline-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#work-tree-collapse-action {
+  min-width: 132px;
+}
+
+.inline-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  user-select: none;
+}
+
+.inline-checkbox input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+}
+
+.insight-box {
+  background: #eef3fd;
+  border: 1px solid #c6d5f8;
+  color: #17366f;
+  border-radius: 10px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+}
+
+.insight-box-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.changes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.change-date-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.change-date-title {
+  margin: 4px 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.change-item {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+.change-meta {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.change-target {
+  background: #f1f3f4;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 8px;
+}
+
+.change-type {
+  font-size: 11px;
+  border-radius: 8px;
+  padding: 2px 8px;
+  color: #fff;
+}
+
+.change-type.create { background: var(--success); }
+.change-type.update { background: var(--primary); }
+.change-type.delete { background: var(--error); }
+
+.change-detail {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.change-diff-list {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.change-diff-line {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.btn-sm {
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+/* Cards */
+.card {
+  background: var(--bg);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  padding: 20px 24px;
+  margin-bottom: 16px;
+  transition: box-shadow 0.2s;
+}
+
+.card:hover {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.16);
+}
+
+/* Sandbox List */
+.sandbox-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.sandbox-card {
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.sandbox-card:hover {
+  transform: translateY(-2px);
+}
+
+.sandbox-card h3 {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.sandbox-card p {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.sandbox-meta {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.sandbox-page-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.sandbox-sort-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.sandbox-sort-label select {
+  min-width: 180px;
+  height: 34px;
+}
+
+.aser-intro {
+  margin: -8px 0 14px;
+  color: var(--text-secondary);
+}
+
+.aser-demo-panel {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #fbfdff;
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.aser-demo-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.aser-demo-progress {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-demo-progress-bar {
+  height: 6px;
+  border-radius: 6px;
+  background: #eaf0fb;
+  overflow: hidden;
+}
+
+.aser-demo-progress-inner {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, #7ea8f2 0%, #5c8de3 100%);
+  transition: width 0.2s ease;
+}
+
+.aser-demo-steps {
+  display: grid;
+  gap: 4px;
+}
+
+.aser-demo-step {
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #fff;
+  padding: 6px 8px;
+  color: var(--text-secondary);
+}
+
+.aser-demo-step.done {
+  border-color: #7ea8f2;
+  color: #184a97;
+  background: #eef5ff;
+}
+
+.aser-demo-step.active {
+  border-style: dashed;
+}
+
+.aser-demo-step.can-jump {
+  cursor: pointer;
+}
+
+.aser-demo-step.can-jump:hover {
+  background: #f3f7ff;
+}
+
+.aser-demo-empty {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-demo-logs {
+  border-top: 1px dashed var(--border);
+  padding-top: 8px;
+  display: grid;
+  gap: 4px;
+  max-height: 120px;
+  overflow: auto;
+}
+
+.aser-demo-log {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) minmax(540px, 2fr) minmax(260px, 1fr);
+  gap: 12px;
+}
+
+.aser-left-panel,
+.aser-center-panel,
+.aser-right-panel {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px;
+  min-height: 320px;
+}
+
+.aser-left-panel {
+  display: grid;
+  grid-template-rows: auto auto auto;
+  align-content: start;
+  gap: 10px;
+}
+
+.aser-left-bottom {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #fcfcff;
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.aser-left-panel .aser-left-bottom + .aser-left-bottom {
+  margin-top: 2px;
+}
+
+.aser-left-bottom h3 {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.aser-protocol-visual {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 10px;
+  max-height: 280px;
+  overflow: auto;
+  display: grid;
+  gap: 8px;
+}
+
+.aser-protocol-flow {
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: #fbfdff;
+  padding: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 6px;
+  min-height: 72px;
+  max-height: 168px;
+  overflow: auto;
+}
+
+.aser-flow-node {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: #fff;
+  padding: 4px 10px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 11px;
+}
+
+.aser-flow-node small {
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+.aser-protocol-flow .aser-flow-require {
+  display: none;
+}
+
+.aser-flow-node-status {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 1px solid #dce2ef;
+  background: #f7f9fd;
+  display: inline-block;
+}
+
+.aser-flow-node-status.aser-status-done {
+  border-color: #8fd3a3;
+  background: #5fbf7a;
+}
+
+.aser-flow-node-status.aser-status-active {
+  border-color: #8dc2ff;
+  background: #5b9ef4;
+}
+
+.aser-flow-node-status.aser-status-risk {
+  border-color: #f0b176;
+  background: #e58e3f;
+}
+
+.aser-flow-node-status.aser-status-idle {
+  border-color: #dce2ef;
+  background: #e7ebf4;
+}
+
+.aser-flow-node.is-clarify {
+  border-color: #86b2f4;
+  background: #eef6ff;
+}
+
+.aser-flow-node.is-escalate {
+  border-color: #f1b26f;
+  background: #fff7ed;
+}
+
+.aser-flow-node.is-coverage-done {
+  border-color: #8fd3a3;
+  background: #eefbf2;
+}
+
+.aser-flow-node.is-coverage-active {
+  border-color: #8dc2ff;
+  background: #eef7ff;
+}
+
+.aser-flow-node.is-coverage-risk {
+  border-color: #f0b176;
+  background: #fff5eb;
+}
+
+.aser-flow-arrow {
+  color: var(--text-secondary);
+  font-size: 12px;
+  align-self: center;
+  margin: 0 2px;
+}
+
+.aser-protocol-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-protocol-block {
+  display: grid;
+  gap: 4px;
+}
+
+.aser-protocol-block-title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.aser-protocol-line {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-protocol-coverage-meta {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid #dbe6ff;
+  background: #f3f7ff;
+  color: #315d9e;
+  font-size: 11px;
+}
+
+.aser-protocol-coverage-meta.is-done {
+  border-color: #8fd3a3;
+  background: #eefbf2;
+  color: #2f6b3d;
+}
+
+.aser-protocol-coverage-meta.is-active {
+  border-color: #8dc2ff;
+  background: #eef7ff;
+  color: #245b9b;
+}
+
+.aser-protocol-coverage-meta.is-risk {
+  border-color: #f0b176;
+  background: #fff5eb;
+  color: #8a4e12;
+}
+
+.aser-protocol-coverage-meta.is-idle {
+  border-color: #dce2ef;
+  background: #f7f9fd;
+  color: #6d7585;
+}
+
+.aser-toggle-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: #fff;
+}
+
+.aser-toggle-inline input {
+  margin: 0;
+}
+
+.aser-project-list {
+  display: grid;
+  gap: 8px;
+  max-height: 420px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.aser-project-item {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  text-align: left;
+  padding: 8px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.aser-project-item:hover {
+  border-color: #a3c2ff;
+  background: #f7faff;
+}
+
+.aser-project-item.active {
+  border-color: #7ea8f2;
+  background: #eef5ff;
+}
+
+.aser-project-main-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.aser-project-delete-btn {
+  align-self: center;
+  color: #9b2c2c;
+  width: 30px;
+  min-width: 30px;
+  padding: 4px;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.aser-project-list-pager {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.aser-project-pager-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-project-overview .aser-project-detail-row {
+  background: #fff;
+}
+
+.aser-project-name {
+  font-weight: 600;
+}
+
+.aser-project-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-create-form {
+  display: grid;
+  gap: 10px;
+}
+
+.aser-create-form h3,
+.aser-form-grid h3,
+.aser-runtime-board h3 {
+  font-size: 13px;
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.aser-create-form input,
+.aser-create-form textarea,
+.aser-form-grid input,
+.aser-form-grid textarea,
+.aser-form-grid select {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.aser-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 12px 0;
+}
+
+.aser-form-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.aser-inline-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.aser-inline-actions select {
+  min-width: 180px;
+}
+
+#teams-agent-select {
+  min-height: 140px;
+}
+
+#opencode-runner-task-list {
+  max-height: 320px;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+#opencode-runner-timeline {
+  max-height: 360px;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.aser-inline-actions .btn.active {
+  background: #d9e8ff;
+  color: #184a97;
+}
+
+.aser-pulled-task {
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: #fcfcff;
+  padding: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  min-height: 40px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.aser-chat-process-list {
+  display: grid;
+  gap: 8px;
+}
+
+.aser-chat-task {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fafcff;
+  padding: 8px;
+  display: grid;
+  gap: 5px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.aser-chat-task.active {
+  border-color: #7ea8f2;
+  background: #eef5ff;
+}
+
+.aser-chat-task-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.aser-chat-task-title {
+  font-size: 13px;
+  font-weight: 600;
+  flex: 1;
+}
+
+.aser-role-badge {
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  border: 1px solid var(--border);
+}
+
+.aser-role-badge.pm {
+  background: #eaf3ff;
+  border-color: #9ec0ef;
+}
+
+.aser-role-badge.arch {
+  background: #f1efff;
+  border-color: #b7abef;
+}
+
+.aser-role-badge.dev {
+  background: #ecf8f0;
+  border-color: #9ad3b0;
+}
+
+.aser-role-badge.rev {
+  background: #fff3e8;
+  border-color: #efc08a;
+}
+
+.aser-chat-task-status,
+.aser-chat-task-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-chat-task-status {
+  border-radius: 999px;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  background: #fff;
+}
+
+.aser-chat-task-timeline {
+  margin-top: 2px;
+  border-top: 1px dashed var(--border);
+  padding-top: 6px;
+  display: grid;
+  gap: 4px;
+}
+
+.aser-chat-task-interaction {
+  font-size: 11px;
+  display: grid;
+  gap: 2px;
+  color: var(--text-secondary);
+}
+
+.aser-chat-task-interaction strong {
+  color: var(--text);
+}
+
+.aser-task-graph {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 10px;
+  display: grid;
+  gap: 6px;
+}
+
+.aser-sequence-header {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #f8fbff;
+  overflow: hidden;
+}
+
+.aser-sequence-lane {
+  border-right: 1px dashed #dbe5f5;
+  min-height: 48px;
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 2px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.aser-sequence-lane:last-child {
+  border-right: none;
+}
+
+.aser-sequence-body {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 10px;
+  display: grid;
+  gap: 10px;
+  position: relative;
+}
+
+.aser-sequence-row {
+  position: relative;
+  min-height: 72px;
+  padding-top: 4px;
+}
+
+.aser-sequence-arrow {
+  position: absolute;
+  top: 36px;
+  height: 2px;
+  background: #89a8df;
+}
+
+.aser-sequence-arrow::after {
+  content: '';
+  position: absolute;
+  right: -1px;
+  top: -3px;
+  border-left: 6px solid #89a8df;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.aser-sequence-arrow.reverse::after {
+  right: auto;
+  left: -1px;
+  border-left: none;
+  border-right: 6px solid #89a8df;
+}
+
+.aser-sequence-message {
+  position: relative;
+  z-index: 1;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fafcff;
+  width: min(94%, 860px);
+  margin: 0 auto;
+  padding: 6px 8px;
+  display: grid;
+  gap: 2px;
+  text-align: left;
+  cursor: pointer;
+  font-size: 11px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+
+.aser-sequence-time {
+  color: var(--text-secondary);
+}
+
+.aser-sequence-transition {
+  color: #1f4f9d;
+  font-weight: 600;
+}
+
+.aser-graph-overview {
+  font-size: 12px;
+  color: var(--text-secondary);
+  border-bottom: 1px dashed var(--border);
+  padding-bottom: 4px;
+  margin-bottom: 2px;
+}
+
+.aser-graph-row {
+  display: grid;
+  justify-items: center;
+  gap: 4px;
+}
+
+.aser-graph-node {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fafcff;
+  width: min(100%, 360px);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.aser-graph-node.active {
+  border-color: #7ea8f2;
+  background: #eef5ff;
+}
+
+.aser-graph-node .name {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.aser-graph-node .status,
+.aser-graph-arrow {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-graph-link {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.aser-task-flow {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 8px;
+  max-height: 220px;
+  overflow: auto;
+  display: grid;
+  gap: 8px;
+}
+
+.aser-task-thread {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 8px;
+  display: grid;
+  gap: 6px;
+}
+
+.aser-thread-group {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fcfdff;
+  overflow: hidden;
+}
+
+.aser-thread-group-head {
+  padding: 8px;
+  display: grid;
+  gap: 2px;
+  border-bottom: 1px dashed var(--border);
+  cursor: pointer;
+}
+
+.aser-thread-group-body {
+  padding: 6px;
+  display: grid;
+  gap: 4px;
+}
+
+.aser-thread-root,
+.aser-thread-child {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fafcff;
+  padding: 6px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.aser-thread-root.mainline,
+.aser-thread-child.mainline {
+  border-left: 3px solid #7ea8f2;
+}
+
+.aser-thread-root.loop,
+.aser-thread-child.loop {
+  border-left: 3px solid #f0b176;
+  background: #fffaf3;
+}
+
+.aser-thread-child {
+  margin-left: 0;
+}
+
+.aser-thread-related {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.aser-thread-flow-tag {
+  justify-self: start;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.aser-thread-flow-tag.mainline {
+  border-color: #8dc2ff;
+  background: #eef7ff;
+  color: #245b9b;
+}
+
+.aser-thread-flow-tag.loop {
+  border-color: #f0b176;
+  background: #fff5eb;
+  color: #8a4e12;
+}
+
+.aser-thread-badge {
+  justify-self: start;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.aser-thread-badge.risk {
+  border-color: #f0b176;
+  background: #fff5eb;
+  color: #8a4e12;
+}
+
+.aser-thread-badge.normal {
+  border-color: #8fd3a3;
+  background: #eefbf2;
+  color: #2f6b3d;
+}
+
+.aser-task-flow-row {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fafcff;
+  padding: 8px;
+  display: grid;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.aser-task-flow-row.active {
+  border-color: #7ea8f2;
+  background: #eef5ff;
+}
+
+.aser-task-flow-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.aser-task-flow-meta,
+.aser-task-flow-time {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.aser-task-flow-track {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.aser-task-flow-chip {
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: #fff;
+  font-size: 11px;
+  padding: 2px 8px;
+}
+
+.aser-pm-board {
+  display: grid;
+  gap: 8px;
+}
+
+.aser-pm-kpi-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.aser-pm-kpi {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px 8px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.aser-pm-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.aser-pm-card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 6px 8px;
+  display: grid;
+  gap: 3px;
+}
+
+.aser-pm-card.risk {
+  border-color: #f1b26f;
+  background: #fff8ef;
+}
+
+.aser-pm-card-title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.aser-pm-card-meta {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.is-created {
+  border-color: #d6dbe5 !important;
+  background: #fff !important;
+}
+
+.is-progress {
+  border-color: #8dc2ff !important;
+  background: #eef7ff !important;
+}
+
+.is-review {
+  border-color: #b9a0ff !important;
+  background: #f5f0ff !important;
+}
+
+.is-done {
+  border-color: #8fd3a3 !important;
+  background: #eefbf2 !important;
+}
+
+.is-risk {
+  border-color: #f0b176 !important;
+  background: #fff5eb !important;
+}
+
+.aser-focus-detail {
+  min-height: 120px;
+  white-space: pre-wrap;
+  color: var(--text-secondary);
+  font-size: 13px;
+  display: grid;
+  gap: 6px;
+}
+
+.aser-focus-title {
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.aser-focus-line {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.aser-focus-section {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px;
+  background: #fbfcff;
+  display: grid;
+  gap: 5px;
+}
+
+.aser-focus-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.aser-evidence-gap-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.aser-evidence-chip {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.aser-evidence-chip.missing {
+  border-color: #f0b176;
+  background: #fff5eb;
+  color: #8a4e12;
+}
+
+.aser-evidence-chip.done {
+  border-color: #8fd3a3;
+  background: #eefbf2;
+  color: #2f6b3d;
+}
+
+.aser-dialog-shell {
+  min-width: min(90vw, 760px);
+  padding: 20px;
+  border-radius: 14px;
+  background: #fff;
+  display: grid;
+  gap: 12px;
+}
+
+.aser-dialog-shell h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.aser-dialog-shell input,
+.aser-dialog-shell textarea,
+.aser-dialog-shell select {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.aser-dialog-shell textarea {
+  min-height: 180px;
+  line-height: 1.45;
+}
+
+.aser-dialog-shell textarea#aser-protocol-json-input {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  min-height: min(60vh, 520px);
+  background: #f8fafc;
+}
+
+.aser-dialog-shell input:focus,
+.aser-dialog-shell textarea:focus,
+.aser-dialog-shell select:focus {
+  outline: none;
+  border-color: #7ea8f2;
+  box-shadow: 0 0 0 3px rgba(126, 168, 242, 0.18);
+}
+
+.aser-dialog-shell .aser-inline-actions {
+  justify-content: flex-end;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+
+#aser-create-project-dialog,
+#aser-protocol-dialog {
+  width: min(92vw, 860px);
+  max-width: min(92vw, 860px);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
+}
+
+#aser-create-project-dialog::backdrop,
+#aser-protocol-dialog::backdrop {
+  background: rgba(15, 23, 42, 0.34);
+  backdrop-filter: blur(1.5px);
+}
+
+#aser-protocol-flow-dialog {
+  width: min(94vw, 1080px);
+  max-width: min(94vw, 1080px);
+  max-height: min(90vh, 860px);
 }
 
-.summary-card .label {
-  font-size: 12px;
-  color: var(--text-secondary);
+.aser-protocol-detail-shell {
+  gap: 14px;
 }
 
-.summary-card .value {
-  margin-top: 4px;
-  font-size: 18px;
-  font-weight: 600;
+#aser-protocol-flow-fullscreen {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #fbfcff;
+  padding: 12px;
+  max-height: min(68vh, 620px);
+  overflow: auto;
 }
 
-.action-strip {
+.aser-protocol-flow-detailed {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 14px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 8px;
 }
 
-.action-strip input,
-.action-strip select,
-.inline-actions input,
-.inline-actions select {
-  border: 1px solid var(--border);
-  border-radius: 8px;
+.aser-flow-node.detail {
+  border-radius: 12px;
   padding: 8px 10px;
-  font-size: 13px;
-  background: var(--bg);
+  min-width: 240px;
+  max-width: 280px;
+  gap: 4px;
 }
 
-.inline-actions {
+.aser-flow-node-head {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
 
-#work-tree-collapse-action {
-  min-width: 132px;
+.aser-flow-arrow.detail {
+  align-self: center;
+  font-size: 16px;
+  margin: 0 4px;
 }
 
-.inline-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  user-select: none;
+.aser-project-detail {
+  display: grid;
+  align-content: start;
+  gap: 8px;
 }
 
-.inline-checkbox input[type="checkbox"] {
-  width: 14px;
-  height: 14px;
+.aser-project-detail.is-empty {
+  opacity: 0.85;
 }
 
-.insight-box {
-  background: #eef3fd;
-  border: 1px solid #c6d5f8;
-  color: #17366f;
-  border-radius: 10px;
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  white-space: pre-wrap;
+.aser-project-detail-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px;
+  background: #fcfcfc;
 }
 
-.insight-box-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
+.aser-project-detail-row .label {
+  font-size: 12px;
+  color: var(--text-secondary);
 }
 
-.changes-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.aser-project-detail-row .value {
+  font-size: 13px;
+  word-break: break-word;
 }
 
-.change-date-group {
-  display: flex;
-  flex-direction: column;
+.aser-runtime-board {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 8px;
+  display: grid;
   gap: 8px;
 }
 
-.change-date-title {
-  margin: 4px 0;
-  font-size: 13px;
-  color: var(--text-secondary);
+.aser-thread-summary {
+  display: grid;
+  gap: 6px;
 }
 
-.change-item {
-  background: var(--bg);
+.aser-thread-summary-row {
   border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border-radius: 8px;
+  background: #fafcff;
+  padding: 8px;
+  display: grid;
+  gap: 2px;
+  cursor: pointer;
 }
 
-.change-meta {
+.aser-thread-summary-row:hover {
+  border-color: #a3c2ff;
+  background: #f3f8ff;
+}
+
+.aser-thread-summary-main {
+  font-size: 12px;
+  font-weight: 600;
   display: flex;
-  gap: 10px;
   align-items: center;
-  margin-bottom: 6px;
-  font-size: 12px;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.aser-thread-summary-meta {
+  font-size: 11px;
   color: var(--text-secondary);
 }
 
-.change-target {
-  background: #f1f3f4;
+.aser-health-badge {
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: 1px 8px;
+  font-size: 10px;
+  font-weight: 600;
 }
 
-.change-type {
-  font-size: 11px;
-  border-radius: 8px;
-  padding: 2px 8px;
-  color: #fff;
+.aser-health-badge.healthy {
+  border-color: #8fd3a3;
+  background: #eefbf2;
+  color: #2f6b3d;
 }
 
-.change-type.create { background: var(--success); }
-.change-type.update { background: var(--primary); }
-.change-type.delete { background: var(--error); }
+.aser-health-badge.watch {
+  border-color: #8dc2ff;
+  background: #eef7ff;
+  color: #245b9b;
+}
 
-.change-detail {
-  font-size: 13px;
-  line-height: 1.5;
+.aser-health-badge.risky {
+  border-color: #f0b176;
+  background: #fff5eb;
+  color: #8a4e12;
 }
 
-.change-diff-list {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
+.aser-governance-advice {
+  display: grid;
+  gap: 8px;
+}
+
+.aser-governance-card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  padding: 8px;
+  display: grid;
   gap: 4px;
 }
 
-.change-diff-line {
+.aser-governance-title {
   font-size: 12px;
-  color: var(--text-secondary);
+  font-weight: 600;
 }
 
-.btn-sm {
-  padding: 6px 14px;
+.aser-governance-main {
   font-size: 13px;
+  font-weight: 700;
 }
 
-/* Cards */
-.card {
-  background: var(--bg);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
-  padding: 20px 24px;
-  margin-bottom: 16px;
-  transition: box-shadow 0.2s;
-}
-
-.card:hover {
-  box-shadow: 0 4px 8px rgba(0,0,0,0.16);
+.aser-governance-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
 }
 
-/* Sandbox List */
-.sandbox-grid {
+.aser-task-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
+  gap: 8px;
 }
 
-.sandbox-card {
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
+.aser-task-item {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px;
+  display: grid;
+  gap: 6px;
+  background: #fafcff;
 }
 
-.sandbox-card:hover {
-  transform: translateY(-2px);
+.aser-task-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
 }
 
-.sandbox-card h3 {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 8px;
+.aser-task-title {
+  font-weight: 600;
+  font-size: 13px;
 }
 
-.sandbox-card p {
+.aser-task-status {
+  font-size: 12px;
   color: var(--text-secondary);
-  font-size: 13px;
 }
 
-.sandbox-meta {
-  display: flex;
-  gap: 12px;
-  margin-top: 12px;
+.aser-task-meta {
   font-size: 12px;
   color: var(--text-secondary);
 }
 
-.sandbox-page-actions {
+.aser-task-actions {
   display: flex;
-  align-items: center;
+  gap: 6px;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 12px;
 }
 
-.sandbox-sort-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+.aser-task-actions select {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px 8px;
   font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.sandbox-sort-label select {
-  min-width: 180px;
-  height: 34px;
 }
 
 .sandbox-actions {
@@ -2014,6 +3357,60 @@ dialog::backdrop {
   font-size: 14px;
 }
 
+.todo-form-dates {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.todo-form-dates label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.todo-card-actions {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.task-board-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.task-board-column {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.task-board-column-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.task-board-list {
+  display: grid;
+  gap: 8px;
+}
+
+.task-board-item {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px;
+  background: #fafcff;
+}
+
+.task-board-item-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
 .dialog-content input:focus,
 .dialog-content textarea:focus,
 .dialog-content select:focus {