docs(FR-2537): add board customization and auto-refresh to dashboard docs

packages/backend.ai-webui-docs/src/en/dashboard/dashboard.md

@@ -4,51 +4,61 @@ The **Dashboard** provides an at-a-glance summary of your current resource usage
 available limits, and session information across all your projects and resource groups.
 It helps you quickly understand how your computing resources are being utilized
 and monitor your recent activities in the system.
-Click the refresh icon in any panel to update the displayed data if it seems outdated.
 
 ![](../images/dashboard.png)
 
 The page is composed of several main panels:
 
-- My Sessions:
+- **My Sessions**:
     Shows the number of active sessions by type,
     such as *Interactive*, *Batch*, *Inference*, and *Upload*.
     You can quickly see how many sessions of each type are currently running.
 
-- My Total Resources Limit:
+- **My Total Resources Limit**:
     Displays the total used and free resources across all your projects and resource groups.
     When multiple limits (domain, project, or keypair) apply,
     the system uses the **most restrictive** available limit to calculate the remaining resources.
 
-- My Resources in Resource Group:
+- **My Resources in Resource Group**:
     Shows your current resource usage and remaining capacity
     within the selected resource group of your current project.
     You can switch groups using the dropdown menu.
 
-- Total Resources in Resource Group:
+- **Total Resources in Resource Group**:
     Summarizes the overall used and free resources in the selected resource group.
     The data is aggregated from all agents that belong to the group.
 
-- Recently Created Sessions:
+:::note
+The **Total Resources in Resource Group** panel may not be visible depending on your
+system configuration.
+:::
+
+- **Recently Created Sessions**:
     Lists the most recently created active sessions within the current project.
     Provides session details such as name, status, CPU/memory usage, environment, resource group,
     session type, and creation time.
     By default, the latest 5 active sessions are displayed.
 
-For super admins, additional information is available.
+## Auto-Refresh
+
+The Dashboard automatically refreshes all panel data every **15 seconds**. This
+ensures that the displayed information stays up to date without requiring manual
+interaction.
 
-![](../images/admin_dashboard.png)
+## Customizing the Dashboard Layout
 
-Except for 'Active Sessions', 'Agent Statistics', and 'Active Agents', the remaining panels
-display the same information as the user dashboard.
+You can customize the Dashboard layout by rearranging and resizing panels to
+suit your preferences.
 
-- Active Sessions:
-    Shows the total number of active sessions across current projects,
-    categorized by session type.
+- **Move panels**: Drag a panel by its header to reposition it on the board.
+- **Resize panels**: Drag the bottom-right corner of a panel to adjust its
+  size. Each panel has a minimum size to ensure its content remains readable.
 
-- Agent Statistics:
-    Provides all used resources across all agents in the system.
-    The values represent the total used resources by all active sessions.
+Your customized layout is automatically saved and persists across browser
+sessions. The layout is stored per user, so each user can have their own
+preferred arrangement.
 
-- Active Agents:
-    Lists all currently active agents in the system.
+:::tip
+When the WebUI is updated with new dashboard panels, those panels will
+automatically appear on your dashboard even if you have a saved custom layout.
+:::

packages/backend.ai-webui-docs/src/en/header/header.md

@@ -7,13 +7,29 @@ The top bar includes various features that support use of the WebUI.
 
 <a id="project-selector"></a>
 
-## Project selector
+## Project Selector
 
 
 Users can switch between projects using the project selector provided in the top bar.
-By default, the project that user currently belongs to is selected.
+By default, the project that the user currently belongs to is selected.
 Since each project may have different resource policies, switching projects may also change the available resource policies.
 
+<a id="login-session-timer"></a>
+
+## Login Session Timer
+
+When login session management is enabled, the top bar displays the remaining
+time until automatic logout along with an extend button. The timer shows the
+time in `HH:mm:ss` format (or includes a day count if longer than 24 hours).
+
+Click the extend button (repeat icon) next to the timer to reset the session
+expiration and extend your login session.
+
+:::note
+The login session timer is only visible when the server supports login session
+extension and it has been enabled in the system configuration.
+:::
+
 <a id="notification"></a>
 
 ## Notification
@@ -22,14 +38,14 @@ Since each project may have different resource policies, switching projects may
 The bell shape button is the event notification button.
 Events that need to be recorded during WebUI operation are displayed here.
 When background tasks are running, such as creating a compute session,
-you can check the jobs here. When the background task is finished.
+you can check the jobs here.
 Press the shortcut key (`]`) to open and close the notification area.
 
 ![](../images/notification_collapse.png)
 
 <a id="theme-mode"></a>
 
-## Theme mode
+## Theme Mode
 
 
 You can change the theme mode of the WebUI via the dark mode button on the
@@ -42,56 +58,77 @@ right side of the header.
 ## Help
 
 
-Click question mark button to access the web version of this guide document.
+Click the question mark button to access the web version of this guide document.
 You will be directed to the appropriate documentation based on the page you are currently on.
 
+<a id="responsive-layout"></a>
+
+## Responsive Layout
+
+On smaller screens, the top bar adjusts its layout for better usability. When
+the screen width is narrow, the sidebar toggle is replaced with a menu icon
+button in the top bar. The user's display name may also be hidden, showing only
+the avatar icon for the user menu. The project label text is hidden on very
+small screens.
+
 <a id="user-menu"></a>
 
 ## User Menu
 
 
-Click the person button on the right side of the top bar to see the user menu.
-Each menu item has the following functions.
+Click the user icon on the right side of the top bar to see the user menu.
 
 ![](../images/user_drop_down.png)
 
-- About Backend.AI: Displays information such as version of Backend.AI WebUI,
+At the top of the dropdown, the following user information is displayed for
+reference. These items are not clickable.
+
+- **Full name**: The current user's full name.
+- **Email**: The current user's email address.
+- **Role**: The current user's role (e.g., user, domain admin, superadmin).
+
+Below the user information, the following action items are available.
+
+- `About Backend.AI`: Displays information such as the version of Backend.AI WebUI,
   license type, etc.
-- My Account: Check / Update information of current login user.
-- Preferences: Go to user settings page.
-- Logs / Errors: Go to the log page. You can check the log and error history
-  recorded on the client side.
-- Download Desktop App: Download the stand-alone WebUI app for your platform.
-- Log Out: Log out of the WebUI.
+- `My Account`: Check and update information of the current logged-in user.
+- `Preferences`: Go to the user settings page.
+- `Logs / Errors`: Go to the logs tab in the user settings page. You can check
+  the log and error history recorded on the client side.
+- `Download Desktop App`: Download the stand-alone WebUI app for your platform.
+  This option is only visible when enabled by the administrator.
+- `Log Out`: Log out of the WebUI.
 
 <a id="my-account"></a>
 
 ### My Account
 
-If you click My Account, the following dialog appears.
+If you click `My Account`, the following dialog appears.
 
 ![](../images/my_account_information.png)
 
-Each item has the following meaning. Enter the desired value and click the UPDATE button to update the user
+Each item has the following meaning. Enter the desired value and click the `Update` button to update the user
 information.
 
-- Full Name: User's name (up to 64 characters).
-- Original password: Original password. Click the right view button to see the
+- **Full Name**: User's name (up to 64 characters).
+- **Original password**: Original password. Click the right view button to see the
   input contents.
-- New password: New password (8 characters or more containing at least 1
+- **New password**: New password (8 characters or more containing at least 1
   alphabet, number, and symbol). Click the right view button to see the input
-  contents. Ensure this is the same as the Original password.
-- 2FA Enabled: 2FA activation. The user needs to enter the OTP code when logging in if it is checked.
+  contents.
+- **New password (again)**: Re-enter the new password for confirmation.
+- **2FA Enabled**: 2FA activation. The user needs to enter the OTP code when logging in if it is checked.
 
 
 :::note
 Depending on the plugin settings, the `2FA Enabled` column might be invisible.
-In that case, please contact administrator of your system.
+In that case, please contact the administrator of your system.
 :::
 
 <a id="2fa-setup"></a>
 
 ### 2FA Setup
+
 If you activate the `2FA Enabled` switch, the following dialog appears.
 
 ![](../images/2fa_setup.png)
@@ -101,7 +138,7 @@ code. There are many 2FA-enabled applications, such as Google Authenticator, 2ST
 and Bitwarden.
 
 Then enter the 6-digit code from the item added to your 2FA application into the dialog above.
-2FA is activated when you press the CONFIRM button.
+2FA is activated when you press the `OK` button.
 
 When you log in later, if you enter an email and password, an additional field appears asking
 for the OTP code.
@@ -113,4 +150,4 @@ To log in, you must open the 2FA application and enter a 6-digit code in the One
 ![](../images/remove_2fa.png)
 
 If you want to disable 2FA, turn off the `2FA Enabled` switch and click the confirm button in the
-following dialog.
+following dialog.

packages/backend.ai-webui-docs/src/en/import_run/import_run.md

@@ -8,15 +8,15 @@ and click the button on the right side.
 
 <a id="import-and-run-jupyter-notebooks"></a>
 
-## Import and run Jupyter notebooks
+## Import and Run Jupyter Notebooks
 
 To import Jupyter notebooks and run, you need one thing, the valid URL for the notebook file.
 For example, if you want execute Jupyter notebook that's in github, you can copy and paste
-the URL and click 'IMPORT & RUN' button.
+the URL and click `Import & Run` button.
 
 :::note
-When you trying to IMPORT & RUN Jupyter notebook file with local address,
-It will be regarded as invalid. You have to input URL which is not starting from localhost.
+When you try to import and run a Jupyter notebook file with a local address,
+it will be regarded as invalid. You must input a URL that does not start with `localhost`.
 :::
 
 ![](../images/import_run_notebook.png)
@@ -35,7 +35,7 @@ imported Jupyter notebook will not run.
 
 ![](../images/session_launcher_in_importing_notebook.png)
 
-You can see the importing operation is successfully completed in Sessions page.
+You can see the importing operation is successfully completed on the Sessions page.
 
 ![](../images/sessions_page_with_imported_notebook.png)
 
@@ -44,12 +44,12 @@ You can see the importing operation is successfully completed in Sessions page.
 ## Create executable Jupyter notebook button
 
 You can also create HTML or Markdown button about Jupyter notebook URL, too.
-Input a valid Jupyter notebook URL and click 'CREATE' button. It will show code blocks that directly
+Input a valid Jupyter notebook URL and click `Create` button. It will show code blocks that directly
 links to creating a session with notebook. You can see the badge code working by inserting it in
 the GitHub repositories or where it supports html or markdown.
 
 :::note
-your account must be logined before clicking the button. Otherwise, you have to login first.
+Your account must be logged in before clicking the button. Otherwise, you have to log in first.
 :::
 
 ![](../images/create_notebook_button.png)
@@ -59,8 +59,7 @@ your account must be logined before clicking the button. Otherwise, you have to
 ## Importing GitHub Repositories
 
 Importing a GitHub repository is similar to import and running Jupyter notebook.
-All you have to do is to fill out with github repository URL and click 'GET TO
-FOLDER' button. If you can access to more than one storage host, you can select one from the list.
+All you have to do is to fill out with github repository URL and click `Get To Folder` button. If you can access to more than one storage host, you can select one from the list.
 
 ![](../images/import_github_repository.png)
 
@@ -70,7 +69,7 @@ the limit, then importing repository will fail. Please check resource
 statistics panel and Data & Storage page before importing the repository.
 :::
 
-You can see the repository is successfully imported as a data folder with its
+You can see the repository is successfully imported as a storage folder with its
 name.
 
 ![](../images/import_github_repository_result.png)
@@ -86,6 +85,6 @@ but you need to explicitly set the branch name to import.
 ![](../images/import_gitlab_repository.png)
 
 :::note
-If there's data folder that has the same name already, the system will append
+If there's storage folder that has the same name already, the system will append
 `_` (underscore) and number in the imported repository folder.
 :::