diff --git a/web/src/components/Studio.jsx b/web/src/components/Studio.jsx index 2f13929..cfdcd4b 100644 --- a/web/src/components/Studio.jsx +++ b/web/src/components/Studio.jsx @@ -300,6 +300,7 @@ export default function Studio({ api }) { const [contextCollapsed, setContextCollapsed] = useState(false) const [messagesCollapsed, setMessagesCollapsed] = useState(false) const messagesEnd = useRef(null) + const feedRef = useRef(null) const textareaRef = useRef(null) const abortRef = useRef(null) @@ -587,12 +588,22 @@ export default function Studio({ api }) { return (
-
- {renderMessages()} - {(streaming || streamThinking || loading || streamToolCalls.length > 0) && ( - - )} -
+
+
+ {renderMessages()} + {(streaming || streamThinking || loading || streamToolCalls.length > 0) && ( + + )} +
+
+
+ + +
diff --git a/web/src/styles/global.css b/web/src/styles/global.css index df6735a..219e53c 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -155,6 +155,7 @@ input::placeholder { color: var(--text-disabled); } .header-clock { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; } .content { flex: 1; overflow: hidden; position: relative; } +.content > div { height: 100%; } .tab-hidden { display: none; } .statusbar { @@ -594,6 +595,7 @@ input::placeholder { color: var(--text-disabled); } .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); gap: 12px; padding: 16px; height: 100%; @@ -763,7 +765,17 @@ input::placeholder { color: var(--text-disabled); } /* ── Studio Feed ── */ .studio-feed-layout { display: flex; flex-direction: column; height: 100%; overflow: hidden; } -.studio-feed { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; } +.studio-feed-scroll-wrap { flex: 1; position: relative; overflow: hidden; } +.studio-feed { height: 100%; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; } +.studio-scroll-btns { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; z-index: 10; } +.studio-scroll-btn { + width: 32px; height: 32px; border-radius: 50%; padding: 0; + display: flex; align-items: center; justify-content: center; + background: var(--bg-card); border: 1px solid var(--border); + color: var(--text-tertiary); cursor: pointer; transition: all 0.15s; + opacity: 0.7; +} +.studio-scroll-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-dim); opacity: 1; } .feed-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; } .feed-item { display: flex; gap: 10px; padding: 8px 12px; border-radius: var(--radius); animation: fadeIn 0.15s ease-out; } .feed-item:hover { background: var(--bg-card); }