npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@olares/lares-mobile

v0.15.7

Published

Lares chat component for LarePass

Readme

@olares/lares-mobile

LarePass 只依赖这一个包。对话、Host、设置都在内部走 @olares/lares-core,宿主不要再 import 或 link core。

<template>
  <LaresApp :locale="locale" :device="device" v-bind="ports" />
</template>
<script setup>
import { LaresApp, laresPortsFromAccount, findLaresEntrance } from "@olares/lares-mobile";
</script>

devicedesktop 时启用工作区侧栏和桌面 Composer;mobile(默认)保持原来的移动端顶栏、历史抽屉与输入区。

桌面 Composer 的权限胶囊读会话的 permissions 投影,切换发 Host 自己的 /permission <preset>;命令菜单读 Host 的 /api/lares/commands。两者都由 Host 决定有无:投影缺失时胶囊不显示,端点缺失时菜单给出错误文案,其余功能不受影响。

回复下方那行图标在指针设备上悬停才显示用时读数(时刻 · 用时 · 首 token · tok/s),触屏保持原来的裸图标行。读数全部由会话日志里的 timeusage 推出(见 larepass/turn-metrics),日志没记的那项直接不显示,不做估算。

设置页同样只挂 LaresAgentSettingsdevicedesktop 时用锚定下拉,mobile(默认)用底部列表。

正式 App:把当前登录账号的 myApps 交给 laresPortsFromAccount(或自己调 findLaresEntrance 得到 baseUrl)。入口前缀是安装时随机的,不要拼 lares.<用户>.olares.com,也不要把 webpack .env 里的调试子域带进生产。

PC 预览:IS_PC_TEST 时走 /laresHost 代理,laresPortsFromAccount 会继续用 PROTOCOL / LARES_SUB_DOMAIN / ACCOUNT_DOMAIN。自定义鉴权请求再传 request

宿主页面与 Host 跨源时(打包桌面端是 file://)必须传 request,浏览器不会带上 Olares cookie,靠 cookie 的默认实现一律 401。request 会用在所有调用上,包括聊天附件上传和语音转写这两个二进制请求——它们的 bodyFile / Blobheaders 里自带 content-type,实现里不要再当成 JSON 序列化。

async function request(url, { method = "GET", body, headers, signal } = {}) {
  // body 可能是 File / Blob,原样发出去
  const res = await send(url, { method, body, headers, signal, token });
  return { ok: res.ok, status: res.status, body: res.json }; // 4xx 也要返回,不要 throw
}

事件流 /api/events.mux 是唯一带不了 header 的调用——浏览器 WebSocket 构造器不收 header。Olares 会从 Sec-WebSocket-Protocol 取 token 提升成 X-Authorization 再走入口鉴权,所以另外传 socketProtocol

ports.socketProtocol = () => currentUser.access_token; // 传函数则每次连接现取,换 token 无需重建 runtime

也接受直接给字符串或数组。不传就不传,不要传空串——服务端不回应的子协议会让握手直接失败,同源的 PC 端保持裸构造。

切账号时更新 baseUrl / env 即可,客户端会丢掉上一台的 runtime 和设置缓存,改连新 Host。

本地联调(包未上 registry 时):

# dina
npm link --workspace=@olares/lares-mobile

# TermiPass/packages/app
npm link @olares/lares-mobile