Tauri + React + Typescript

Connect to Perforce

Exbyte Depot — sign in to your P4 server

Server +

{I.monitor} setServer(e.target.value)} />

User +

+ + setUser(e.target.value)} onBlur={loadClients} />

Password +

+ + setPassword(e.target.value)} onKeyDown={(e) => e.key === "Enter" && connect()} />

Workspace +

+ + {clients.length ? ( + + ) : ( + setClient(e.target.value)} /> + )} +

⚠{err}

{I.hex}

Exbyte Depot — Perforce

e.stopPropagation()}> + {Object.entries(menus).map(([name, items]) => ( +

setOpenMenu(openMenu === name ? null : name)}> + {name} +

+ {items.map((it) => ( +

it.act?.()}> + {it.label}{it.kb && {it.kb}} +

+ ))} +

{info?.serverAddress || "connected"}

+ + +

+ +

openCtx(e, [ + { label: "Открыть в проводнике", act: () => reveal(String(info?.clientRoot || "")) }, + { label: "Сменить workspace…", act: openWorkspaces }, + { label: "Скопировать имя", act: () => copyText(info?.clientName || "", "Имя workspace") }, + ])}> + {I.monitor} + Workspace{info?.clientName || "—"} + {I.chev} +

startResize(e, "sync")} title="Тянуть — изменить ширину" /> +

browseTo("")} title="Выбрать рабочую папку проекта · ПКМ — ещё" + onContextMenu={(e) => openCtx(e, [ + { label: "Открыть в проводнике", act: () => reveal(activePath || String(info?.clientRoot || "")) }, + { label: "Выбрать другую папку…", act: () => browseTo("") }, + { label: "Скопировать путь", act: () => copyText(activePath || "//…", "Путь") }, + ])}> + {I.branch} + Рабочая папка{activePath || "весь workspace (//…)"} + {I.chev} +

+ {pending.length > 0 ? ( +

+ + Submit на сервер{pending.length} changelist(ов) → push +

+ ) : ( +

+ {I.sync} + Get Latest{busy ? "Работаю…" : "забрать с сервера (pull)"} +

+ )} +

+ +

startResize(e, "left")} title="Тянуть — изменить ширину" /> +

+ + +

+ + {tab === "changes" ? ( + <> +

{I.search} setFilter(e.target.value)} />

+ {pending.length > 0 && ( +

+ + {pending.length} changelist(ов) закоммичено — готово к Submit + ↑ +

+ )} + {scanning && ( +

+ + Ищу изменения на диске…{!activePath && " для всего workspace это долго — выбери рабочую папку проекта сверху"} +

+ )} +

+ {allChecked ? I.check : null} + {checked.size} из {view.length} выбрано + +

+ {view.length === 0 ? ( +

+ {scanning ? <>Ищу изменения на диске… : <> + + {busy ? "Загрузка…" : "Пока нет открытых файлов.\nМеняй ассеты в Unreal (Source Control → Perforce) — они появятся тут сами.\n\nПравил файлы мимо Perforce? Actions → «Найти изменения заново»."} + } +

+ ) : ( + setChecked((s) => { const n = new Set(s); n.has(dp) ? n.delete(dp) : n.add(dp); return n; })} /> + )} +

+ setDesc(e.target.value)} + onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) doCommit(); }} /> +

setDescBody(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) doCommit(); }} />
+                <button className="submit" disabled={busy || !desc.trim() || checked.size === 0} onClick={doCommit}>
+                  {I.check}Commit changelist <b>· {checked.size} files</b>
+                </button>
+                <div className="addhint">Commit = локально (revertable). Отправка на сервер — <b>Submit</b> вверху справа.</div>
+              </div>
+            </>
+          ) : (
+            <HistoryList history={history} busy={busy} sel={selChange} onSelect={openChange}
+              onContext={(c, e) => openCtx(e, [
+                { label: "Открыть этот changelist", act: () => openChange(c) },
+                { label: `Откатить (revert) #${c.change}`, danger: true, act: () => revertChange(c) },
+                { label: `Скопировать номер #${c.change}`, act: () => copyText(c.change || "", "Номер") },
+                { label: "Скопировать описание", act: () => copyText((c.desc || "").trim(), "Описание") },
+              ])} />
+          )}
+        </div>
+
+        {tab === "changes"
+          ? <Preview file={selFile} onRevert={doRevert} />
+          : <ChangeDetail detail={detail} busy={detailBusy} />}
+      </div>
+
+      {dragging && (
+        <div className="dropzone">
+          <div className="dropinner">
+            <svg viewBox="0 0 24 24" fill="none"><path d="M12 15V3M8 7l4-4 4 4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
+            <span>Отпусти, чтобы добавить в Perforce</span>
+          </div>
+        </div>
+      )}
+      {modal && <AppModal modal={modal} info={info} light={light} toggleTheme={toggleTheme}
+        onClose={() => setModal(null)} onPickWorkspace={switchWorkspace} onBrowse={browseTo} onChoose={chooseScope} onDisconnect={onDisconnect} />}
+      {ask && <ConfirmModal {...ask} onClose={(v) => { ask.resolve(v); setAsk(null); }} />}
+      {pushing && (
+        <div className="modal-back">
+          <div className="push-modal">
+            <div className="push-title"><span className="ldr" />Отправка на сервер…</div>
+            <div className="push-count">Changelist {pushing.done} из {pushing.total}</div>
+            <div className="push-track"><div className="push-fill" style={{ width: `${Math.round((pushing.done / pushing.total) * 100)}%` }} /></div>
+            <div className="push-hint">Крупные ассеты заливаются дольше — не закрывай окно.</div>
+          </div>
+        </div>
+      )}
+      {ctx && <ContextMenu x={ctx.x} y={ctx.y} items={ctx.items} onClose={() => setCtx(null)} />}
+      {toast && <div className={"toast" + (toast.err ? " err" : "")}>{toast.text}</div>}
+    </div>
+  );
+}
+
+/* ---------------- app modal (workspaces / scope / settings / about) ---------------- */
+function AppModal({ modal, info, light, toggleTheme, onClose, onPickWorkspace, onBrowse, onChoose, onDisconnect }:
+  { modal: ModalState; info: P4Info | null; light: boolean; toggleTheme: () => void; onClose: () => void; onPickWorkspace: (c: string) => void; onBrowse: (path: string) => void; onChoose: (path: string) => void; onDisconnect: () => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const X = <button className="x" onClick={onClose}><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button>;
+  const folder = <svg viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" stroke="currentColor" strokeWidth="1.6" /></svg>;
+  const depotIc = <svg viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="6" rx="8" ry="3" stroke="currentColor" strokeWidth="1.6" /><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" stroke="currentColor" strokeWidth="1.6" /></svg>;
+
+  return (
+    <div className="modal-back" onClick={onClose}>
+      <div className="picker" onClick={(e) => e.stopPropagation()}>
+        {modal.kind === "workspaces" && (<>
+          <div className="picker-head">{folder}<h3>Выбор workspace</h3>{X}</div>
+          <div className="picker-list">
+            {modal.items.length === 0 && <div className="viewer-msg" style={{ position: "static", padding: 20 }}>Нет доступных workspace</div>}
+            {modal.items.map((c) => (
+              <div key={c.client} className={"picker-item" + (c.client === modal.current ? " on" : "")} onClick={() => onPickWorkspace(c.client || "")}>
+                <span className="pi-ic">{folder}</span>
+                <span className="pi-body"><span className="pi-name">{c.client}</span><span className="pi-sub">{(c.Root as string) || ""}</span></span>
+              </div>
+            ))}
+          </div>
+          <div className="picker-foot">Активный: {modal.current || "—"}</div>
+        </>)}
+
+        {modal.kind === "scope" && (() => {
+          const path = modal.path;
+          const parts = path.replace(/^\/+/, "").split("/").filter(Boolean); // e.g. ["depot","Proj"]
+          const parentPath = parts.length ? "//" + parts.slice(0, -1).join("/") : "";
+          const up = parts.length > 0;
+          return (<>
+            <div className="picker-head">{depotIc}<h3>Рабочая папка</h3>{X}</div>
+            <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--border-soft)" }}>
+              <div className="crumb">
+                <span className="seg" onClick={() => onBrowse("")}>//</span>
+                {parts.map((seg, i) => (
+                  <span key={i}><span className="sep">/</span><span className="seg" onClick={() => onBrowse("//" + parts.slice(0, i + 1).join("/"))}>{seg}</span></span>
+                ))}
+              </div>
+            </div>
+            <div className="picker-list">
+              {up && (
+                <div className="picker-item" onClick={() => onBrowse(parentPath)}>
+                  <span className="pi-ic up"><svg viewBox="0 0 24 24" fill="none"><path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
+                  <span className="pi-body"><span className="pi-name up">..  вверх</span></span>
+                </div>
+              )}
+              {modal.dirs.length === 0 && <div className="viewer-msg" style={{ position: "static", padding: 18 }}>Вложенных папок нет</div>}
+              {modal.dirs.map((d) => (
+                <div key={d.dir} className="picker-item" onClick={() => onBrowse(d.dir || "")}>
+                  <span className="pi-ic">{folder}</span>
+                  <span className="pi-body"><span className="pi-name">{leaf(d.dir)}</span><span className="pi-sub">{d.dir}</span></span>
+                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" style={{ color: "var(--faint)" }}><path d="m9 6 6 6-6 6" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                </div>
+              ))}
+            </div>
+            <button className="scope-choose" onClick={() => onChoose(path)}>
+              {path ? `Работать в: ${path}` : "Работать во всём workspace (//…)"}
+            </button>
+          </>);
+        })()}
+
+        {modal.kind === "settings" && (<>
+          <div className="picker-head"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" /><path d="M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.3 1a7 7 0 0 0-1.7-1l-.4-2.6H10.5l-.4 2.6a7 7 0 0 0-1.7 1l-2.3-1-2 3.4L6 11a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 1.7 1l.4 2.6h3.5l.4-2.6a7 7 0 0 0 1.7-1l2.3 1 2-3.4-2-1.5c.06-.33.1-.66.1-1Z" stroke="currentColor" strokeWidth="1.3" /></svg><h3>Настройки</h3>{X}</div>
+          <div className="info-body">
+            <div className="info-row"><span className="rk">Тема</span><button className="mbtn ghost" style={{ flex: "none", padding: "6px 14px" }} onClick={toggleTheme}>{light ? "Светлая ☀" : "Тёмная ☾"}</button></div>
+            <div className="info-row"><span className="rk">Сервер</span><span className="rv">{info?.serverAddress || "—"}</span></div>
+            <div className="info-row"><span className="rk">Пользователь</span><span className="rv">{info?.userName || "—"}</span></div>
+            <div className="info-row"><span className="rk">Workspace</span><span className="rv">{info?.clientName || "—"}</span></div>
+            <div className="info-row"><span className="rk">Версия сервера</span><span className="rv">{(info?.serverVersion as string || "").split("/")[2] || "—"}</span></div>
+            <div style={{ marginTop: 18 }}><button className="mbtn danger" style={{ width: "100%" }} onClick={() => { onClose(); onDisconnect(); }}>Отключиться</button></div>
+          </div>
+        </>)}
+
+        {modal.kind === "about" && (<>
+          <div className="picker-head">{depotIc}<h3>Exbyte Depot</h3>{X}</div>
+          <div className="info-body" style={{ textAlign: "center" }}>
+            <div style={{ width: 60, height: 60, margin: "6px auto 14px", borderRadius: 16, background: "linear-gradient(145deg,var(--accent-2),var(--accent-deep))", display: "grid", placeItems: "center", boxShadow: "0 0 30px rgba(124,110,246,.5)" }}>
+              <svg viewBox="0 0 24 24" width="30" height="30" fill="none"><path d="M12 2 3 7v10l9 5 9-5V7l-9-5Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /><path d="m3 7 9 5 9-5M12 12v10" stroke="#fff" strokeWidth="1.5" /></svg>
+            </div>
+            <p style={{ marginBottom: 8 }}><b>Exbyte Depot</b> — нативный клиент Perforce</p>
+            <p style={{ fontSize: 12, color: "var(--faint)" }}>Tauri + React · three.js · v0.1.0<br />Собственная разработка Exbyte Studios</p>
+          </div>
+        </>)}
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- right-click context menu ---------------- */
+function ContextMenu({ x, y, items, onClose }: { x: number; y: number; items: CtxItem[]; onClose: () => void }) {
+  useEffect(() => {
+    const close = () => onClose();
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("click", close);
+    document.addEventListener("scroll", close, true);
+    document.addEventListener("keydown", onKey);
+    return () => { document.removeEventListener("click", close); document.removeEventListener("scroll", close, true); document.removeEventListener("keydown", onKey); };
+  }, [onClose]);
+  const style: CSSProperties = { left: Math.min(x, window.innerWidth - 240), top: Math.min(y, window.innerHeight - (items.length * 36 + 14)) };
+  return (
+    <div className="ctxmenu" style={style} onClick={(e) => e.stopPropagation()} onContextMenu={(e) => e.preventDefault()}>
+      {items.map((it, i) => (
+        <div key={i} className={"ctxitem" + (it.danger ? " danger" : "")} onClick={() => { onClose(); it.act(); }}>{it.label}</div>
+      ))}
+    </div>
+  );
+}
+
+/* ---------------- confirm modal ---------------- */
+function ConfirmModal({ title, body, confirm, danger, onClose }: { title: string; body: string; confirm: string; danger?: boolean; onClose: (v: boolean) => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(false); if (e.key === "Enter") onClose(true); };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return (
+    <div className="modal-back" onClick={() => onClose(false)}>
+      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
+        <div className={"modal-icon" + (danger ? " danger" : "")}>
+          {danger
+            ? <svg viewBox="0 0 24 24" fill="none"><path d="M12 9v4M12 17h.01M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
+            : <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
+        </div>
+        <h3>{title}</h3>
+        <p>{body}</p>
+        <div className="modal-actions">
+          <button className="mbtn ghost" onClick={() => onClose(false)}>Отмена</button>
+          <button className={"mbtn " + (danger ? "danger" : "primary")} onClick={() => onClose(true)} autoFocus>{confirm}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- change detail (History right panel) — virtualized ---------------- */
+const CROW = 52;
+function ChangeDetail({ detail, busy }: { detail: Describe | null; busy?: boolean }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [scroll, setScroll] = useState(0);
+  const [h, setH] = useState(500);
+  const fileRows = useMemo(() => (detail ? describeFiles(detail) : []), [detail]);
+  useEffect(() => {
+    const el = ref.current; if (!el) return;
+    const onScroll = () => setScroll(el.scrollTop);
+    el.addEventListener("scroll", onScroll);
+    const ro = new ResizeObserver(() => setH(el.clientHeight));
+    ro.observe(el); setH(el.clientHeight);
+    return () => { el.removeEventListener("scroll", onScroll); ro.disconnect(); };
+  }, [detail]);
+  // jump back to top whenever a different changelist loads
+  useEffect(() => { if (ref.current) ref.current.scrollTop = 0; setScroll(0); }, [detail?.change]);
+
+  if (busy) return <div className="right"><div className="nofile"><span className="ldr" /><span>Загрузка списка файлов…</span></div></div>;
+  if (!detail) return <div className="right"><div className="nofile">{I.clock}<span>Выберите changelist в History</span></div></div>;
+
+  const first = Math.max(0, Math.floor(scroll / CROW) - 6);
+  const last = Math.min(fileRows.length, Math.ceil((scroll + h) / CROW) + 6);
+  const rows = [];
+  for (let i = first; i < last; i++) {
+    const f = fileRows[i];
+    const { name, dir } = splitPath(f.depotFile);
+    const st = statusOf(f.action);
+    rows.push(
+      <div key={i} className="crow" style={{ top: i * CROW }}>
+        <span className={"stat " + st.cls}>{st.ch}</span>
+        <span className="hbody"><span className="hdesc" style={{ WebkitLineClamp: 1 }}>{name}</span><span className="hmeta">{dir}#{f.rev}</span></span>
+      </div>
+    );
+  }
+  return (
+    <div className="right">
+      <div className="diffhead">
+        <span className="rev" style={{ fontSize: 15, fontWeight: 700 }}>#{detail.change}</span>
+        <span className="ttl">
+          <span className="n">{(detail.desc || "").trim() || "(без описания)"}</span>
+          <span className="m">{detail.user} · {fmtTime(detail.time)} · {fileRows.length} файл(ов)</span>
+        </span>
+      </div>
+      <div className="files" ref={ref}><div className="vspace" style={{ height: fileRows.length * CROW }}>{rows}</div></div>
+    </div>
+  );
+}
+
+/* ---------------- history list ---------------- */
+function HistoryList({ history, busy, sel, onSelect, onContext }: { history: Change[]; busy: boolean; sel?: string; onSelect: (c: Change) => void; onContext?: (c: Change, e: ReactMouseEvent) => void }) {
+  if (busy && !history.length) return <div className="empty">Загрузка истории…</div>;
+  if (!history.length) return <div className="empty">Нет засабмиченных изменений.</div>;
+  return (
+    <div className="files" style={{ position: "relative" }}>
+      {history.map((c) => (
+        <div key={c.change} className={"hrow click" + (sel === c.change ? " sel" : "")} onClick={() => onSelect(c)} onContextMenu={(e) => onContext?.(c, e)}>
+          <span className="hnum">#{c.change}</span>
+          <span className="hbody">
+            <span className="hdesc">{(c.desc || "").trim() || "(без описания)"}</span>
+            <span className="hmeta">{c.user} · {fmtTime(c.time)}</span>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/* ---------------- file thumbnail (lazy, cached) — like Anchorpoint's list previews ---------------- */
+const thumbCache = new Map<string, string | null>(); // depotFile -> objectURL | null(no thumb)
+function Thumb({ file }: { file: OpenedFile }) {
+  const dp = file.depotFile || "";
+  const { name } = splitPath(dp);
+  const kind = kindOf(name);
+  const [url, setUrl] = useState<string | null>(() => thumbCache.get(dp) ?? null);
+  useEffect(() => {
+    if (kind !== "image" && kind !== "uasset") return;
+    if (thumbCache.has(dp)) { setUrl(thumbCache.get(dp) ?? null); return; }
+    let live = true;
+    p4.readDepot(dp).then((buf) => {
+      if (!live) return;
+      let u: string | null = null;
+      if (kind === "image") {
+        const ext = (name.split(".").pop() || "png").toLowerCase();
+        u = URL.createObjectURL(new Blob([buf], { type: ext === "svg" ? "image/svg+xml" : ext === "jpg" ? "image/jpeg" : `image/${ext}` }));
+      } else {
+        const png = extractPng(new Uint8Array(buf));
+        if (png) u = URL.createObjectURL(new Blob([png], { type: "image/png" }));
+      }
+      thumbCache.set(dp, u);
+      if (live) setUrl(u);
+    }).catch(() => { thumbCache.set(dp, null); });
+    return () => { live = false; };
+  }, [dp]);
+
+  if (url) return <img className="fthumb" src={url} alt="" />;
+  const ic = kind === "model" ? "◆" : kind === "image" || kind === "uasset" ? "▦" : "≡";
+  return <span className={"fthumb ico k-" + kind}>{ic}</span>;
+}
+
+/* ---------------- virtualized file list ---------------- */
+const ROW = 52;
+function FileList({ files, sel, checked, onSelect, onToggle }:
+  { files: OpenedFile[]; sel: number | null; checked: Set<string>; onSelect: (i: number) => void; onToggle: (dp: string) => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [scroll, setScroll] = useState(0);
+  const [h, setH] = useState(500);
+  useEffect(() => {
+    const el = ref.current!;
+    const onScroll = () => setScroll(el.scrollTop);
+    el.addEventListener("scroll", onScroll);
+    const ro = new ResizeObserver(() => setH(el.clientHeight));
+    ro.observe(el); setH(el.clientHeight);
+    return () => { el.removeEventListener("scroll", onScroll); ro.disconnect(); };
+  }, []);
+  const first = Math.max(0, Math.floor(scroll / ROW) - 4);
+  const last = Math.min(files.length, Math.ceil((scroll + h) / ROW) + 4);
+  const rows = [];
+  for (let i = first; i < last; i++) {
+    const f = files[i];
+    const dp = f.depotFile || "";
+    const { name, dir } = splitPath(dp);
+    const st = statusOf(f.action);
+    const isCk = checked.has(dp);
+    rows.push(
+      <div key={dp + i} className={"file" + (i === sel ? " sel" : "")} style={{ top: i * ROW }} onClick={() => onSelect(i)}>
+        <span className={"fchk " + (isCk ? "ck" : "off")} onClick={(e) => { e.stopPropagation(); onToggle(dp); }}>{I.check}</span>
+        <Thumb file={f} />
+        <span className="fname"><span className="n">{name}</span><span className="p">{dir}</span></span>
+        <span className={"stat " + st.cls}>{st.ch}</span>
+      </div>
+    );
+  }
+  return <div className="files" ref={ref}><div className="vspace" style={{ height: files.length * ROW }}>{rows}</div></div>;
+}
+
+/* ---------------- preview panel ---------------- */
+function Preview({ file, onRevert }: { file?: OpenedFile; onRevert: (f: OpenedFile) => void }) {
+  if (!file) return <div className="right"><div className="nofile">{I.cube}<span>Выберите файл слева</span></div></div>;
+  const dp = file.depotFile || "";
+  const { name, dir } = splitPath(dp);
+  const st = statusOf(file.action);
+  const kind = kindOf(name);
+  const rev = file.rev ? `#${file.haveRev || "?"} → #${file.rev}` : "#" + (file.rev || "?");
+
+  return (
+    <div className="right">
+      <div className="diffhead">
+        <span className={"stat " + st.cls} style={{ width: 26, height: 26, fontSize: 13 }}>{st.ch}</span>
+        <span className="ttl">
+          <span className="n">{name} <span>— {dir}</span></span>
+          <span className="m">{file.action} · <span className="rev">{rev}</span> · {file.type}</span>
+        </span>
+        <span className="tools">
+          <span className="gbtn" onClick={() => onRevert(file)}>{I.revert}Revert</span>
+        </span>
+      </div>
+
+      {kind === "model" ? <ModelViewer depot={dp} name={name} />
+        : kind === "image" ? <ImageViewer depot={dp} name={name} />
+          : kind === "uasset" ? <UassetPreview file={file} />
+            : <DiffView file={file} />}
+    </div>
+  );
+}
+function Mi({ k, v, acc }: { k: string; v: string; acc?: boolean }) {
+  return <div className="mi"><span className="k">{k}</span><span className={"v" + (acc ? " acc" : "")}>{v}</span></div>;
+}
+
+/* ---------------- text diff ---------------- */
+function DiffView({ file }: { file: OpenedFile }) {
+  const [text, setText] = useState<string | null>(null);
+  const [err, setErr] = useState("");
+  const dp = file.depotFile || "";
+  useEffect(() => {
+    let live = true; setText(null); setErr("");
+    p4.diff(dp).then((t) => live && setText(t)).catch((e) => live && setErr(String(e)));
+    return () => { live = false; };
+  }, [dp]);
+
+  if (err) return <div className="nofile" style={{ color: "var(--del)" }}>{err}</div>;
+  if (text === null) return <div className="nofile">Загрузка diff…</div>;
+  if (!text.trim()) return <div className="nofile">{I.check}<span>Нет текстовых отличий (или бинарный файл).</span></div>;
+
+  const lines = text.split("\n");
+  return (
+    <div className="diff">
+      {lines.map((ln, i) => {
+        let cls = "";
+        if (ln.startsWith("@@")) cls = "hunk";
+        else if (ln.startsWith("+") && !ln.startsWith("+++")) cls = "add";
+        else if (ln.startsWith("-") && !ln.startsWith("---")) cls = "del";
+        return <div key={i} className={"dl " + cls}><span className="g" /><span className="c">{ln || " "}</span></div>;
+      })}
+    </div>
+  );
+}
+
+/* ---------------- real image viewer ---------------- */
+function ImageViewer({ depot, name }: { depot: string; name: string }) {
+  const [url, setUrl] = useState<string | null>(null);
+  const [err, setErr] = useState("");
+  const [dim, setDim] = useState("");
+  useEffect(() => {
+    let u = ""; let live = true;
+    p4.readDepot(depot).then((buf) => {
+      if (!live) return;
+      const ext = (name.split(".").pop() || "png").toLowerCase();
+      const mime = ext === "svg" ? "image/svg+xml" : ext === "jpg" ? "image/jpeg" : `image/${ext}`;
+      u = URL.createObjectURL(new Blob([buf], { type: mime }));
+      setUrl(u);
+    }).catch((e) => live && setErr(String(e)));
+    return () => { live = false; if (u) URL.revokeObjectURL(u); };
+  }, [depot, name]);
+  return (
+    <div className="asset">
+      <div className="stage">
+        <span className="lbl2"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="m3 16 5-5 4 4 3-3 6 6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>Image</span>
+        {err ? <div className="viewer-msg err">{err}</div>
+          : url ? <img src={url} alt={name} style={{ maxWidth: "90%", maxHeight: "90%", borderRadius: 10, boxShadow: "0 20px 50px -20px #000" }}
+            onLoad={(e) => setDim(`${(e.target as HTMLImageElement).naturalWidth}×${(e.target as HTMLImageElement).naturalHeight}`)} />
+            : <div className="viewer-msg"><span className="ldr" />Загрузка…</div>}
+      </div>
+      <div className="assetmeta">
+        <Mi k="Файл" v={name} /><Mi k="Разрешение" v={dim || "—"} /><Mi k="Формат" v={(name.split(".").pop() || "").toUpperCase()} /><Mi k="Источник" v="working copy" acc />
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- .uasset — extract embedded Unreal thumbnail (PNG) ---------------- */
+function UassetPreview({ file }: { file: OpenedFile }) {
+  const dp = file.depotFile || "";
+  const { name } = splitPath(dp);
+  const [thumb, setThumb] = useState<string | null>(null);
+  const [tried, setTried] = useState(false);
+  useEffect(() => {
+    let live = true; let url = "";
+    setThumb(null); setTried(false);
+    p4.readDepot(dp).then((buf) => {
+      if (!live) return;
+      const png = extractPng(new Uint8Array(buf));
+      if (png) { url = URL.createObjectURL(new Blob([png], { type: "image/png" })); setThumb(url); }
+      setTried(true);
+    }).catch(() => live && setTried(true));
+    return () => { live = false; if (url) URL.revokeObjectURL(url); };
+  }, [dp]);
+
+  return (
+    <div className="asset">
+      <div className="stage">
+        {thumb ? (<>
+          <span className="lbl2">{I.cube}Unreal · вшитая миниатюра</span>
+          <img src={thumb} alt={name} style={{ maxWidth: "82%", maxHeight: "82%", borderRadius: 12, boxShadow: "0 20px 50px -20px #000" }} />
+        </>) : (
+          <div className="uasset-card">
+            <div className="uasset-ic">{I.cube}</div>
+            <div className="uasset-name">{name}</div>
+            <div className="uasset-note">{!tried ? "Читаю ассет…" : "В этом ассете нет вшитой миниатюры. Интерактивный 3D работает для FBX / OBJ / GLB / GLTF / STL — экспортни модель в один из этих форматов."}</div>
+          </div>
+        )}
+      </div>
+      <div className="assetmeta">
+        <Mi k="Тип" v={file.type || "binary"} /><Mi k="Превью" v={thumb ? "миниатюра" : (tried ? "нет" : "…")} /><Mi k="Ревизия" v={file.rev ? "#" + file.rev : "—"} acc /><Mi k="Change" v={file.change || "default"} />
+      </div>
+    </div>
+  );
+}
+
+// scan raw bytes for an embedded PNG and return just that PNG (sig → IEND+crc)
+function extractPng(b: Uint8Array): Uint8Array | null {
+  const sig = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+  for (let i = 0; i < b.length - 8; i++) {
+    let ok = true;
+    for (let k = 0; k < 8; k++) if (b[i + k] !== sig[k]) { ok = false; break; }
+    if (!ok) continue;
+    for (let j = i + 8; j < b.length - 8; j++) {
+      if (b[j] === 0x49 && b[j + 1] === 0x45 && b[j + 2] === 0x4e && b[j + 3] === 0x44) return b.slice(i, j + 8);
+    }
+    return b.slice(i);
+  }
+  return null;
+}
+
diff --git a/src/ModelViewer.tsx b/src/ModelViewer.tsx
new file mode 100644
index 0000000..33ade97
--- /dev/null
+++ b/src/ModelViewer.tsx
@@ -0,0 +1,205 @@
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";
+import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader.js";
+import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js";
+import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { p4 } from "./p4";
+
+type Api = { toggleWire: (b: boolean) => void; toggleGrid: (b: boolean) => void; reset: () => void };
+
+export default function ModelViewer({ depot, name }: { depot: string; name: string }) {
+  const mount = useRef<HTMLDivElement>(null);
+  const api = useRef<Api | null>(null);
+  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
+  const [err, setErr] = useState("");
+  const [stats, setStats] = useState({ tris: 0, verts: 0, meshes: 0, mats: 0 });
+  const [wire, setWire] = useState(false);
+  const [grid, setGrid] = useState(true);
+
+  useEffect(() => {
+    let disposed = false;
+    let raf = 0;
+    const el = mount.current!;
+    setStatus("loading"); setErr("");
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(el.clientWidth || 600, el.clientHeight || 400);
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.05;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    el.appendChild(renderer.domElement);
+
+    const scene = new THREE.Scene();
+    // image-based lighting (soft studio environment) — this is what makes PBR look good
+    const pmrem = new THREE.PMREMGenerator(renderer);
+    scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+
+    const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 100000);
+
+    // key light with shadows + soft fill
+    const key = new THREE.DirectionalLight(0xffffff, 2.2);
+    key.position.set(5, 8, 6);
+    key.castShadow = true;
+    key.shadow.mapSize.set(2048, 2048);
+    key.shadow.bias = -0.0004;
+    scene.add(key);
+    scene.add(new THREE.DirectionalLight(0x8b7bf7, 0.35).translateX(-6));
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true; controls.dampingFactor = 0.08;
+    controls.autoRotate = true; controls.autoRotateSpeed = 1.1;
+    renderer.domElement.addEventListener("pointerdown", () => (controls.autoRotate = false));
+
+    // ground + grid (added after fit, sized to model)
+    const ground = new THREE.Mesh(
+      new THREE.PlaneGeometry(1, 1),
+      new THREE.ShadowMaterial({ opacity: 0.28 })
+    );
+    ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground);
+    let gridHelper: THREE.GridHelper | null = null;
+    let home = { pos: new THREE.Vector3(3, 2, 3), tgt: new THREE.Vector3() };
+
+    const ext = (name.toLowerCase().split(".").pop() || "");
+
+    function collectStats(obj: THREE.Object3D) {
+      let tris = 0, verts = 0, meshes = 0; const mats = new Set<THREE.Material>();
+      obj.traverse((c) => {
+        const m = c as THREE.Mesh;
+        if ((m as unknown as { isMesh?: boolean }).isMesh && m.geometry) {
+          meshes++; const pos = m.geometry.getAttribute("position");
+          verts += pos ? pos.count : 0;
+          tris += m.geometry.index ? m.geometry.index.count / 3 : (pos ? pos.count / 3 : 0);
+          (Array.isArray(m.material) ? m.material : [m.material]).forEach((x) => x && mats.add(x));
+        }
+      });
+      setStats({ tris: Math.round(tris), verts, meshes, mats: mats.size });
+    }
+
+    function place(obj: THREE.Object3D) {
+      obj.traverse((c) => {
+        const m = c as THREE.Mesh;
+        if ((m as unknown as { isMesh?: boolean }).isMesh) {
+          m.castShadow = true; m.receiveShadow = true;
+          const has = m.material && !(Array.isArray(m.material) && m.material.length === 0);
+          if (!has) m.material = new THREE.MeshStandardMaterial({ color: 0x9a8bf9, roughness: 0.5, metalness: 0.05 });
+        }
+      });
+      const box = new THREE.Box3().setFromObject(obj);
+      const size = box.getSize(new THREE.Vector3());
+      const center = box.getCenter(new THREE.Vector3());
+      const maxDim = Math.max(size.x, size.y, size.z) || 1;
+      obj.position.sub(center);
+      obj.position.y += size.y / 2; // sit on the ground
+      scene.add(obj);
+
+      // ground + grid
+      ground.scale.set(maxDim * 8, maxDim * 8, 1);
+      gridHelper = new THREE.GridHelper(maxDim * 6, 30, 0x7c6ef6, 0x333344);
+      (gridHelper.material as THREE.Material).transparent = true;
+      (gridHelper.material as THREE.Material).opacity = 0.35;
+      scene.add(gridHelper); gridHelper.visible = grid;
+
+      // shadow camera frustum
+      const s = maxDim * 2.5;
+      Object.assign(key.shadow.camera, { left: -s, right: s, top: s, bottom: -s, near: 0.1, far: maxDim * 40 });
+      key.shadow.camera.updateProjectionMatrix();
+
+      const dist = maxDim * 2.1;
+      home = { pos: new THREE.Vector3(dist * 0.8, dist * 0.65, dist), tgt: new THREE.Vector3(0, size.y / 2, 0) };
+      camera.position.copy(home.pos);
+      camera.near = maxDim / 200; camera.far = maxDim * 200; camera.updateProjectionMatrix();
+      controls.target.copy(home.tgt); controls.maxDistance = maxDim * 25; controls.update();
+
+      collectStats(obj);
+      setStatus("ok");
+
+      // expose controls to React buttons
+      api.current = {
+        toggleWire: (b) => obj.traverse((c) => {
+          const m = c as THREE.Mesh; if (!(m as unknown as { isMesh?: boolean }).isMesh) return;
+          (Array.isArray(m.material) ? m.material : [m.material]).forEach((mt) => { const s = mt as THREE.MeshStandardMaterial; if (s) s.wireframe = b; });
+        }),
+        toggleGrid: (b) => { if (gridHelper) gridHelper.visible = b; },
+        reset: () => { camera.position.copy(home.pos); controls.target.copy(home.tgt); controls.update(); controls.autoRotate = false; },
+      };
+    }
+
+    function fail(e: unknown) { if (!disposed) { setErr(String((e as { message?: string })?.message || e)); setStatus("error"); } }
+
+    (async () => {
+      try {
+        const buf = await p4.readDepot(depot);
+        if (disposed) return;
+        const manager = new THREE.LoadingManager();
+        if (ext === "glb" || ext === "gltf") new GLTFLoader(manager).parse(buf, "", (g) => !disposed && place(g.scene), fail);
+        else if (ext === "obj") place(new OBJLoader(manager).parse(new TextDecoder().decode(buf)));
+        else if (ext === "fbx") place(new FBXLoader(manager).parse(buf, ""));
+        else if (ext === "dae") { const c = new ColladaLoader(manager).parse(new TextDecoder().decode(buf), ""); if (c && c.scene) place(c.scene); else fail("Collada: пустая сцена"); }
+        else if (ext === "3mf") place(new ThreeMFLoader(manager).parse(buf));
+        else if (ext === "stl") place(new THREE.Mesh(new STLLoader().parse(buf), new THREE.MeshStandardMaterial({ color: 0x9a8bf9, roughness: 0.5 })));
+        else if (ext === "ply") { const g = new PLYLoader().parse(buf); g.computeVertexNormals(); place(new THREE.Mesh(g, new THREE.MeshStandardMaterial({ color: 0x9a8bf9, roughness: 0.5, vertexColors: !!g.getAttribute("color") }))); }
+        else { setErr("Формат не поддерживается вьювером"); setStatus("error"); }
+      } catch (e) { fail(e); }
+    })();
+
+    const animate = () => { controls.update(); renderer.render(scene, camera); raf = requestAnimationFrame(animate); };
+    animate();
+
+    const onResize = () => {
+      const w = el.clientWidth || 600, h = el.clientHeight || 400;
+      renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix();
+    };
+    const ro = new ResizeObserver(onResize); ro.observe(el);
+
+    return () => {
+      disposed = true; cancelAnimationFrame(raf); ro.disconnect(); controls.dispose(); pmrem.dispose();
+      scene.traverse((o) => {
+        const m = o as THREE.Mesh;
+        if (m.geometry) m.geometry.dispose();
+        const mat = m.material; if (mat) (Array.isArray(mat) ? mat : [mat]).forEach((x) => x && x.dispose());
+      });
+      renderer.dispose();
+      if (renderer.domElement.parentNode === el) el.removeChild(renderer.domElement);
+      api.current = null;
+    };
+    // eslint-disable-next-line
+  }, [depot, name]);
+
+  const fmt = (n: number) => n.toLocaleString("ru");
+  return (
+    <div className="asset">
+      <div className="stage" style={{ padding: 0, position: "relative" }}>
+        <div ref={mount} style={{ position: "absolute", inset: 0 }} />
+        <span className="lbl2">
+          <svg viewBox="0 0 24 24" fill="none"><path d="M12 2 3 7v10l9 5 9-5V7l-9-5Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /><path d="m3 7 9 5 9-5" stroke="currentColor" strokeWidth="1.6" /></svg>
+          3D · {(name.split(".").pop() || "").toUpperCase()}
+        </span>
+        {status === "ok" && (
+          <div className="v3d-tools">
+            <button className={"v3d-btn" + (wire ? " on" : "")} onClick={() => { setWire(!wire); api.current?.toggleWire(!wire); }} title="Wireframe">◫</button>
+            <button className={"v3d-btn" + (grid ? " on" : "")} onClick={() => { setGrid(!grid); api.current?.toggleGrid(!grid); }} title="Сетка">▦</button>
+            <button className="v3d-btn" onClick={() => api.current?.reset()} title="Сбросить вид">⟲</button>
+          </div>
+        )}
+        {status === "loading" && <div className="viewer-msg"><span className="ldr" />Загрузка модели…</div>}
+        {status === "error" && <div className="viewer-msg err">{err}</div>}
+        {status === "ok" && <span className="hint">тащи — вращать · колесо — зум · ПКМ — панорама</span>}
+      </div>
+      <div className="assetmeta">
+        <div className="mi"><span className="k">Треугольники</span><span className="v">{fmt(stats.tris)}</span></div>
+        <div className="mi"><span className="k">Вершины</span><span className="v">{fmt(stats.verts)}</span></div>
+        <div className="mi"><span className="k">Меши · Материалы</span><span className="v">{stats.meshes} · {stats.mats}</span></div>
+        <div className="mi"><span className="k">Рендер</span><span className="v acc">three.js · PBR</span></div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..2be325e
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/src/p4.ts b/src/p4.ts
new file mode 100644
index 0000000..6d239fb
--- /dev/null
+++ b/src/p4.ts
@@ -0,0 +1,159 @@
+// Typed wrappers around the Rust p4 commands.
+import { invoke } from "@tauri-apps/api/core";
+
+export interface P4Info {
+  serverAddress?: string;
+  serverVersion?: string;
+  userName?: string;
+  clientName?: string;
+  clientRoot?: string;
+  serverUptime?: string;
+  serverDate?: string;
+  [k: string]: unknown;
+}
+
+export interface OpenedFile {
+  depotFile?: string;
+  clientFile?: string;
+  rev?: string;
+  haveRev?: string;
+  action?: string; // edit | add | delete | branch | integrate | move/add | move/delete
+  type?: string; // text | binary | ...
+  change?: string; // "default" or a number
+  user?: string;
+  client?: string;
+  [k: string]: unknown;
+}
+
+export interface Client {
+  client?: string;
+  Root?: string;
+  Host?: string;
+  Stream?: string;
+  [k: string]: unknown;
+}
+
+export interface Change {
+  change?: string;
+  time?: string;
+  user?: string;
+  client?: string;
+  status?: string;
+  desc?: string;
+  [k: string]: unknown;
+}
+
+export const p4 = {
+  clients: (port: string, user: string) =>
+    invoke<Client[]>("p4_clients", { port, user }),
+  login: (port: string, user: string, password: string, client: string) =>
+    invoke<P4Info>("p4_login", { port, user, password, client }),
+  restore: (port: string, user: string, client: string) =>
+    invoke<P4Info>("p4_restore", { port, user, client }),
+  info: () => invoke<P4Info>("p4_info"),
+  opened: (scope = "") => invoke<OpenedFile[]>("p4_opened", { scope }),
+  dirs: (path = "") => invoke<Dir[]>("p4_dirs", { path }),
+  changes: () => invoke<Change[]>("p4_changes"),
+  history: (path: string) => invoke<Change[]>("p4_history", { path }),
+  disconnect: () => invoke<void>("p4_disconnect"),
+  sync: (scope = "") => invoke<string>("p4_sync", { scope }),
+  diff: (file: string) => invoke<string>("p4_diff", { file }),
+  revert: (files: string[]) => invoke<string>("p4_revert", { files }),
+  submit: (description: string, files: string[]) =>
+    invoke<string>("p4_submit", { description, files }),
+  commit: (description: string, files: string[]) =>
+    invoke<string>("p4_commit", { description, files }),
+  submitChange: (change: string) => invoke<string>("p4_submit_change", { change }),
+  add: (files: string[]) => invoke<OpenedFile[]>("p4_add", { files }),
+  edit: (files: string[]) => invoke<OpenedFile[]>("p4_edit", { files }),
+  del: (files: string[]) => invoke<OpenedFile[]>("p4_delete", { files }),
+  reconcile: (path: string) => invoke<OpenedFile[]>("p4_reconcile", { path }),
+  scan: (scope = "") => invoke<OpenedFile[]>("p4_scan", { scope }),
+  describe: (change: string) => invoke<Describe>("p4_describe", { change }),
+  undoChange: (change: string) => invoke<string>("p4_undo_change", { change }),
+  openInExplorer: (target: string) => invoke<void>("open_in_explorer", { target }),
+  readDepot: async (depot: string): Promise<ArrayBuffer> => {
+    const r: unknown = await invoke("read_depot", { depot });
+    if (r instanceof ArrayBuffer) return r;
+    if (ArrayBuffer.isView(r)) return (r as ArrayBufferView).buffer as ArrayBuffer;
+    if (Array.isArray(r)) return new Uint8Array(r as number[]).buffer;
+    return r as ArrayBuffer;
+  },
+  switchClient: (client: string) => invoke<P4Info>("p4_switch_client", { client }),
+};
+
+export interface Dir { dir?: string; [k: string]: unknown }
+// depot path -> short leaf name (last segment)
+export function leaf(path?: string): string {
+  if (!path) return "";
+  const p = path.replace(/\/+$/, "");
+  return p.slice(p.lastIndexOf("/") + 1);
+}
+
+// a submitted changelist with indexed file fields (depotFile0, action0, ...)
+export interface Describe extends Change { [k: string]: unknown }
+export function describeFiles(d: Describe): { depotFile: string; action: string; rev: string }[] {
+  const out: { depotFile: string; action: string; rev: string }[] = [];
+  for (let i = 0; ; i++) {
+    const dp = d[`depotFile${i}`] as string | undefined;
+    if (!dp) break;
+    out.push({ depotFile: dp, action: (d[`action${i}`] as string) || "edit", rev: (d[`rev${i}`] as string) || "" });
+  }
+  return out;
+}
+
+// --- session persistence (server/user/workspace — никогда не пароль) ---
+export interface Session { server: string; user: string; client: string }
+const SESSION_KEY = "exd-session";
+export function saveSession(s: Session) {
+  try { localStorage.setItem(SESSION_KEY, JSON.stringify(s)); } catch {}
+}
+export function loadSession(): Session | null {
+  try { const r = localStorage.getItem(SESSION_KEY); return r ? JSON.parse(r) : null; } catch { return null; }
+}
+export function clearSession() {
+  try { localStorage.removeItem(SESSION_KEY); } catch {}
+}
+
+// --- working-folder scope persistence (per workspace) ---
+export function saveScope(client: string, path: string) {
+  try { localStorage.setItem("exd-scope-" + client, path); } catch {}
+}
+export function loadScope(client: string): string {
+  try { return client ? (localStorage.getItem("exd-scope-" + client) || "") : ""; } catch { return ""; }
+}
+
+// format a unix-epoch string as a short local datetime
+export function fmtTime(t?: string): string {
+  if (!t) return "";
+  const n = Number(t);
+  if (!n) return "";
+  const d = new Date(n * 1000);
+  return d.toLocaleString(undefined, { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+
+// action -> single-char status + css class
+export function statusOf(action?: string): { ch: string; cls: string } {
+  const a = (action || "").toLowerCase();
+  if (a.includes("add")) return { ch: "+", cls: "st-a" };
+  if (a.includes("delete")) return { ch: "−", cls: "st-d" };
+  return { ch: "±", cls: "st-e" }; // edit / integrate / branch / move
+}
+
+// depot or client path -> { name, dir }
+export function splitPath(p?: string): { name: string; dir: string } {
+  if (!p) return { name: "(unknown)", dir: "" };
+  const norm = p.replace(/\\/g, "/");
+  const i = norm.lastIndexOf("/");
+  return { name: norm.slice(i + 1), dir: norm.slice(0, i + 1) };
+}
+
+// classify by extension for the preview panel
+export type Kind = "model" | "uasset" | "image" | "code";
+export function kindOf(name: string): Kind {
+  const n = name.toLowerCase();
+  if (/\.(fbx|obj|gltf|glb|stl|ply|3mf|dae)$/.test(n)) return "model";
+  if (/\.(uasset|umap)$/.test(n)) return "uasset";
+  if (/\.(png|jpe?g|webp|gif|bmp|svg)$/.test(n)) return "image";
+  return "code";
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a7fc6fb
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ddad22a
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [react()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent Vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell Vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));