chore: v2.8.15 — Oh My Pi login sharing, omp --allow-home, Markdown Preview default, first-login password

- omp-share.js: an admin's switch (S3) runs omp's own auth broker + gateway as
  the host on loopback; a member's omp pane reaches it as a scoped client keyed
  by its pane token (clients file = live omp panes only), runs on
  --model agenthub/<model>, never holds a credential.
- omp catalog: --allow-home, so a workspace at the account's home keeps its
  sessions there (they were recorded under a temp dir and dropped).
- Settings → Appearance → Open Markdown as: Preview (default) or Raw, for
  Files/Changes, the config viewer and a chat's file panel.
- First-login password change and password rules, avatar URLs, Artifacts
  "Mine" includes installed shared skills/plugins, a member's own hook pages.

client/src/components/AuthCard.tsx

@@ -0,0 +1,64 @@
+/**
+ * @file AuthCard.tsx
+ * @description The card the signed-out screens share (the login page, the
+ * first-login password change in `FirstPasswordPage.tsx`): a centred form
+ * with the theme's accent glow and grid behind the brand logo, a title and a
+ * subtitle. While it shows, the OS's light/dark applies (`applySystemTheme`),
+ * since no account's theme has been chosen for it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useLayoutEffect, type FormEvent, type ReactNode } from "react";
+import { BRAND_LOGO } from "../lib/brand";
+import { applySystemTheme } from "../hooks/useTheme";
+
+export function AuthCard({
+  title,
+  subtitle,
+  onSubmit,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  onSubmit: (e: FormEvent) => void;
+  children: ReactNode;
+}) {
+  // Follow the OS, live.
+  useLayoutEffect(() => {
+    applySystemTheme();
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mq?.addEventListener?.("change", applySystemTheme);
+    return () => mq?.removeEventListener?.("change", applySystemTheme);
+  }, []);
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
+      <form
+        onSubmit={onSubmit}
+        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
+      >
+        {/* Accent glow and a grid fading out from the top, drawn from the
+            theme's own accent so it holds in every theme. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 top-0 h-56"
+          style={{
+            backgroundImage:
+              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
+            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
+            backgroundPosition: "center top",
+            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
+          }}
+        />
+        <div className="relative space-y-5">
+          <div className="text-center">
+            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
+            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">{title}</h1>
+            <p className="mt-2 text-sm text-fg-secondary">{subtitle}</p>
+          </div>
+          {children}
+        </div>
+      </form>
+    </main>
+  );
+}

client/src/components/AuthGate.tsx

@@ -11,7 +11,9 @@
  * `usePermissions()` says what that user's role may do, so pages hide the rest.
  * Once an account is known (local mode is one), its own UI preferences are
  * loaded into this browser (`lib/userPrefs.ts`).
- * The login page follows the OS's light/dark (`applySystemTheme`).
+ * The login page follows the OS's light/dark (`AuthCard`). An account whose
+ * password an admin gave (`mustChangePassword`) sees only
+ * `FirstPasswordPage` until it picks its own.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -20,15 +22,14 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useState,
   type FormEvent,
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Eye, EyeOff } from "lucide-react";
-import { BRAND_LOGO } from "../lib/brand";
-import { applySystemTheme } from "../hooks/useTheme";
+import { AuthCard } from "./AuthCard";
+import { FirstPasswordPage } from "./FirstPasswordPage";
 import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
 import { hydrate } from "../lib/userPrefs";
 
@@ -165,6 +166,17 @@ export function AuthGate({ children }: { children: ReactNode }) {
     await api.auth.logout().catch(() => {});
     setState({ mode: "server", user: null });
   };
+  // A password an admin gave: nothing else until the user picks their own
+  // (the server refuses the rest anyway — EPWCHANGE).
+  if (state.mode === "server" && state.user?.mustChangePassword) {
+    return (
+      <FirstPasswordPage
+        user={state.user}
+        onDone={() => updateUser({ mustChangePassword: false })}
+        onLogout={() => void logout()}
+      />
+    );
+  }
   return (
     <AuthContext.Provider value={{ state, logout, updateUser }}>{children}</AuthContext.Provider>
   );
@@ -178,14 +190,6 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Nobody is signed in, so no account's theme applies: follow the OS, live.
-  useLayoutEffect(() => {
-    applySystemTheme();
-    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-    mq?.addEventListener?.("change", applySystemTheme);
-    return () => mq?.removeEventListener?.("change", applySystemTheme);
-  }, []);
-
   const submit = async (e: FormEvent) => {
     e.preventDefault();
     setBusy(true);
@@ -201,86 +205,60 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
     }
   };
 
+  // Nobody is signed in, so no account's theme applies: AuthCard follows the OS.
   return (
-    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
-      <form
-        onSubmit={submit}
-        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
-      >
-        {/* Accent glow and a grid fading out from the top, drawn from the
-            theme's own accent so it holds in every theme. */}
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-56"
-          style={{
-            backgroundImage:
-              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
-            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
-            backgroundPosition: "center top",
-            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
-          }}
+    <AuthCard title={t("auth.title")} subtitle={t("auth.subtitle")} onSubmit={submit}>
+      <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+        <span>{t("auth.username")}</span>
+        <input
+          className="input h-11 w-full px-4"
+          autoComplete="username"
+          autoFocus
+          required
+          placeholder={t("auth.username")}
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
         />
-        <div className="relative space-y-5">
-          <div className="text-center">
-            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
-            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">
-              {t("auth.title")}
-            </h1>
-            <p className="mt-2 text-sm text-fg-secondary">{t("auth.subtitle")}</p>
-          </div>
-          <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
-            <span>{t("auth.username")}</span>
-            <input
-              className="input h-11 w-full px-4"
-              autoComplete="username"
-              autoFocus
-              required
-              placeholder={t("auth.username")}
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-            />
-          </label>
-          <div className="space-y-1.5 text-sm font-medium text-fg-primary">
-            <label htmlFor="login-password">{t("auth.password")}</label>
-            <div className="relative">
-              <input
-                id="login-password"
-                className="input h-11 w-full pl-4 pr-11"
-                type={showPassword ? "text" : "password"}
-                autoComplete="current-password"
-                required
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword((v) => !v)}
-                aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
-                aria-pressed={showPassword}
-                className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-              >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-          </div>
-          {error && (
-            <p role="alert" className="text-sm text-status-danger">
-              {error}
-            </p>
-          )}
-          {/* Inverted fill (text colour behind the surface colour): black in a
-              light theme, light in a dark one, like the reference design. */}
+      </label>
+      <div className="space-y-1.5 text-sm font-medium text-fg-primary">
+        <label htmlFor="login-password">{t("auth.password")}</label>
+        <div className="relative">
+          <input
+            id="login-password"
+            className="input h-11 w-full pl-4 pr-11"
+            type={showPassword ? "text" : "password"}
+            autoComplete="current-password"
+            required
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
           <button
-            type="submit"
-            className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
-            disabled={busy}
+            type="button"
+            onClick={() => setShowPassword((v) => !v)}
+            aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
+            aria-pressed={showPassword}
+            className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
           >
-            {busy ? t("auth.submitting") : t("auth.submit")}
+            {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </button>
-          <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
         </div>
-      </form>
-    </main>
+      </div>
+      {error && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error}
+        </p>
+      )}
+      {/* Inverted fill (text colour behind the surface colour): black in a
+              light theme, light in a dark one, like the reference design. */}
+      <button
+        type="submit"
+        className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={busy}
+      >
+        {busy ? t("auth.submitting") : t("auth.submit")}
+      </button>
+      <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
+    </AuthCard>
   );
 }

client/src/components/FirstPasswordPage.tsx

@@ -0,0 +1,110 @@
+/**
+ * @file FirstPasswordPage.tsx
+ * @description The screen an account signed in with a password an admin GAVE
+ * (created or reset on the Users page — `mustChangePassword`) sees instead of
+ * the app: the current password, a new one that must pass every rule (the
+ * `PasswordRules` checklist ticks them as they are typed) and the same again,
+ * sent to `POST /api/me/password`. On success the app opens; "Sign out"
+ * leaves. The server refuses every other request meanwhile (EPWCHANGE).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type AuthUser } from "../lib/api";
+import { passwordProblems } from "../lib/passwordRules";
+import { AuthCard } from "./AuthCard";
+import { PasswordRules } from "./users/PasswordRules";
+
+export function FirstPasswordPage({
+  user,
+  onDone,
+  onLogout,
+}: {
+  user: AuthUser;
+  onDone: () => void;
+  onLogout: () => void;
+}) {
+  const { t } = useTranslation();
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [again, setAgain] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const mismatch = again.length > 0 && again !== next;
+  const strong = passwordProblems(next, user.username).length === 0;
+  const ready = current.length > 0 && strong && again === next && !busy;
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!ready) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.me.changePassword(current, next);
+      onDone();
+    } catch (err) {
+      const code = (err as { code?: string }).code;
+      setError(
+        code && t(`users:errors.${code}`, { defaultValue: "" })
+          ? t(`users:errors.${code}`)
+          : (err as Error).message
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const field = (
+    label: string,
+    value: string,
+    set: (v: string) => void,
+    autoComplete: string,
+    autoFocus = false
+  ) => (
+    <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+      <span>{label}</span>
+      <input
+        type="password"
+        className="input h-11 w-full px-4"
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        required
+        value={value}
+        onChange={(e) => set(e.target.value)}
+      />
+    </label>
+  );
+
+  return (
+    <AuthCard
+      title={t("auth.mustChangeTitle")}
+      subtitle={t("auth.mustChangeSubtitle")}
+      onSubmit={submit}
+    >
+      {field(t("auth.currentPassword"), current, setCurrent, "current-password", true)}
+      {field(t("auth.newPassword"), next, setNext, "new-password")}
+      <PasswordRules password={next} username={user.username} />
+      {field(t("auth.confirmPassword"), again, setAgain, "new-password")}
+      {(mismatch || error) && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error ?? t("auth.mismatch")}
+        </p>
+      )}
+      <button
+        type="submit"
+        className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={!ready}
+      >
+        {busy ? t("auth.saving") : t("auth.mustChangeSubmit")}
+      </button>
+      <button
+        type="button"
+        className="block w-full text-center text-sm text-fg-secondary hover:text-fg-primary"
+        onClick={onLogout}
+      >
+        {t("auth.logout")}
+      </button>
+    </AuthCard>
+  );
+}

client/src/components/__tests__/AuthGate.test.tsx

@@ -6,7 +6,9 @@
  * `useWorkLanes` mirror the server's roles: an admin changes everything, an
  * analyst reads everything but works only in their own workspaces, a
  * developer only ever sees (and so changes) their own. The login page wears the
- * OS's light/dark; a sign-in swaps in the account's saved appearance.
+ * OS's light/dark; a sign-in swaps in the account's saved appearance. A
+ * password an admin gave shows only the "choose your own password" page,
+ * whose button waits for every rule, until the change succeeds.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -18,6 +20,7 @@ import "../../i18n";
 const me = vi.fn();
 const login = vi.fn();
 const prefs = vi.fn();
+const changePassword = vi.fn();
 const LANES = [
   { id: 1, owner_id: 5 },
   { id: 2, owner_id: 6 },
@@ -27,7 +30,11 @@ vi.mock("../../lib/api", () => ({
   api: {
     auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() },
     lanes: { list: () => Promise.resolve({ lanes: LANES }) },
-    me: { prefs: () => prefs(), savePrefs: () => Promise.resolve({ prefs: {} }) },
+    me: {
+      prefs: () => prefs(),
+      savePrefs: () => Promise.resolve({ prefs: {} }),
+      changePassword: (c: string, n: string) => changePassword(c, n),
+    },
   },
 }));
 
@@ -56,10 +63,30 @@ beforeEach(() => {
   me.mockReset();
   login.mockReset();
   prefs.mockReset().mockResolvedValue({ prefs: {} });
+  changePassword.mockReset().mockResolvedValue({ ok: true });
   localStorage.clear();
 });
 
 describe("AuthGate", () => {
+  it("makes an account with an admin-given password choose its own first", async () => {
+    const ue = userEvent.setup();
+    me.mockResolvedValue({ mode: "server", user: { ...user, mustChangePassword: true } });
+    render(<AuthGate>app</AuthGate>);
+    const save = await screen.findByRole("button", { name: "Save and continue" });
+    expect(screen.queryByText("app")).toBeNull();
+    await ue.type(screen.getByLabelText("Current password"), "123");
+    await ue.type(screen.getByLabelText("New password"), "weakpass");
+    await ue.type(screen.getByLabelText("Confirm new password"), "weakpass");
+    expect(save).toBeDisabled();
+    await ue.clear(screen.getByLabelText("New password"));
+    await ue.clear(screen.getByLabelText("Confirm new password"));
+    await ue.type(screen.getByLabelText("New password"), "Green-Tea-42");
+    await ue.type(screen.getByLabelText("Confirm new password"), "Green-Tea-42");
+    await ue.click(save);
+    expect(changePassword).toHaveBeenCalledWith("123", "Green-Tea-42");
+    expect(await screen.findByText("app")).toBeInTheDocument();
+  });
+
   it("renders the app in local mode", async () => {
     me.mockResolvedValue({ mode: "local" });
     render(<AuthGate>app</AuthGate>);

client/src/components/__tests__/MarkdownPreview.test.tsx

@@ -58,14 +58,25 @@ describe("MarkdownPreview", () => {
 describe("FileViewer — markdown preview", () => {
   const data = { text: "# Hello\n", truncated: false } as never;
 
-  it("switches a markdown file between raw and preview", async () => {
+  it("opens a markdown file rendered, and switches it to raw and back", async () => {
     render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
     expect(screen.queryByTestId("markdown-preview")).toBeNull();
     expect(screen.getByText("# Hello")).toBeInTheDocument();
     await userEvent.click(screen.getByRole("button", { name: "Preview" }));
     expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
-    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
-    expect(screen.queryByTestId("markdown-preview")).toBeNull();
+  });
+
+  it("opens it as source when Settings → Appearance says Raw", () => {
+    window.localStorage.setItem("agenthub.markdown.view", "raw");
+    try {
+      render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+      expect(screen.queryByTestId("markdown-preview")).toBeNull();
+      expect(screen.getByText("# Hello")).toBeInTheDocument();
+    } finally {
+      window.localStorage.removeItem("agenthub.markdown.view");
+    }
   });
 
   it("offers no preview for another file type", () => {

client/src/components/artifacts/ArtifactAddPanels.tsx

@@ -20,7 +20,7 @@
 
 import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { FileText, FolderOpen, Package, Sparkles, Upload, X } from "lucide-react";
+import { X } from "lucide-react";
 import { api, type MarketplaceInfo } from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { toast } from "../../lib/toast";
@@ -374,7 +374,6 @@ export function SkillAddPanel({
               dragging ? "border-accent bg-accent/10" : "border-border"
             }`}
           >
-            <Upload className="mx-auto mb-1 h-5 w-5 text-fg-muted" />
             <p className="text-xs text-fg-secondary">{t("skill.dropHint")}</p>
             <div className="mt-2 flex flex-wrap justify-center gap-2">
               <button
@@ -382,14 +381,14 @@ export function SkillAddPanel({
                 className="btn-ghost text-xs"
                 onClick={() => fileInput.current?.click()}
               >
-                <FileText className="h-3.5 w-3.5" /> {t("skill.pickFiles")}
+                {t("skill.pickFiles")}
               </button>
               <button
                 type="button"
                 className="btn-ghost text-xs"
                 onClick={() => folderInput.current?.click()}
               >
-                <FolderOpen className="h-3.5 w-3.5" /> {t("skill.pickFolder")}
+                {t("skill.pickFolder")}
               </button>
             </div>
             <input
@@ -569,7 +568,6 @@ export function SkillAddPanel({
             <ul className="max-h-72 space-y-0.5 overflow-auto">
               {skills.map((s) => (
                 <li key={`${s.from}:${s.name}`} className="flex items-center gap-2 text-xs">
-                  <Sparkles className="h-3 w-3 shrink-0 text-fg-muted" />
                   <span className="min-w-0 flex-1 truncate text-fg-secondary">{s.name}</span>
                   <span className="text-fg-muted">
                     {t(s.from === "user" ? "form.fromUser" : "form.fromWorkspace")}
@@ -746,10 +744,7 @@ export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onCl
       {info && (
         <div className="space-y-2" data-testid="market-plugins">
           <div>
-            <p className="text-sm font-medium text-fg-primary">
-              <Package className="mr-1 inline h-4 w-4 text-fg-muted" />
-              {info.name}
-            </p>
+            <p className="text-sm font-medium text-fg-primary">{info.name}</p>
             {info.description && <p className={hint}>{info.description}</p>}
           </div>
           {info.plugins.length === 0 ? (
@@ -949,7 +944,7 @@ export function FileUploadPanel({ onAdded }: { onAdded: () => void }) {
           className="btn-primary shrink-0 text-sm"
           disabled={busy || !file || tooBig}
         >
-          <Upload className="h-3.5 w-3.5" /> {t("file.upload")}
+          {t("file.upload")}
         </button>
       </div>
     </form>

client/src/components/config/FileViewer.tsx

@@ -4,7 +4,8 @@
  * already-fetched data as props (path/data/error) rather than fetching
  * itself, so it stays tool-agnostic — the orchestrator (Claude or Codex
  * config page) owns the fetch. A markdown file gets a Raw / Preview switch
- * (`MarkdownPreview`); Raw is the default.
+ * (`MarkdownPreview`), opening as Settings → Appearance says
+ * (`lib/markdownView.ts`: Preview by default).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -15,6 +16,7 @@ import { FileText, X, AlertCircle, Eye, Code2 } from "lucide-react";
 import type { CcFileResponse } from "../../lib/api";
 import { CopyButton } from "./configPrimitives";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { readMarkdownPreview } from "../../lib/markdownView";
 
 export function FileViewer({
   state,
@@ -24,7 +26,7 @@ export function FileViewer({
   onClose: () => void;
 }) {
   const { t } = useTranslation("ccConfig");
-  const [preview, setPreview] = useState(false);
+  const [preview, setPreview] = useState(readMarkdownPreview);
   const canPreview = isMarkdown(state.path) && !!state.data;
   const panelRef = useRef<HTMLDivElement>(null);
   useDialog(true, panelRef, onClose);

client/src/components/lanes/LaneChangesPanel.tsx

@@ -106,6 +106,7 @@ import {
 import { api, gitTarget } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
 import { pasteToLane } from "../../lib/panePaste";
+import { readMarkdownPreview } from "../../lib/markdownView";
 import { confirmDialog, confirmDiscard as askDiscard } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
@@ -873,9 +874,10 @@ export function LaneChangesPanel({
   const [layout, setLayout] = useState<DiffLayout>(wide ? "split" : "unified");
   useEffect(() => setLayout(wide ? "split" : "unified"), [wide]);
   const [whole, setWhole] = useState(false);
-  // A whole markdown file shown rendered instead of as source; per file.
-  const [mdPreview, setMdPreview] = useState(false);
-  useEffect(() => setMdPreview(false), [openFile]);
+  // A whole markdown file shown rendered instead of as source; per file, each
+  // one opening as Settings → Appearance says (`lib/markdownView.ts`).
+  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
+  useEffect(() => setMdPreview(readMarkdownPreview()), [openFile]);
   const [data, setData] = useState<LaneChanges | null>(null);
   // A folder that is not a repo (an empty new workspace, a parent of clones)
   // has no changes, review or history — only its files, which Files reads
@@ -2014,6 +2016,8 @@ export function LaneChangesPanel({
     });
 
   const dirty = draft !== null && draft !== text?.lines.join("\n");
+  // Rendered only where the toggle is offered: a whole markdown file.
+  const mdShown = mdPreview && whole && isMarkdown(openFile);
   dirtyRef.current = dirty;
   useUnsavedGuard(dirty);
   const dirtyChangeRef = useRef(onDirtyChange);
@@ -3027,7 +3031,7 @@ export function LaneChangesPanel({
                       range === "commit" && sha ? sha : "work"
                     )}
                   />
-                ) : !mdPreview &&
+                ) : !mdShown &&
                   (whole || editable) &&
                   (draft !== null || (editable && text === null)) ? (
                   // The editor, once both texts are in: not the diff first.
@@ -3083,7 +3087,7 @@ export function LaneChangesPanel({
                     </Suspense>
                   )
                 ) : whole ? (
-                  text && mdPreview ? (
+                  text && mdShown ? (
                     <div className="min-h-0 flex-1 overflow-auto rounded border border-border-light bg-surface-0 p-4">
                       <MarkdownPreview text={text.lines.join("\n")} />
                     </div>

client/src/components/lanes/__tests__/LaneChangesPanel.test.tsx

@@ -514,7 +514,7 @@ describe("LaneChangesPanel", () => {
     expect(screen.getByText("Unversioned Files")).toBeInTheDocument();
   });
 
-  it("reads a whole markdown file rendered after Preview, and back as source after Raw", async () => {
+  it("opens a whole markdown file rendered, as source after Raw, and rendered again after Preview", async () => {
     vi.mocked(api.lanes.gitTree).mockResolvedValue({
       available: true,
       path: "",
@@ -534,12 +534,13 @@ describe("LaneChangesPanel", () => {
     render(<LaneChangesPanel laneId={7} full />);
     const sidebar = await screen.findByTestId("lane-changes-sidebar");
     await user.click(await within(sidebar).findByText("README.md"));
-    await screen.findByTestId("lane-file-editor");
-    await user.click(screen.getByTestId("lane-file-preview"));
-    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(await screen.findByRole("heading", { name: "Hello" })).toBeInTheDocument();
     expect(screen.queryByTestId("lane-file-editor")).toBeNull();
     await user.click(screen.getByTestId("lane-file-preview"));
     expect(await screen.findByTestId("lane-file-editor")).toHaveValue("# Hello\n\n- one");
+    await user.click(screen.getByTestId("lane-file-preview"));
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.queryByTestId("lane-file-editor")).toBeNull();
   });
 
   it("shows an image file as the picture, with no edit control", async () => {

client/src/components/run/ChatFilePreview.tsx

@@ -37,6 +37,7 @@ import { api, gitTarget } from "../../lib/api";
 import { copyText } from "../../lib/clipboard";
 import { useDialog } from "../../hooks/useDialog";
 import { dragSkill } from "../../lib/promptAttach";
+import { readMarkdownPreview } from "../../lib/markdownView";
 import { MarkdownPreview } from "../MarkdownPreview";
 import { CodeBlock } from "../conversation/CodeBlock";
 import { useTheme } from "../../hooks/useTheme";
@@ -227,6 +228,13 @@ function ArtifactFrame({ kind, text, title }: { kind: ArtifactKind; text: string
 
 type View = "preview" | "code";
 
+/** A file's first tab: Preview where it renders — Markdown as Settings → Appearance says. */
+function defaultView(path: string): View {
+  const kind = artifactKind(path);
+  if (!RENDERED.has(kind)) return "code";
+  return kind === "markdown" && !readMarkdownPreview() ? "code" : "preview";
+}
+
 function Body({ path, content, view }: { path: string; content: Content; view: View }) {
   const { t } = useTranslation("run");
   const kind = artifactKind(path);
@@ -320,7 +328,7 @@ export function FilePreview({
   const { t } = useTranslation("run");
   const kind = artifactKind(path);
   const loaded = useContent(path, scope);
-  const [view, setView] = useState<View>(RENDERED.has(kind) ? "preview" : "code");
+  const [view, setView] = useState<View>(() => defaultView(path));
   const [full, setFull] = useState(false);
   const [sharing, setSharing] = useState(false);
   const versions = useMemo(
@@ -332,7 +340,7 @@ export function FilePreview({
   // Another file opens on its own default tab, at its newest version.
   useEffect(() => {
     setPicked(null);
-    setView(RENDERED.has(artifactKind(path)) ? "preview" : "code");
+    setView(defaultView(path));
   }, [path]);
   const last = Math.max(versions.length - 1, 0);
   const at = picked ?? last;

client/src/components/settings/AccountSettings.tsx

@@ -3,10 +3,12 @@
  * @description Settings → Account (server mode, any signed-in role): the
  * account's own information (`GET /api/me/account` — username, role, member
  * since, workspaces, sessions, active sign-ins, last sign-in), its avatar
- * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB; the
- * sidebar shows it at once), its display name
+ * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB — or
+ * an https link the server downloads, `POST /api/me/avatar/url`; the sidebar
+ * shows it at once), its display name
  * and email (`PATCH /api/me/account`), a password change that asks for the
- * current one (`POST /api/me/password` — this browser stays signed in, every
+ * current one and passes every rule of `lib/passwordRules.ts`, ticked as it is
+ * typed (`POST /api/me/password` — this browser stays signed in, every
  * other sign-in ends) and "Sign out other devices" (`POST
  * /api/me/sign-out-others`, behind `confirmDialog`). Role and state are an
  * admin's to change, on the Users page — never here.
@@ -23,7 +25,7 @@ import {
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Camera, LogOut, RefreshCw, Trash2 } from "lucide-react";
+import { Camera, Link2, LogOut, RefreshCw, Trash2 } from "lucide-react";
 import { api, type MyAccount } from "../../lib/api";
 import { formatDateTime } from "../../lib/format";
 import { toast } from "../../lib/toast";
@@ -32,6 +34,8 @@ import { isSubmitEnter } from "../../lib/keys";
 import { useAuth } from "../AuthGate";
 import { ROLE_BADGE } from "../users/UserEditDialog";
 import { UserAvatar } from "../users/UserAvatar";
+import { PasswordRules } from "../users/PasswordRules";
+import { passwordProblems } from "../../lib/passwordRules";
 import { SettingsSection } from "./SettingsRow";
 
 type ServerAccount = Extract<MyAccount, { mode: "server" }>;
@@ -110,18 +114,27 @@ function ProfileCard({
   const shown = user.displayName || user.username;
   const fileRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
+  // null = the link field is closed.
+  const [link, setLink] = useState<string | null>(null);
 
   const run = async (op: () => Promise<MyAccount>, done: string) => {
     setBusy(true);
     try {
       onSaved(await op());
       toast.success(done);
+      return true;
     } catch (e) {
       toast.error(errText(t, e));
+      return false;
     } finally {
       setBusy(false);
     }
   };
+  const applyLink = async () => {
+    const url = link?.trim();
+    if (!url) return;
+    if (await run(() => api.me.setAvatarFromUrl(url), t("account.avatar.saved"))) setLink(null);
+  };
   const pick = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     e.target.value = ""; // the same file can be picked again
@@ -150,6 +163,18 @@ function ProfileCard({
             >
               <Camera className="h-3.5 w-3.5" />
             </button>
+            <button
+              type="button"
+              className={`btn-ghost h-6 w-6 justify-center p-0 ${link !== null ? "text-accent" : ""}`}
+              onClick={() => setLink((v) => (v === null ? "" : null))}
+              disabled={busy}
+              title={t("account.avatar.fromUrl")}
+              aria-label={t("account.avatar.fromUrl")}
+              aria-pressed={link !== null}
+              data-testid="account-avatar-url-toggle"
+            >
+              <Link2 className="h-3.5 w-3.5" />
+            </button>
             {user.avatarAt && (
               <button
                 type="button"
@@ -187,6 +212,36 @@ function ProfileCard({
           </div>
         </div>
       </div>
+      {link !== null && (
+        <div className="mt-3 flex items-center gap-2">
+          <input
+            type="url"
+            className="input w-full text-sm"
+            value={link}
+            placeholder={t("account.avatar.urlPlaceholder")}
+            aria-label={t("account.avatar.fromUrl")}
+            autoFocus
+            disabled={busy}
+            onChange={(e) => setLink(e.target.value)}
+            onKeyDown={(e) => {
+              if (isSubmitEnter(e)) {
+                e.preventDefault();
+                void applyLink();
+              } else if (e.key === "Escape") setLink(null);
+            }}
+            data-testid="account-avatar-url-input"
+          />
+          <button
+            type="button"
+            className="btn-primary flex-shrink-0 text-sm"
+            onClick={() => void applyLink()}
+            disabled={busy || !link.trim()}
+            data-testid="account-avatar-url-apply"
+          >
+            {t("account.avatar.urlApply")}
+          </button>
+        </div>
+      )}
       <dl className="mt-4 grid grid-cols-2 gap-3 border-t border-border pt-4 text-xs sm:grid-cols-5">
         <Stat label={t("account.memberSince")}>
           {user.createdAt ? formatDateTime(user.createdAt) : "—"}
@@ -283,13 +338,17 @@ function ProfileForm({
 
 function PasswordForm() {
   const { t } = useTranslation("settings");
+  const { state } = useAuth();
+  const username = state.mode === "server" ? state.user?.username : undefined;
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [again, setAgain] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const mismatch = again.length > 0 && again !== next;
-  const ready = current.length > 0 && next.length > 0 && again === next && !busy;
+  // The account's own password: every rule (server/lib/auth.js decides too).
+  const strong = passwordProblems(next, username).length === 0;
+  const ready = current.length > 0 && strong && again === next && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -331,7 +390,7 @@ function PasswordForm() {
             aria-label={t("account.currentPassword")}
           />
         </Field>
-        <Field label={t("account.newPassword")} hint={t("users:passwordHint")}>
+        <Field label={t("account.newPassword")}>
           <input
             type="password"
             className="input w-full text-sm"
@@ -352,6 +411,9 @@ function PasswordForm() {
           />
         </Field>
       </div>
+      <div className="mt-3">
+        <PasswordRules password={next} username={username} />
+      </div>
       {(mismatch || error) && (
         <p role="alert" className="mt-2 text-xs text-status-danger">
           {error ?? t("account.mismatch")}

client/src/components/settings/AppearanceSettings.tsx

@@ -7,7 +7,8 @@
  * `#terminal-font`, with a preview line); **Sessions** (`#sessions-view`) —
  * the per-user Chat UI default (`ChatUiSettings`, `#chat-ui`) and whether the
  * session view's tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
- * `#workspace-tabs`); then the
+ * `#workspace-tabs`), and whether a Markdown file opens as Preview (the
+ * default) or Raw (`lib/markdownView.ts`, `#markdown-view`); then the
  * Dark / Light / System mode switch and one named-theme picker per mode, and the
  * corner pet (`PetSettings`, deep-linked as `#pet`) — the old General and Pet
  * pages redirect here. Theme state is in `hooks/useTheme.ts`, palettes in
@@ -37,6 +38,7 @@ import {
   type TerminalFont,
 } from "../../lib/terminalFont";
 import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
+import { readMarkdownPreview, writeMarkdownPreview } from "../../lib/markdownView";
 import {
   TERMINAL_FONT_SIZES,
   UI_FONT_SIZES,
@@ -97,6 +99,7 @@ export function AppearanceSettings() {
   const [termSize, setTermSize] = useState(readTerminalFontSize);
   const [uiSize, setUiSize] = useState(readUiFontSize);
   const [allTabs, setAllTabs] = useState(readAllTabs);
+  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
     setTermFont(font);
@@ -224,6 +227,25 @@ export function AppearanceSettings() {
             setAllTabs(on);
           }}
         />
+        <SettingsRow
+          id="markdown-view"
+          label={t("markdownView.label")}
+          description={t("markdownView.description")}
+          control={
+            <SettingsSegmented
+              ariaLabel={t("markdownView.label")}
+              value={mdPreview ? "preview" : "raw"}
+              onChange={(v) => {
+                writeMarkdownPreview(v === "preview");
+                setMdPreview(v === "preview");
+              }}
+              options={[
+                { value: "preview" as const, label: t("markdownView.preview") },
+                { value: "raw" as const, label: t("markdownView.raw") },
+              ]}
+            />
+          }
+        />
       </SettingsSection>
 
       <section id="theme" className="card p-5 space-y-5 scroll-mt-24">

client/src/components/settings/OmpSharingSettings.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file OmpSharingSettings — Settings → AI tools → Oh My Pi login sharing: the
+ * admin's server-wide switch that lets every member's omp pane run on the
+ * HOST account's omp login through omp's own auth broker + gateway, without
+ * any member holding a credential (`GET/PUT /api/ai-tools/omp-sharing`,
+ * `server/lib/omp-share.js`). Renders nothing outside server mode with
+ * per-user accounts (S3), or for anyone but an admin.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type OmpSharingState } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { usePermissions } from "../AuthGate";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function OmpSharingSettings() {
+  const { t } = useTranslation("settings");
+  const { isAdmin, local } = usePermissions();
+  const [state, setState] = useState<OmpSharingState | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (local || !isAdmin) return;
+    api.aiTools
+      .ompSharing()
+      .then(setState)
+      .catch(() => setState(null));
+  }, [local, isAdmin]);
+
+  if (local || !isAdmin || !state?.available) return null;
+  const error = state.broker.error || state.gateway.error;
+  const status = !state.enabled
+    ? null
+    : !state.installed
+      ? t("ompSharing.notInstalled")
+      : state.broker.running && state.gateway.running
+        ? t("ompSharing.running")
+        : error
+          ? t("ompSharing.failed", { error })
+          : t("ompSharing.starting");
+  return (
+    <SettingsSection id="omp-sharing" title={t("ompSharing.title")}>
+      <SettingsSwitchRow
+        label={t("ompSharing.switch")}
+        description={t("ompSharing.hint")}
+        checked={state.enabled}
+        disabled={busy}
+        onChange={async (on) => {
+          setBusy(true);
+          try {
+            setState(await api.aiTools.setOmpSharing(on));
+          } catch (err) {
+            toast.error(err);
+          } finally {
+            setBusy(false);
+          }
+        }}
+      />
+      {status && (
+        <p data-testid="omp-sharing-status" className="text-xs text-fg-muted">
+          {status}
+        </p>
+      )}
+    </SettingsSection>
+  );
+}

client/src/components/settings/__tests__/AccountSettings.test.tsx

@@ -2,8 +2,9 @@
  * @file AccountSettings.test.tsx
  * @description Settings → Account: shows the account's own information, saves
  * only a changed display name/email, refuses a password change whose two new
- * passwords differ, sends the current + new password, asks before signing
- * the other devices out, and uploads/removes the avatar.
+ * passwords differ, keeps a password that misses a rule from being sent,
+ * sends the current + new password, asks before signing
+ * the other devices out, and uploads/removes the avatar or sets it from a link.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -17,6 +18,7 @@ const me = vi.hoisted(() => ({
   changePassword: vi.fn(),
   signOutOthers: vi.fn(),
   setAvatar: vi.fn(),
+  setAvatarFromUrl: vi.fn(),
   removeAvatar: vi.fn(),
   avatarUrl: (at?: string | null) => (at ? `/api/me/avatar?v=${at}` : null),
 }));
@@ -76,6 +78,22 @@ describe("AccountSettings", () => {
     expect(await screen.findByTestId("user-avatar-initials")).toBeTruthy();
   });
 
+  it("sets the avatar from a link and closes the field", async () => {
+    const ue = userEvent.setup();
+    const withAvatar = { ...account, user: { ...account.user, avatarAt: "2026-10-21T00:00:00Z" } };
+    me.setAvatarFromUrl.mockResolvedValue(withAvatar);
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    expect(screen.queryByTestId("account-avatar-url-input")).toBeNull();
+    await ue.click(screen.getByTestId("account-avatar-url-toggle"));
+    await ue.type(screen.getByTestId("account-avatar-url-input"), " https://x.vn/me.png {Enter}");
+    await waitFor(() => expect(me.setAvatarFromUrl).toHaveBeenCalledWith("https://x.vn/me.png"));
+    expect((await screen.findByTestId("user-avatar-img")).getAttribute("src")).toBe(
+      "/api/me/avatar?v=2026-10-21T00:00:00Z"
+    );
+    expect(screen.queryByTestId("account-avatar-url-input")).toBeNull();
+  });
+
   it("shows the account's own information", async () => {
     render(<AccountSettings />);
     const card = await screen.findByTestId("account-card");
@@ -114,9 +132,21 @@ describe("AccountSettings", () => {
     await ue.type(screen.getByLabelText("Current password"), "old-pass-1");
     await ue.type(screen.getByLabelText("New password"), "new-pass-123");
     await ue.type(screen.getByLabelText("Confirm new password"), "new-pass-123");
+    // No upper-case letter: the checklist says so and the button stays off.
+    expect(
+      screen
+        .getByTestId("password-rules")
+        .querySelector('[data-rule="upper"]')
+        ?.getAttribute("data-ok")
+    ).toBe("false");
+    expect(screen.getByRole("button", { name: "Change password" })).toBeDisabled();
+    await ue.clear(screen.getByLabelText("New password"));
+    await ue.clear(screen.getByLabelText("Confirm new password"));
+    await ue.type(screen.getByLabelText("New password"), "New-pass-123");
+    await ue.type(screen.getByLabelText("Confirm new password"), "New-pass-123");
     await ue.click(screen.getByRole("button", { name: "Change password" }));
     await waitFor(() =>
-      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "new-pass-123")
+      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "New-pass-123")
     );
   });
 

client/src/components/settings/__tests__/OmpSharingSettings.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @file Tests for OmpSharingSettings — the admin's Oh My Pi login-sharing
+ * switch in Settings → AI tools: hidden in local mode, for a non-admin and
+ * outside S3, and a toggle saves through PUT /api/ai-tools/omp-sharing and
+ * shows the daemons' state.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import "../../../i18n";
+import { OmpSharingSettings } from "../OmpSharingSettings";
+import { api, type OmpSharingState } from "../../../lib/api";
+
+const perms = vi.hoisted(() => ({ isAdmin: true, local: false }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+vi.mock("../../../lib/api", () => ({
+  api: { aiTools: { ompSharing: vi.fn(), setOmpSharing: vi.fn() } },
+}));
+
+const get = vi.mocked(api.aiTools.ompSharing);
+const set = vi.mocked(api.aiTools.setOmpSharing);
+const off: OmpSharingState = {
+  available: true,
+  enabled: false,
+  installed: true,
+  broker: { running: false, error: null },
+  gateway: { running: false, error: null },
+};
+
+describe("OmpSharingSettings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    perms.isAdmin = true;
+    perms.local = false;
+  });
+
+  it("lets an admin turn sharing on and shows it running", async () => {
+    get.mockResolvedValue(off);
+    set.mockResolvedValue({
+      ...off,
+      enabled: true,
+      broker: { running: true },
+      gateway: { running: true, port: 4827 },
+    });
+    render(<OmpSharingSettings />);
+    const sw = await screen.findByRole("switch", { name: "Share this server's Oh My Pi login" });
+    fireEvent.click(sw);
+    await waitFor(() => expect(set).toHaveBeenCalledWith(true));
+    expect(await screen.findByTestId("omp-sharing-status")).toHaveTextContent("Running");
+  });
+
+  it("names a daemon's failure", async () => {
+    get.mockResolvedValue({
+      ...off,
+      enabled: true,
+      gateway: { running: false, error: "port 4827 is taken" },
+    });
+    render(<OmpSharingSettings />);
+    expect(await screen.findByTestId("omp-sharing-status")).toHaveTextContent("port 4827 is taken");
+  });
+
+  it("renders nothing outside S3, for a non-admin or in local mode", async () => {
+    get.mockResolvedValue({ ...off, available: false });
+    const r = render(<OmpSharingSettings />);
+    await waitFor(() => expect(get).toHaveBeenCalled());
+    expect(r.container).toBeEmptyDOMElement();
+    r.unmount();
+    perms.isAdmin = false;
+    const r2 = render(<OmpSharingSettings />);
+    expect(r2.container).toBeEmptyDOMElement();
+    expect(get).toHaveBeenCalledTimes(1);
+  });
+});

client/src/components/users/PasswordRules.tsx

@@ -0,0 +1,39 @@
+/**
+ * @file PasswordRules.tsx
+ * @description The checklist under a "new password" field the account picks
+ * for itself (Settings → Account, the first-login password change, an admin's
+ * own password on the Users page): each rule of `lib/passwordRules.ts`, ticked
+ * as the password typed passes it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+import { Check, Circle } from "lucide-react";
+import { PASSWORD_MIN_LENGTH, PASSWORD_RULES, passwordProblems } from "../../lib/passwordRules";
+
+export function PasswordRules({ password, username }: { password: string; username?: string }) {
+  const { t } = useTranslation("users");
+  const failed = new Set(passwordProblems(password, username));
+  return (
+    <ul className="grid gap-x-4 gap-y-1 text-xs sm:grid-cols-2" data-testid="password-rules">
+      {PASSWORD_RULES.map((rule) => {
+        const ok = password.length > 0 && !failed.has(rule);
+        return (
+          <li
+            key={rule}
+            className={`flex items-center gap-1.5 ${ok ? "text-status-success" : "text-fg-muted"}`}
+            data-rule={rule}
+            data-ok={ok}
+          >
+            {ok ? (
+              <Check className="h-3.5 w-3.5 flex-shrink-0" />
+            ) : (
+              <Circle className="h-3 w-3 flex-shrink-0" />
+            )}
+            {t(`passwordRules.${rule}`, { min: PASSWORD_MIN_LENGTH })}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

client/src/components/users/UserEditDialog.tsx

@@ -2,7 +2,9 @@
  * @file UserEditDialog.tsx
  * @description The Users page's ONE account editor (admin only): profile
  * (display name, email), access (role, active/disabled — neither for your own
- * account), a new password (typed or generated, copyable), the workspaces the
+ * account), a new password (typed or generated, copyable — someone else's
+ * may be anything and makes them choose their own at next sign-in; your own
+ * must pass every rule of `lib/passwordRules.ts`), the workspaces the
  * account owns (remove, add from every workspace), and "sign out everywhere".
  * Every change is staged and sent as ONE `PATCH /api/users/:id` carrying only
  * what changed, confirmed with the admin's OWN password (`currentPassword`) —
@@ -20,6 +22,8 @@ import type { Lane } from "../../lib/types";
 import { fmtCost, formatDateTime } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
+import { passwordProblems } from "../../lib/passwordRules";
+import { PasswordRules } from "./PasswordRules";
 import { useDialog } from "../../hooks/useDialog";
 import { Switch } from "../Switch";
 import { Checkbox } from "../Checkbox";
@@ -34,11 +38,15 @@ export const ROLE_BADGE: Record<Role, string> = {
 };
 
 /** A random password of `n` characters, no look-alikes (0/O, 1/l/I). */
-export function generatePassword(n = 16): string {
+export function generatePassword(n = 16, username?: string): string {
   const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789-_!@#%";
   const bytes = new Uint32Array(n);
-  crypto.getRandomValues(bytes);
-  return Array.from(bytes, (b) => chars[b % chars.length]).join("");
+  // Drawn again until it passes every rule, so it also fits an own password.
+  for (;;) {
+    crypto.getRandomValues(bytes);
+    const out = Array.from(bytes, (b) => chars[b % chars.length]).join("");
+    if (passwordProblems(out, username).length === 0) return out;
+  }
 }
 
 type OwnedWorkspace = { id: number; title: string; cwd: string };
@@ -110,8 +118,11 @@ export function UserEditDialog({
   if (removed.size) patch.removeWorkspaces = [...removed];
   if (signOut) patch.signOut = true;
   const changed = Object.keys(patch).length > 0;
-  // No minimum length (server/lib/auth.js) — a blank field keeps the password.
-  const ready = changed && current.length > 0 && !busy;
+  // A blank field keeps the password. Someone else's may be anything (they
+  // choose their own at next sign-in); your own must pass every rule.
+  const weakOwn =
+    self && password.length > 0 && passwordProblems(password, user.username).length > 0;
+  const ready = changed && current.length > 0 && !weakOwn && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -309,7 +320,10 @@ export function UserEditDialog({
           </Section>
 
           <Section title={t("edit.password")}>
-            <Field label={t("newPassword")} hint={t("edit.passwordHint")}>
+            <Field
+              label={t("newPassword")}
+              hint={self ? t("edit.ownPasswordHint") : t("edit.passwordHint")}
+            >
               <div className="flex gap-2">
                 <input
                   type={showPassword ? "text" : "password"}
@@ -343,7 +357,7 @@ export function UserEditDialog({
                   type="button"
                   className="btn-ghost whitespace-nowrap text-xs"
                   onClick={() => {
-                    setPassword(generatePassword());
+                    setPassword(generatePassword(16, user.username));
                     setShowPassword(true);
                   }}
                 >
@@ -351,6 +365,11 @@ export function UserEditDialog({
                 </button>
               </div>
             </Field>
+            {self && password.length > 0 && (
+              <div className="mt-2">
+                <PasswordRules password={password} username={user.username} />
+              </div>
+            )}
           </Section>
 
           <Section title={t("workspaces")}>

client/src/i18n/locales/en/artifacts.json

@@ -117,6 +117,20 @@
   "edit.description": "Description",
   "previewFailed": "Could not load this file.",
   "truncated": "Showing the first 1 MB — download the file to see all of it.",
+  "section.hub.own": "Shared by me",
+  "section.hub.ownHint": "Yours, visible to every user",
+  "section.hub.others": "Shared by others",
+  "section.hub.othersHint": "What other users shared — install what you need",
+  "section.mine.own": "Mine",
+  "section.mine.ownHint": "What you added",
+  "section.mine.others": "Installed from others",
+  "section.mine.othersHint": "Shared by other users, installed in your account",
+  "section.all.others": "Shared by others",
+  "section.all.othersHint": "What other users shared",
+  "section.all.own": "Mine",
+  "section.all.ownHint": "What you added, shared or not",
+  "pages": "Pages",
+  "section.empty": "Nothing here yet.",
   "tab.all": "All",
   "installedBadge": "Installed",
   "installsTitle": "Installs",
@@ -126,12 +140,7 @@
   "installsPluginWhere": "claude plugin install --scope user",
   "installsUnrecorded": "{{count}} earlier installs were counted before details were kept",
   "installsNoneOfYours": "You have not installed it — only your own installs are listed.",
-  "reinstall": "Reinstall",
-  "reinstallHint": "Write this version over your installed copy",
-  "reinstallTitle": "Reinstall “{{title}}”?",
-  "reinstallBody": "Your installed ~/.claude/skills/{{name}}/ and ~/.agents/skills/{{name}}/ are replaced with this version. The current copy is moved to ~/.claude/agenthub-replaced-skills/, not deleted.",
   "uninstall": "Uninstall",
-  "uninstallHint": "Remove it from your account",
   "uninstallTitle": "Uninstall “{{title}}”?",
   "uninstallSkillBody": "~/.claude/skills/{{name}}/ and ~/.agents/skills/{{name}}/ are moved to ~/.claude/agenthub-replaced-skills/, not deleted. Sessions already open keep it until they reload.",
   "uninstallPluginBody": "Runs claude plugin uninstall {{name}} for your account; the plugin's data folder is kept. Open sessions keep it until /reload-plugins.",
@@ -145,7 +154,7 @@
   "hubRemoveTitle": "Remove “{{title}}” from the Hub?",
   "hubRemoveBody": "It is no longer in your library, so it is deleted for good. Anything already installed from it stays installed.",
   "edit.otherFiles": "Its other {{count}} file(s) are kept as they are.",
-  "edit.reinstallNote": "Your installed copy keeps the old version until you Reinstall it.",
+  "edit.reinstallNote": "Your installed copy keeps the old version until you uninstall it and install it again.",
   "preview.instructions": "Instructions",
   "preview.frontmatter": "Frontmatter (SKILL.md header)",
   "preview.whenUsed": "When Claude uses it",

client/src/i18n/locales/en/common.json

@@ -198,7 +198,15 @@
     "tooMany": "Too many failed attempts — try again in a few minutes",
     "logout": "Sign out",
     "noAccount": "No account yet? Ask your administrator to create one.",
-    "signedInAs": "Signed in as {{name}} ({{role}})"
+    "signedInAs": "Signed in as {{name}} ({{role}})",
+    "mustChangeTitle": "Choose your own password",
+    "mustChangeSubtitle": "Your administrator gave you a starting password. Choose your own before you continue.",
+    "currentPassword": "Current password",
+    "newPassword": "New password",
+    "confirmPassword": "Confirm new password",
+    "mismatch": "The two new passwords differ",
+    "mustChangeSubmit": "Save and continue",
+    "saving": "Saving…"
   },
   "insights": {
     "help": {

client/src/i18n/locales/en/settings.json

@@ -1140,6 +1140,21 @@
       "vi": "Tiếng Việt"
     }
   },
+  "ompSharing": {
+    "title": "Oh My Pi login sharing",
+    "switch": "Share this server's Oh My Pi login",
+    "hint": "Every user's omp sessions run on the logins the host account made with `omp login`, through omp's own auth broker and gateway on this machine. A session gets only a key that works while its pane runs, never the login itself. Only omp's built-in providers are shared.",
+    "running": "Running: broker and gateway are up.",
+    "starting": "Starting…",
+    "notInstalled": "omp is not installed on this server.",
+    "failed": "Not running: {{error}}"
+  },
+  "markdownView": {
+    "label": "Open Markdown as",
+    "description": "How a .md file opens in Files, Changes, the config viewer and a chat's file panel. Its Preview/Raw button still switches that one file. Saved to your account.",
+    "preview": "Preview",
+    "raw": "Raw"
+  },
   "workspaceTabs": {
     "title": "Workspace tabs",
     "description": "Which sessions the session view's tab bar holds. Saved to your account.",
@@ -1339,7 +1354,10 @@
       "remove": "Remove picture",
       "saved": "Picture updated",
       "removed": "Picture removed",
-      "tooBig": "The picture must be at most 1 MB"
+      "tooBig": "The picture must be at most 1 MB",
+      "fromUrl": "Use a picture from a link",
+      "urlPlaceholder": "https://… image link",
+      "urlApply": "Use"
     },
     "loadFailed": "Could not load your account: {{message}}",
     "memberSince": "Member since",

client/src/i18n/locales/en/users.json

@@ -30,7 +30,7 @@
   "username": "Username",
   "usernameHint": "Letters, digits, '.', '_' or '-'",
   "password": "Password",
-  "passwordHint": "No minimum length",
+  "passwordHint": "Any starting password — they choose their own at first sign-in",
   "newPassword": "New password",
   "changeRole": "Change role",
   "disable": "Disable",
@@ -68,6 +68,9 @@
   "errors": {
     "EBADIMAGE": "Only a PNG, JPEG, GIF or WebP picture",
     "ETOOBIG": "The picture must be at most 1 MB",
+    "EBADURL": "Enter an https:// link to a picture.",
+    "EPRIVATEURL": "That link points to a private or local address.",
+    "EFETCH": "Could not download the picture from that link.",
     "EREAUTH": "Your password is wrong.",
     "ETOOMANY": "Too many wrong passwords. Try again in 15 minutes.",
     "ESELF": "You cannot change your own role or disable yourself.",
@@ -81,7 +84,9 @@
     "EOWNERFOLDER": "That workspace's folder belongs to another user's account.",
     "EBADROLE": "Unknown role.",
     "ELOCALMODE": "Accounts are managed in server mode only.",
-    "ELASTADMIN": "The last admin cannot be deleted."
+    "ELASTADMIN": "The last admin cannot be deleted, demoted or disabled.",
+    "EWEAKPASSWORD": "The new password does not meet every rule (or is the current one).",
+    "EPWCHANGE": "Choose your own password first."
   },
   "readOnly": "Analysts can view accounts but not change them.",
   "auditTitle": "Audit log",
@@ -107,7 +112,7 @@
     "selfRole": "You cannot change your own role.",
     "selfDisable": "You cannot disable yourself.",
     "password": "Password",
-    "passwordHint": "Leave blank to keep the current one. A new one signs them out everywhere.",
+    "passwordHint": "Leave blank to keep the current one. A new one signs them out everywhere, and they choose their own at their next sign-in.",
     "show": "Show password",
     "hide": "Hide password",
     "copy": "Copy password",
@@ -122,7 +127,8 @@
     "sessions": "Sign-ins",
     "signOut": "Sign out everywhere",
     "signOutHint": "Ends this user's {{n}} active sign-in(s); they sign in again with their password.",
-    "noChanges": "No changes yet."
+    "noChanges": "No changes yet.",
+    "ownPasswordHint": "Leave blank to keep the current one. Your other sign-ins end."
   },
   "pool": {
     "title": "Account pool",
@@ -253,5 +259,15 @@
     "openHome": "Open home in Files",
     "copyUsername": "Copy username",
     "copyEmail": "Copy email"
+  },
+  "mustChange": "New password due",
+  "mustChangeHint": "Signed in with a password an admin gave; must choose their own before using AgentHub",
+  "passwordRules": {
+    "length": "At least {{min}} characters",
+    "lower": "A lower-case letter",
+    "upper": "An upper-case letter",
+    "digit": "A digit",
+    "symbol": "A symbol (e.g. ! - _ @)",
+    "username": "Does not contain the username"
   }
 }

client/src/i18n/locales/vi/artifacts.json

@@ -117,6 +117,20 @@
   "edit.description": "Mô tả",
   "previewFailed": "Không tải được file này.",
   "truncated": "Chỉ hiển thị 1 MB đầu — tải file về để xem toàn bộ.",
+  "section.hub.own": "Tôi đã share",
+  "section.hub.ownHint": "Của bạn, mọi người dùng đều thấy",
+  "section.hub.others": "Người khác share",
+  "section.hub.othersHint": "Những gì người dùng khác đã share — cài cái bạn cần",
+  "section.mine.own": "Của tôi",
+  "section.mine.ownHint": "Những gì bạn đã thêm",
+  "section.mine.others": "Đã cài từ người khác",
+  "section.mine.othersHint": "Người dùng khác share, đã cài vào tài khoản của bạn",
+  "section.all.others": "Người khác share",
+  "section.all.othersHint": "Những gì người dùng khác đã share",
+  "section.all.own": "Của tôi",
+  "section.all.ownHint": "Những gì bạn đã thêm, đã share hoặc chưa",
+  "pages": "Trang",
+  "section.empty": "Chưa có gì.",
   "tab.all": "Tất cả",
   "installedBadge": "Đã cài",
   "installsTitle": "Lượt cài",
@@ -126,12 +140,7 @@
   "installsPluginWhere": "claude plugin install --scope user",
   "installsUnrecorded": "{{count}} lượt cài trước đây chỉ được đếm, không lưu chi tiết",
   "installsNoneOfYours": "Bạn chưa cài — chỉ hiện các lượt cài của bạn.",
-  "reinstall": "Cài lại",
-  "reinstallHint": "Ghi bản này đè lên bản bạn đã cài",
-  "reinstallTitle": "Cài lại “{{title}}”?",
-  "reinstallBody": "Bản đã cài ở ~/.claude/skills/{{name}}/ và ~/.agents/skills/{{name}}/ sẽ được thay bằng bản này. Bản hiện tại được chuyển vào ~/.claude/agenthub-replaced-skills/, không bị xoá.",
   "uninstall": "Gỡ cài đặt",
-  "uninstallHint": "Gỡ khỏi tài khoản của bạn",
   "uninstallTitle": "Gỡ cài đặt “{{title}}”?",
   "uninstallSkillBody": "~/.claude/skills/{{name}}/ và ~/.agents/skills/{{name}}/ sẽ được chuyển vào ~/.claude/agenthub-replaced-skills/, không bị xoá. Các phiên đang mở vẫn giữ nó cho tới khi tải lại.",
   "uninstallPluginBody": "Chạy claude plugin uninstall {{name}} cho tài khoản của bạn; thư mục dữ liệu của plugin được giữ lại. Các phiên đang mở vẫn giữ nó cho tới khi /reload-plugins.",
@@ -145,7 +154,7 @@
   "hubRemoveTitle": "Gỡ “{{title}}” khỏi Hub?",
   "hubRemoveBody": "Mục này không còn trong thư viện của bạn nên sẽ bị xoá hẳn. Những gì đã cài từ nó vẫn được giữ.",
   "edit.otherFiles": "{{count}} file khác của skill được giữ nguyên.",
-  "edit.reinstallNote": "Bản bạn đã cài vẫn là bản cũ cho đến khi bấm Cài lại.",
+  "edit.reinstallNote": "Bản bạn đã cài vẫn là bản cũ cho đến khi bạn gỡ cài đặt rồi cài lại.",
   "preview.instructions": "Hướng dẫn",
   "preview.frontmatter": "Frontmatter (phần đầu SKILL.md)",
   "preview.whenUsed": "Khi nào Claude dùng",

client/src/i18n/locales/vi/common.json

@@ -198,7 +198,15 @@
     "tooMany": "Sai quá nhiều lần — hãy thử lại sau vài phút",
     "logout": "Đăng xuất",
     "noAccount": "Chưa có tài khoản? Hãy nhờ quản trị viên tạo cho bạn.",
-    "signedInAs": "Đang đăng nhập: {{name}} ({{role}})"
+    "signedInAs": "Đang đăng nhập: {{name}} ({{role}})",
+    "mustChangeTitle": "Đặt mật khẩu của bạn",
+    "mustChangeSubtitle": "Quản trị viên đã cấp cho bạn mật khẩu ban đầu. Hãy đặt mật khẩu riêng trước khi tiếp tục.",
+    "currentPassword": "Mật khẩu hiện tại",
+    "newPassword": "Mật khẩu mới",
+    "confirmPassword": "Nhập lại mật khẩu mới",
+    "mismatch": "Hai mật khẩu mới không khớp",
+    "mustChangeSubmit": "Lưu và tiếp tục",
+    "saving": "Đang lưu…"
   },
   "insights": {
     "help": {

client/src/i18n/locales/vi/settings.json

@@ -1140,6 +1140,21 @@
       "vi": "Tiếng Việt"
     }
   },
+  "ompSharing": {
+    "title": "Dùng chung đăng nhập Oh My Pi",
+    "switch": "Dùng chung đăng nhập Oh My Pi của máy chủ",
+    "hint": "Mọi session omp của người dùng chạy bằng các đăng nhập mà tài khoản máy chủ đã tạo bằng `omp login`, qua auth broker và gateway của chính omp trên máy này. Session chỉ nhận một key dùng được khi pane còn chạy, không bao giờ nhận chính đăng nhập. Chỉ các provider có sẵn của omp được dùng chung.",
+    "running": "Đang chạy: broker và gateway đã sẵn sàng.",
+    "starting": "Đang khởi động…",
+    "notInstalled": "Máy chủ chưa cài omp.",
+    "failed": "Không chạy: {{error}}"
+  },
+  "markdownView": {
+    "label": "Mở file Markdown dạng",
+    "description": "Cách file .md mở trong Files, Changes, trình xem cấu hình và bảng file của chat. Nút Xem trước/Mã nguồn vẫn đổi riêng file đó. Lưu theo tài khoản.",
+    "preview": "Xem trước",
+    "raw": "Mã nguồn"
+  },
   "workspaceTabs": {
     "title": "Tab của workspace",
     "description": "Thanh tab của màn hình session chứa những session nào. Lưu theo tài khoản.",
@@ -1339,7 +1354,10 @@
       "remove": "Xoá ảnh đại diện",
       "saved": "Đã cập nhật ảnh đại diện",
       "removed": "Đã xoá ảnh đại diện",
-      "tooBig": "Ảnh tối đa 1 MB"
+      "tooBig": "Ảnh tối đa 1 MB",
+      "fromUrl": "Dùng ảnh từ đường dẫn",
+      "urlPlaceholder": "https://… đường dẫn ảnh",
+      "urlApply": "Dùng"
     },
     "loadFailed": "Không tải được tài khoản: {{message}}",
     "memberSince": "Tham gia từ",

client/src/i18n/locales/vi/users.json

@@ -30,7 +30,7 @@
   "username": "Tên đăng nhập",
   "usernameHint": "Chữ, số, '.', '_' hoặc '-'",
   "password": "Mật khẩu",
-  "passwordHint": "Không giới hạn độ dài tối thiểu",
+  "passwordHint": "Mật khẩu ban đầu tuỳ ý — người dùng sẽ tự đặt mật khẩu riêng ở lần đăng nhập đầu",
   "newPassword": "Mật khẩu mới",
   "changeRole": "Đổi vai trò",
   "disable": "Khoá",
@@ -68,6 +68,9 @@
   "errors": {
     "EBADIMAGE": "Chỉ nhận ảnh PNG, JPEG, GIF hoặc WebP",
     "ETOOBIG": "Ảnh tối đa 1 MB",
+    "EBADURL": "Hãy nhập đường dẫn https:// tới một ảnh.",
+    "EPRIVATEURL": "Đường dẫn trỏ tới địa chỉ nội bộ hoặc cục bộ.",
+    "EFETCH": "Không tải được ảnh từ đường dẫn này.",
     "EREAUTH": "Mật khẩu của bạn không đúng.",
     "ETOOMANY": "Nhập sai mật khẩu quá nhiều lần. Thử lại sau 15 phút.",
     "ESELF": "Bạn không thể tự đổi vai trò hay tự khoá chính mình.",
@@ -81,7 +84,9 @@
     "EOWNERFOLDER": "Thư mục của workspace đó thuộc tài khoản của người dùng khác.",
     "EBADROLE": "Vai trò không hợp lệ.",
     "ELOCALMODE": "Chỉ quản lý tài khoản được ở chế độ server.",
-    "ELASTADMIN": "Không thể xoá admin cuối cùng."
+    "ELASTADMIN": "Không thể xoá, hạ quyền hay khoá admin cuối cùng.",
+    "EWEAKPASSWORD": "Mật khẩu mới chưa đạt đủ các yêu cầu (hoặc trùng mật khẩu hiện tại).",
+    "EPWCHANGE": "Hãy đặt mật khẩu riêng của bạn trước."
   },
   "readOnly": "Analyst chỉ xem được tài khoản, không thay đổi được.",
   "auditTitle": "Nhật ký audit",
@@ -107,7 +112,7 @@
     "selfRole": "Bạn không thể đổi vai trò của chính mình.",
     "selfDisable": "Bạn không thể tự vô hiệu hoá mình.",
     "password": "Mật khẩu",
-    "passwordHint": "Để trống để giữ mật khẩu hiện tại. Mật khẩu mới sẽ đăng xuất họ ở mọi nơi.",
+    "passwordHint": "Để trống để giữ mật khẩu hiện tại. Mật khẩu mới sẽ đăng xuất họ ở mọi nơi và họ phải tự đặt mật khẩu riêng ở lần đăng nhập sau.",
     "show": "Hiện mật khẩu",
     "hide": "Ẩn mật khẩu",
     "copy": "Sao chép mật khẩu",
@@ -122,7 +127,8 @@
     "sessions": "Phiên đăng nhập",
     "signOut": "Đăng xuất ở mọi nơi",
     "signOutHint": "Kết thúc {{n}} phiên đăng nhập đang hoạt động của người này; họ đăng nhập lại bằng mật khẩu.",
-    "noChanges": "Chưa có thay đổi."
+    "noChanges": "Chưa có thay đổi.",
+    "ownPasswordHint": "Để trống để giữ mật khẩu hiện tại. Các phiên đăng nhập khác của bạn sẽ kết thúc."
   },
   "pool": {
     "title": "Pool tài khoản",
@@ -253,5 +259,15 @@
     "openHome": "Mở home trong Files",
     "copyUsername": "Sao chép username",
     "copyEmail": "Sao chép email"
+  },
+  "mustChange": "Chờ đổi mật khẩu",
+  "mustChangeHint": "Đang dùng mật khẩu do admin cấp; phải tự đặt mật khẩu riêng trước khi dùng AgentHub",
+  "passwordRules": {
+    "length": "Ít nhất {{min}} ký tự",
+    "lower": "Có chữ thường",
+    "upper": "Có chữ hoa",
+    "digit": "Có chữ số",
+    "symbol": "Có ký tự đặc biệt (vd. ! - _ @)",
+    "username": "Không chứa tên đăng nhập"
   }
 }

client/src/lib/api.ts

@@ -733,6 +733,8 @@ export type AuthUser = {
   /** When the account's avatar was last set (null = none) — versions its URL. */
   avatarAt?: string | null;
   createdAt?: string;
+  /** An admin gave this password: the user must choose their own before anything else. */
+  mustChangePassword?: boolean;
 };
 export type AuthState = { mode: "local" } | { mode: "server"; user: AuthUser | null };
 /** GET /api/me/prefs — the signed-in account's own UI preferences (localStorage keys). */
@@ -1007,6 +1009,9 @@ export const api = {
         body: file,
         headers: { "Content-Type": "application/octet-stream" },
       }),
+    /** POST /api/me/avatar/url — the server downloads the picture from an https link. */
+    setAvatarFromUrl: (url: string) =>
+      request<MyAccount>("/me/avatar/url", { method: "POST", body: JSON.stringify({ url }) }),
     /** DELETE /api/me/avatar — back to the initials. */
     removeAvatar: () => request<MyAccount>("/me/avatar", { method: "DELETE" }),
   },
@@ -3051,6 +3056,14 @@ export const api = {
   aiTools: {
     /** GET /api/ai-tools - the catalog, what is installed, enabled, and the default. */
     list: () => request<AiToolsView>("/ai-tools"),
+    /** GET /api/ai-tools/omp-sharing - the host's Oh My Pi login shared with members (S3). */
+    ompSharing: () => request<OmpSharingState>("/ai-tools/omp-sharing"),
+    /** PUT /api/ai-tools/omp-sharing - an admin's switch. */
+    setOmpSharing: (enabled: boolean) =>
+      request<OmpSharingState>("/ai-tools/omp-sharing", {
+        method: "PUT",
+        body: JSON.stringify({ enabled }),
+      }),
     /** POST /api/ai-tools/refresh - re-read the login shell's PATH and re-detect. */
     refresh: () => request<AiToolsView>("/ai-tools/refresh", { method: "POST" }),
     /** PUT /api/ai-tools/:id - enable/disable a tool, make it the default, or set its default model ("" clears). */
@@ -4307,6 +4320,16 @@ export interface ArtifactCandidate {
   pinned: boolean;
 }
 
+/** `GET /api/ai-tools/omp-sharing` — never a token. */
+export interface OmpSharingState {
+  /** Server mode with per-user Linux accounts (S3): the only place it applies. */
+  available: boolean;
+  enabled: boolean;
+  installed: boolean;
+  broker: { running: boolean; error?: string | null };
+  gateway: { running: boolean; port?: number; error?: string | null };
+}
+
 export interface ArtifactSettings {
   serverMode: boolean;
   canShare: boolean;

client/src/lib/markdownView.ts

@@ -0,0 +1,29 @@
+/**
+ * @file markdownView — Settings → Appearance → "Open Markdown as": a viewer
+ * preference in `localStorage` (`agenthub.markdown.view`, synced to the
+ * account through `lib/userPrefs.ts`). Preview (the default) opens a `.md`
+ * file rendered; Raw opens its source. Read each time a viewer opens a file
+ * (the Files/Changes panel, the config file viewer, a chat artifact); the
+ * viewer's own Preview/Raw toggle still flips that one file.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const MARKDOWN_VIEW_KEY = "agenthub.markdown.view";
+
+/** True when a Markdown file opens rendered (the default). */
+export function readMarkdownPreview(): boolean {
+  try {
+    return window.localStorage.getItem(MARKDOWN_VIEW_KEY) !== "raw";
+  } catch {
+    return true;
+  }
+}
+
+export function writeMarkdownPreview(on: boolean) {
+  try {
+    if (on) window.localStorage.removeItem(MARKDOWN_VIEW_KEY);
+    else window.localStorage.setItem(MARKDOWN_VIEW_KEY, "raw");
+  } catch {
+    /* storage blocked — the default */
+  }
+}

client/src/lib/passwordRules.ts

@@ -0,0 +1,26 @@
+/**
+ * @file passwordRules.ts
+ * @description The rules a password an account picks for ITSELF must pass —
+ * a copy of `passwordProblems` in server/lib/auth.js, so the checklist can
+ * tick each one as it is typed. The server's copy is the one that decides
+ * (EWEAKPASSWORD); a password an admin gives someone else has no rules.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const PASSWORD_MIN_LENGTH = 8;
+
+export const PASSWORD_RULES = ["length", "lower", "upper", "digit", "symbol", "username"] as const;
+export type PasswordRule = (typeof PASSWORD_RULES)[number];
+
+/** The rules `password` fails (empty = it passes every one). */
+export function passwordProblems(password: string, username?: string): PasswordRule[] {
+  const out: PasswordRule[] = [];
+  if ([...password].length < PASSWORD_MIN_LENGTH) out.push("length");
+  if (!/\p{Ll}/u.test(password)) out.push("lower");
+  if (!/\p{Lu}/u.test(password)) out.push("upper");
+  if (!/\p{N}/u.test(password)) out.push("digit");
+  if (!/[^\p{L}\p{N}]/u.test(password)) out.push("symbol");
+  const name = (username || "").toLowerCase();
+  if (name && password.toLowerCase().includes(name)) out.push("username");
+  return out;
+}

client/src/lib/userPrefs.ts

@@ -43,6 +43,7 @@ export const PREF_KEYS = [
   "agenthub.codex.bypass",
   "agenthub.tour",
   "agenthub.workspace.allTabs",
+  "agenthub.markdown.view",
 ] as const;
 const SYNCED = new Set<string>(PREF_KEYS);
 const PUSH_DELAY_MS = 400;

client/src/pages/SettingsHub.tsx

@@ -69,6 +69,7 @@ import { AiToolsSettings } from "../components/settings/AiToolsSettings";
 import { AgentInstructionsSettings } from "../components/settings/AgentInstructionsSettings";
 import { SessionDefaultsSettings } from "../components/settings/SessionDefaultsSettings";
 import { ArtifactsHubSettings } from "../components/settings/ArtifactsHubSettings";
+import { OmpSharingSettings } from "../components/settings/OmpSharingSettings";
 import { PricingSettings } from "../components/settings/PricingSettings";
 import { WorktreeVisibilitySettings } from "../components/settings/WorktreeVisibilitySettings";
 import { useAiTools } from "../hooks/useAiTools";
@@ -297,6 +298,8 @@ export function SettingsHub({ section }: { section?: string } = {}) {
           <AiToolsSettings settingsHref={toolHref} />
           {/* The Hub's install switch: server mode, an admin's (it hides itself). */}
           <ArtifactsHubSettings />
+          {/* The host's omp login for members: server mode + S3, an admin's. */}
+          <OmpSharingSettings />
         </div>
       ),
     },

client/src/pages/Users.tsx

@@ -14,7 +14,8 @@
  * account — moved to the Server tab, `MemberTmuxCard` in `ServerPanel`.)
  * Every change asks for the admin's OWN password again (the
  * server refuses without it); an analyst only reads. A row shows the display
- * name and email under the username when set; right-clicking a row offers
+ * name and email under the username when set, and "New password due" while
+ * the account still has a password an admin gave; right-clicking a row offers
  * Edit, Open home (in /files), and copying the username or email.
  * Laid out like the other list pages: icon header, a row of totals
  * (`StatCard`), the accounts in a `card` table, the audit log in a card.
@@ -273,6 +274,15 @@ export function Users({ embedded = false }: { embedded?: boolean } = {}) {
                           {t("disabled")}
                         </span>
                       )}
+                      {!u.disabled && u.mustChangePassword && (
+                        <span
+                          className="badge py-0.5 text-[11px] bg-status-warning/10 text-status-warning border-status-warning/20"
+                          title={t("mustChangeHint")}
+                          data-testid="user-must-change"
+                        >
+                          {t("mustChange")}
+                        </span>
+                      )}
                     </div>
                   </td>
                   <td className="px-5 py-3">

client/src/pages/__tests__/Artifacts.test.tsx

@@ -227,6 +227,66 @@ describe("Artifacts", () => {
     );
   });
 
+  it("splits the Hub and My library into yours and others'", async () => {
+    vi.mocked(api.artifacts.settings).mockResolvedValue({
+      serverMode: true,
+      canShare: true,
+      installsEnabled: true,
+      canManage: false,
+    });
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: [
+        item({ id: 1, title: "my-page", shared: true }),
+        item({
+          id: 2,
+          kind: "skill",
+          title: "their-skill",
+          mine: false,
+          owner: "an",
+          shared: true,
+        }),
+      ],
+    });
+    const user = userEvent.setup();
+    open();
+    // All is split too, others' first.
+    const allOthers = await screen.findByTestId("half-all.others");
+    expect(within(allOthers).getByText("their-skill")).toBeInTheDocument();
+    expect(
+      allOthers.compareDocumentPosition(screen.getByTestId("half-all.own")) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+    await user.click(await screen.findByRole("button", { name: "Hub" }));
+    const own = await screen.findByTestId("half-hub.own");
+    expect(own).toHaveTextContent("Shared by me");
+    expect(within(own).getByText("my-page")).toBeInTheDocument();
+    const others = screen.getByTestId("half-hub.others");
+    expect(within(others).getByText("their-skill")).toBeInTheDocument();
+    expect(within(others).queryByText("my-page")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "My library" }));
+    expect(await screen.findByTestId("half-mine.others")).toHaveTextContent(
+      "Installed from others"
+    );
+    expect(within(screen.getByTestId("half-mine.own")).getByText("my-page")).toBeInTheDocument();
+  });
+
+  it("pages a long section 12 cards at a time", async () => {
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: Array.from({ length: 14 }, (_, i) =>
+        item({ id: i + 1, kind: "page", title: `p${i + 1}`, files: [] })
+      ),
+    });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("p1");
+    expect(screen.queryByText("p13")).toBeNull();
+    expect(screen.getByText("Showing 1-12 of 14")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    expect(screen.getByText("p13")).toBeInTheDocument();
+    expect(screen.queryByText("p1")).toBeNull();
+  });
+
   it("lists who installed an artifact, when and where, from its install count", async () => {
     vi.mocked(api.artifacts.list).mockResolvedValue({
       items: [item({ id: 2, kind: "skill", title: "deploy", source: "deploy", installs: 3 })],
@@ -287,13 +347,13 @@ describe("Artifacts", () => {
     const card = await screen.findByTestId("artifact-2");
     expect(within(card).getByTestId("artifact-installed")).toHaveTextContent("Installed");
     expect(within(card).queryByRole("button", { name: "Install" })).toBeNull();
-
-    vi.mocked(confirmDialog).mockResolvedValueOnce(true);
-    vi.mocked(api.artifacts.install).mockResolvedValueOnce({
-      installed: "/h/.claude/skills/deploy",
-    });
-    await userEvent.setup().click(within(card).getByRole("button", { name: "Reinstall" }));
-    await waitFor(() => expect(api.artifacts.install).toHaveBeenLastCalledWith(2, true));
+    // No Reinstall anywhere, and Uninstall lives only in the ⋯ menu.
+    expect(within(card).queryByRole("button", { name: "Reinstall" })).toBeNull();
+    expect(within(card).queryByRole("button", { name: "Uninstall" })).toBeNull();
+    await userEvent.setup().click(within(card).getByRole("button", { name: "More actions" }));
+    const menu = screen.getByTestId("artifact-menu");
+    expect(within(menu).queryByRole("menuitem", { name: "Reinstall" })).toBeNull();
+    expect(within(menu).getByRole("menuitem", { name: "Uninstall" })).toBeInTheDocument();
   });
 
   it("uninstalls an installed plugin only after a confirmation", async () => {
@@ -307,7 +367,13 @@ describe("Artifacts", () => {
     const card = await screen.findByTestId("artifact-4");
     const user = userEvent.setup();
     vi.mocked(confirmDialog).mockResolvedValueOnce(false);
-    await user.click(within(card).getByRole("button", { name: "Uninstall" }));
+    const uninstall = async () => {
+      await user.click(within(card).getByRole("button", { name: "More actions" }));
+      await user.click(
+        within(screen.getByTestId("artifact-menu")).getByRole("menuitem", { name: "Uninstall" })
+      );
+    };
+    await uninstall();
     await waitFor(() => expect(confirmDialog).toHaveBeenCalled());
     expect(api.artifacts.uninstall).not.toHaveBeenCalled();
 
@@ -316,7 +382,7 @@ describe("Artifacts", () => {
       uninstalled: "tool@market",
       paths: [],
     });
-    await user.click(within(card).getByRole("button", { name: "Uninstall" }));
+    await uninstall();
     await waitFor(() => expect(api.artifacts.uninstall).toHaveBeenCalledWith(4));
   });
 

client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap

@@ -7239,7 +7239,7 @@ exports[`screen snapshots > Settings — about 1`] = `
                 <span
                   class="text-status-warning/90"
                 >
-                  UI build v2.8.14 (rebuild client to match)
+                  UI build v2.8.15 (rebuild client to match)
                 </span>
               </p>
             </div>