'UI Shell and General Architecture'

1 files changed, 1004 insertions, 0 deletions

diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css
new file mode 100644
index 0000000..c198479
--- /dev/null
+++ b/frontend/app/prism-shell.css
@@ -0,0 +1,1004 @@
+.prism-app {
+  display: grid;
+  grid-template-columns: 256px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.psm-side {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  border-right: 1px solid var(--line-1);
+  background: var(--ink-1);
+}
+
+.psm-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-5);
+  border-bottom: 1px solid var(--line-1);
+}
+
+.psm-brand-mark {
+  width: 34px;
+  height: 34px;
+}
+
+.psm-brand-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.psm-brand-name {
+  color: var(--fg-1);
+  font-family: var(--font-display);
+  font-size: 1.4rem;
+  line-height: 1;
+}
+
+.psm-brand-sub,
+.psm-side-label,
+.psm-eyebrow,
+.psm-state-title,
+.psm-stat-label,
+.psm-note-label,
+.psm-kpi-key {
+  color: var(--fg-3);
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: var(--tr-wider);
+  text-transform: uppercase;
+}
+
+.psm-side-section {
+  padding: var(--sp-5) var(--sp-4) var(--sp-2);
+}
+
+.psm-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--sp-2);
+}
+
+.psm-nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  border: 0;
+  border-left: 2px solid transparent;
+  background: transparent;
+  color: var(--fg-2);
+  padding: 10px var(--sp-3);
+  text-align: left;
+}
+
+.psm-nav-item:hover {
+  background: var(--ink-2);
+  color: var(--fg-1);
+}
+
+.psm-nav-item.active {
+  border-left-color: var(--brass);
+  background: var(--ink-2);
+  color: var(--fg-1);
+}
+
+.psm-nav-item.disabled {
+  opacity: 0.7;
+}
+
+.psm-nav-copy {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+}
+
+.psm-nav-coming {
+  color: var(--fg-4);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  background: currentColor;
+  opacity: 0.8;
+  -webkit-mask-image: var(--icon-url);
+  mask-image: var(--icon-url);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.icon-chart {
+  --icon-url: url("/design-system/icons/chart.svg");
+}
+
+.icon-folder {
+  --icon-url: url("/design-system/icons/folder.svg");
+}
+
+.icon-ledger {
+  --icon-url: url("/design-system/icons/ledger.svg");
+}
+
+.icon-pulse {
+  --icon-url: url("/design-system/icons/pulse.svg");
+}
+
+.icon-window {
+  --icon-url: url("/design-system/icons/window.svg");
+}
+
+.icon-dollar {
+  --icon-url: url("/design-system/icons/dollar.svg");
+}
+
+.icon-terminal {
+  --icon-url: url("/design-system/icons/terminal.svg");
+}
+
+.icon-search {
+  --icon-url: url("/design-system/icons/search.svg");
+}
+
+.icon-command {
+  --icon-url: url("/design-system/icons/command.svg");
+}
+
+.icon-user {
+  --icon-url: url("/design-system/icons/user.svg");
+}
+
+.icon-clock {
+  --icon-url: url("/design-system/icons/clock.svg");
+}
+
+.psm-watch {
+  margin: 0 var(--sp-4);
+  border-top: 1px solid var(--line-1);
+}
+
+.psm-watch-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  padding: var(--sp-3) 0;
+}
+
+.psm-watch-limit {
+  color: var(--fg-4);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-watch-empty {
+  color: var(--fg-4);
+  font-size: var(--fs-14);
+  padding: 0 0 var(--sp-4);
+}
+
+.psm-watch-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--sp-2);
+  align-items: center;
+  border-bottom: 1px solid var(--line-1);
+}
+
+.psm-watch-select {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: var(--sp-2);
+  align-items: center;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--fg-2);
+  padding: 10px 0;
+}
+
+.psm-watch-select:hover,
+.psm-search-result:hover {
+  background: rgba(194, 170, 122, 0.04);
+}
+
+.psm-watch-row.active .psm-watch-select {
+  color: var(--fg-1);
+}
+
+.psm-watch-main {
+  min-width: 0;
+  text-align: left;
+}
+
+.psm-watch-symbol {
+  color: var(--fg-1);
+  font-size: var(--fs-14);
+  font-weight: 500;
+}
+
+.psm-watch-date,
+.psm-search-result-copy,
+.psm-muted-copy,
+.psm-profile-copy,
+.psm-quality-copy,
+.psm-placeholder {
+  color: var(--fg-3);
+  font-size: var(--fs-13);
+}
+
+.psm-watch-price,
+.psm-watch-change,
+.psm-quote-line,
+.psm-price,
+.psm-change,
+.psm-kpi-value,
+.psm-detail-value,
+.psm-stat-value,
+.psm-market-price,
+.psm-market-change {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.psm-watch-price,
+.psm-watch-change {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.psm-watch-remove {
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-full);
+  background: transparent;
+  color: var(--fg-4);
+  margin-right: 2px;
+}
+
+.psm-watch-remove:hover {
+  color: var(--negative);
+  border-color: rgba(181, 73, 75, 0.45);
+  background: var(--negative-bg);
+}
+
+.psm-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.psm-top {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-4);
+  padding: var(--sp-3) var(--sp-6);
+  border-bottom: 1px solid var(--line-1);
+  background: rgba(11, 14, 19, 0.94);
+  backdrop-filter: blur(16px);
+}
+
+.psm-search-shell {
+  position: relative;
+  flex: 1;
+  max-width: 520px;
+}
+
+.psm-search-form {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-2);
+  background: var(--ink-2);
+  padding: 9px var(--sp-3);
+}
+
+.psm-search-form:focus-within {
+  border-color: var(--brass);
+  box-shadow: 0 0 0 1px var(--focus-ring);
+}
+
+.psm-search-form input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--fg-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-13);
+}
+
+.psm-search-form input::placeholder {
+  color: var(--fg-3);
+}
+
+.psm-kbd {
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-1);
+  background: var(--ink-1);
+  color: var(--fg-4);
+  padding: 2px 6px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-search-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  border: 1px solid var(--line-1);
+  border-radius: var(--r-2);
+  background: var(--ink-1);
+  box-shadow: var(--shadow-2);
+}
+
+.psm-search-result,
+.psm-search-status {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--line-1);
+  background: transparent;
+  color: var(--fg-2);
+  padding: 10px var(--sp-3);
+  text-align: left;
+}
+
+.psm-search-status:last-child,
+.psm-search-result:last-child {
+  border-bottom: 0;
+}
+
+.psm-search-result {
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr);
+  gap: var(--sp-2);
+}
+
+.psm-search-result-symbol {
+  color: var(--fg-1);
+  font-family: var(--font-mono);
+}
+
+.psm-clock-group {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-5);
+  margin-left: auto;
+}
+
+.psm-market-status {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  color: var(--fg-2);
+  font-family: var(--font-mono);
+  font-size: var(--fs-13);
+}
+
+.psm-market-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--r-full);
+  background: var(--warning);
+  box-shadow: 0 0 10px rgba(196, 149, 69, 0.45);
+}
+
+.psm-market-dot.open {
+  background: var(--positive);
+  box-shadow: 0 0 10px rgba(79, 140, 94, 0.45);
+}
+
+.psm-account {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-full);
+  padding: 6px 12px;
+  color: var(--fg-1);
+}
+
+.psm-account-avatar {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--r-full);
+  background: var(--brass);
+  color: var(--brass-ink);
+  font-family: var(--font-display);
+  font-style: italic;
+}
+
+.psm-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-5);
+  padding: var(--sp-5) var(--sp-6) var(--sp-8);
+}
+
+.psm-market-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--sp-3);
+}
+
+.psm-market-card,
+.psm-card,
+.psm-state-panel {
+  border: 1px solid var(--line-1);
+  border-radius: var(--r-3);
+  background: var(--ink-1);
+  box-shadow: var(--shadow-1);
+}
+
+.psm-market-card {
+  padding: var(--sp-4);
+}
+
+.psm-market-name {
+  color: var(--fg-4);
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: var(--tr-wider);
+  text-transform: uppercase;
+}
+
+.psm-market-price {
+  display: block;
+  margin-top: 6px;
+  color: var(--fg-1);
+  font-size: var(--fs-18);
+}
+
+.positive {
+  color: var(--positive);
+}
+
+.negative {
+  color: var(--negative);
+}
+
+.neutral {
+  color: var(--fg-3);
+}
+
+.psm-ticker-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) auto;
+  gap: var(--sp-5);
+  align-items: end;
+  padding-bottom: var(--sp-4);
+  border-bottom: 1px solid var(--line-1);
+}
+
+.psm-header-left {
+  min-width: 0;
+}
+
+.psm-identity-line {
+  color: var(--brass);
+  display: block;
+  margin-bottom: var(--sp-2);
+}
+
+.psm-heading-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sp-4);
+}
+
+.psm-symbol {
+  color: var(--fg-1);
+  font-family: var(--font-display);
+  font-size: clamp(3rem, 6vw, var(--fs-64));
+  line-height: 0.95;
+  letter-spacing: -0.03em;
+}
+
+.psm-company-name {
+  color: var(--fg-2);
+  font-family: var(--font-display);
+  font-size: var(--fs-24);
+  font-style: italic;
+}
+
+.psm-partial-chip,
+.psm-status-chip,
+.psm-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: var(--r-full);
+  padding: 5px 10px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-partial-chip {
+  border: 1px solid rgba(196, 149, 69, 0.4);
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+
+.psm-status-chip {
+  border: 1px solid rgba(79, 140, 94, 0.35);
+  background: var(--positive-bg);
+  color: var(--positive);
+}
+
+.psm-status-chip.partial {
+  border-color: rgba(196, 149, 69, 0.4);
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+
+.psm-status-chip.invalid {
+  border-color: rgba(181, 73, 75, 0.4);
+  background: var(--negative-bg);
+  color: var(--negative);
+}
+
+.psm-subline {
+  margin-top: var(--sp-2);
+  color: var(--fg-3);
+  font-size: var(--fs-14);
+}
+
+.psm-price-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.psm-price {
+  color: var(--fg-1);
+  font-size: clamp(2.4rem, 4vw, var(--fs-48));
+  line-height: 1;
+}
+
+.psm-change {
+  font-size: var(--fs-16);
+}
+
+.psm-quote-line {
+  color: var(--fg-3);
+  font-size: var(--fs-12);
+}
+
+.psm-primary-action,
+.psm-ghost-action {
+  border-radius: var(--r-2);
+  padding: 10px 14px;
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: var(--tr-wider);
+  text-transform: uppercase;
+}
+
+.psm-primary-action {
+  border: 1px solid var(--brass);
+  background: var(--brass);
+  color: var(--brass-ink);
+}
+
+.psm-primary-action.subtle {
+  background: transparent;
+  color: var(--brass);
+}
+
+.psm-ghost-action {
+  border: 1px solid var(--line-2);
+  background: transparent;
+  color: var(--fg-2);
+}
+
+.psm-range {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+
+.psm-range-values {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  color: var(--fg-3);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-range-rail {
+  position: relative;
+  height: 4px;
+  border-radius: var(--r-full);
+  background: var(--ink-3);
+}
+
+.psm-range-indicator {
+  position: absolute;
+  top: -4px;
+  width: 2px;
+  height: 12px;
+  background: var(--brass);
+}
+
+.psm-kpis {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  overflow: hidden;
+}
+
+.psm-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--sp-4) var(--sp-5);
+  border-right: 1px solid var(--line-1);
+}
+
+.psm-kpi:last-child {
+  border-right: 0;
+}
+
+.psm-kpi-value {
+  color: var(--fg-1);
+  font-size: var(--fs-24);
+}
+
+.psm-kpi-sub {
+  color: var(--fg-3);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-kpi-value.missing,
+.psm-detail-value.missing,
+.psm-stat-value.missing {
+  color: var(--fg-4);
+}
+
+.psm-main-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
+  gap: var(--sp-5);
+}
+
+.psm-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-5);
+  min-width: 0;
+}
+
+.psm-card {
+  padding: var(--sp-5);
+}
+
+.psm-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-3);
+}
+
+.psm-card-title {
+  margin: 0;
+  color: var(--fg-1);
+  font-family: var(--font-display);
+  font-size: var(--fs-24);
+}
+
+.psm-tabs {
+  display: flex;
+  gap: 4px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-1);
+  background: var(--ink-2);
+  padding: 2px;
+}
+
+.psm-tab {
+  border: 0;
+  border-radius: var(--r-1);
+  background: transparent;
+  color: var(--fg-3);
+  padding: 5px 10px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-tab.active {
+  background: var(--ink-3);
+  color: var(--fg-1);
+}
+
+.psm-chart-frame {
+  overflow: hidden;
+  border: 1px solid var(--line-1);
+  border-radius: var(--r-2);
+  background: linear-gradient(180deg, rgba(194, 170, 122, 0.03), rgba(194, 170, 122, 0));
+}
+
+.psm-chart-meta {
+  color: var(--fg-3);
+  font-size: var(--fs-13);
+  margin-bottom: var(--sp-3);
+}
+
+.psm-state-panel,
+.psm-card-empty {
+  padding: var(--sp-5);
+}
+
+.psm-state-panel h1,
+.psm-state-panel h2 {
+  margin: 0 0 var(--sp-2);
+  color: var(--fg-1);
+  font-family: var(--font-display);
+  font-size: var(--fs-38);
+  font-weight: 500;
+}
+
+.psm-state-panel p {
+  margin: 0 0 var(--sp-4);
+  color: var(--fg-3);
+  font-size: var(--fs-14);
+  line-height: 1.5;
+}
+
+.psm-signal-grid,
+.psm-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sp-3);
+}
+
+.psm-signal,
+.psm-detail-item {
+  border: 1px solid var(--line-1);
+  border-radius: var(--r-2);
+  background: var(--ink-2);
+  padding: var(--sp-3);
+}
+
+.psm-signal-key {
+  color: var(--fg-4);
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: var(--tr-wider);
+  text-transform: uppercase;
+}
+
+.psm-signal-value,
+.psm-detail-value,
+.psm-stat-value {
+  display: block;
+  margin-top: 8px;
+  color: var(--fg-1);
+  font-size: var(--fs-18);
+}
+
+.psm-signal-copy,
+.psm-detail-copy {
+  display: block;
+  margin-top: 6px;
+  color: var(--fg-3);
+  font-size: var(--fs-13);
+  line-height: 1.45;
+}
+
+.psm-signal.pos {
+  border-color: rgba(79, 140, 94, 0.35);
+}
+
+.psm-signal.warn {
+  border-color: rgba(196, 149, 69, 0.35);
+}
+
+.psm-signal.neg {
+  border-color: rgba(181, 73, 75, 0.35);
+}
+
+.psm-profile-list,
+.psm-stat-list,
+.psm-source-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+
+.psm-stat-row,
+.psm-profile-row,
+.psm-source-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--sp-3);
+  align-items: start;
+  padding-bottom: var(--sp-3);
+  border-bottom: 1px solid var(--line-1);
+}
+
+.psm-stat-row:last-child,
+.psm-profile-row:last-child,
+.psm-source-row:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.psm-profile-key,
+.psm-source-key {
+  color: var(--fg-4);
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: var(--tr-wider);
+  text-transform: uppercase;
+}
+
+.psm-profile-value,
+.psm-source-value {
+  color: var(--fg-1);
+  text-align: right;
+  word-break: break-word;
+}
+
+.psm-source-value {
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-profile-summary {
+  margin: var(--sp-4) 0 0;
+  color: var(--fg-3);
+  font-size: var(--fs-14);
+  line-height: 1.55;
+}
+
+.psm-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
+}
+
+.psm-field-tag {
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-full);
+  padding: 5px 10px;
+  color: var(--fg-3);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+}
+
+.psm-field-tag.missing {
+  color: var(--warning);
+  border-color: rgba(196, 149, 69, 0.35);
+  background: var(--warning-bg);
+}
+
+.psm-loading-shell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-5);
+}
+
+.psm-skeleton {
+  position: relative;
+  overflow: hidden;
+  min-height: 160px;
+}
+
+.psm-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
+  transform: translateX(-100%);
+  animation: prism-sweep 1.4s infinite;
+}
+
+.psm-card-empty {
+  color: var(--fg-3);
+  font-size: var(--fs-14);
+}
+
+.psm-error-copy {
+  color: var(--negative);
+}
+
+.psm-link {
+  color: var(--brass-bright);
+  text-decoration-color: rgba(220, 199, 158, 0.4);
+}
+
+@keyframes prism-sweep {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (max-width: 1200px) {
+  .psm-ticker-head,
+  .psm-main-grid,
+  .psm-market-strip,
+  .psm-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .psm-ticker-head {
+    align-items: start;
+  }
+
+  .psm-price-stack,
+  .psm-top-action {
+    justify-self: start;
+  }
+}
+
+@media (max-width: 920px) {
+  .prism-app {
+    grid-template-columns: 1fr;
+  }
+
+  .psm-side {
+    position: static;
+    height: auto;
+  }
+
+  .psm-top {
+    flex-wrap: wrap;
+    padding-inline: var(--sp-4);
+  }
+
+  .psm-clock-group {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .psm-content {
+    padding-inline: var(--sp-4);
+  }
+
+  .psm-market-strip,
+  .psm-kpis,
+  .psm-main-grid,
+  .psm-detail-grid,
+  .psm-signal-grid,
+  .psm-ticker-head {
+    grid-template-columns: 1fr;
+  }
+
+  .psm-heading-row {
+    align-items: start;
+    flex-direction: column;
+    gap: var(--sp-2);
+  }
+
+  .psm-price-stack {
+    align-items: start;
+  }
+}