@qnote/q-ai-note 1.0.4 → 1.0.6

package/dist/web/styles.css

@@ -46,14 +46,55 @@ body {
 .sidebar-header {
   padding: 18px 16px;
   border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .sidebar-header h1 {
   font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: 0.2px;
   color: var(--text);
 }
 
+.brand-mark {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+}
+
+.brand-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid #3b82f6;
+  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
+}
+
+.brand-tail {
+  position: absolute;
+  right: -1px;
+  bottom: 1px;
+  width: 11px;
+  height: 2px;
+  background: #3b82f6;
+  border-radius: 999px;
+  transform: rotate(38deg);
+  transform-origin: right center;
+}
+
+.brand-dot {
+  position: absolute;
+  right: -1px;
+  top: 1px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #8b5cf6;
+}
+
 .nav-list {
   list-style: none;
   padding: 12px 0;
@@ -97,6 +138,10 @@ body {
   display: none;
 }
 
+.hidden {
+  display: none !important;
+}
+
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
@@ -195,6 +240,13 @@ h2 {
   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;
@@ -405,6 +457,11 @@ h2 {
   background: linear-gradient(135deg, #e8f0fe 0%, #f0f7ff 100%);
 }
 
+.tree-parent-header.is-selected {
+  background: linear-gradient(135deg, #dbeafe 0%, #eef6ff 100%);
+  box-shadow: inset 0 0 0 1px #8bb8ff;
+}
+
 .tree-parent-header .node-status {
   width: 10px;
   height: 10px;
@@ -594,6 +651,24 @@ h2 {
   padding-left: 2px;
 }
 
+.dense-lane-drag-handle {
+  width: fit-content;
+  font-size: 12px;
+  color: #7a8ca8;
+  border: 1px dashed #d5deed;
+  border-radius: 6px;
+  padding: 0 6px;
+  margin: 0 0 6px 0;
+  cursor: grab;
+  user-select: none;
+}
+
+.dense-lane-drag-handle:hover {
+  color: #4b6ea8;
+  border-color: #b8cae6;
+  background: #f5f9ff;
+}
+
 .dense-lane:last-child {
   border-right: none;
   padding-right: 0;
@@ -706,6 +781,12 @@ h2 {
   background: #f7faff;
 }
 
+.lane-tree-node-row.is-selected {
+  border-color: #80aef5;
+  background: #edf5ff;
+  box-shadow: inset 0 0 0 1px #80aef5;
+}
+
 .lane-tree-node-row:focus-visible {
   outline: 2px solid #c2dbff;
   outline-offset: 1px;
@@ -739,6 +820,101 @@ h2 {
   pointer-events: auto;
 }
 
+.lane-tree-node-row.drag-over-target {
+  border-color: #7ba5ec;
+  background: #edf4ff;
+}
+
+.lane-tree-node-row[data-drop-position="before"] {
+  box-shadow: inset 0 2px 0 #5f8fe0;
+}
+
+.lane-tree-node-row[data-drop-position="after"] {
+  box-shadow: inset 0 -2px 0 #5f8fe0;
+}
+
+.lane-tree-node-row[data-drop-position="child"] {
+  border-style: dashed;
+}
+
+.lane-tree-node-row.is-dragging {
+  opacity: 0.45;
+}
+
+.dense-lane.lane-drag-over-target {
+  background: #f3f8ff;
+  border-color: #bfd7ff;
+}
+
+.dense-lane.is-lane-dragging {
+  opacity: 0.5;
+}
+
+.tree-node-preview-wrapper,
+.lane-node-preview-wrapper {
+  padding: 2px 8px 6px 8px;
+}
+
+.node-entity-preview-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.entity-preview-box {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 188px;
+  border: 1px solid transparent;
+  background: #f8fafc;
+  color: #334155;
+  padding: 2px 6px;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.entity-preview-box .entity-preview-type {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.entity-preview-box .entity-preview-title {
+  max-width: 108px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.entity-preview-box.issue {
+  border-radius: 4px;
+  border-color: #fecaca;
+  background: #fff1f2;
+  color: #9f1239;
+}
+
+.entity-preview-box.knowledge {
+  border-radius: 999px;
+  border-style: dashed;
+  border-color: #a7f3d0;
+  background: #f0fdf4;
+  color: #065f46;
+}
+
+.entity-preview-box.capability {
+  border-radius: 2px;
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.entity-preview-more {
+  font-size: 11px;
+  color: #64748b;
+}
+
 /* Leaf Node Block */
 .tree-leaf-node {
   position: relative;
@@ -755,10 +931,15 @@ h2 {
   transition: all 0.2s;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 6px;
   overflow: visible;
 }
 
+.tree-leaf-node > .node-entity-preview-strip {
+  width: 100%;
+}
+
 .tree-leaf-grid > .tree-leaf-node {
   width: auto;
   min-width: 0;
@@ -770,6 +951,12 @@ h2 {
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
+.tree-leaf-node.is-selected {
+  border-color: #7aa9f8;
+  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
+  box-shadow: 0 0 0 2px rgba(122, 169, 248, 0.28), 0 6px 14px rgba(58, 108, 196, 0.12);
+}
+
 .tree-leaf-node .node-status {
   display: inline-flex;
   width: 6px;
@@ -1140,8 +1327,8 @@ h2 {
 
 .diary-item {
   position: relative;
-  padding: 16px 20px;
-  margin-bottom: 16px;
+  padding: 12px 16px;
+  margin-bottom: 12px;
   background: var(--bg);
   border-radius: 12px;
   box-shadow: var(--shadow);
@@ -1162,17 +1349,68 @@ h2 {
 .diary-meta {
   font-size: 12px;
   color: var(--text-secondary);
-  margin-bottom: 8px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.diary-open-node-link {
+  border: none;
+  background: transparent;
+  color: #1d4ed8;
+  font-size: 12px;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.diary-head-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .diary-content {
-  line-height: 1.6;
+  line-height: 1.45;
+}
+
+.diary-content p {
+  margin: 0 0 6px;
+}
+
+.diary-content h1,
+.diary-content h2,
+.diary-content h3,
+.diary-content h4,
+.diary-content h5,
+.diary-content h6 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.diary-content ul {
+  margin: 0 0 8px 18px;
+  padding: 0;
+}
+
+.diary-content code {
+  background: #f2f4f7;
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-size: 12px;
 }
 
 .diary-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
-  margin-top: 12px;
+  margin-top: 0;
+  flex-shrink: 0;
 }
 
 .diary-actions button {
@@ -1194,6 +1432,150 @@ h2 {
   color: var(--text-secondary);
 }
 
+.diary-actions .edit {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+#diary-edit-dialog {
+  width: min(980px, 95vw);
+  max-width: none;
+  background: #fff;
+  overflow: hidden;
+}
+
+#diary-edit-dialog textarea {
+  width: 100%;
+  min-height: 280px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.diary-edit-shell {
+  display: flex;
+  flex-direction: column;
+}
+
+.diary-edit-header {
+  padding: 18px 22px 10px;
+  border-bottom: 1px solid #edf0f5;
+  background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
+}
+
+.diary-edit-header h3 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.diary-edit-header p {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.diary-edit-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 12px 22px 14px;
+}
+
+.diary-edit-pane {
+  border: 1px solid #e7ecf4;
+  border-radius: 10px;
+  background: #fff;
+  min-width: 0;
+}
+
+.diary-edit-pane-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  padding: 8px 10px;
+  border-bottom: 1px solid #edf0f5;
+  background: #f8fafc;
+  border-radius: 10px 10px 0 0;
+}
+
+.diary-edit-pane textarea {
+  border: none !important;
+  border-radius: 0 0 10px 10px !important;
+  margin: 0 !important;
+}
+
+.diary-edit-pane textarea:focus {
+  outline: none;
+}
+
+.diary-edit-preview {
+  min-height: 280px;
+  max-height: 420px;
+  overflow: auto;
+  padding: 10px 12px;
+}
+
+.diary-edit-preview.is-empty {
+  color: #94a3b8;
+  font-style: italic;
+}
+
+.diary-edit-actions {
+  align-items: center;
+  gap: 10px;
+}
+
+.diary-edit-shortcut-hint {
+  margin-right: auto;
+  font-size: 12px;
+  color: #64748b;
+}
+
+@media (max-width: 960px) {
+  .diary-edit-body {
+    grid-template-columns: 1fr;
+  }
+
+  #diary-edit-dialog textarea,
+  .diary-edit-preview {
+    min-height: 180px;
+  }
+}
+
+.drawer-diary-quick-form {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #fff;
+  padding: 10px;
+  margin: 8px 0 10px;
+}
+
+.sandbox-diary-quick-meta {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 6px;
+}
+
+#drawer-diary-content {
+  width: 100%;
+  min-height: 66px;
+  border: 1px solid #d8e0ed;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  resize: vertical;
+}
+
+.sandbox-diary-quick-actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
 /* Settings */
 .settings-form {
   background: var(--bg);
@@ -1392,16 +1774,24 @@ dialog::backdrop {
 /* Sandbox Layout - Left/Right */
 .sandbox-layout {
   display: grid;
-  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  height: calc(100vh - 180px);
+  min-height: 320px;
   padding-right: 8px;
   box-sizing: border-box;
   position: relative;
 }
 
-.sandbox-layout.presentation-mode {
-  grid-template-columns: minmax(0, 82fr) minmax(240px, 18fr);
+.sandbox-layout.show-chat {
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+}
+
+.sandbox-layout .sandbox-chat-section {
+  display: none;
+}
+
+.sandbox-layout.show-chat .sandbox-chat-section {
+  display: flex;
 }
 
 .sandbox-layout.is-fullscreen {
@@ -1413,12 +1803,24 @@ dialog::backdrop {
   align-items: stretch;
 }
 
+.sandbox-layout.is-fullscreen.show-chat {
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+}
+
 .sandbox-layout.is-fullscreen .sandbox-tree-section,
 .sandbox-layout.is-fullscreen .sandbox-chat-section {
   min-height: 0;
 }
 
-.sandbox-layout.is-fullscreen .sandbox-chat-section {
+.sandbox-layout.is-fullscreen:not(.show-chat) .sandbox-chat-section {
+  display: none;
+}
+
+#page-sandbox-detail.is-sandbox-fullscreen #sandbox-overview {
+  display: none;
+}
+
+#page-sandbox-detail.is-sandbox-fullscreen .back-link {
   display: none;
 }
 
@@ -1760,11 +2162,15 @@ dialog::backdrop {
 
 @media (max-width: 1366px) {
   .sandbox-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sandbox-layout.show-chat {
     grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
   }
 
-  .sandbox-layout.presentation-mode {
-    grid-template-columns: minmax(0, 80fr) minmax(220px, 20fr);
+  .sandbox-layout.is-fullscreen.show-chat {
+    grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
   }
 
   .node-entity-drawer {
@@ -1777,6 +2183,21 @@ dialog::backdrop {
   }
 }
 
+.ai-toggle-btn {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
+}
+
+.ai-toggle-btn:hover {
+  background: linear-gradient(135deg, #1d4ed8, #1e40af);
+}
+
+.ai-toggle-btn .icon {
+  margin-right: 4px;
+}
+
 .sandbox-chat-section .chat-container {
   flex: 1;
   height: auto;