dsh-synapse 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +81 -0
  3. package/app.js +1252 -0
  4. package/client.js +217 -0
  5. package/cordis.patch.yml +13 -0
  6. package/deepseek-mark.svg +3 -0
  7. package/docs/architecture.md +104 -0
  8. package/docs/development.md +137 -0
  9. package/docs/en/README.md +161 -0
  10. package/docs/images/native-webui.png +0 -0
  11. package/docs/images/synapse-ui.png +0 -0
  12. package/docs/zh-CN/README.md +154 -0
  13. package/index.js +802 -0
  14. package/package.json +44 -0
  15. package/styles.css +337 -0
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "dsh-synapse",
3
+ "version": "0.4.0",
4
+ "description": "A visual, non-linear conversation workspace plugin for DeepSeek Harness.",
5
+ "type": "module",
6
+ "main": "index.js",
7
+ "exports": {
8
+ ".": "./index.js",
9
+ "./client": "./client.js",
10
+ "./cordis.patch.yml": "./cordis.patch.yml",
11
+ "./package.json": "./package.json"
12
+ },
13
+ "files": [
14
+ "index.js",
15
+ "client.js",
16
+ "app.js",
17
+ "deepseek-mark.svg",
18
+ "styles.css",
19
+ "docs",
20
+ "cordis.patch.yml",
21
+ "README.md",
22
+ "LICENSE"
23
+ ],
24
+ "engines": {
25
+ "node": ">=22.19.0"
26
+ },
27
+ "license": "MIT",
28
+ "dsh": {
29
+ "bundle": {
30
+ "patch": "./cordis.patch.yml"
31
+ },
32
+ "client": {
33
+ "platform": "web",
34
+ "inject": [
35
+ "@deepseek-ai/dsh-client-runtime"
36
+ ],
37
+ "immediately": false
38
+ }
39
+ },
40
+ "scripts": {
41
+ "build": "node --check index.js && node --check client.js && node --check app.js",
42
+ "test": "node --test test/*.test.js"
43
+ }
44
+ }
package/styles.css ADDED
@@ -0,0 +1,337 @@
1
+ :root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1f2937; background: #f5f7fa; }
2
+ * { box-sizing: border-box; }
3
+ body { margin: 0; min-width: 320px; background: #f5f7fa; }
4
+ button, select, textarea { font: inherit; }
5
+ button { border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #374151; cursor: pointer; min-height: 32px; padding: 0 11px; }
6
+ button:hover { border-color: #9ca3af; background: #f3f4f6; color: #111827; }
7
+ button:disabled { cursor: not-allowed; opacity: .5; }
8
+ button.primary { border-color: #111827; background: #111827; color: #fff; }
9
+ button.primary:hover { border-color: #000; background: #000; color: #fff; }
10
+ .synapse-shell { --sidebar-width: 280px; --sidebar-half: 140px; height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: 42px minmax(0, 1fr); overflow: hidden; }
11
+ .synapse-shell.sidebar-collapsed { --sidebar-width: 56px; --sidebar-half: 28px; }
12
+ .topbar { position: relative; grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border: 0; background: #fff; }
13
+ .brand, .top-actions, .view-switch, .thread-card-head, .thread-meta, .detail-actions, .compare-title { display: flex; align-items: center; }
14
+ .sidebar-brand-row { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 60px; flex: none; margin-bottom: 8px; padding: 8px 0 8px 4px; overflow: hidden; }
15
+ .brand { gap: 8px; min-width: 0; flex: 1; }
16
+ .brand::before { width: 31px; height: 26px; flex: none; content: ''; background: center / contain no-repeat url('/synapse/deepseek-mark.svg'); }
17
+ .brand::after { content: '非线性工作台'; flex: none; border-radius: 3px; background: #111827; padding: 2px 5px; color: #fff; font-size: 10px; font-weight: 400; line-height: 1; white-space: nowrap; }
18
+ .brand-mark { display: none; }
19
+ .brand strong { font-size: 20px; font-weight: 600; letter-spacing: 0; }
20
+ .sidebar-toggle { display: inline-grid; width: 28px; height: 28px; min-height: 28px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #6b7280; }
21
+ .sidebar-toggle:hover { border: 0; background: #eef0f2; color: #374151; }
22
+ .sidebar-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
23
+ .top-actions { gap: 10px; }
24
+ .view-switch { position: fixed; z-index: 80; top: 12px; left: 50%; gap: 2px; padding: 3px; transform: translateX(-50%); border: 1px solid #d1d5db; border-radius: 999px; background: rgba(255,255,255,.96); }
25
+ .view-switch button { min-height: 28px; border: 0; border-radius: 999px; background: transparent; padding: 0 11px; color: #64748b; font-size: 12px; font-weight: 650; }
26
+ .view-switch button:hover { background: #e5e7eb; color: #111827; }
27
+ .view-switch button.active { background: #111827; color: #fff; }
28
+ .view-switch button:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
29
+ .canvas-controls { position: fixed; z-index: 80; top: 14px; right: 16px; display: flex; align-items: center; gap: 5px; }
30
+ .canvas-controls button { min-width: 32px; padding: 0 8px; font-size: 12px; }
31
+ .canvas-controls span { min-width: 42px; color: #64748b; font-size: 12px; text-align: center; }
32
+ .sidebar { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 6px 12px; border-right: 1px solid #e5e7eb; background: #f8f9fa; }
33
+ .new-workspace { display: flex; width: calc(100% - 4px); min-height: auto; height: 38px; align-items: center; justify-content: center; gap: 6px; margin: 0 2px 8px; border-color: rgba(0,0,0,.1); border-radius: 12px; background: #fff; padding: 8px 16px; color: #111827; font-size: 14px; font-weight: 500; }
34
+ .new-session-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
35
+ .new-workspace:hover { border-color: rgba(0,0,0,.16); background: #f7f7f8; color: #111827; }
36
+ .workspace-label, .sidebar-heading { color: #7c8798; font-size: 14px; font-weight: 400; letter-spacing: 0; }
37
+ .workspace-label { display: grid; gap: 9px; margin: 16px 4px 0; }
38
+ .workspace-select { position: relative; display: block; }
39
+ .workspace-select svg { position: absolute; top: 50%; left: 9px; width: 15px; height: 15px; transform: translateY(-50%); fill: none; pointer-events: none; stroke: #64748b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
40
+ .workspace-label select { width: 100%; min-height: 33px; border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #374151; padding: 0 28px 0 30px; }
41
+ .sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 23px 4px 0; padding: 0; }
42
+ .sidebar-heading button { display: grid; width: 24px; min-height: 24px; place-items: center; padding: 0; color: #111827; font-size: 17px; }
43
+ .thread-tree { display: grid; gap: 3px; overflow: auto; padding-bottom: 12px; }
44
+ .tree-row { display: flex; min-width: 0; align-items: center; gap: 8px; border: 0; background: transparent; color: #4b5563; text-align: left; }
45
+ .tree-row:hover { background: #f3f4f6; }
46
+ .tree-row.active { background: #e5e7eb; color: #111827; font-weight: 650; }
47
+ .tree-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
48
+ .tree-row i { margin-left: auto; color: #94a3b8; font-size: 10px; font-style: normal; }
49
+ .tree-dot, .topic-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--thread-color, #374151); }
50
+ .tree-row { --thread-color: #3478f6 !important; }
51
+ .tree-empty { padding: 12px 5px; color: #94a3b8; font-size: 12px; }
52
+ .main-stage { position: relative; grid-column: 2; min-width: 0; min-height: 0; overflow: hidden; background: #f5f7fa; }
53
+ .sidebar-collapsed .sidebar { align-items: center; padding: 18px 10px 6px; }
54
+ .sidebar-collapsed .sidebar-brand-row { width: 36px; height: 36px; margin-bottom: 12px; padding: 0; }
55
+ .sidebar-collapsed .brand { display: none; }
56
+ .sidebar-collapsed .sidebar-toggle { width: 36px; height: 36px; min-height: 36px; color: #111827; }
57
+ .sidebar-collapsed .new-workspace { width: 36px; height: 36px; min-height: 36px; margin: 0 0 12px; border-color: transparent; background: transparent; padding: 0; }
58
+ .sidebar-collapsed .new-workspace span, .sidebar-collapsed .workspace-label, .sidebar-collapsed .sidebar-heading, .sidebar-collapsed .thread-tree { display: none; }
59
+ .status-message { position: absolute; z-index: 6; top: 12px; right: 16px; display: flex; align-items: center; gap: 10px; max-width: 400px; padding: 9px 10px 9px 13px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12px; box-shadow: 0 3px 10px rgba(127,29,29,.12); }
60
+ .status-message span { flex: 1; line-height: 1.5; }
61
+ .status-message button { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #b91c1c; font-size: 15px; line-height: 1; }
62
+ .status-message button:hover { background: #fee2e2; }
63
+ .main-stage { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: #fff; }
64
+ .canvas-tabs { display: flex; height: 32px; flex: none; align-items: end; gap: 26px; padding: 0 24px; border-bottom: 1px solid #e5e7eb; background: #fff; }
65
+ .canvas-tabs button { min-height: 32px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 0 2px; color: #8a919b; font-size: 13px; font-weight: 500; }
66
+ .canvas-tabs button:hover { background: transparent; color: #3478f6; }
67
+ .canvas-tabs button.active { border-bottom-color: #3478f6; color: #3478f6; }
68
+ .canvas-tabs button:disabled { cursor: default; opacity: .4; }
69
+ .canvas-view { display: flex; min-height: 0; flex: 1; }
70
+ .canvas-viewport { position: relative; width: 100%; height: 100%; min-height: 0; flex: 1; overflow: hidden; background: #fff; cursor: grab; }
71
+ .canvas-viewport.is-panning { cursor: grabbing; user-select: none; }
72
+ .canvas-content { position: absolute; inset: 0; transform-origin: 0 0; }
73
+ .connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
74
+ .connectors path { fill: none; stroke: #aebbc9; stroke-width: 1.5; }
75
+ .connectors .draft-connector { stroke: #3478f6; stroke-dasharray: 5 4; }
76
+ .cards-layer { position: absolute; inset: 0; }
77
+ .thread-card { position: absolute; display: grid; width: 310px; height: 276px; grid-template-rows: auto auto minmax(0, 1fr) auto; border: 1px solid #d8e0e8; border-radius: 7px; background: #fff; box-shadow: 0 3px 11px rgba(33,48,67,.08); overflow: visible; }
78
+ .thread-card:hover { border-color: #9ca3af; box-shadow: 0 8px 20px rgba(33,48,67,.13); }
79
+ .thread-card.active { outline: 2px solid rgba(17,24,39,.2); border-color: #6b7280; }
80
+ .thread-card.selected { box-shadow: 0 0 0 2px rgba(17,24,39,.16), 0 8px 20px rgba(33,48,67,.13); }
81
+ .node-handle { position: absolute; top: -8px; left: 50%; display: grid; width: 28px; height: 15px; min-height: 15px; place-items: center; transform: translateX(-50%); border: 1px solid #d8e0e8; border-radius: 4px; background: #fff; cursor: grab; padding: 0; }
82
+ .node-handle::after { content: '...'; display: block; margin: -5px 0 0 2px; color: #94a3b8; font-size: 11px; letter-spacing: 1.5px; line-height: 1; }
83
+ .thread-card-head { gap: 8px; min-width: 0; padding: 15px 12px 8px; }
84
+ .thread-card-head .topic-dot { background: var(--thread-color); }
85
+ .thread-title { min-width: 0; flex: 1; min-height: 22px; overflow: hidden; border: 0; background: transparent; padding: 0; color: #1f2937; font-size: 13px; font-weight: 720; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
86
+ .thread-title:hover { background: transparent; color: #111827; }
87
+ .graph-continue-button, .graph-fold-button, .graph-branch-button { position: absolute; right: -12px; z-index: 4; display: grid; width: 24px; height: 24px; min-height: 24px; place-items: center; border-color: #9ca3af; border-radius: 50%; background: #fff; padding: 0; color: #111827; }
88
+ .graph-continue-button, .graph-fold-button { top: 50%; transform: translateY(-50%); }
89
+ .graph-branch-button { top: calc(50% + 30px); transform: translateY(-50%); }
90
+ .graph-continue-button svg, .graph-fold-button svg, .graph-branch-button svg { width: 13px; height: 13px; }
91
+ .graph-continue-button svg, .graph-fold-button svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
92
+ .graph-branch-button svg { fill: currentColor; }
93
+ .graph-continue-button:hover, .graph-fold-button:hover, .graph-branch-button:hover { border-color: #111827; background: #f3f4f6; }
94
+ .graph-continue-button:focus-visible, .graph-fold-button:focus-visible, .graph-branch-button:focus-visible { outline: 2px solid #3478f6; outline-offset: 2px; }
95
+ .thread-meta { gap: 7px; padding: 0 12px; color: #94a3b8; font-size: 10px; }
96
+ .thread-meta span + span::before { content: '·'; margin-right: 7px; }
97
+ .thread-answer { min-width: 0; min-height: 0; margin: 10px 14px; overflow-x: hidden; overflow-y: auto; color: #526174; font-size: 12px; line-height: 1.58; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-color: #9ca3af transparent; scrollbar-width: thin; }
98
+ .thread-answer::-webkit-scrollbar { width: 6px; height: 0; }
99
+ .thread-answer::-webkit-scrollbar-track { background: transparent; }
100
+ .thread-answer::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #9ca3af; background-clip: padding-box; }
101
+ .thread-answer::-webkit-scrollbar-thumb:hover { background: #6b7280; }
102
+ .thread-answer p { margin: 0 0 8px; overflow-wrap: anywhere; }
103
+ .thread-answer h1, .thread-answer h2, .thread-answer h3 { margin: 0 0 8px; color: #334155; font-size: 13px; line-height: 1.4; }
104
+ .thread-answer ul, .thread-answer ol { margin: 0 0 8px; padding-left: 19px; }
105
+ .thread-answer li + li { margin-top: 3px; }
106
+ .thread-answer code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
107
+ .thread-answer pre { margin: 0 0 8px; max-width: 100%; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 4px; background: #fff; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
108
+ .thread-answer pre code { background: transparent; padding: 0; }
109
+ .thread-answer table { display: block; max-width: 100%; margin: 0 0 8px; overflow-x: auto; border-collapse: collapse; font-size: 11px; }
110
+ .thread-answer th, .thread-answer td { border: 1px solid #d8e0e8; padding: 4px 6px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
111
+ .thread-answer th { background: #f5f7fa; font-weight: 720; }
112
+ .thread-answer-empty { color: #94a3b8; }
113
+ .thread-answer-pending, .message-pending p { color: #374151; font-style: italic; }
114
+ .thread-card footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 7px; border-top: 1px solid #edf0f3; }
115
+ .thread-card footer button { min-height: 26px; padding: 0 6px; border: 0; color: #526174; font-size: 11px; }
116
+ .thread-card footer button:hover { background: #f3f4f6; color: #111827; }
117
+ .thread-card footer .compare-button { margin-right: auto; color: #374151; }
118
+ .thread-card footer .compare-button.selected { background: #e5e7eb; color: #111827; }
119
+ .draft-card { z-index: 2; height: auto; min-height: 228px; border-style: dashed; border-color: #9ca3af; box-shadow: 0 7px 19px rgba(17,24,39,.1); }
120
+ .draft-card strong { color: #1f2937; font-size: 13px; }
121
+ .draft-branch-form { display: grid; justify-items: center; gap: 10px; padding: 10px 12px 12px; }
122
+ .draft-branch-form textarea { width: 100%; min-height: 104px; resize: vertical; border: 1px solid #cbd8e3; border-radius: 5px; padding: 8px 12px; color: #334155; outline-color: #3478f6; }
123
+ .draft-actions { display: flex; width: 100%; justify-content: flex-end; gap: 8px; }
124
+ .draft-actions button { display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; border-radius: 50%; background: #fff; padding: 0; color: #64748b; line-height: 0; }
125
+ .draft-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
126
+ .draft-actions svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
127
+ .empty-canvas, .compare-empty { display: grid; align-content: center; justify-items: center; height: 100%; padding: 32px; text-align: center; }
128
+ .empty-canvas strong, .compare-empty strong { color: #334155; font-size: 16px; }
129
+ .empty-canvas p, .compare-empty p { max-width: 460px; color: #64748b; font-size: 13px; line-height: 1.65; }
130
+ .empty-canvas div { display: flex; gap: 8px; }
131
+ .detail-view { box-sizing: border-box; width: min(880px, 100%); height: 100%; min-height: 0; flex: 1; display: flex; flex-direction: column; margin: 0 auto; background: #fbfcfe; }
132
+ .detail-head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 34px 38px 18px; border-bottom: 1px solid #e7edf3; }
133
+ .detail-head-title { min-width: 0; }
134
+ .detail-head-meta { display: flex; align-items: center; gap: 9px; }
135
+ .detail-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #eaf0fa; padding: 3px 9px; color: #3b6fd4; font-size: 11px; font-weight: 750; letter-spacing: .05em; }
136
+ .detail-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
137
+ .detail-subtitle { overflow: hidden; color: #8a97a8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
138
+ .detail-head h1 { margin: 10px 0 0; overflow-wrap: anywhere; color: #152033; font-size: 21px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
139
+ .detail-head-actions { flex: none; display: flex; gap: 8px; }
140
+ .detail-head-actions button { min-height: 32px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fff; padding: 0 12px; color: #3d4a5c; font-size: 12px; font-weight: 600; }
141
+ .detail-head-actions button:hover { border-color: #b9c7d8; background: #f4f7fb; }
142
+ .detail-head-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
143
+ .detail-head-actions button.primary:hover { background: #2563eb; }
144
+ .detail-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 22px 38px 24px; }
145
+ .note-empty { padding: 34px 25px; border: 1px dashed #cbd5df; border-radius: 10px; color: #8a97a8; font-size: 13px; text-align: center; }
146
+ .message { padding: 13px 16px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
147
+ .message header { display: flex; align-items: center; gap: 7px; color: #475569; font-size: 11px; font-weight: 650; }
148
+ .message time { color: #94a3b8; font-weight: 400; }
149
+ .message-role { color: #334155; }
150
+ .message-avatar { flex: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #3478f6, #7c3aed); }
151
+ .message-user { align-self: flex-end; max-width: 84%; border-color: transparent; background: #eaf1ff; box-shadow: none; }
152
+ .message-user header { justify-content: flex-end; color: #5a78b0; }
153
+ .message-user .message-body p { color: #27375f; }
154
+ .message-assistant { border-left: 3px solid #3478f6; }
155
+ .message-error { border-left: 3px solid #dc2626; background: #fef7f7; }
156
+ .message-todo { border-left: 3px solid #b45309; }
157
+ .message-tool, .message-tool-result { border-left: 3px solid #6b7280; }
158
+ .message-pending { border-style: dashed; }
159
+ .message-collapsible.expanded { box-shadow: 0 2px 10px rgba(15,23,42,.06); }
160
+ .message-body { margin-top: 8px; }
161
+ .message-body > * + * { margin-top: 8px; }
162
+ .message-body p { margin: 0; overflow-wrap: anywhere; color: #334155; font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
163
+ .message-body ul, .message-body ol { margin: 0; padding-left: 20px; }
164
+ .message-body li + li { margin-top: 4px; }
165
+ .message-body h1, .message-body h2, .message-body h3 { margin: 0; color: #1e293b; font-size: 15px; }
166
+ .message-body blockquote { margin: 0; border-left: 3px solid #dbe3ec; padding-left: 10px; color: #64748b; }
167
+ .message-body code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
168
+ .message-body pre { max-width: 100%; margin: 0; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 6px; background: #fff; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
169
+ .message-body pre code { background: transparent; padding: 0; font-size: 12px; }
170
+ .message-body table { display: block; max-width: 100%; margin: 0; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
171
+ .message-body th, .message-body td { border: 1px solid #d8e0e8; padding: 5px 8px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
172
+ .message-body th { background: #f5f7fa; font-weight: 720; }
173
+ .message-branch { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; margin-left: auto; border: 0; border-radius: 5px; background: transparent; padding: 0 6px; color: #8a97a8; font-size: 11px; }
174
+ .message-branch:hover { background: #eef4ff; color: #3478f6; }
175
+ .message-branch svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
176
+ .message-fold { display: grid; width: 24px; min-height: 24px; place-items: center; margin-left: 0; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #94a3b8; }
177
+ .message-fold:hover { background: #edf3ff !important; color: #3478f6 !important; }
178
+ .message-fold svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .15s ease; }
179
+ .message-collapsible.expanded .message-fold svg { transform: rotate(90deg); }
180
+ .message-summary { overflow: hidden; color: #64748b !important; text-overflow: ellipsis; white-space: nowrap; }
181
+ .message-streaming { display: inline-flex; align-items: center; gap: 6px; color: #6b7280 !important; font-style: italic; }
182
+ .streaming-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: streaming-pulse 1.1s ease-in-out infinite; }
183
+ @keyframes streaming-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
184
+ .process-records { margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
185
+ .process-records-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 6px; background: #f8fafc; padding: 7px 10px; color: #475569; font-size: 12px; font-weight: 620; text-align: left; }
186
+ .process-records-fold:hover { background: #edf3ff; color: #3478f6; }
187
+ .process-count { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 720; }
188
+ .process-entry { margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
189
+ .process-entry-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; padding: 8px 10px; color: #334155; font-size: 12px; text-align: left; }
190
+ .process-entry-fold:hover { background: #f8fafc; }
191
+ .process-entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
192
+ .process-status { flex: none; font-size: 11px; }
193
+ .process-status-done { color: #0f766e; }
194
+ .process-status-pending { color: #b45309; }
195
+ .process-status-error { color: #b91c1c; }
196
+ .process-entry-body { display: grid; gap: 8px; padding: 0 10px 10px; }
197
+ .process-args, .process-result, .process-error { margin: 0; padding: 8px 10px; border-radius: 5px; background: #f1f5f9; overflow: auto; color: #334155; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
198
+ .process-error { background: #fef2f2; color: #991b1b; }
199
+ .message-composer { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 14px 38px 20px; border-top: 1px solid #e7edf3; background: #fbfcfe; }
200
+ .message-composer textarea { min-height: 44px; max-height: 160px; resize: vertical; border: 1px solid #dbe3ec; border-radius: 10px; background: #fff; padding: 11px 13px; color: #334155; font-size: 13px; line-height: 1.6; outline-color: #3478f6; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
201
+ .message-composer button { min-height: 40px; border: 0; border-radius: 10px; background: #3478f6; padding: 0 18px; color: #fff; font-size: 13px; font-weight: 650; }
202
+ .message-composer button:hover { background: #2563eb; }
203
+ .message-composer button:disabled { background: #b9c7d8; cursor: not-allowed; }
204
+ .compare-view { height: 100%; overflow: auto; padding: 43px 38px; }
205
+ .compare-view header { width: min(1050px, 100%); margin: 0 auto 24px; }
206
+ .compare-columns { display: grid; width: min(1050px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 auto; }
207
+ .compare-columns article { overflow: hidden; border: 1px solid #dbe3eb; border-radius: 7px; background: #fff; }
208
+ .compare-title { gap: 8px; padding: 16px; border-bottom: 1px solid #e8edf2; }
209
+ .compare-title .topic-dot { background: var(--thread-color, #374151); }
210
+ .compare-title h2 { min-width: 0; flex: 1; margin: 0; overflow: hidden; color: #1e293b; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
211
+ .compare-title button { min-height: 27px; padding: 0 7px; font-size: 11px; }
212
+ .compare-meta { margin: 12px 16px; color: #94a3b8; font-size: 11px; }
213
+ .compare-notes { display: grid; gap: 1px; padding: 0 16px 16px; }
214
+ .compare-notes p { margin: 0; padding: 11px 0; border-top: 1px solid #eef2f5; color: #475569; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
215
+ @media (max-width: 760px) { .synapse-shell { --sidebar-width: 200px; --sidebar-half: 100px; } .synapse-shell.sidebar-collapsed { --sidebar-width: 56px; --sidebar-half: 28px; } .sidebar { padding: 6px 10px; } .detail-head { display: grid; gap: 12px; padding: 22px 18px 14px; } .detail-scroll { padding: 16px 18px 20px; } .message-composer { padding: 12px 18px 16px; } .message-user { max-width: 92%; } .compare-view { padding: 26px 18px; } .compare-columns { grid-template-columns: 1fr; } .topbar { padding: 0 10px; } .brand strong { display: none; } }
216
+ @media (max-width: 560px) { .synapse-shell { min-width: 0; grid-template-columns: 1fr; } .sidebar { display: none; } .topbar, .main-stage { grid-column: 1; } .view-switch { left: 50%; } .view-switch button { padding: 0 7px; } .top-actions > button { font-size: 11px; padding: 0 7px; } .thread-card { width: 280px; } }
217
+
218
+ /* ── Dark theme: follows DSH's body[data-ds-dark-theme] via synapse:theme ── */
219
+ [data-theme="dark"] { color-scheme: dark; }
220
+ [data-theme="dark"] body { background: #0f1115; color: #e6e8eb; }
221
+ [data-theme="dark"] .synapse-shell { background: #0f1115; }
222
+ [data-theme="dark"] .sidebar { border-right-color: #26282d; background: #15171b; }
223
+ [data-theme="dark"] .topbar { background: #15171b; }
224
+ [data-theme="dark"] .main-stage { background: #0f1115; }
225
+ [data-theme="dark"] .canvas-tabs { border-bottom-color: #26282d; background: #15171b; }
226
+ [data-theme="dark"] .canvas-tabs button { color: #8f959e; }
227
+ [data-theme="dark"] .canvas-tabs button.active, [data-theme="dark"] .canvas-tabs button:hover { color: #5b8def; border-bottom-color: #5b8def; }
228
+ [data-theme="dark"] .canvas-viewport { background: #0f1115; }
229
+ [data-theme="dark"] .canvas-content { background: #0f1115; }
230
+ [data-theme="dark"] .connectors path { stroke: #3a3f47; }
231
+ [data-theme="dark"] .connectors .draft-connector { stroke: #5b8def; }
232
+ [data-theme="dark"] .thread-card { border-color: #2a2d33; background: #1b1c1f; box-shadow: 0 3px 11px rgba(0,0,0,.35); }
233
+ [data-theme="dark"] .thread-card:hover { border-color: #4a4f57; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
234
+ [data-theme="dark"] .thread-card.active { outline-color: rgba(255,255,255,.25); border-color: #6b7280; }
235
+ [data-theme="dark"] .thread-card.selected { box-shadow: 0 0 0 2px rgba(91,141,239,.4), 0 8px 20px rgba(0,0,0,.45); }
236
+ [data-theme="dark"] .node-handle { border-color: #2a2d33; background: #1b1c1f; }
237
+ [data-theme="dark"] .node-handle::after { color: #737a83; }
238
+ [data-theme="dark"] .thread-title { color: #e6e8eb; }
239
+ [data-theme="dark"] .thread-title:hover { color: #fff; }
240
+ [data-theme="dark"] .graph-continue-button, [data-theme="dark"] .graph-fold-button, [data-theme="dark"] .graph-branch-button { border-color: #4a4f57; background: #1b1c1f; color: #e6e8eb; }
241
+ [data-theme="dark"] .graph-continue-button:hover, [data-theme="dark"] .graph-fold-button:hover, [data-theme="dark"] .graph-branch-button:hover { border-color: #9ca3af; background: #26282d; }
242
+ [data-theme="dark"] .graph-continue-button:focus-visible, [data-theme="dark"] .graph-fold-button:focus-visible, [data-theme="dark"] .graph-branch-button:focus-visible { outline-color: #7ea6f5; }
243
+ [data-theme="dark"] .thread-meta { color: #737a83; }
244
+ [data-theme="dark"] .thread-answer { color: #a7adb5; }
245
+ [data-theme="dark"] .thread-answer h1, [data-theme="dark"] .thread-answer h2, [data-theme="dark"] .thread-answer h3 { color: #d7dae0; }
246
+ [data-theme="dark"] .thread-answer code { background: #26282d; color: #d7dae0; }
247
+ [data-theme="dark"] .thread-answer pre { border-color: #2a2d33; background: #15171b; }
248
+ [data-theme="dark"] .thread-answer th, [data-theme="dark"] .thread-answer td { border-color: #2a2d33; }
249
+ [data-theme="dark"] .thread-answer th { background: #222428; }
250
+ [data-theme="dark"] .thread-answer-empty { color: #737a83; }
251
+ [data-theme="dark"] .thread-answer-pending, [data-theme="dark"] .message-pending p { color: #a7adb5; }
252
+ [data-theme="dark"] .thread-card footer { border-top-color: #23262b; }
253
+ [data-theme="dark"] .thread-card footer button { color: #a7adb5; }
254
+ [data-theme="dark"] .thread-card footer button:hover { background: #26282d; color: #e6e8eb; }
255
+ [data-theme="dark"] .thread-card footer .compare-button { color: #d7dae0; }
256
+ [data-theme="dark"] .thread-card footer .compare-button.selected { background: #2a2d33; color: #fff; }
257
+ [data-theme="dark"] .draft-card { border-color: #4a4f57; box-shadow: 0 7px 19px rgba(0,0,0,.4); }
258
+ [data-theme="dark"] .draft-card strong { color: #e6e8eb; }
259
+ [data-theme="dark"] .draft-branch-form textarea { border-color: #2a2d33; background: #15171b; color: #e6e8eb; }
260
+ [data-theme="dark"] .draft-actions button { background: #1b1c1f; color: #a7adb5; }
261
+ [data-theme="dark"] .draft-actions button.primary { background: #3478f6; color: #fff; }
262
+ [data-theme="dark"] .view-switch { border-color: #2a2d33; background: rgba(21,23,27,.96); }
263
+ [data-theme="dark"] .view-switch button { color: #8f959e; }
264
+ [data-theme="dark"] .view-switch button:hover { background: #26282d; color: #e6e8eb; }
265
+ [data-theme="dark"] .view-switch button.active { background: #e6e8eb; color: #111317; }
266
+ [data-theme="dark"] .canvas-controls span { color: #8f959e; }
267
+ [data-theme="dark"] .sidebar-toggle { color: #a7adb5; }
268
+ [data-theme="dark"] .sidebar-toggle:hover { background: #26282d; color: #e6e8eb; }
269
+ [data-theme="dark"] .new-workspace { border-color: rgba(255,255,255,.12); background: #1b1c1f; color: #e6e8eb; }
270
+ [data-theme="dark"] .new-workspace:hover { border-color: rgba(255,255,255,.22); background: #222428; color: #fff; }
271
+ [data-theme="dark"] .workspace-label, [data-theme="dark"] .sidebar-heading { color: #8f959e; }
272
+ [data-theme="dark"] .workspace-label select { border-color: #2a2d33; background: #15171b; color: #e6e8eb; }
273
+ [data-theme="dark"] .workspace-select svg { stroke: #8f959e; }
274
+ [data-theme="dark"] .tree-row { color: #a7adb5; }
275
+ [data-theme="dark"] .tree-row:hover { background: #26282d; }
276
+ [data-theme="dark"] .tree-row.active { background: #2a2d33; color: #e6e8eb; }
277
+ [data-theme="dark"] .tree-row i { color: #737a83; }
278
+ [data-theme="dark"] .tree-empty { color: #737a83; }
279
+ [data-theme="dark"] .brand::after { background: #e6e8eb; color: #111317; }
280
+ [data-theme="dark"] .empty-canvas strong { color: #d7dae0; }
281
+ [data-theme="dark"] .empty-canvas p { color: #8f959e; }
282
+ [data-theme="dark"] .note-empty { border-color: #2a2d33; color: #8f959e; }
283
+ [data-theme="dark"] .status-message { border-color: #7a2e2e; background: #2b1a1c; color: #f0a3a3; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
284
+ [data-theme="dark"] .status-message button { color: #f0a3a3; }
285
+ [data-theme="dark"] .status-message button:hover { background: #3a2326; }
286
+ [data-theme="dark"] .detail-view { background: #0f1115; }
287
+ [data-theme="dark"] .detail-head { border-bottom-color: #26282d; }
288
+ [data-theme="dark"] .detail-badge { background: #1e2a44; color: #7ea6f5; }
289
+ [data-theme="dark"] .detail-subtitle { color: #737a83; }
290
+ [data-theme="dark"] .detail-head h1 { color: #e6e8eb; }
291
+ [data-theme="dark"] .detail-head-actions button { border-color: #2a2d33; background: #15171b; color: #c6cbd2; }
292
+ [data-theme="dark"] .detail-head-actions button:hover { border-color: #4a4f57; background: #222428; }
293
+ [data-theme="dark"] .detail-head-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
294
+ [data-theme="dark"] .detail-head-actions button.primary:hover { background: #2563eb; }
295
+ [data-theme="dark"] .message { border-color: #2a2d33; background: #1b1c1f; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
296
+ [data-theme="dark"] .message header { color: #a7adb5; }
297
+ [data-theme="dark"] .message time { color: #737a83; }
298
+ [data-theme="dark"] .message-role { color: #d7dae0; }
299
+ [data-theme="dark"] .message-user { border-color: transparent; background: #1e2a45; box-shadow: none; }
300
+ [data-theme="dark"] .message-user header { color: #8fa9d9; }
301
+ [data-theme="dark"] .message-user .message-body p { color: #c9d4ea; }
302
+ [data-theme="dark"] .message-error { border-left-color: #dc2626; background: #2b1a1c; }
303
+ [data-theme="dark"] .message-collapsible.expanded { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
304
+ [data-theme="dark"] .message-body p { color: #d7dae0; }
305
+ [data-theme="dark"] .message-body h1, [data-theme="dark"] .message-body h2, [data-theme="dark"] .message-body h3 { color: #e6e8eb; }
306
+ [data-theme="dark"] .message-body blockquote { border-left-color: #3a3f47; color: #8f959e; }
307
+ [data-theme="dark"] .message-body code { background: #26282d; color: #d7dae0; }
308
+ [data-theme="dark"] .message-body pre { border-color: #2a2d33; background: #15171b; }
309
+ [data-theme="dark"] .message-body pre code { background: transparent; }
310
+ [data-theme="dark"] .message-body th, [data-theme="dark"] .message-body td { border-color: #2a2d33; }
311
+ [data-theme="dark"] .message-body th { background: #222428; }
312
+ [data-theme="dark"] .message-branch { color: #8f959e; }
313
+ [data-theme="dark"] .message-branch:hover { background: #1e2a44; color: #7ea6f5; }
314
+ [data-theme="dark"] .message-fold { color: #737a83; }
315
+ [data-theme="dark"] .message-fold:hover { background: #1e2a44 !important; color: #7ea6f5 !important; }
316
+ [data-theme="dark"] .message-summary { color: #8f959e !important; }
317
+ [data-theme="dark"] .message-streaming { color: #8f959e !important; }
318
+ [data-theme="dark"] .streaming-dot { background: #737a83; }
319
+ [data-theme="dark"] .process-records { border-top-color: #2a2d33; }
320
+ [data-theme="dark"] .process-records-fold { background: #222428; color: #a7adb5; }
321
+ [data-theme="dark"] .process-records-fold:hover { background: #1e2a44; color: #7ea6f5; }
322
+ [data-theme="dark"] .process-count { background: #2a2d33; color: #8f959e; }
323
+ [data-theme="dark"] .process-entry { border-color: #2a2d33; background: #15171b; }
324
+ [data-theme="dark"] .process-entry-fold { color: #d7dae0; }
325
+ [data-theme="dark"] .process-entry-fold:hover { background: #222428; }
326
+ [data-theme="dark"] .process-status-done { color: #34d399; }
327
+ [data-theme="dark"] .process-status-pending { color: #fbbf24; }
328
+ [data-theme="dark"] .process-status-error { color: #f87171; }
329
+ [data-theme="dark"] .process-args, [data-theme="dark"] .process-result { background: #222428; color: #d7dae0; }
330
+ [data-theme="dark"] .process-error { background: #2b1a1c; color: #f0a3a3; }
331
+ [data-theme="dark"] .message-composer { border-top-color: #26282d; background: #0f1115; }
332
+ [data-theme="dark"] .message-composer textarea { border-color: #2a2d33; background: #15171b; color: #e6e8eb; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
333
+ [data-theme="dark"] .message-composer button:disabled { background: #2a2d33; color: #737a83; }
334
+ [data-theme="dark"] button { border-color: #2a2d33; background: #1b1c1f; color: #d7dae0; }
335
+ [data-theme="dark"] button:hover { border-color: #4a4f57; background: #26282d; color: #fff; }
336
+ [data-theme="dark"] button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
337
+ [data-theme="dark"] button.primary:hover { border-color: #2563eb; background: #2563eb; color: #fff; }