@ byokit/ ui (韩语)

无头签入,配对和跑步时基特状态,用平话直说,对任何UI.
它将你的后端报告 转换为阶段 和句子来显示: 配对表,链接的状况,电话回家的路线,以及运行时间套件的运行,审批和代理.  应用保持自己的外观。 除回放钩外的一切都是无框架的.

_{左边: code 阶段从 phaseOf()绘制 实例/pwa 对模拟OpenAI的登录。 对: pairingView()是因为 compare 字词,由 实例/herdr-kit。 。 。 .}

安装

npm install @byokit/ui

• 妇女 最近发布 • 妇女 所有释放

从 @byokit/ui-core见 扭曲了shim的移民指南。 。 。 .

快速启动

npm install @byokit/ui

反应是一种可选的对等依赖,只用于钩子(useSignIn, (中文(简体) ), useRun, (中文(简体) ), useApprovals, (中文(简体) ), useHerdrTree, (中文(简体) ), useBlocked, (中文(简体) ), useConnect, (中文(简体) ), useAccounts, (中文(简体) ), useModelPicker) (中文(简体) ).

import { phaseOf, stepOf } from '@byokit/ui/phase';
import { describeRoute } from '@byokit/ui/route';
import { consentWords, linkWords, pairingView, qrMatrix } from '@byokit/ui/link';

// What the back end reports: a sign-in waiting on a typed code.
const phase = phaseOf({ ready: false, signIn: { state: 'waiting', via: 'code', code: 'ABCD-1234' } });
console.log(phase, stepOf(phase));
console.log(phaseOf({ ready: true, work: true }));
console.log(phaseOf({ signIn: { state: 'failed', why: 'busy' } }));

console.log(describeRoute('wss://home.tail1234.ts.net/link'));
console.log(describeRoute('ws://100.101.102.103:7777'));

console.log(consentWords({ hostName: 'Kitchen computer', role: 'control' }));
console.log(pairingView({ phase: 'compare', hostName: 'Kitchen computer', words: 'coast comet' }));
console.log(linkWords('offline', 'Kitchen computer'));
console.log(qrMatrix('hello').length, 'rows');

使用节点运行时输出 :

code 1
work
busy
Tailscale
Private network
Pair with Kitchen computer? This device will be able to see and change things on it, until you remove it there.
{
  phase: 'compare',
  title: 'Check Kitchen computer shows these two words, then say yes there.',
  words: 'coast comet'
}
Can't reach Kitchen computer right now. This device keeps trying by itself.
25 rows

在反应中, useSignIn 将整个工作表从3个呼叫推进到您的后端:

import { useSignIn } from '@byokit/ui';
import type { AccountView } from '@byokit/ui';

// Your back end's routes; the hook only needs these three calls.
declare const api: {
  account(): Promise<AccountView | null>;
  signIn(body?: { via?: 'code'; fresh?: boolean }): Promise<unknown>;
  cancel(): Promise<unknown>;
};

export function useChatGptSheet() {
  const s = useSignIn({ read: () => api.account(), start: (b) => api.signIn(b), cancel: () => api.cancel() });
  // s.phase: what to draw. s.code / s.url: what to show. s.start({ via: 'code' }): "Having trouble? Use a code instead".
  // s.cancel(), s.close(), s.keepWork(): the sheet's buttons. Leave `start` out when something else starts the
  // sign-in: the sheet then only watches, and nothing begins as it opens.
  return s;
}

API 一览

入口点 : @byokit/ui (一切,包括反应钩), @byokit/ui/phase, (中文(简体) ), @byokit/ui/route, (中文(简体) ), @byokit/ui/link, (中文(简体) ), @byokit/ui/kits, (中文(简体) ), @byokit/ui/steps, (中文(简体) ), @byokit/ui/connect 财务报告和审定财务报表 @byokit/ui/accounts (无反应依赖).

登录阶段

phaseOf() 翻转你的后端报告 @byokit/accounts view() 加账户是否签名) 进入相位以绘制 :

phaseOf() 财务报告和审定财务报表 stepOf() 也来自 @byokit/ui/phase,没有反应依赖.

路线

describeRoute(url, kind?) (另见: @byokit/ui/route,没有反应)将拨号地址的路线命名为 组合或设置屏幕。 过 tailscale, (中文(简体) ), direct, (中文(简体) ), private,或 lan 当知道(图) @byokit/discover是因为 tailscale-direct 改为 direct),没有出处,100.64/10读作私语 网络而不是假设为Tailscale,其他主范围读作同为Wi-Fi.

routeChoices() (相同的条目,没有React)是登机路由列表的一个单词表: { code, title, sentence, needs } 按建议顺序排列的每条路线,一个超集 @byokit/discover是因为 Via (也涵盖 临时公共链接和您自己的服务器 reach() 没有探测器. recommend() 从同一包 带 sentence 财务报告和审定财务报表 needs 从这里,只增加可用性.

connectedWords(hostName, url?, kind?) (相同的条目)是消费者制作的连接线: 计算机 刚刚拨打的路线(Connected to Kitchen computer - same Wi-Fi.),或平原 (Connected to Kitchen computer.(中文(简体) ) 当没有路线可以命名时.

import { routeChoices } from '@byokit/ui/route';

console.log(routeChoices().map((c) => `${c.title}: ${c.sentence}`));

连接账户

connectView(routes, step?) (另见: @byokit/ui/connect,无 react)从 工具箱发现的路径(D18 in) docs/runtime-kits.md: 通过 @byokit/accounts routes(host) 财务报告和审定财务报表 @byokit/openclaw routes(facts) 在一起,没有被过滤。 每一个路线都列出,没有的路线也列在这些团体中 (空的漏出的东西):

计费决定了小组, 从来没有路线 offer 单独: API、 云、 本地、 服务器、 自由行或未知行可以 永远不要在计划中间坐着 每个行都有 billingWords ("使用您的 ChatGPT 计划","每个使用权限给您的 OpenAI 账户“”, method ("用代码签名")和 status (每作好一次)加 offered, (中文(简体) ), ready 财务报告和审定财务报表 does数字 : signin, (中文(简体) ), key, (中文(简体) ), setup (该应用程序本身的云、本地或服务器形式)或 unavailable。仅复制视图 这些字段,所以在一条路线上的证书是永远无法到达的;其中没有任何一个字能命名为提供者.

import { connectStep, connectView, signInFor } from '@byokit/ui/connect';
import { routes } from '@byokit/accounts';

declare const api: { account(id: string): Promise<null>; signIn(id: string, body?: object): Promise<void>; cancel(id: string): Promise<void> };
const step = connectStep({ at: 'list' }, { type: 'pick', key: 'accounts/openai:code' });
const view = connectView(routes({ platform: 'browser' }), step);
// view.groups → the list; view.chosen.row.does === 'signin' → draw the sign-in sheet:
const options = signInFor(view, { read: (row) => api.account(row.id), start: (row, body) => api.signIn(row.id, body), cancel: (row) => api.cancel(row.id) });

关键路线 chosen.key 已存在的 keyView 卡片,标注其计费("你的计划中的钥匙"或"钥匙") (每用一次充电)”);将输入直接提交装箱并只发送 { type: 'result', result }键 用于若干工作空间的@byokit/accounts add 答题 workspaces) 发送 result: 'workspace'数字 : 列出这些工作空间,然后 submit 又是和那个被选中的. useConnect({ routes, read, start?, cancel }) 在 React 中保留此步骤并返回视图 pick, (中文(简体) ), back, (中文(简体) ), act 财务报告和审定财务报表 signIn的选项 useSignIn 在按键的工作表中 chosen.row.key。 。 。 .

账户行

accountRows(accounts, room, now, windows?) (另见: @byokit/ui/accounts,没有反应)翻转账户列表和房间阅读 各入一行:账户的提供者和个人姓名(ChatGPT · Work然后计划 左边的房间Plus · 72% left this week) (中文(简体) ). 一行也载着 state, (中文(简体) ), billing, (中文(简体) ), low (房间在20%左右, 包括20个,对一个未知的房间来说永远不真实),如果有帮助的话 action数字 : sign_in 签字退出或 账户过期, wait 加减 until 复入一休息时. accountRows 只读它命名的字段, 所以一个账户的证书 从来没有达到一行。 还没有准备好的一行 显示自己的诚实("检查..."), 取而代之的是"蹲下","不签入","再签入","不在你的计划"等.

过 windows,账户的 windowsView(reading, now) 从 @byokit/usage/view作为第四个论点和准备 也带行 windows (每个使用窗口,最紧: Week: 72% left 与 resets in 4d和 asOf (单位:千美元)Read 2 minutes ago,或 Read 2 days ago (stale) )). ). 重置已经过期的窗口已读取 Session: reset since this reading,没有百分比或倒计时, 和房间线 Reset since this reading。一行僵硬是永远不会 low; 没有自己的读取 时间,比如开窗室, 显示它的回放和否 asOf从来没有化妆的年龄.

AccountsSource 是一个应用程序从自己的后端填充的形状—— accounts(), (中文(简体) ), room(account) 选择 windows(account) - 和 rowsOf(source, now) 等待他们,并建造同样的一行; @byokit/accounts list() 并且一个房间的阅读 适合每个成员一行. nameSuggestions(email, taken, provider?) 从电子邮件的本地部分提供最多三个未取入的账户名称 (重复处理的案件不敏感地反对 taken),倒回提供者的名字;电子邮件本身从未提供.

import { accountRows, nameSuggestions, type Account, type Room } from '@byokit/ui/accounts';

declare const list: () => readonly Account[];
declare const reading: (account: Account) => Room;
const rows = accountRows(list(), reading, Date.now());
// rows → [{ title: 'ChatGPT · Work', detail: 'Plus · 72% left this week', state: 'ready', low: false, ... }]
console.log(nameSuggestions('[email protected]', rows.map((r) => r.title)));

在反应中, useAccounts(source) 使这些行保持活(refresh() 重新阅读; remove(id) 删除通过 后端甚至中回倒行后 useModelPicker(source) 让拾跑者活着 (单位:千美元)select() 立即标记选择,并将其保存在刷新处. accountsSource(accounts, member, room?) 从直播中填充源 @byokit/accounts 委员和 cliSource(cli, room?) 从现场 cliAccounts() 工具包,每个成员各有一行;开元适配器待O14:

import { accountsSource, cliSource, useAccounts, useModelPicker } from '@byokit/ui';
import type { Accounts } from '@byokit/accounts';
import { cliAccounts } from '@byokit/accounts/cli';
import type { Account, Room } from '@byokit/ui/accounts';

declare const accounts: Accounts<any, number>;
declare const cli: ReturnType<typeof cliAccounts>;
declare const reading: (account: Account) => Room;
const fromMember = accountsSource(accounts, 1, reading);
const fromCli = cliSource(cli, reading);

export function useAccountList() {
  return useAccounts(fromCli); // { rows, ready, error, refresh, remove }
}
export function useRunPicker() {
  return useModelPicker(fromMember); // { rows, picker, selection, ready, error, select, refresh, remove }
}

代理登录

agentView(agent, accounts, defaults?, models?) (另见: @byokit/ui/accounts,没有反应)绘制一个代理 代理标签。 应用程序为代理及其运行方式命名( E){ kind, name, ways },每条路由为 connectView 拿着它,它也经过的路线 @byokit/accounts 作为 AgentCapabilities) (中文(简体) ). accounts 实值 list(), (中文(简体) ), defaults 实值 defaults(member, kind) 财务报告和审定财务报表 models 是正在使用的账户 models()。视图包括:

• ways: 经纪人的计划,每个计划都有与之相连接的账户(同样的供应商和账单)和a state数字 : in_use, (中文(简体) ), connected, (中文(简体) ), sign_in,或 unavailable 和路线本身的话.
• count数字 : 1 of 3 enabled计划有现成帐户 付费方式从不计算在内.
• perUse:按使用费和其他方式,连同账单单词列出(OpenAI API key, (中文(简体) ), Charged per use to your OpenAI account) (中文(简体) ). 他们从未为个人提供或选择过.
• rule (单位:千美元)one at a time, (中文(简体) ), inUse 财务报告和审定财务报表 note。一个已签名或休止的已保存账户永远不会被替换为 另外一个: note 说到这里 经纪人就一直没被安排下来 pick 拒绝.
• model: 使用中账户的自有活模式与所保存的被选中的活模式. 列表中保存的模式不再提供 选择无并说.

应用程序保存一个选择 setDefaults(member, { account, model }, kind); 选择另一个账户替换 最后一个.

import { agentView, type Account, type AgentSpec } from '@byokit/ui/accounts';

declare const list: () => readonly Account[];
const codex: AgentSpec = { kind: 'codex', name: 'Codex', ways: [
  { id: 'chatgpt', provider: 'chatgpt', name: 'ChatGPT', company: 'OpenAI', via: 'code', billing: 'subscription', offer: 'default', readiness: 'ready' },
  { id: 'openai:key', provider: 'openai', name: 'OpenAI', company: 'OpenAI', via: 'key', billing: 'api', offer: 'explicit', readiness: 'ready' },
] };
const view = agentView(codex, list(), { account: 'chatgpt' });
// view.count → '1 of 1 enabled', view.note → 'Codex uses [email protected].', view.perUse.ways[0].title → 'OpenAI API key'

配对词

与 @byokit/pair (以原文发表) @byokit/link 最高为0.8.x),从 @byokit/ui/link (没有反应 ) :

• qrMatrix(offer.text, { border }?): 将 QR 配对为一行暗光模块, 并带有宁静的边框 (2,除非给定),用于绘制任何UI.
• qrText(offer.text, { border }?):与半块文字行相同的QR,所以 console.log 在设置脚本中显示 密码电话可以扫描.
• consentWords({ hostName, role, device?, detail? }):对齐前的问题("与厨房电脑对等? 这个设备 你将看见并改变它,直到你把它移出. device 命名配对的一面 这不是应用程序( p)phone,或 browser 网络对接链接; detail 后加一行应用句.
• pairingView({ phase, hostName, words, error, device?, detail? }):扫描,比较两个单词,等待一个是,配对,失败.
• linkWords(status, hostName):链接在一个句子中的状态.

步数行

stepsView() (另见: @byokit/ui/steps,没有反应)将呼叫者自己的步入一行后或 内置检查图,所以一个终端和一个电话显示相同的单词. 每一个步骤都保持ID 它的呼叫者选择 状态在( n)todo, (中文(简体) ), checking, (中文(简体) ), ok, (中文(简体) ), failed),可以显示的平话,以及下一个动作时的动作 失败 . stepsText() 为终端绘制与文本行相同的行;电话在自己的列表中绘制行. 没有自己的步骤失败 fix 说"再试"

import { stepsText, stepsView } from '@byokit/ui/steps';

// Onboarding "Checking this computer": ids are the app's own, states come from its probes.
const rows = stepsView([
  { id: 'runner', state: 'ok', label: 'Agent runner', detail: 'ready' },
  { id: 'agents', state: 'ok', label: 'Agents found', detail: 'Claude Code (signed in) · Codex (needs sign-in)' },
  { id: 'wifi', state: 'ok', label: 'Wi-Fi', detail: 'this computer is at 192.168.1.144' },
  { id: 'tailscale', state: 'todo', label: 'Tailscale', detail: 'not installed on this computer' },
]);
console.log(stepsText(rows, { title: 'Checking this computer' }));

// "Setting up" reuses the same rows with its own ids; a failed check names its fix:
console.log(stepsView([
  { id: 'serve', state: 'failed', label: 'muxr', detail: 'not answering', fix: "muxr didn't start. Press r to retry." },
])[0]);

使用节点运行时输出 :

Checking this computer
  ✓ Agent runner: ready
  ✓ Agents found: Claude Code (signed in) · Codex (needs sign-in)
  ✓ Wi-Fi: this computer is at 192.168.1.144
  ○ Tailscale: not installed on this computer
{
  id: 'serve',
  state: 'failed',
  words: 'muxr: not answering',
  fix: "muxr didn't start. Press r to retry."
}

运行时间包状态

运行时间包状态,从 @byokit/ui/kits (无反应),输入以适应 @byokit/openclaw/device 财务报告和审定财务报表 @byokit/herdr/device 它们是:

• 运行 : runStore(oc) 与 send(message) 财务报告和审定财务报表 stop()· ; runView(state, { words, name }) 至今为止,提供的答复 工具在工作,对于失败的运行,工具包的句子(words 从 @byokit/openclaw/device, (中文(简体) ), name "ChatGPT" (中文(简体) ). OpenClaw 软件 started, (中文(简体) ), thinking 财务报告和审定财务报表 account 接受框架时不改变答复、工具或状态; 运行阶段开始于 send,而不是网关接受.
• 核准: approvalsStore(oc) 保持等待名单的活性(每个等待名单在任何地方或到期时都会得到答复); approvalWords(approval, words, 'Your helper') 问个问题.
• 赫尔德: herdrStore(hd) 保持树和代理 等待一个答案从一溪; herdrTreeView(tree) 以设备箱的状态 agentWords 获取; blockedView(state) 列出每个等候代理.
• 云电脑: cloudStore(source) 保持列表的活性 cloudView(state) 给出行——每台机器的 状态,它的最新副本和它的成本,用简单的话来说——由主机对行中一个动作的回答: 问取来.
• 浏览器登录( I)@byokit/openclaw 第5.17项: signInsStore(oc) 保持请求的实时 与登录的pings; signInSheetView(request, { name, holder }) 给出句子(工具包字词键及其值)、按钮和 聊天芯片,读作"进入",直到一个经核实的登录; 2; livePanelView(state) 说何时绘制相框, 取 输入 显示“ 重新连接 ” , 或者要求确认该人不期望的地址 。 观想问助道无所取.
• 每个店都是 { get, subscribe }: 从 get() 在任何UI中; 第一个 subscribe 开始跟随, 最后一个 未订阅停止 . runStep, (中文(简体) ), approvalsStep 财务报告和审定财务报表 herdrStep 下有减员者.

在反应或反应原生: useRun(oc, { words, name }), (中文(简体) ), useApprovals(oc), (中文(简体) ), useHerdrTree(hd) 财务报告和审定财务报表 useBlocked(hd), (中文(简体) ), 与设备客户端一次性制作( w)useMemo(() => herdrDevice(link), [link])) (中文(简体) ).

你的云计算机

cloudSource(provider, { since, monthly, known, words }) (另见: @byokit/ui/kits,无反应)转云提供者 输入列表中的电话绘图。 云盒是自己的 云盒是你自己的 Provider 和它一样,一个列出更多机器 有他们自己的地址,状态和最新的副本.

cloudStore(source) 保持该列表的活性: 当第一个收听者到达并再次打开时会读取 refresh(),以及 一个动作的答案 落在了要求它. cloudView(state, { now, words }) 给这些行 平面图——每幅图有其标题,用平面字表示状态(图)Awake, (中文(简体) ), Asleep, (中文(简体) ), Waking up…),其最新保存的复制件(Saved copy 2 hours ago),成本($0.50 so far this month · about $5.00 a month),该人可以采取的行动,以及 主持人怎么说的? 上面的一行说,读数是如何走的: Loading your cloud computers…, (中文(简体) ), No cloud computers yet., (中文(简体) ), No cloud computer matches lab. 或者说 Can't read your cloud computers right now.,与 主持人自己在下面说的话.

cloudStep(state, action) 其下有减者; search(text), (中文(简体) ), select(id) 财务报告和审定财务报表 act(id, action) 是什麽 店铺的报价。 在反应或反应土著, useCloud(source) 与这三个人的看法相同.

import { cloudSource, cloudStore, cloudView } from '@byokit/ui/kits';

const provider = {
  list: async () => [{ id: 'sb-1', name: 'desk' }, { id: 'sb-2', name: 'lab' }],
  status: async (ref: { id: string }) => (ref.id === 'sb-1' ? 'on' as const : 'asleep' as const),
  snapshots: async (ref: { id: string }) => (ref.id === 'sb-1' ? [{ id: 'byokit-desk-today', at: new Date(Date.now() - 7_200_000).toISOString() }] : []),
  usage: async () => ({ from: '2026-10-01T00:00:00.000Z', to: new Date().toISOString(), hours: 24, amount: 0.5, currency: 'USD' }),
  wake: async () => {},
  sleep: async () => {},
};

const store = cloudStore(cloudSource(provider, {
  since: '2026-10-01T00:00:00.000Z',
  monthly: () => ({ perMonth: 5, currency: 'USD' }),
}));

const off = store.subscribe(() => {
  const { rows, headline } = cloudView(store.get());
  console.log(headline || 'Your cloud computers');
  for (const r of rows) {
    console.log(`  ${r.title} — ${r.stateWords}${r.copy ? ` · ${r.copy}` : ''}${r.cost ? ` · ${r.cost}` : ''}${r.actionWords ? ` · ${r.actionWords}` : ''}`);
  }
});

使用节点运行时输出 :

Your cloud computers
  desk — Awake · Saved copy 2 hours ago · $0.50 so far this month · about $5.00 a month · Put it to sleep
  lab — Asleep · $0.50 so far this month · about $5.00 a month · Wake it

链接

• 字节: 单体及其其他套件,包括 @byokit/accounts 财务报告和审定财务报表 @byokit/pair。 。 。 .
• 实例: examples/pwa (在浏览器中签名阶段), examples/herdr-kit (讲稿和 herdrStore 从一个电话浏览器, examples/expo (反应土著).
• 变动情况

许可证

阿帕奇2.0 (英语). 见 自由主义 财务报告和审定财务报表 通知。 。 。 .

@byokit/ui/kits 还出口 keyStep(state, action) 财务报告和审定财务报表 keyView(state, words) 明确 API 密钥( 按使用量计) 入门相. 国家是: entry, (中文(简体) ), checking, (中文(简体) ), workspace, (中文(简体) ), ok, (中文(简体) ), invalid, (中文(简体) ), not_included· ; 动作是 submit, (中文(简体) ), edit,以及 result 包的加键结果。 提供OpenClaw工具包 words 函数用于标签和句子。 这些视图从未包含输入的密钥; 直接提交主机 然后清除输入.