@sean.holung/minicode 0.3.2 → 0.3.3

package/dist/src/web/style.css

@@ -29,6 +29,10 @@ html, body {
   line-height: 1.6;
 }
 
+body.modal-open {
+  overflow: hidden;
+}
+
 #app {
   display: flex;
   flex-direction: column;
@@ -68,6 +72,53 @@ h1 {
   color: var(--text-dim);
 }
 
+#model-info.placeholder {
+  color: var(--text-dim);
+  opacity: 0.5;
+  font-style: italic;
+}
+
+/* Model menu */
+.model-menu {
+  position: relative;
+}
+
+#model-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+#model-dropdown {
+  max-height: 320px;
+}
+
+#model-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.model-item {
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.15s;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-item:hover {
+  background: var(--bg-hover);
+}
+
+.model-item.active {
+  color: var(--accent);
+  font-weight: 600;
+}
+
 /* Session menu */
 .session-menu {
   position: relative;
@@ -107,6 +158,11 @@ h1 {
   padding: 8px;
 }
 
+.session-update-row {
+  display: flex;
+  margin-bottom: 8px;
+}
+
 .dropdown-divider {
   height: 1px;
   background: var(--border);
@@ -172,6 +228,11 @@ h1 {
   background: var(--bg-hover);
 }
 
+.session-item.active {
+  background: rgba(122, 162, 247, 0.12);
+  outline: 1px solid rgba(122, 162, 247, 0.35);
+}
+
 .session-label {
   color: var(--text);
   overflow: hidden;
@@ -186,6 +247,10 @@ h1 {
   margin-left: 8px;
 }
 
+.session-active-badge {
+  color: var(--accent);
+}
+
 .badge {
   font-size: 11px;
   padding: 2px 8px;
@@ -203,6 +268,45 @@ h1 {
   color: var(--yellow);
 }
 
+/* Context indicator */
+#context-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 12px;
+}
+
+#context-bar {
+  width: 80px;
+  height: 8px;
+  background: var(--bg-surface);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+
+#context-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  border-radius: 4px;
+  transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+#context-fill.warn {
+  background: var(--yellow);
+}
+
+#context-fill.critical {
+  background: var(--red);
+}
+
+#context-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  min-width: 28px;
+}
+
 .badge.error {
   background: rgba(247, 118, 142, 0.15);
   color: var(--red);
@@ -222,6 +326,92 @@ h1 {
   flex-direction: column;
   width: 33%;
   min-width: 280px;
+  position: relative;
+}
+
+/* Config overlay — shown when model provider is not configured */
+.config-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(26, 27, 38, 0.92);
+  backdrop-filter: blur(4px);
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.config-overlay.hidden { display: none; }
+
+.config-overlay-content {
+  max-width: 520px;
+  width: 100%;
+}
+
+.config-overlay-content h2 {
+  color: var(--yellow);
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.config-overlay-content > p {
+  color: var(--text-dim);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.config-missing {
+  color: var(--red, #f7768e);
+  font-size: 13px;
+  padding: 8px 12px;
+  background: rgba(247, 118, 142, 0.1);
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.config-overlay-options {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.config-overlay-option {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px 14px;
+}
+
+.config-overlay-option strong {
+  display: block;
+  color: var(--text);
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.config-overlay-option p {
+  color: var(--text-dim);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.config-overlay-option pre {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--green);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.config-overlay-footer {
+  margin-top: 16px;
+  color: var(--text-dim);
+  font-size: 12px;
 }
 
 /* Pane divider (draggable) */
@@ -553,96 +743,737 @@ footer {
   display: none !important;
 }
 
-/* Scrollbar */
-main::-webkit-scrollbar {
-  width: 6px;
+/* Settings modal */
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
 }
 
-main::-webkit-scrollbar-track {
-  background: transparent;
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 10, 18, 0.72);
+  backdrop-filter: blur(4px);
 }
 
-main::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
+.modal-panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: min(960px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
 }
 
-/* ── Graph pane ── */
+.modal-header,
+.modal-footer,
+.settings-toolbar {
+  padding: 18px 20px;
+}
 
-#graph-toolbar {
+.modal-header {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
   border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  flex-wrap: wrap;
 }
 
-#graph-search {
-  background: var(--bg-surface);
+.modal-header h2 {
+  font-size: 16px;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.modal-subtitle {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.settings-toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(26, 27, 38, 0.55);
+}
+
+.settings-scope-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.settings-scope-picker select,
+.settings-control,
+.settings-select {
+  background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 6px;
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 12px;
-  padding: 5px 10px;
-  width: 200px;
 }
 
-#graph-search:focus {
+.settings-scope-picker select,
+.settings-select {
+  padding: 8px 10px;
+}
+
+.settings-control {
+  width: 100%;
+  padding: 9px 11px;
+}
+
+.settings-control:disabled,
+.settings-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+  background: rgba(17, 19, 29, 0.9);
+}
+
+.settings-scope-picker select:focus,
+.settings-control:focus,
+.settings-select:focus {
   outline: none;
   border-color: var(--accent);
 }
 
-/* Search dropdown */
-.search-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 300px;
-  max-height: 320px;
-  overflow-y: auto;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  z-index: 200;
-  margin-top: 4px;
+.settings-path-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 0;
 }
 
-.search-result {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 10px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: background 0.1s;
+.settings-path-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
-.search-result:hover {
-  background: var(--bg-hover);
+.settings-path {
+  max-width: min(100%, 500px);
+  overflow-x: auto;
+  white-space: nowrap;
+  color: var(--accent);
+  background: rgba(122, 162, 247, 0.08);
+  border: 1px solid rgba(122, 162, 247, 0.18);
+  border-radius: 999px;
+  padding: 4px 10px;
 }
 
-.search-result-name {
+.settings-banner {
+  margin: 14px 20px 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  border: 1px solid transparent;
+}
+
+.settings-banner.info {
+  background: rgba(122, 162, 247, 0.12);
+  border-color: rgba(122, 162, 247, 0.24);
   color: var(--text);
-  font-weight: 500;
 }
 
-.search-result-kind {
-  font-size: 11px;
-  opacity: 0.7;
+.settings-banner.success {
+  background: rgba(158, 206, 106, 0.12);
+  border-color: rgba(158, 206, 106, 0.26);
+  color: var(--green);
 }
 
-#cy {
+.settings-banner.error {
+  background: rgba(247, 118, 142, 0.12);
+  border-color: rgba(247, 118, 142, 0.26);
+  color: var(--red);
+}
+
+.settings-list {
   flex: 1;
   min-height: 0;
-  background: var(--bg);
+  overflow-y: auto;
+  padding: 18px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.graph-empty {
-  display: flex;
+.settings-item {
+  background: rgba(26, 27, 38, 0.72);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 16px;
+}
+
+.settings-item.is-disabled {
+  border-color: rgba(122, 162, 247, 0.24);
+  background: rgba(26, 27, 38, 0.6);
+}
+
+.settings-item-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.settings-item-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.settings-item-description {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.settings-item-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.settings-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.settings-badge.env {
+  color: var(--accent);
+  background: rgba(122, 162, 247, 0.12);
+  border-color: rgba(122, 162, 247, 0.24);
+}
+
+.settings-badge.override {
+  color: var(--yellow);
+  background: rgba(224, 175, 104, 0.14);
+  border-color: rgba(224, 175, 104, 0.24);
+}
+
+.settings-item-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.settings-meta-block {
+  background: var(--bg);
+  border: 1px solid rgba(51, 53, 74, 0.8);
+  border-radius: 8px;
+  padding: 10px;
+  min-width: 0;
+}
+
+.settings-meta-label {
+  display: block;
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 4px;
+}
+
+.settings-meta-value {
+  font-size: 12px;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.settings-item-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-help {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.settings-help-warning {
+  color: var(--red);
+  font-weight: 600;
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-top: 1px solid var(--border);
+}
+
+.settings-footnote {
+  font-size: 12px;
+  color: var(--text-dim);
+  max-width: 560px;
+}
+
+.settings-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.settings-list::-webkit-scrollbar,
+.settings-path::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.settings-list::-webkit-scrollbar-track,
+.settings-path::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.settings-list::-webkit-scrollbar-thumb,
+.settings-path::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 999px;
+}
+
+/* Scrollbar */
+main::-webkit-scrollbar {
+  width: 6px;
+}
+
+main::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+main::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+/* ── Graph pane ── */
+
+#graph-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+#graph-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg);
+}
+
+#graph-search {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 5px 10px;
+  width: 200px;
+}
+
+#graph-search:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* Search dropdown */
+.search-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 300px;
+  max-height: 320px;
+  overflow-y: auto;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 200;
+  margin-top: 4px;
+}
+
+.search-result {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.1s;
+}
+
+.search-result:hover {
+  background: var(--bg-hover);
+}
+
+.search-result-name {
+  color: var(--text);
+  font-weight: 500;
+}
+
+.search-result-kind {
+  font-size: 11px;
+  opacity: 0.7;
+}
+
+#cy {
+  width: 100%;
+  height: 100%;
+  background: var(--bg);
+  position: relative;
+}
+
+#analysis-panel {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  bottom: 16px;
+  width: min(380px, calc(100% - 32px));
+  background: rgba(17, 19, 29, 0.96);
+  border: 1px solid rgba(122, 162, 247, 0.22);
+  border-radius: 16px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(16px);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.analysis-panel-header {
+  padding: 18px 18px 14px;
+  border-bottom: 1px solid rgba(122, 162, 247, 0.14);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.analysis-kicker {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  margin-bottom: 6px;
+}
+
+.analysis-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.analysis-title-row h2 {
+  margin: 0;
+  font-size: 17px;
+  color: var(--text);
+}
+
+.analysis-pill {
+  border: 1px solid rgba(122, 162, 247, 0.3);
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.analysis-subtitle {
+  margin: 10px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  max-width: 48ch;
+}
+
+.analysis-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.analysis-status {
+  margin: 12px 18px 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(122, 162, 247, 0.18);
+  background: rgba(122, 162, 247, 0.08);
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+.analysis-status.error {
+  border-color: rgba(247, 118, 142, 0.28);
+  background: rgba(247, 118, 142, 0.1);
+  color: #f4b1ba;
+}
+
+.analysis-summary {
+  padding: 14px 18px 10px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.analysis-summary-card {
+  appearance: none;
+  width: 100%;
+  text-align: left;
+  border: 1px solid rgba(122, 162, 247, 0.14);
+  border-radius: 12px;
+  background: rgba(31, 35, 53, 0.72);
+  padding: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
+}
+
+.analysis-summary-card:hover {
+  border-color: rgba(122, 162, 247, 0.3);
+  background: rgba(36, 40, 60, 0.82);
+  transform: translateY(-1px);
+}
+
+.analysis-summary-card.active {
+  border-color: rgba(122, 162, 247, 0.38);
+  background: rgba(34, 41, 67, 0.92);
+  box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.16);
+}
+
+.analysis-summary-value {
+  display: block;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.analysis-summary-label {
+  display: block;
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.analysis-findings {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 18px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.analysis-findings::-webkit-scrollbar {
+  width: 6px;
+}
+
+.analysis-findings::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.analysis-findings::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 999px;
+}
+
+.analysis-empty {
+  border: 1px dashed rgba(122, 162, 247, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+  color: var(--text-dim);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.analysis-finding {
+  border: 1px solid rgba(122, 162, 247, 0.14);
+  border-radius: 14px;
+  background: rgba(31, 35, 53, 0.78);
+  padding: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
+}
+
+.analysis-finding:hover {
+  border-color: rgba(122, 162, 247, 0.32);
+  background: rgba(36, 40, 60, 0.86);
+  transform: translateY(-1px);
+}
+
+.analysis-finding.active {
+  border-color: rgba(247, 118, 142, 0.4);
+  box-shadow: 0 0 0 1px rgba(247, 118, 142, 0.2);
+}
+
+.analysis-finding-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.analysis-finding-title {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--text);
+}
+
+.analysis-finding-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.analysis-type-badge,
+.analysis-severity-badge,
+.analysis-metric-chip,
+.analysis-file-badge {
+  border-radius: 999px;
+  font-size: 11px;
+  padding: 3px 8px;
+}
+
+.analysis-type-badge {
+  color: var(--accent);
+  background: rgba(122, 162, 247, 0.12);
+  border: 1px solid rgba(122, 162, 247, 0.2);
+}
+
+.analysis-severity-badge {
+  border: 1px solid transparent;
+}
+
+.analysis-severity-badge.info {
+  color: #7dcfff;
+  background: rgba(125, 207, 255, 0.12);
+  border-color: rgba(125, 207, 255, 0.18);
+}
+
+.analysis-severity-badge.warning {
+  color: #e0af68;
+  background: rgba(224, 175, 104, 0.12);
+  border-color: rgba(224, 175, 104, 0.2);
+}
+
+.analysis-severity-badge.high {
+  color: #f7768e;
+  background: rgba(247, 118, 142, 0.12);
+  border-color: rgba(247, 118, 142, 0.24);
+}
+
+.analysis-finding-summary {
+  margin: 0 0 10px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+
+.analysis-chip-row,
+.analysis-file-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.analysis-metric-chip {
+  color: var(--text);
+  background: rgba(17, 19, 29, 0.75);
+  border: 1px solid rgba(122, 162, 247, 0.12);
+}
+
+.analysis-file-badge {
+  color: var(--text-dim);
+  background: rgba(17, 19, 29, 0.75);
+  border: 1px solid rgba(86, 95, 137, 0.32);
+}
+
+.analysis-rationale {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.analysis-rationale li + li {
+  margin-top: 4px;
+}
+
+.analysis-finding-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.analysis-finding-actions .header-btn {
+  flex: 1;
+  text-align: center;
+}
+
+.analysis-explanation {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(122, 162, 247, 0.12);
+}
+
+.analysis-explanation-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #7dcfff;
+  margin-bottom: 4px;
+}
+
+.analysis-explanation-note {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  margin-bottom: 10px;
+}
+
+.analysis-explanation-content {
+  max-height: 280px;
+}
+
+.graph-empty {
+  display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
@@ -652,12 +1483,46 @@ main::-webkit-scrollbar-thumb {
   text-align: center;
 }
 
+.graph-onboarding {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  pointer-events: none;
+  z-index: 10;
+  color: var(--text-dim);
+  text-align: center;
+  padding: 40px;
+}
+
+.graph-onboarding-icon {
+  font-size: 28px;
+  opacity: 0.25;
+  letter-spacing: 4px;
+  margin-bottom: 4px;
+}
+
+.graph-onboarding-title {
+  font-size: 15px;
+  font-weight: 600;
+  opacity: 0.5;
+}
+
+.graph-onboarding-subtitle {
+  font-size: 13px;
+  opacity: 0.4;
+  line-height: 1.5;
+}
+
 /* Symbol detail panel */
 #symbol-detail {
   position: absolute;
   top: 0;
   right: 0;
-  width: 320px;
+  width: 380px;
   min-width: 200px;
   max-width: 80%;
   height: 100%;
@@ -920,3 +1785,56 @@ main::-webkit-scrollbar-thumb {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+@media (max-width: 900px) {
+  .modal-panel {
+    width: calc(100vw - 20px);
+    max-height: calc(100vh - 20px);
+  }
+
+  .settings-toolbar,
+  .modal-footer,
+  .settings-item-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .settings-path-group {
+    align-items: flex-start;
+  }
+
+  .settings-item-badges {
+    justify-content: flex-start;
+  }
+
+  .settings-item-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  #analysis-panel {
+    top: auto;
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    width: auto;
+    max-height: min(70vh, 560px);
+  }
+
+  .analysis-panel-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .analysis-panel-actions {
+    justify-content: flex-end;
+  }
+
+  .analysis-summary {
+    grid-template-columns: 1fr 1fr;
+  }
+}