-
TraderAI
-
Local Ollama chat for UEX marketplace work
+
+
+

+
+
+
Lambda Banking Conglomerate
+
TraderAI
+
Institutional marketplace intelligence for UEX operations
+
Ready
diff --git a/web/styles.css b/web/styles.css
index 1725c74..2fd3f82 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1,54 +1,132 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap");
+
:root {
- color-scheme: dark;
- --bg: #111316;
- --panel: #191d22;
- --panel-2: #20262d;
- --text: #edf1f5;
- --muted: #97a1ad;
- --accent: #44c2a5;
- --accent-2: #e6b94d;
- --border: #303842;
- --danger: #e66b6b;
+ color-scheme: light;
+ --cream: #f7f1dc;
+ --ivory: #fffaf0;
+ --ivory-2: #fbf4df;
+ --forest: #263a1b;
+ --forest-2: #345326;
+ --forest-3: #14210f;
+ --brown: #2e1c18;
+ --muted: #6f5b50;
+ --gold: #d4af37;
+ --gold-2: #f0d681;
+ --line: #ddceb0;
+ --line-strong: #c4aa73;
+ --danger: #9f3c32;
+ --shadow: 0 24px 70px rgba(11, 19, 8, 0.34);
}
* {
box-sizing: border-box;
}
+html,
+body {
+ height: 100%;
+}
+
body {
margin: 0;
- min-height: 100vh;
- background: var(--bg);
- color: var(--text);
- font-family: Inter, Segoe UI, Arial, sans-serif;
+ height: 100vh;
+ overflow: hidden;
+ background:
+ radial-gradient(circle at 18% 10%, rgba(240, 214, 129, 0.24), transparent 30%),
+ radial-gradient(circle at 85% 16%, rgba(255, 250, 240, 0.12), transparent 28%),
+ linear-gradient(135deg, #14210f 0%, #263a1b 42%, #345326 100%);
+ color: var(--brown);
+ font-family: Inter, "Segoe UI", Arial, sans-serif;
+ text-rendering: geometricPrecision;
+}
+
+body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ background: linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 38%, rgba(0, 0, 0, 0.08));
}
.shell {
display: grid;
- grid-template-columns: minmax(0, 1fr) 360px;
- gap: 1px;
- min-height: 100vh;
- background: var(--border);
+ grid-template-columns: minmax(0, 1fr) 380px;
+ gap: 24px;
+ height: 100vh;
+ min-height: 0;
+ overflow: hidden;
+ padding: 24px;
}
.workspace,
.actions {
- background: var(--panel);
+ position: relative;
+ overflow: hidden;
+ border: 1px solid rgba(240, 214, 129, 0.34);
+ border-radius: 28px;
+ background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
+ box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
.workspace {
display: grid;
- grid-template-rows: auto 1fr auto;
+ grid-template-rows: auto auto 1fr auto;
min-width: 0;
+ min-height: 0;
+}
+
+.actions {
+ padding: 28px;
+ overflow: auto;
+ min-height: 0;
}
.topbar {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 20px;
+ padding: 26px 28px;
+ border-bottom: 1px solid rgba(240, 214, 129, 0.28);
+ background:
+ linear-gradient(90deg, rgba(20, 33, 15, 0.96), rgba(38, 58, 27, 0.94)),
+ radial-gradient(circle at 18% 0%, rgba(212, 175, 55, 0.24), transparent 34%);
+}
+
+.brand-block {
display: flex;
align-items: center;
- justify-content: space-between;
- gap: 16px;
- padding: 18px 22px;
- border-bottom: 1px solid var(--border);
+ gap: 18px;
+ min-width: 0;
+}
+
+.brand-copy {
+ display: grid;
+ align-items: center;
+ gap: 5px;
+ min-width: 0;
+}
+
+.logo-wrap {
+ position: relative;
+ display: grid;
+ width: 72px;
+ height: 72px;
+ flex: 0 0 72px;
+ place-items: center;
+ border: 1px solid rgba(240, 214, 129, 0.46);
+ border-radius: 22px;
+ background:
+ radial-gradient(circle at 35% 25%, rgba(240, 214, 129, 0.34), transparent 44%),
+ linear-gradient(145deg, rgba(255, 250, 240, 0.12), rgba(0, 0, 0, 0.14));
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 32px rgba(0, 0, 0, 0.2);
+}
+
+.logo-wrap img {
+ width: 56px;
+ height: 56px;
+ object-fit: contain;
+ filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.28));
}
h1,
@@ -57,52 +135,91 @@ p {
margin: 0;
}
+h1,
+h2,
+.eyebrow,
+button,
+.status {
+ font-family: "Playfair Display", Georgia, serif;
+}
+
h1 {
- font-size: 22px;
- font-weight: 700;
+ color: var(--ivory);
+ font-size: 36px;
+ font-weight: 800;
+ line-height: 1.02;
+ text-shadow: 0 2px 22px rgba(0, 0, 0, 0.38);
}
h2 {
- font-size: 16px;
margin-bottom: 14px;
+ color: var(--brown);
+ font-size: 24px;
+ font-weight: 800;
+ line-height: 1.15;
+}
+
+.eyebrow {
+ color: var(--gold-2);
+ font-size: 12px;
+ font-weight: 800;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+
+.topbar p {
+ max-width: 580px;
+ color: rgba(255, 250, 240, 0.82);
+ font-size: 14px;
+ font-weight: 500;
}
-.topbar p,
.muted {
color: var(--muted);
- font-size: 13px;
+ font-size: 14px;
}
.status {
- min-width: 76px;
- padding: 7px 10px;
- border: 1px solid var(--border);
- border-radius: 6px;
- color: var(--muted);
- font-size: 13px;
+ min-width: 92px;
+ padding: 10px 14px;
+ border: 1px solid rgba(240, 214, 129, 0.42);
+ border-radius: 999px;
+ background: rgba(255, 250, 240, 0.1);
+ color: var(--gold-2);
+ font-size: 14px;
+ font-weight: 800;
text-align: center;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.warning {
- padding: 10px 22px;
- border-bottom: 1px solid rgba(230, 185, 77, 0.32);
- background: rgba(230, 185, 77, 0.11);
- color: #f0d28a;
- font-size: 13px;
+ padding: 12px 28px;
+ border-bottom: 1px solid rgba(196, 170, 115, 0.38);
+ background: #f2e7bd;
+ color: #553906;
+ font-size: 14px;
+ font-weight: 600;
}
.messages {
overflow: auto;
- padding: 22px;
+ min-height: 0;
+ padding: 28px;
+ background:
+ radial-gradient(circle at 50% 12%, rgba(212, 175, 55, 0.1), transparent 34%),
+ linear-gradient(180deg, rgba(247, 241, 220, 0.58), rgba(255, 250, 240, 0.64));
}
.message {
- max-width: 900px;
- margin-bottom: 14px;
- padding: 13px 14px;
- border: 1px solid var(--border);
- border-radius: 8px;
- line-height: 1.45;
+ max-width: 920px;
+ margin-bottom: 16px;
+ padding: 17px 18px;
+ border: 1px solid rgba(221, 206, 176, 0.9);
+ border-radius: 18px;
+ color: var(--brown);
+ line-height: 1.55;
+ box-shadow: 0 16px 38px rgba(38, 58, 27, 0.11);
}
.message p {
@@ -120,52 +237,57 @@ h2 {
.message ul,
.message ol {
- margin: 0 0 10px 20px;
+ margin: 0 0 10px 22px;
padding: 0;
}
.message li {
- margin: 3px 0;
+ margin: 4px 0;
}
.message li.nested {
margin-left: 20px;
- color: #d7dde4;
+ color: var(--muted);
}
.message strong {
- color: #ffffff;
+ color: var(--forest);
+ font-weight: 800;
}
.message h3 {
- margin: 12px 0 8px;
- font-size: 15px;
- line-height: 1.3;
+ margin: 14px 0 8px;
+ color: var(--forest);
+ font-family: "Playfair Display", Georgia, serif;
+ font-size: 19px;
+ line-height: 1.25;
}
.message h4,
.message h5,
.message h6 {
- margin: 10px 0 7px;
- font-size: 14px;
+ margin: 11px 0 7px;
+ color: var(--forest);
+ font-family: "Playfair Display", Georgia, serif;
+ font-size: 16px;
line-height: 1.3;
}
.message hr {
height: 1px;
- margin: 12px 0;
+ margin: 14px 0;
border: 0;
- background: var(--border);
+ background: linear-gradient(90deg, transparent, rgba(196, 170, 115, 0.72), transparent);
}
.message code {
- padding: 1px 5px;
- border: 1px solid var(--border);
- border-radius: 4px;
- background: #0e1114;
- color: #dfe5eb;
+ padding: 2px 6px;
+ border: 1px solid rgba(38, 58, 27, 0.15);
+ border-radius: 7px;
+ background: rgba(38, 58, 27, 0.08);
+ color: var(--forest);
font-family: Consolas, Monaco, monospace;
- font-size: 0.92em;
+ font-size: 0.9em;
}
.message pre {
@@ -179,18 +301,21 @@ h2 {
padding: 0;
border: 0;
background: transparent;
+ color: inherit;
}
.message blockquote {
margin: 0 0 10px;
- padding: 8px 10px;
- border-left: 3px solid var(--accent);
- background: rgba(68, 194, 165, 0.08);
- color: #d7dde4;
+ padding: 11px 13px;
+ border-left: 4px solid var(--gold);
+ border-radius: 0 12px 12px 0;
+ background: rgba(212, 175, 55, 0.13);
+ color: #4b352c;
}
.message a {
- color: #69d7bd;
+ color: var(--forest-2);
+ font-weight: 700;
}
.table-wrap {
@@ -203,63 +328,147 @@ h2 {
width: 100%;
min-width: 420px;
border-collapse: collapse;
- font-size: 13px;
+ font-size: 14px;
}
.message th,
.message td {
- padding: 8px 9px;
- border: 1px solid var(--border);
+ padding: 9px 10px;
+ border: 1px solid var(--line);
vertical-align: top;
}
.message th {
- background: #20262d;
- color: #ffffff;
- font-weight: 700;
+ background: rgba(38, 58, 27, 0.11);
+ color: var(--forest);
+ font-weight: 800;
}
.message.user {
margin-left: auto;
- background: var(--panel-2);
+ border-color: rgba(52, 83, 38, 0.28);
+ background: linear-gradient(180deg, #edf3df, #e5efd4);
}
.message.assistant {
- background: #15191e;
+ background: rgba(255, 250, 240, 0.96);
}
.message.warning-message {
- border-color: rgba(230, 185, 77, 0.42);
- background: rgba(230, 185, 77, 0.1);
+ border-color: rgba(212, 175, 55, 0.6);
+ background: #f5eac4;
}
.composer-wrap {
- border-top: 1px solid var(--border);
+ border-top: 1px solid var(--line);
+ background: rgba(255, 250, 240, 0.88);
}
.message-activity {
- display: flex;
+ display: grid;
+ grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
align-items: center;
- justify-content: space-between;
gap: 12px;
- min-height: 20px;
- margin-bottom: 6px;
- color: rgba(151, 161, 173, 0.82);
+ min-height: 32px;
+ margin: -4px 0 9px;
+ padding: 5px 8px;
+ border: 1px solid rgba(221, 206, 176, 0.68);
+ border-radius: 12px;
+ background: rgba(247, 241, 220, 0.52);
+ color: var(--muted);
font-size: 12px;
+ font-weight: 600;
}
.message-phase {
display: inline-flex;
align-items: center;
+ justify-content: center;
+ grid-column: 2;
min-width: 0;
+ line-height: 1;
+ text-align: center;
}
.message-metrics {
- color: rgba(151, 161, 173, 0.56);
+ grid-column: 3;
+ justify-self: end;
+ color: #8b7769;
text-align: right;
white-space: nowrap;
}
+.thinking-log {
+ margin: 0 0 10px;
+ color: var(--muted);
+ font-size: 13px;
+}
+
+.thinking-log summary {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ min-height: 28px;
+ padding: 3px 2px;
+ color: #7b6b60;
+ cursor: pointer;
+ font-weight: 700;
+ list-style: none;
+}
+
+.thinking-log summary::-webkit-details-marker {
+ display: none;
+}
+
+.thinking-log summary::before {
+ content: "";
+ width: 7px;
+ height: 7px;
+ border-right: 2px solid currentColor;
+ border-bottom: 2px solid currentColor;
+ transform: rotate(-45deg);
+ transition: transform 160ms ease;
+}
+
+.thinking-log[open] summary::before {
+ transform: rotate(45deg) translateY(-1px);
+}
+
+.thinking-log.thinking-active summary {
+ color: var(--forest);
+}
+
+.thinking-steps {
+ max-width: 720px;
+ margin: 3px 0 2px 16px;
+ padding: 2px 0 2px 16px;
+ border-left: 2px solid rgba(111, 91, 80, 0.2);
+ color: #7b6b60;
+ list-style: none;
+}
+
+.thinking-steps li {
+ position: relative;
+ margin: 6px 0;
+ line-height: 1.45;
+}
+
+.thinking-raw-step {
+ white-space: pre-wrap;
+}
+
+.thinking-steps li::before {
+ content: "";
+ position: absolute;
+ top: 0.72em;
+ left: -21px;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: rgba(111, 91, 80, 0.42);
+ transform: translateY(-50%);
+}
+
.working-dots {
display: inline-flex;
align-items: center;
@@ -269,10 +478,10 @@ h2 {
}
.working-dots i {
- width: 4px;
- height: 4px;
+ width: 5px;
+ height: 5px;
border-radius: 50%;
- background: rgba(151, 161, 173, 0.8);
+ background: var(--gold);
animation: pulse-dot 1.2s infinite ease-in-out;
}
@@ -288,7 +497,7 @@ h2 {
0%,
80%,
100% {
- opacity: 0.3;
+ opacity: 0.35;
transform: translateY(0);
}
40% {
@@ -300,69 +509,100 @@ h2 {
.composer {
display: grid;
grid-template-columns: 1fr auto;
- gap: 12px;
- padding: 16px;
+ gap: 14px;
+ padding: 20px;
}
textarea {
width: 100%;
- resize: vertical;
- min-height: 48px;
+ min-height: 58px;
max-height: 180px;
- padding: 12px;
- border: 1px solid var(--border);
- border-radius: 8px;
+ padding: 16px 17px;
+ resize: vertical;
+ border: 1px solid var(--line-strong);
+ border-radius: 18px;
outline: none;
- background: #101316;
- color: var(--text);
+ background: #fffdf7;
+ color: var(--brown);
font: inherit;
+ font-size: 15px;
+ line-height: 1.45;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(38, 58, 27, 0.08);
+}
+
+textarea::placeholder {
+ color: #88776c;
+}
+
+textarea:focus {
+ border-color: var(--gold);
+ box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22), 0 10px 28px rgba(38, 58, 27, 0.09);
}
textarea:disabled {
- opacity: 0.62;
+ opacity: 0.66;
}
button {
- min-width: 92px;
+ min-width: 104px;
border: 0;
- border-radius: 8px;
- background: var(--accent);
- color: #07110f;
- font-weight: 700;
+ border-radius: 18px;
+ background: linear-gradient(180deg, #345326, #1f3416);
+ color: var(--ivory);
+ font-weight: 800;
cursor: pointer;
+ box-shadow: 0 16px 28px rgba(31, 52, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
+ transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+button:hover {
+ background: linear-gradient(180deg, #3d612c, #263e1b);
+ box-shadow: 0 18px 34px rgba(31, 52, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
+ transform: translateY(-1px);
+}
+
+button:active {
+ transform: translateY(0);
}
button.secondary {
min-width: 0;
- padding: 9px 12px;
- border: 1px solid var(--border);
- background: transparent;
- color: var(--text);
+ padding: 10px 14px;
+ border: 1px solid var(--line-strong);
+ background: #fff9e9;
+ color: var(--forest);
+ box-shadow: 0 10px 22px rgba(38, 58, 27, 0.08);
}
.small-button {
min-width: 0;
- padding: 6px 9px;
- font-size: 12px;
+ padding: 8px 12px;
+ font-size: 13px;
}
.danger-button {
width: 100%;
min-width: 0;
- padding: 9px 10px;
- margin: 10px 0;
- border: 1px solid rgba(230, 107, 107, 0.45);
- background: rgba(230, 107, 107, 0.14);
- color: #f0b1b1;
+ padding: 12px 14px;
+ margin: 14px 0;
+ border: 1px solid rgba(159, 60, 50, 0.28);
+ background: linear-gradient(180deg, #fff5e9, #f5e6d4);
+ color: var(--danger);
+ box-shadow: 0 12px 25px rgba(88, 43, 33, 0.1);
}
-.actions {
- padding: 18px;
- overflow: auto;
+.danger-button:hover {
+ background: linear-gradient(180deg, #fff2e5, #edd8c6);
+ color: #7f2d25;
}
.side-section {
- margin-bottom: 22px;
+ margin-bottom: 28px;
+}
+
+.side-section + .side-section {
+ padding-top: 24px;
+ border-top: 1px solid var(--line);
}
.section-title-row {
@@ -375,116 +615,190 @@ button.secondary {
.memory-controls {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 6px 10px;
+ gap: 11px 14px;
color: var(--muted);
- font-size: 12px;
+ font-size: 14px;
+ font-weight: 600;
}
.memory-controls label {
display: flex;
align-items: center;
- gap: 6px;
+ gap: 8px;
+}
+
+input[type="checkbox"] {
+ width: 15px;
+ height: 15px;
+ accent-color: var(--forest);
}
.memory-inspector {
- font-size: 12px;
+ font-size: 13px;
+ line-height: 1.35;
}
.memory-counts {
- color: var(--text);
- margin-bottom: 6px;
+ margin-bottom: 7px;
+ color: var(--brown);
+ font-weight: 800;
}
.memory-path {
+ margin-bottom: 12px;
overflow-wrap: anywhere;
color: var(--muted);
- margin-bottom: 10px;
}
.memory-group {
- margin-bottom: 8px;
- border: 1px solid var(--border);
- border-radius: 8px;
- background: #15191e;
+ margin-bottom: 10px;
+ border: 1px solid var(--line);
+ border-radius: 16px;
+ background: rgba(255, 250, 240, 0.76);
}
.memory-group summary {
+ padding: 11px 13px;
+ color: var(--forest);
cursor: pointer;
- padding: 9px 10px;
- color: var(--text);
+ font-weight: 800;
}
.memory-group pre {
- margin: 0 10px 10px;
+ margin: 0 12px 12px;
white-space: pre-wrap;
}
.pending-empty {
color: var(--muted);
- font-size: 13px;
+ font-size: 15px;
+ font-weight: 500;
}
.pending-card {
- padding: 12px;
- margin-bottom: 12px;
- border: 1px solid var(--border);
- border-radius: 8px;
- background: #15191e;
+ padding: 15px;
+ margin-bottom: 14px;
+ border: 1px solid var(--line);
+ border-radius: 18px;
+ background: rgba(255, 250, 240, 0.82);
+ box-shadow: 0 14px 32px rgba(38, 58, 27, 0.1);
}
.pending-card strong {
display: block;
margin-bottom: 8px;
+ color: var(--forest);
+ font-family: "Playfair Display", Georgia, serif;
+ font-size: 17px;
}
pre {
- overflow: auto;
max-height: 240px;
- padding: 10px;
- border-radius: 6px;
- background: #0e1114;
- color: #dfe5eb;
+ padding: 12px;
+ overflow: auto;
+ border: 1px solid rgba(38, 58, 27, 0.14);
+ border-radius: 14px;
+ background: #efe6ce;
+ color: #3c2923;
font-size: 12px;
}
.pending-controls {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 8px;
+ gap: 10px;
}
.pending-card button {
width: 100%;
- padding: 10px;
+ padding: 11px;
}
.decline-button {
- border: 1px solid var(--border);
- background: transparent;
+ border: 1px solid var(--line-strong);
+ background: #fff9e9;
color: var(--muted);
+ box-shadow: none;
}
-@media (max-width: 860px) {
+.decline-button:hover {
+ background: #f5ead4;
+ color: var(--brown);
+}
+
+@media (max-width: 960px) {
.shell {
grid-template-columns: 1fr;
- }
-
- .actions {
- border-top: 1px solid var(--border);
+ grid-template-rows: minmax(0, 1fr) minmax(220px, 34vh);
}
}
-@media (max-width: 560px) {
+@media (max-width: 620px) {
+ .shell {
+ gap: 14px;
+ padding: 10px;
+ }
+
+ .workspace,
+ .actions {
+ border-radius: 22px;
+ }
+
+ .topbar {
+ align-items: flex-start;
+ grid-template-columns: 1fr;
+ padding: 22px;
+ }
+
+ .brand-block {
+ align-items: flex-start;
+ }
+
+ .logo-wrap {
+ width: 58px;
+ height: 58px;
+ flex-basis: 58px;
+ border-radius: 18px;
+ }
+
+ .logo-wrap img {
+ width: 45px;
+ height: 45px;
+ }
+
+ h1 {
+ font-size: 31px;
+ }
+
+ .eyebrow {
+ font-size: 10px;
+ letter-spacing: 0.08em;
+ }
+
+ .messages,
+ .actions {
+ padding: 22px;
+ }
+
.composer {
grid-template-columns: 1fr;
+ padding: 18px;
}
.composer button {
width: 100%;
- min-height: 42px;
+ min-height: 48px;
}
.message-metrics {
display: none;
}
+
+ .message-activity {
+ grid-template-columns: 1fr;
+ }
+
+ .message-phase {
+ grid-column: 1;
+ }
}