@qnote/q-ai-note 1.0.2 → 1.0.4

package/dist/web/styles.css

@@ -83,11 +83,13 @@ body {
 .content {
   flex: 1;
   margin-left: 220px;
-  padding: 24px 32px;
-  max-width: 1400px;
+  width: calc(100vw - 220px);
+  padding: 24px;
 }
 
 .page {
+  max-width: 1560px;
+  margin: 0 auto;
   animation: fadeIn 0.2s ease;
 }
 
@@ -169,6 +171,20 @@ h2 {
   gap: 8px;
 }
 
+.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;
@@ -213,6 +229,13 @@ h2 {
   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;
@@ -331,15 +354,24 @@ h2 {
 .work-tree {
   flex: 1;
   overflow-y: auto;
-  padding: 8px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 /* Parent Node Card */
 .tree-parent-card {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: fit-content;
+  max-width: 100%;
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 12px;
-  margin-bottom: 12px;
+  border-radius: 10px;
+  margin-bottom: 8px;
   overflow: visible;
 }
 
@@ -347,13 +379,22 @@ h2 {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
   background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
   cursor: pointer;
   transition: background 0.2s;
 }
 
+.tree-parent-card.collapsed .tree-parent-header {
+  border-left: 3px solid #d0d7e2;
+}
+
+.tree-parent-card.expanded .tree-parent-header {
+  border-left: 3px solid #8ab4f8;
+}
+
 .tree-parent-header:focus-visible,
 .tree-leaf-node:focus-visible {
   outline: 2px solid #c2dbff;
@@ -369,10 +410,47 @@ h2 {
   height: 10px;
 }
 
+.node-expand-btn {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #fff;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.node-expand-btn svg {
+  width: 14px;
+  height: 14px;
+  transform: rotate(0deg);
+  transition: transform 0.15s ease;
+}
+
+.node-expand-btn.expanded svg {
+  transform: rotate(90deg);
+}
+
+.node-expand-btn:hover {
+  border-color: #9fb8e7;
+  background: #eef4ff;
+  color: #1a53b8;
+}
+
 .tree-parent-header .node-name {
-  flex: 1;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 460px;
   font-weight: 600;
-  font-size: 15px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tree-parent-header .node-meta {
@@ -384,20 +462,27 @@ h2 {
 }
 
 .tree-parent-children {
-  padding: 8px 14px 14px 28px;
-  display: flex;
+  padding: 6px 10px 10px 14px;
+  display: inline-flex;
   flex-direction: column;
+  align-items: flex-start;
+  width: fit-content;
+  max-width: 100%;
   gap: 6px;
   border-top: 1px dashed var(--border);
-  background: #fafafa;
+  background: #fcfcfc;
 }
 
 /* Child Node (non-leaf) */
 .tree-child-node {
+  width: fit-content;
+  min-width: 220px;
+  max-width: min(100%, 680px);
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: 6px;
+  min-height: 42px;
+  padding: 8px 10px;
   border-radius: 8px;
   background: white;
   border: 1px solid var(--border);
@@ -415,9 +500,14 @@ h2 {
 }
 
 .tree-child-node .node-name {
-  flex: 1;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 360px;
   font-size: 13px;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tree-child-node .node-meta {
@@ -429,26 +519,233 @@ h2 {
 .tree-leaf-container {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px 8px 2px;
+  gap: 6px;
+  padding: 6px 2px 2px;
   background: linear-gradient(180deg, #f5f5f5 0%, #fafafa 100%);
   border-top: 1px dashed var(--border);
-  margin-top: 4px;
+  margin-top: 2px;
   width: 100%;
 }
 
 .tree-leaf-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  grid-template-columns: repeat(1, minmax(220px, 1fr));
   gap: 8px;
   width: 100%;
 }
 
+.tree-root-mixed-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 10px;
+  grid-auto-flow: dense;
+  align-items: start;
+  width: 100%;
+}
+
+.root-grid-item {
+  min-width: 0;
+}
+
+.tree-root-mixed-grid .root-grid-item.branch > .tree-parent-card {
+  width: 100%;
+}
+
+.tree-root-mixed-grid .root-grid-item.leaf > .tree-leaf-node {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+/* Dense tree mode */
+.dense-tree {
+  width: 100%;
+  border: 1px solid #e7ebf1;
+  border-radius: 8px;
+  background: #fff;
+  padding: 6px;
+}
+
+.dense-tree.dense-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dense-tree.dense-horizontal {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: auto;
+  padding-bottom: 6px;
+}
+
+.dense-lane-board {
+  flex-wrap: nowrap;
+}
+
+.dense-lane {
+  min-width: var(--lane-width, 220px);
+  width: var(--lane-width, 220px);
+  flex: 0 0 var(--lane-width, 220px);
+  border-right: 1px solid #eef2f7;
+  padding-right: 10px;
+  padding-left: 2px;
+}
+
+.dense-lane:last-child {
+  border-right: none;
+  padding-right: 0;
+}
+
+.dense-lane-body {
+  width: 100%;
+  min-width: 0;
+}
+
+.dense-svg-node {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 26px;
+  border-radius: 4px;
+  padding: 1px 6px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+}
+
+.dense-svg-node:hover {
+  border-color: #d4e3fb;
+  background: #f7faff;
+}
+
+.dense-svg-node:focus-visible {
+  outline: 2px solid #c2dbff;
+  outline-offset: 1px;
+}
+
+.dense-expand-btn {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.dense-expand-placeholder {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.dense-link-path {
+  stroke: #9bb3d8;
+  stroke-width: 1.25;
+  fill: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.dense-node-name {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: var(--lane-name-max, 154px);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lane-tree-node-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.lane-tree-title-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.lane-tree-summary-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 14px;
+}
+
+.lane-tree-node-main.stack-summary .dense-node-name {
+  max-width: calc(var(--lane-name-max, 154px) + 28px);
+}
+
+.lane-tree-node {
+  position: relative;
+}
+
+.lane-tree-node-row {
+  position: relative;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 26px;
+  border-radius: 4px;
+  padding: 1px 6px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+}
+
+.lane-tree-node-row:hover {
+  border-color: #d4e3fb;
+  background: #f7faff;
+}
+
+.lane-tree-node-row:focus-visible {
+  outline: 2px solid #c2dbff;
+  outline-offset: 1px;
+}
+
+.lane-tree-children {
+  margin-left: 14px;
+  padding-left: 10px;
+  border-left: 1.2px solid #9bb3d8;
+}
+
+.lane-tree-node .lane-tree-node-row::before {
+  content: '';
+  position: absolute;
+  left: -10px;
+  top: 13px;
+  width: 10px;
+  height: 0;
+  border-top: 1.2px solid #9bb3d8;
+}
+
+.dense-lane > .dense-lane-body > .lane-tree-node > .lane-tree-node-row::before {
+  display: none;
+}
+
+.lane-tree-node-row:hover .node-actions,
+.lane-tree-node-row:focus .node-actions,
+.lane-tree-node-row:focus-within .node-actions {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
 /* Leaf Node Block */
 .tree-leaf-node {
   position: relative;
-  min-width: 0;
-  max-width: none;
+  width: 220px;
+  min-height: 40px;
+  min-width: 220px;
+  max-width: 220px;
   padding: 8px 10px;
   background: white;
   border: 1px solid var(--border);
@@ -462,10 +759,15 @@ h2 {
   overflow: visible;
 }
 
+.tree-leaf-grid > .tree-leaf-node {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+}
+
 .tree-leaf-node:hover {
   border-color: var(--primary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
 .tree-leaf-node .node-status {
@@ -479,17 +781,18 @@ h2 {
   font-size: 12px;
   font-weight: 500;
   display: inline-block;
-  flex: 1;
+  flex: 0 1 auto;
+  max-width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .tree-leaf-node .node-name.short-name {
-  overflow: visible;
-  text-overflow: clip;
-  white-space: normal;
-  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
 }
 
 /* Node Actions */
@@ -557,6 +860,15 @@ h2 {
   background: var(--primary-hover);
 }
 
+.node-action-btn.chat {
+  background: #eef3fd;
+  color: #1d4ed8;
+}
+
+.node-action-btn.chat:hover {
+  background: #dbe8ff;
+}
+
 .node-status.pending { background: #9aa0a6; }
 .node-status.in_progress { background: var(--primary); }
 .node-status.done { background: var(--success); }
@@ -688,6 +1000,17 @@ h2 {
   flex: 1;
 }
 
+.result-detail-list {
+  margin-top: 6px;
+  padding-left: 24px;
+}
+
+.result-detail-item {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
 .btn-sm {
   padding: 4px 10px;
   font-size: 12px;
@@ -904,6 +1227,25 @@ h2 {
   border-color: var(--primary);
 }
 
+.settings-kv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.settings-kv-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.settings-kv-row .setting-header-key,
+.settings-kv-row .setting-header-value {
+  width: 100%;
+}
+
 /* Dialog */
 dialog {
   position: fixed;
@@ -1050,25 +1392,359 @@ dialog::backdrop {
 /* Sandbox Layout - Left/Right */
 .sandbox-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 12px;
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+  gap: 16px;
   height: calc(100vh - 180px);
-  padding-right: 10px;
+  padding-right: 8px;
   box-sizing: border-box;
+  position: relative;
+}
+
+.sandbox-layout.presentation-mode {
+  grid-template-columns: minmax(0, 82fr) minmax(240px, 18fr);
+}
+
+.sandbox-layout.is-fullscreen {
+  grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  height: calc(100dvh - 178px);
+  padding: 6px 8px 8px;
+  background: transparent;
+  align-items: stretch;
+}
+
+.sandbox-layout.is-fullscreen .sandbox-tree-section,
+.sandbox-layout.is-fullscreen .sandbox-chat-section {
+  min-height: 0;
+}
+
+.sandbox-layout.is-fullscreen .sandbox-chat-section {
+  display: none;
+}
+
+#page-sandbox-detail:fullscreen {
+  background: var(--bg-secondary);
+  padding: 16px 24px 20px;
+  overflow: auto;
 }
 
 .sandbox-tree-section {
+  position: relative;
   width: 100%;
   min-width: 0;
   display: flex;
   flex-direction: column;
   background: var(--bg);
   border-radius: 12px;
-  padding: 16px;
+  padding: 12px;
   box-shadow: var(--shadow);
   overflow: hidden;
 }
 
+.work-tree-legend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0 8px 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.work-tree-legend .legend-title {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.work-tree-legend .legend-chip {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 8px;
+  background: #fff;
+  font-weight: 600;
+  color: #1a53b8;
+}
+
+.work-tree-legend .legend-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.work-tree-legend .legend-state .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.work-tree-legend .legend-state.issue-open .dot {
+  background: #d93025;
+}
+
+.work-tree-legend .legend-state.issue-closed .dot {
+  background: #1e8e3e;
+}
+
+.node-entity-drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 420px;
+  max-width: min(420px, calc(100% - 8px));
+  height: 100%;
+  max-height: none;
+  overflow: auto;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+  padding: 12px;
+  z-index: 5;
+}
+
+.node-entity-drawer.hidden {
+  display: none;
+}
+
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 10px;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 2;
+  padding-bottom: 6px;
+}
+
+.drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.drawer-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.drawer-subtitle {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.summary-strip.compact {
+  margin-bottom: 10px;
+  gap: 8px;
+}
+
+.summary-strip.compact .summary-card {
+  min-width: 110px;
+  flex: 1 1 110px;
+  padding: 8px 10px;
+}
+
+.summary-strip.compact .summary-card .value {
+  font-size: 14px;
+}
+
+.drawer-create-form {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  background: #f8f9fb;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+.drawer-create-form.hidden {
+  display: none;
+}
+
+.entity-field-group.hidden {
+  display: none;
+}
+
+.entity-form-hint {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.entity-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.drawer-create-form input,
+.drawer-create-form select,
+.drawer-create-form textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  background: #fff;
+}
+
+.drawer-list {
+  display: grid;
+  gap: 8px;
+}
+
+.node-entity-mini-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+}
+
+.node-entity-mini-badges.blind-spot {
+  opacity: 0.72;
+}
+
+.node-entity-mini-badge {
+  font-size: 10px;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 6px;
+  background: #fff;
+  line-height: 1.3;
+}
+
+.node-entity-mini-badge.active {
+  border-color: #c7dafc;
+  background: #e8f0fe;
+  color: #1a53b8;
+}
+
+.node-entity-mini-badges.blind-spot .node-entity-mini-badge {
+  border-style: dashed;
+}
+
+.node-entity-mini-badges.issue-open::after,
+.node-entity-mini-badges.issue-closed::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  border: 1px solid #fff;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+}
+
+.node-entity-mini-badges.issue-open::after {
+  background: #d93025;
+}
+
+.node-entity-mini-badges.issue-closed::after {
+  background: #1e8e3e;
+}
+
+.entity-filter-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.entity-filter-tabs .btn.active {
+  background: #e8f0fe;
+  color: var(--primary);
+  border-color: #c7dafc;
+}
+
+.entity-card {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: #fff;
+  position: relative;
+}
+
+.entity-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.entity-card-actions {
+  display: inline-flex;
+  gap: 6px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.entity-card:hover .entity-card-actions,
+.entity-card:focus-within .entity-card-actions {
+  visibility: visible;
+  opacity: 1;
+}
+
+.entity-type-pill {
+  font-size: 11px;
+  border-radius: 10px;
+  padding: 2px 8px;
+  background: #e8f0fe;
+  color: #1a53b8;
+}
+
+.entity-meta {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.entity-status-pill {
+  font-size: 11px;
+  border-radius: 10px;
+  padding: 1px 8px;
+  margin-right: 6px;
+}
+
+.entity-status-pill.open,
+.entity-status-pill.in_progress {
+  background: #e8f0fe;
+  color: #1a53b8;
+}
+
+.entity-status-pill.blocked {
+  background: #fce8e6;
+  color: #b3261e;
+}
+
+.entity-status-pill.resolved,
+.entity-status-pill.closed,
+.entity-status-pill.ready {
+  background: #e6f4ea;
+  color: #1e8e3e;
+}
+
+.entity-status-pill.building {
+  background: #fff7e0;
+  color: #9a6700;
+}
+
+.entity-content {
+  margin-top: 6px;
+  font-size: 13px;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.entity-content a {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
 .sandbox-chat-section {
   width: 100%;
   min-width: 0;
@@ -1076,12 +1752,31 @@ dialog::backdrop {
   flex-direction: column;
   background: var(--bg);
   border-radius: 12px;
-  padding: 12px;
+  padding: 10px;
   margin-right: 2px;
   box-shadow: var(--shadow);
   overflow: hidden;
 }
 
+@media (max-width: 1366px) {
+  .sandbox-layout {
+    grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
+  }
+
+  .sandbox-layout.presentation-mode {
+    grid-template-columns: minmax(0, 80fr) minmax(220px, 20fr);
+  }
+
+  .node-entity-drawer {
+    width: 360px;
+    max-width: min(360px, calc(100% - 8px));
+  }
+
+  .tree-child-node {
+    max-width: min(100%, 560px);
+  }
+}
+
 .sandbox-chat-section .chat-container {
   flex: 1;
   height: auto;
@@ -1094,6 +1789,61 @@ dialog::backdrop {
   overflow-y: auto;
 }
 
+.quick-chat-popover {
+  position: absolute;
+  z-index: 8;
+  width: 340px;
+  max-width: min(340px, calc(100% - 24px));
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
+  padding: 10px;
+}
+
+.quick-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.quick-chat-popover textarea {
+  width: 100%;
+  min-height: 90px;
+  resize: vertical;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.quick-chat-popover textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.quick-chat-meta {
+  text-align: right;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.quick-chat-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.quick-chat-actions .btn.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
 /* Sandbox Chat */
 .sandbox-chat {
   margin-top: 32px;