From b2fd1aac659912d87efd9380f77b838a8719902a Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 9 Aug 2025 19:36:21 +0300
Subject: [PATCH 01/18] webui: update ChatInput styling

---
 .../webui/src/components/ChatScreen.tsx       | 81 ++++++++++---------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/tools/server/webui/src/components/ChatScreen.tsx b/tools/server/webui/src/components/ChatScreen.tsx
index c1a6691445507..68039f13a263f 100644
--- a/tools/server/webui/src/components/ChatScreen.tsx
+++ b/tools/server/webui/src/components/ChatScreen.tsx
@@ -348,7 +348,7 @@ function ChatInput({
       >
         {({ getRootProps, getInputProps }) => (
           <div
-            className="flex flex-col rounded-xl border-1 border-base-content/30 p-3 w-full"
+            className="flex flex-col rounded-xl w-full"
             // when a file is pasted to the input, we handle it here
             // if a text is pasted, and if it is long text, we will convert it to a file
             onPasteCapture={(e: ClipboardEvent<HTMLInputElement>) => {
@@ -390,11 +390,11 @@ function ChatInput({
               />
             )}
 
-            <div className="flex flex-row w-full">
+            <div className="bg-base-200 border-1 border-base-content/30 rounded-lg p-2 flex flex-col">
               <textarea
                 // Default (mobile): Enable vertical resize, overflow auto for scrolling if needed
                 // Large screens (lg:): Disable manual resize, apply max-height for autosize limit
-                className="text-md outline-none border-none w-full resize-vertical lg:resize-none lg:max-h-48 lg:overflow-y-auto" // Adjust lg:max-h-48 as needed (e.g., lg:max-h-60)
+                className="w-full focus:outline-none px-2 border-none focus:ring-0 resize-none"
                 placeholder="Type a message (Shift+Enter to add a new line)"
                 ref={textarea.ref}
                 onInput={textarea.onInput} // Hook's input handler (will only resize height on lg+ screens)
@@ -413,42 +413,47 @@ function ChatInput({
               ></textarea>
 
               {/* buttons area */}
-              <div className="flex flex-row gap-2 ml-2">
-                <label
-                  htmlFor="file-upload"
-                  className={classNames({
-                    'btn w-8 h-8 p-0 rounded-full': true,
-                    'btn-disabled': isGenerating,
-                  })}
-                  aria-label="Upload file"
-                  tabIndex={0}
-                  role="button"
-                >
-                  <PaperClipIcon className="h-5 w-5" />
-                </label>
-                <input
-                  id="file-upload"
-                  type="file"
-                  disabled={isGenerating}
-                  {...getInputProps()}
-                  hidden
-                />
-                {isGenerating ? (
-                  <button
-                    className="btn btn-neutral w-8 h-8 p-0 rounded-full"
-                    onClick={onStop}
+              <div className="flex items-center justify-between mt-2">
+                <div className="flex items-center">
+                  <label
+                    htmlFor="file-upload"
+                    className={classNames({
+                      'btn w-8 h-8 p-0 rounded-full': true,
+                      'btn-disabled': isGenerating,
+                    })}
+                    aria-label="Upload file"
+                    tabIndex={0}
+                    role="button"
                   >
-                    <StopIcon className="h-5 w-5" />
-                  </button>
-                ) : (
-                  <button
-                    className="btn btn-primary w-8 h-8 p-0 rounded-full"
-                    onClick={onSend}
-                    aria-label="Send message"
-                  >
-                    <ArrowUpIcon className="h-5 w-5" />
-                  </button>
-                )}
+                    <PaperClipIcon className="h-5 w-5" />
+                  </label>
+                  <input
+                    id="file-upload"
+                    type="file"
+                    disabled={isGenerating}
+                    {...getInputProps()}
+                    hidden
+                  />
+                </div>
+
+                <div className="flex items-center">
+                  {isGenerating ? (
+                    <button
+                      className="btn btn-neutral w-8 h-8 p-0 rounded-full"
+                      onClick={onStop}
+                    >
+                      <StopIcon className="h-5 w-5" />
+                    </button>
+                  ) : (
+                    <button
+                      className="btn btn-primary w-8 h-8 p-0 rounded-full"
+                      onClick={onSend}
+                      aria-label="Send message"
+                    >
+                      <ArrowUpIcon className="h-5 w-5" />
+                    </button>
+                  )}
+                </div>
               </div>
             </div>
           </div>

From f2668e98a7c1af4affff98eee7c9ac0781db7282 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 9 Aug 2025 20:22:43 +0300
Subject: [PATCH 02/18] webui: update favicon and page title

---
 tools/server/webui/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tools/server/webui/index.html b/tools/server/webui/index.html
index 471f46b3ad19b..fd38d11d8a166 100644
--- a/tools/server/webui/index.html
+++ b/tools/server/webui/index.html
@@ -7,7 +7,8 @@
       content="width=device-width, initial-scale=1, maximum-scale=1"
     />
     <meta name="color-scheme" content="light dark" />
-    <title>🦙 llama.cpp - chat</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦙</text></svg>">
+    <title>llama.cpp</title>
   </head>
   <body>
     <div id="root"></div>

From dd1bbd965aee0fad56cf6ce40a68caecc3e7b165 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 9 Aug 2025 21:59:33 +0300
Subject: [PATCH 03/18] webui: update Header

---
 tools/server/webui/src/components/Header.tsx | 28 +++++++++++++++-----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/tools/server/webui/src/components/Header.tsx b/tools/server/webui/src/components/Header.tsx
index ccddc21ddab73..ba5ad0fb07d2d 100644
--- a/tools/server/webui/src/components/Header.tsx
+++ b/tools/server/webui/src/components/Header.tsx
@@ -12,7 +12,7 @@ import {
 
 export default function Header() {
   const [selectedTheme, setSelectedTheme] = useState(StorageUtils.getTheme());
-  const { setShowSettings } = useAppContext();
+  const { serverProps, setShowSettings } = useAppContext();
 
   const setTheme = (theme: string) => {
     StorageUtils.setTheme(theme);
@@ -28,13 +28,25 @@ export default function Header() {
   }, [selectedTheme]);
 
   return (
-    <div className="flex flex-row items-center pt-6 pb-6 sticky top-0 z-10 bg-base-100">
+    <div className="flex flex-row items-center pt-2 pb-2 sticky top-0 z-10 bg-base-100 border-b border-base-content/10">
       {/* open sidebar button */}
-      <label htmlFor="toggle-drawer" className="btn btn-ghost lg:hidden">
+      <label
+        htmlFor="toggle-drawer"
+        className="btn btn-ghost w-8 h-8 p-0 lg:hidden"
+      >
         <Bars3Icon className="h-5 w-5" />
       </label>
 
-      <div className="grow text-2xl font-bold ml-2">llama.cpp</div>
+      {/* model information*/}
+      <div className="grow ml-2 px-1 sm:px-4 py-0 sm:py-2">
+        <b>
+          {serverProps?.model_alias ||
+            serverProps?.model_path
+              ?.split(/(\\|\/)/)
+              .pop()
+              ?.replace(/\.\w+$/, '')}
+        </b>
+      </div>
 
       {/* action buttons (top right) */}
       <div className="flex items-center">
@@ -43,7 +55,7 @@ export default function Header() {
           data-tip="Settings"
           onClick={() => setShowSettings(true)}
         >
-          <button className="btn" aria-hidden={true}>
+          <button className="btn w-8 h-8 p-0 rounded-full" aria-hidden={true}>
             {/* settings button */}
             <Cog8ToothIcon className="w-5 h-5" />
           </button>
@@ -52,7 +64,11 @@ export default function Header() {
         {/* theme controller is copied from https://daisyui.com/components/theme-controller/ */}
         <div className="tooltip tooltip-bottom" data-tip="Themes">
           <div className="dropdown dropdown-end dropdown-bottom">
-            <div tabIndex={0} role="button" className="btn m-1">
+            <div
+              tabIndex={0}
+              role="button"
+              className="btn m-1 w-8 h-8 p-0 rounded-full"
+            >
               <MoonIcon className="w-5 h-5" />
             </div>
             <ul

From 70208548a9402b3174719d8d92d413422def2342 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 9 Aug 2025 22:22:58 +0300
Subject: [PATCH 04/18] webui: update ServerInfo

---
 tools/server/webui/src/App.tsx                | 34 +++++++++++++++
 .../webui/src/components/ChatScreen.tsx       | 42 +------------------
 2 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/tools/server/webui/src/App.tsx b/tools/server/webui/src/App.tsx
index 8dfcf49075803..aa3f3b0216d63 100644
--- a/tools/server/webui/src/App.tsx
+++ b/tools/server/webui/src/App.tsx
@@ -37,6 +37,7 @@ function AppLayout() {
       >
         <Header />
         <Outlet />
+        <ServerInfo />
       </main>
       {
         <SettingDialog
@@ -49,4 +50,37 @@ function AppLayout() {
   );
 }
 
+function ServerInfo() {
+  const { serverProps } = useAppContext();
+  const modalities = [];
+  if (serverProps?.modalities?.audio) {
+    modalities.push('audio');
+  }
+  if (serverProps?.modalities?.vision) {
+    modalities.push('vision');
+  }
+  return (
+    <div
+      className="sticky bottom-0 w-full pb-1 text-base-content/70 text-xs text-center"
+      tabIndex={0}
+      aria-description="Server information"
+    >
+      <span>
+        <b>Llama.cpp</b> {serverProps?.build_info}
+      </span>
+
+      <span className="sm:ml-2">
+        {modalities.length > 0 ? (
+          <>
+            <br className="sm:hidden" />
+            <b>Supported modalities:</b> {modalities.join(', ')}
+          </>
+        ) : (
+          ''
+        )}
+      </span>
+    </div>
+  );
+}
+
 export default App;
diff --git a/tools/server/webui/src/components/ChatScreen.tsx b/tools/server/webui/src/components/ChatScreen.tsx
index 68039f13a263f..ef4c98586412a 100644
--- a/tools/server/webui/src/components/ChatScreen.tsx
+++ b/tools/server/webui/src/components/ChatScreen.tsx
@@ -238,10 +238,7 @@ export default function ChatScreen() {
             {viewingChat ? (
               ''
             ) : (
-              <>
-                <div className="mb-4">Send a message to start</div>
-                <ServerInfo />
-              </>
+              <div className="mb-4">Send a message to start</div>
             )}
           </div>
           {[...messages, ...pendingMsgDisplay].map((msg) => (
@@ -276,41 +273,6 @@ export default function ChatScreen() {
   );
 }
 
-function ServerInfo() {
-  const { serverProps } = useAppContext();
-  const modalities = [];
-  if (serverProps?.modalities?.audio) {
-    modalities.push('audio');
-  }
-  if (serverProps?.modalities?.vision) {
-    modalities.push('vision');
-  }
-  return (
-    <div
-      className="card card-sm shadow-sm border-1 border-base-content/20 text-base-content/70 mb-6"
-      tabIndex={0}
-      aria-description="Server information"
-    >
-      <div className="card-body">
-        <b>Server Info</b>
-        <p>
-          <b>Model</b>: {serverProps?.model_path?.split(/(\\|\/)/).pop()}
-          <br />
-          <b>Build</b>: {serverProps?.build_info}
-          <br />
-          {modalities.length > 0 ? (
-            <>
-              <b>Supported modalities:</b> {modalities.join(', ')}
-            </>
-          ) : (
-            ''
-          )}
-        </p>
-      </div>
-    </div>
-  );
-}
-
 function ChatInput({
   textarea,
   extraContext,
@@ -332,7 +294,7 @@ function ChatInput({
       role="group"
       aria-label="Chat input"
       className={classNames({
-        'flex items-end pt-8 pb-6 sticky bottom-0 bg-base-100': true,
+        'flex items-end pt-8 pb-1 sticky bottom-0 bg-base-100': true,
         'opacity-50': isDrag, // simply visual feedback to inform user that the file will be accepted
       })}
     >

From d78f2c23cbc8d08161062e51eb845fc1100b7f49 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 9 Aug 2025 22:44:59 +0300
Subject: [PATCH 05/18] webui: update ChatScreen greeting message

---
 .../webui/src/components/ChatScreen.tsx       | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/tools/server/webui/src/components/ChatScreen.tsx b/tools/server/webui/src/components/ChatScreen.tsx
index ef4c98586412a..552aaa3a4d759 100644
--- a/tools/server/webui/src/components/ChatScreen.tsx
+++ b/tools/server/webui/src/components/ChatScreen.tsx
@@ -231,29 +231,31 @@ export default function ChatScreen() {
           flex: !hasCanvas,
         })}
       >
+        {/* placeholder to shift the message to the bottom */}
+        {!viewingChat && (
+          <div className="grow flex flex-col items-center justify-center ">
+            <b className="text-4xl">Nice to see you.</b>
+            <small>how can I help you today?</small>
+          </div>
+        )}
+
         {/* chat messages */}
-        <div id="messages-list" className="grow" ref={msgListRef}>
-          <div className="mt-auto flex flex-col items-center">
-            {/* placeholder to shift the message to the bottom */}
-            {viewingChat ? (
-              ''
-            ) : (
-              <div className="mb-4">Send a message to start</div>
-            )}
+        {viewingChat && (
+          <div id="messages-list" className="grow" ref={msgListRef}>
+            {[...messages, ...pendingMsgDisplay].map((msg) => (
+              <ChatMessage
+                key={msg.msg.id}
+                msg={msg.msg}
+                siblingLeafNodeIds={msg.siblingLeafNodeIds}
+                siblingCurrIdx={msg.siblingCurrIdx}
+                onRegenerateMessage={handleRegenerateMessage}
+                onEditMessage={handleEditMessage}
+                onChangeSibling={setCurrNodeId}
+                isPending={msg.isPending}
+              />
+            ))}
           </div>
-          {[...messages, ...pendingMsgDisplay].map((msg) => (
-            <ChatMessage
-              key={msg.msg.id}
-              msg={msg.msg}
-              siblingLeafNodeIds={msg.siblingLeafNodeIds}
-              siblingCurrIdx={msg.siblingCurrIdx}
-              onRegenerateMessage={handleRegenerateMessage}
-              onEditMessage={handleEditMessage}
-              onChangeSibling={setCurrNodeId}
-              isPending={msg.isPending}
-            />
-          ))}
-        </div>
+        )}
 
         {/* chat input */}
         <ChatInput

From e539f3e555a8ae321798e67cc071fcbdb385c01f Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:04:00 +0300
Subject: [PATCH 06/18] webui: update Sidebar header

---
 tools/server/webui/src/components/Sidebar.tsx | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/tools/server/webui/src/components/Sidebar.tsx b/tools/server/webui/src/components/Sidebar.tsx
index b52a8df03c969..715ddc801cb26 100644
--- a/tools/server/webui/src/components/Sidebar.tsx
+++ b/tools/server/webui/src/components/Sidebar.tsx
@@ -75,36 +75,33 @@ export default function Sidebar() {
           Skip to main content
         </a>
 
-        <div className="flex flex-col bg-base-200 min-h-full max-w-64 py-4 px-4">
-          <div className="flex flex-row items-center justify-between mb-4 mt-4">
-            <h2 className="font-bold ml-4" role="heading">
-              Conversations
-            </h2>
-
+        <div className="flex flex-col bg-base-200 min-h-full max-w-64 pb-4 px-4">
+          <div className="flex flex-row items-center justify-between leading-10 py-2 border-b border-base-content/10">
             {/* close sidebar button */}
+            <label className="w-8 h-8 p-0 max-lg:hidden"></label>
             <label
               htmlFor="toggle-drawer"
-              className="btn btn-ghost lg:hidden"
+              className="btn btn-ghost w-8 h-8 p-0 rounded-full lg:hidden"
               aria-label="Close sidebar"
               role="button"
               tabIndex={0}
             >
               <XMarkIcon className="w-5 h-5" />
             </label>
-          </div>
 
-          {/* new conversation button */}
-          <button
-            className={classNames({
-              'btn btn-ghost justify-start px-2': true,
-              'btn-soft': !currConv,
-            })}
-            onClick={() => navigate('/')}
-            aria-label="New conversation"
-          >
-            <PencilSquareIcon className="w-5 h-5" />
-            New conversation
-          </button>
+            <h2 className="font-bold" role="heading">
+              Conversations
+            </h2>
+
+            {/* new conversation button */}
+            <button
+              className="btn btn-ghost w-8 h-8 p-0 rounded-full"
+              onClick={() => navigate('/')}
+              aria-label="New conversation"
+            >
+              <PencilSquareIcon className="w-5 h-5" />
+            </button>
+          </div>
 
           {/* list of conversations */}
           {groupedConv.map((group, i) => (

From 5495a8da0be84c0460b1cb92db5e6b94dd64f83e Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:09:57 +0300
Subject: [PATCH 07/18] webui: add Yesterday chat group

---
 tools/server/webui/src/components/Sidebar.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/tools/server/webui/src/components/Sidebar.tsx b/tools/server/webui/src/components/Sidebar.tsx
index 715ddc801cb26..98e8028e86e6a 100644
--- a/tools/server/webui/src/components/Sidebar.tsx
+++ b/tools/server/webui/src/components/Sidebar.tsx
@@ -110,7 +110,7 @@ export default function Sidebar() {
               {group.title ? (
                 // we use btn class here to make sure that the padding/margin are aligned with the other items
                 <b
-                  className="btn btn-ghost btn-xs bg-none btn-disabled block text-xs text-base-content text-start px-2 mb-0 mt-6 font-bold"
+                  className="btn btn-ghost btn-xs bg-none btn-disabled block text-xs text-base-content text-start px-2 mb-0 mt-6 font-bold opacity-50"
                   role="note"
                   aria-description={group.title}
                   tabIndex={0}
@@ -287,6 +287,9 @@ export function groupConversationsByDate(
   const now = new Date();
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // Start of today
 
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
   const sevenDaysAgo = new Date(today);
   sevenDaysAgo.setDate(today.getDate() - 7);
 
@@ -295,6 +298,7 @@ export function groupConversationsByDate(
 
   const groups: { [key: string]: Conversation[] } = {
     Today: [],
+    Yesterday: [],
     'Previous 7 Days': [],
     'Previous 30 Days': [],
   };
@@ -311,6 +315,8 @@ export function groupConversationsByDate(
 
     if (convDate >= today) {
       groups['Today'].push(conv);
+    } else if (convDate >= yesterday) {
+      groups['Yesterday'].push(conv);
     } else if (convDate >= sevenDaysAgo) {
       groups['Previous 7 Days'].push(conv);
     } else if (convDate >= thirtyDaysAgo) {
@@ -335,6 +341,13 @@ export function groupConversationsByDate(
     });
   }
 
+  if (groups['Yesterday'].length > 0) {
+    result.push({
+      title: 'Yesterday',
+      conversations: groups['Yesterday'],
+    });
+  }
+
   if (groups['Previous 7 Days'].length > 0) {
     result.push({
       title: 'Previous 7 Days',

From a9a2deb58227e934bdb999e2c7ca2470155697c1 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:18:46 +0300
Subject: [PATCH 08/18] webui: fix Header

---
 tools/server/webui/src/components/Header.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/tools/server/webui/src/components/Header.tsx b/tools/server/webui/src/components/Header.tsx
index ba5ad0fb07d2d..6c0e82c9a8e15 100644
--- a/tools/server/webui/src/components/Header.tsx
+++ b/tools/server/webui/src/components/Header.tsx
@@ -28,7 +28,7 @@ export default function Header() {
   }, [selectedTheme]);
 
   return (
-    <div className="flex flex-row items-center pt-2 pb-2 sticky top-0 z-10 bg-base-100 border-b border-base-content/10">
+    <div className="flex flex-row items-center py-2 sticky top-0 z-10 bg-base-100 border-b border-base-content/10">
       {/* open sidebar button */}
       <label
         htmlFor="toggle-drawer"
@@ -38,7 +38,7 @@ export default function Header() {
       </label>
 
       {/* model information*/}
-      <div className="grow ml-2 px-1 sm:px-4 py-0 sm:py-2">
+      <div className="grow ml-2 px-1 sm:px-4 py-0">
         <b>
           {serverProps?.model_alias ||
             serverProps?.model_path
@@ -55,7 +55,10 @@ export default function Header() {
           data-tip="Settings"
           onClick={() => setShowSettings(true)}
         >
-          <button className="btn w-8 h-8 p-0 rounded-full" aria-hidden={true}>
+          <button
+            className="btn btn-ghost w-8 h-8 p-0 rounded-full"
+            aria-hidden={true}
+          >
             {/* settings button */}
             <Cog8ToothIcon className="w-5 h-5" />
           </button>
@@ -67,7 +70,7 @@ export default function Header() {
             <div
               tabIndex={0}
               role="button"
-              className="btn m-1 w-8 h-8 p-0 rounded-full"
+              className="btn btn-ghost m-1 w-8 h-8 p-0 rounded-full"
             >
               <MoonIcon className="w-5 h-5" />
             </div>

From 9c7b8b254a61876c057c5579ae008c75d327950d Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:19:06 +0300
Subject: [PATCH 09/18] webui: fix SystemInfo position

---
 tools/server/webui/src/App.tsx                | 34 ------------------
 .../webui/src/components/ChatScreen.tsx       | 36 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/tools/server/webui/src/App.tsx b/tools/server/webui/src/App.tsx
index aa3f3b0216d63..8dfcf49075803 100644
--- a/tools/server/webui/src/App.tsx
+++ b/tools/server/webui/src/App.tsx
@@ -37,7 +37,6 @@ function AppLayout() {
       >
         <Header />
         <Outlet />
-        <ServerInfo />
       </main>
       {
         <SettingDialog
@@ -50,37 +49,4 @@ function AppLayout() {
   );
 }
 
-function ServerInfo() {
-  const { serverProps } = useAppContext();
-  const modalities = [];
-  if (serverProps?.modalities?.audio) {
-    modalities.push('audio');
-  }
-  if (serverProps?.modalities?.vision) {
-    modalities.push('vision');
-  }
-  return (
-    <div
-      className="sticky bottom-0 w-full pb-1 text-base-content/70 text-xs text-center"
-      tabIndex={0}
-      aria-description="Server information"
-    >
-      <span>
-        <b>Llama.cpp</b> {serverProps?.build_info}
-      </span>
-
-      <span className="sm:ml-2">
-        {modalities.length > 0 ? (
-          <>
-            <br className="sm:hidden" />
-            <b>Supported modalities:</b> {modalities.join(', ')}
-          </>
-        ) : (
-          ''
-        )}
-      </span>
-    </div>
-  );
-}
-
 export default App;
diff --git a/tools/server/webui/src/components/ChatScreen.tsx b/tools/server/webui/src/components/ChatScreen.tsx
index 552aaa3a4d759..d1b814ee351a0 100644
--- a/tools/server/webui/src/components/ChatScreen.tsx
+++ b/tools/server/webui/src/components/ChatScreen.tsx
@@ -296,7 +296,7 @@ function ChatInput({
       role="group"
       aria-label="Chat input"
       className={classNames({
-        'flex items-end pt-8 pb-1 sticky bottom-0 bg-base-100': true,
+        'flex flex-col items-end pt-8 sticky bottom-0 bg-base-100': true,
         'opacity-50': isDrag, // simply visual feedback to inform user that the file will be accepted
       })}
     >
@@ -423,6 +423,40 @@ function ChatInput({
           </div>
         )}
       </Dropzone>
+      <ServerInfo />
+    </div>
+  );
+}
+
+function ServerInfo() {
+  const { serverProps } = useAppContext();
+  const modalities = [];
+  if (serverProps?.modalities?.audio) {
+    modalities.push('audio');
+  }
+  if (serverProps?.modalities?.vision) {
+    modalities.push('vision');
+  }
+  return (
+    <div
+      className="sticky bottom-0 w-full pt-1 pb-1 text-base-content/70 text-xs text-center"
+      tabIndex={0}
+      aria-description="Server information"
+    >
+      <span>
+        <b>Llama.cpp</b> {serverProps?.build_info}
+      </span>
+
+      <span className="sm:ml-2">
+        {modalities.length > 0 ? (
+          <>
+            <br className="sm:hidden" />
+            <b>Supported modalities:</b> {modalities.join(', ')}
+          </>
+        ) : (
+          ''
+        )}
+      </span>
     </div>
   );
 }

From f364c5c9bea79996714581fb6ad6066b1876c2cb Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:28:31 +0300
Subject: [PATCH 10/18] webui: ModelName filter quants

---
 tools/server/webui/src/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/server/webui/src/components/Header.tsx b/tools/server/webui/src/components/Header.tsx
index 6c0e82c9a8e15..2062402b0a87c 100644
--- a/tools/server/webui/src/components/Header.tsx
+++ b/tools/server/webui/src/components/Header.tsx
@@ -44,7 +44,7 @@ export default function Header() {
             serverProps?.model_path
               ?.split(/(\\|\/)/)
               .pop()
-              ?.replace(/\.\w+$/, '')}
+              ?.replace(/[-](?:[IQ]+[0-9]+[_\d\w]+)(?:\.[a-z]+)?$/, '')}
         </b>
       </div>
 

From 094799e02d678ebd07bec1f30f203d2a42946bfd Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:31:07 +0300
Subject: [PATCH 11/18] webui: truncate ModelName for mobile

---
 tools/server/webui/src/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/server/webui/src/components/Header.tsx b/tools/server/webui/src/components/Header.tsx
index 2062402b0a87c..24f3500acb393 100644
--- a/tools/server/webui/src/components/Header.tsx
+++ b/tools/server/webui/src/components/Header.tsx
@@ -38,7 +38,7 @@ export default function Header() {
       </label>
 
       {/* model information*/}
-      <div className="grow ml-2 px-1 sm:px-4 py-0">
+      <div className="grow text-nowrap overflow-hidden truncate ml-2 px-1 sm:px-4 py-0">
         <b>
           {serverProps?.model_alias ||
             serverProps?.model_path

From acfa3102ea8c32063f6e68c38ab1b4ea09bccb2f Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:33:04 +0300
Subject: [PATCH 12/18] webui: add model_alias property

---
 tools/server/webui/src/utils/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tools/server/webui/src/utils/types.ts b/tools/server/webui/src/utils/types.ts
index ea7d641dc748b..019490eebe7c5 100644
--- a/tools/server/webui/src/utils/types.ts
+++ b/tools/server/webui/src/utils/types.ts
@@ -128,6 +128,7 @@ export type CanvasData = CanvasPyInterpreter;
 // a non-complete list of props, only contains the ones we need
 export interface LlamaCppServerProps {
   build_info: string;
+  model_alias: string;
   model_path: string;
   n_ctx: number;
   modalities?: {

From cd2d57ea8d9fbd894136bc5977686f07e365877f Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:40:00 +0300
Subject: [PATCH 13/18] webui: increase SettingDialog max width

---
 tools/server/webui/src/components/SettingDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/server/webui/src/components/SettingDialog.tsx b/tools/server/webui/src/components/SettingDialog.tsx
index 45a8d73b00592..35db2f73e6ee7 100644
--- a/tools/server/webui/src/components/SettingDialog.tsx
+++ b/tools/server/webui/src/components/SettingDialog.tsx
@@ -341,7 +341,7 @@ export default function SettingDialog({
       className={classNames({ modal: true, 'modal-open': show })}
       aria-label="Settings dialog"
     >
-      <div className="modal-box w-11/12 max-w-3xl">
+      <div className="modal-box w-11/12 max-w-4xl">
         <h3 className="text-lg font-bold mb-6">Settings</h3>
         <div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]">
           {/* Left panel, showing sections - Desktop version */}

From b88ae96fd484469ebf3d19893262abe62626d8fe Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:43:41 +0300
Subject: [PATCH 14/18] webui: fix iPad Sidebar width

---
 tools/server/webui/src/components/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/server/webui/src/components/Sidebar.tsx b/tools/server/webui/src/components/Sidebar.tsx
index 98e8028e86e6a..d86293b1feb7c 100644
--- a/tools/server/webui/src/components/Sidebar.tsx
+++ b/tools/server/webui/src/components/Sidebar.tsx
@@ -75,7 +75,7 @@ export default function Sidebar() {
           Skip to main content
         </a>
 
-        <div className="flex flex-col bg-base-200 min-h-full max-w-64 pb-4 px-4">
+        <div className="flex flex-col bg-base-200 min-h-full max-w-full pb-4 px-4">
           <div className="flex flex-row items-center justify-between leading-10 py-2 border-b border-base-content/10">
             {/* close sidebar button */}
             <label className="w-8 h-8 p-0 max-lg:hidden"></label>

From 44f68e1c2ba160fbe5b86c3291c582b0e5670379 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 00:54:13 +0300
Subject: [PATCH 15/18] webui: fix Conversation dropdown button visibility

---
 tools/server/webui/src/components/Sidebar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tools/server/webui/src/components/Sidebar.tsx b/tools/server/webui/src/components/Sidebar.tsx
index d86293b1feb7c..3c7a1ceaf6ae9 100644
--- a/tools/server/webui/src/components/Sidebar.tsx
+++ b/tools/server/webui/src/components/Sidebar.tsx
@@ -228,12 +228,13 @@ function ConversationItem({
       >
         {conv.name}
       </button>
+
       <div tabIndex={0} className="dropdown dropdown-end h-5">
         <BtnWithTooltips
           // on mobile, we always show the ellipsis icon
           // on desktop, we only show it when the user hovers over the conversation item
           // we use opacity instead of hidden to avoid layout shift
-          className="cursor-pointer opacity-100 md:opacity-0 group-hover:opacity-100"
+          className="cursor-pointer opacity-100 xl:opacity-20 group-hover:opacity-100"
           onClick={() => {}}
           tooltipsContent="More"
         >

From 034af8e6353b145f16b9651fcd6be8949188e9d9 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 01:37:57 +0300
Subject: [PATCH 16/18] webui: DaisyUI themes previews

---
 tools/server/webui/src/components/Header.tsx | 48 ++++++++++++--------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/tools/server/webui/src/components/Header.tsx b/tools/server/webui/src/components/Header.tsx
index 24f3500acb393..6d5b82fc49c9b 100644
--- a/tools/server/webui/src/components/Header.tsx
+++ b/tools/server/webui/src/components/Header.tsx
@@ -4,11 +4,7 @@ import { useAppContext } from '../utils/app.context';
 import { classNames } from '../utils/misc';
 import daisyuiThemes from 'daisyui/theme/object';
 import { THEMES } from '../Config';
-import {
-  Cog8ToothIcon,
-  MoonIcon,
-  Bars3Icon,
-} from '@heroicons/react/24/outline';
+import { Cog8ToothIcon, Bars3Icon } from '@heroicons/react/24/outline';
 
 export default function Header() {
   const [selectedTheme, setSelectedTheme] = useState(StorageUtils.getTheme());
@@ -72,34 +68,50 @@ export default function Header() {
               role="button"
               className="btn btn-ghost m-1 w-8 h-8 p-0 rounded-full"
             >
-              <MoonIcon className="w-5 h-5" />
+              <div className="bg-base-100 grid shrink-0 grid-cols-2 gap-1 rounded-md p-1 shadow-sm">
+                <div className="bg-base-content size-1 rounded-full"></div>{' '}
+                <div className="bg-primary size-1 rounded-full"></div>{' '}
+                <div className="bg-secondary size-1 rounded-full"></div>{' '}
+                <div className="bg-accent size-1 rounded-full"></div>
+              </div>
             </div>
             <ul
               tabIndex={0}
-              className="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl h-80 overflow-y-auto"
+              className="dropdown-content rounded-box z-[1] w-50 p-2 shadow-2xl h-80 text-sm overflow-y-auto"
             >
               <li>
                 <button
                   className={classNames({
-                    'btn btn-sm btn-block btn-ghost justify-start': true,
+                    'flex gap-3 p-2 btn btn-sm btn-ghost': true,
                     'btn-active': selectedTheme === 'auto',
                   })}
                   onClick={() => setTheme('auto')}
                 >
-                  auto
+                  <div className="w-32 ml-6 pl-1 truncate text-left">auto</div>
                 </button>
               </li>
               {THEMES.map((theme) => (
                 <li key={theme}>
-                  <input
-                    type="radio"
-                    name="theme-dropdown"
-                    className="theme-controller btn btn-sm btn-block btn-ghost justify-start"
-                    aria-label={theme}
-                    value={theme}
-                    checked={selectedTheme === theme}
-                    onChange={(e) => e.target.checked && setTheme(theme)}
-                  />
+                  <button
+                    className={classNames({
+                      'flex gap-3 p-2 btn btn-sm btn-ghost': true,
+                      'btn-active': selectedTheme === theme,
+                    })}
+                    data-set-theme={theme}
+                    data-act-class="[&amp;_svg]:visible"
+                    onClick={() => setTheme(theme)}
+                  >
+                    <div
+                      data-theme={theme}
+                      className="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
+                    >
+                      <div className="bg-base-content size-1 rounded-full"></div>{' '}
+                      <div className="bg-primary size-1 rounded-full"></div>{' '}
+                      <div className="bg-secondary size-1 rounded-full"></div>{' '}
+                      <div className="bg-accent size-1 rounded-full"></div>
+                    </div>
+                    <div className="w-32 truncate text-left">{theme}</div>
+                  </button>
                 </li>
               ))}
             </ul>

From 12d63c7a024895a947ce28b62c1f77245b20d860 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 10 Aug 2025 22:48:47 +0300
Subject: [PATCH 17/18] webui: run eslint

---
 tools/server/webui/index.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tools/server/webui/index.html b/tools/server/webui/index.html
index fd38d11d8a166..9bdde9b1c54f6 100644
--- a/tools/server/webui/index.html
+++ b/tools/server/webui/index.html
@@ -7,7 +7,10 @@
       content="width=device-width, initial-scale=1, maximum-scale=1"
     />
     <meta name="color-scheme" content="light dark" />
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦙</text></svg>">
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦙</text></svg>"
+    />
     <title>llama.cpp</title>
   </head>
   <body>

From 49098486a8e6c104c9ad8f63c08441d2c7fc748a Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Mon, 11 Aug 2025 00:13:35 +0300
Subject: [PATCH 18/18] webui: move Performance metric under icon

---
 .../webui/src/components/ChatMessage.tsx      | 64 +++++++++++--------
 tools/server/webui/src/utils/common.tsx       |  2 +-
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/tools/server/webui/src/components/ChatMessage.tsx b/tools/server/webui/src/components/ChatMessage.tsx
index 1c579f2659050..3b7ddc19500bb 100644
--- a/tools/server/webui/src/components/ChatMessage.tsx
+++ b/tools/server/webui/src/components/ChatMessage.tsx
@@ -7,6 +7,7 @@ import {
   ArrowPathIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ExclamationCircleIcon,
   PencilSquareIcon,
 } from '@heroicons/react/24/outline';
 import ChatInputExtraContextItem from './ChatInputExtraContextItem';
@@ -109,7 +110,7 @@ export default function ChatMessage({
         <div
           className={classNames({
             'chat-bubble markdown': true,
-            'chat-bubble bg-transparent': !isUser,
+            'bg-transparent': !isUser,
           })}
         >
           {/* textarea for editing message */}
@@ -168,30 +169,6 @@ export default function ChatMessage({
                   </div>
                 </>
               )}
-              {/* render timings if enabled */}
-              {timings && config.showTokensPerSecond && (
-                <div className="dropdown dropdown-hover dropdown-top mt-2">
-                  <div
-                    tabIndex={0}
-                    role="button"
-                    className="cursor-pointer font-semibold text-sm opacity-60"
-                  >
-                    Speed: {timings.predicted_per_second.toFixed(1)} t/s
-                  </div>
-                  <div className="dropdown-content bg-base-100 z-10 w-64 p-2 shadow mt-4">
-                    <b>Prompt</b>
-                    <br />- Tokens: {timings.prompt_n}
-                    <br />- Time: {timings.prompt_ms} ms
-                    <br />- Speed: {timings.prompt_per_second.toFixed(1)} t/s
-                    <br />
-                    <b>Generation</b>
-                    <br />- Tokens: {timings.predicted_n}
-                    <br />- Time: {timings.predicted_ms} ms
-                    <br />- Speed: {timings.predicted_per_second.toFixed(1)} t/s
-                    <br />
-                  </div>
-                </div>
-              )}
             </>
           )}
         </div>
@@ -201,7 +178,7 @@ export default function ChatMessage({
       {msg.content !== null && (
         <div
           className={classNames({
-            'flex items-center gap-2 mx-4 mt-2 mb-2': true,
+            'flex items-center gap-2 mx-4 mb-2': true,
             'flex-row-reverse': msg.role === 'user',
           })}
         >
@@ -264,6 +241,41 @@ export default function ChatMessage({
                   <ArrowPathIcon className="h-4 w-4" />
                 </BtnWithTooltips>
               )}
+
+              {/* render timings if enabled */}
+              {timings && config.showTokensPerSecond && (
+                <BtnWithTooltips
+                  className="btn-mini w-8 h-8"
+                  tooltipsContent="Performance"
+                >
+                  <div className="dropdown dropdown-hover dropdown-top">
+                    <ExclamationCircleIcon className="h-4 w-4" />
+
+                    <div
+                      tabIndex={0}
+                      className="dropdown-content rounded-box bg-base-100 z-10 w-48 px-4 py-2 shadow mt-4 text-sm text-left"
+                    >
+                      <b>Prompt Processing</b>
+                      <ul className="list-inside list-disc">
+                        <li>Tokens: {timings.prompt_n}</li>
+                        <li>Time: {timings.prompt_ms} ms</li>
+                        <li>
+                          Speed: {timings.prompt_per_second.toFixed(1)} t/s
+                        </li>
+                      </ul>
+                      <br />
+                      <b>Generation</b>
+                      <ul className="list-inside list-disc">
+                        <li>Tokens: {timings.predicted_n}</li>
+                        <li>Time: {timings.predicted_ms} ms</li>
+                        <li>
+                          Speed: {timings.predicted_per_second.toFixed(1)} t/s
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </BtnWithTooltips>
+              )}
             </>
           )}
           <CopyButton className="btn-mini w-8 h-8" content={msg.content} />
diff --git a/tools/server/webui/src/utils/common.tsx b/tools/server/webui/src/utils/common.tsx
index 7dd64508a4f5f..db75d8b7eed74 100644
--- a/tools/server/webui/src/utils/common.tsx
+++ b/tools/server/webui/src/utils/common.tsx
@@ -46,7 +46,7 @@ export function BtnWithTooltips({
   disabled,
 }: {
   className?: string;
-  onClick: () => void;
+  onClick?: () => void;
   onMouseLeave?: () => void;
   children: React.ReactNode;
   tooltipsContent: string;