Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 yuta
|
01d808381b | ||
|
yuta
|
c43278f785 |
+1
-10
@@ -1,11 +1,2 @@
|
|||||||
TWITTER_RELAY_BASE_URL=http://127.0.0.1:6900
|
TWITTER_RELAY_BASE_URL=http://127.0.0.1:6900
|
||||||
TWITTER_LITE_ORIGIN=https://your-host.your-tailnet.ts.net
|
BIRD_PROFILE_NAME=
|
||||||
TWITTER_LITE_ALLOWED_LOGIN=your-tailscale-login
|
|
||||||
TWITTER_LITE_DB_PATH=/absolute/path/to/twitter-lite/.data/workspace.sqlite
|
|
||||||
# Required when connecting Mastodon; keep this runtime file outside Git.
|
|
||||||
# TWITTER_LITE_CREDENTIAL_KEY_FILE=/absolute/path/to/credential-key
|
|
||||||
TWITTER_LITE_MASTODON_ORIGINS=https://fedi.yutakobayashi.com
|
|
||||||
# Optional home Codex research prototype. Start pnpm codex:serve separately.
|
|
||||||
# TWITTER_LITE_CODEX_URL=ws://127.0.0.1:4500
|
|
||||||
# TWITTER_LITE_CODEX_MODEL=gpt-6-astra
|
|
||||||
# TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
|
|
||||||
|
|||||||
@@ -8,4 +8,3 @@ dist/
|
|||||||
node_modules/
|
node_modules/
|
||||||
playwright-report/
|
playwright-report/
|
||||||
test-results/
|
test-results/
|
||||||
.data/
|
|
||||||
|
|||||||
@@ -1,36 +1,4 @@
|
|||||||
[
|
[
|
||||||
{
|
|
||||||
"date": "2026-09-28",
|
|
||||||
"macrostructure": "communication workbench and append-only journal",
|
|
||||||
"theme": "shadcn base-nova neutral",
|
|
||||||
"scope": "support",
|
|
||||||
"enrichment": "none",
|
|
||||||
"brief": "Compact execution support integrated with common sidebar, editable reply review and journal corrections"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"date": "2026-09-28",
|
|
||||||
"macrostructure": "sidebar-09 Inbox",
|
|
||||||
"theme": "shadcn base-nova neutral",
|
|
||||||
"scope": "inbox",
|
|
||||||
"enrichment": "none",
|
|
||||||
"brief": "Shared navigation with Twitter Lite, inferred-interest article list and reading pane; no manual interest settings"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"date": "2026-09-28",
|
|
||||||
"macrostructure": "sidebar-09 Workbench",
|
|
||||||
"theme": "shadcn base-nova neutral",
|
|
||||||
"scope": "app",
|
|
||||||
"enrichment": "none",
|
|
||||||
"brief": "Base UI icon rail and contextual sidebar with shadcn chat primitives and independent deck columns"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"date": "2026-09-24",
|
|
||||||
"macrostructure": "Workbench",
|
|
||||||
"theme": "custom",
|
|
||||||
"theme_axes": "dark navy / system sans / blue",
|
|
||||||
"enrichment": "none",
|
|
||||||
"brief": "Full-height TweetDeck-style research columns with compact sidebar and modal editors"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"date": "2026-07-26",
|
"date": "2026-07-26",
|
||||||
"macrostructure": "Workbench",
|
"macrostructure": "Workbench",
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
{
|
{
|
||||||
"date": "2026-09-24",
|
"date": "2026-07-26",
|
||||||
"font_stack": "System sans; tokens.css",
|
"font_stack": "Inter / Noto Sans JP / system sans declared in src/styles.css",
|
||||||
"palette": "Dark navy and blue OKLCH tokens",
|
"palette": "CSS custom properties with muted teal hex values",
|
||||||
"motion": "motion-cut",
|
"motion": "motion-cut; no motion library",
|
||||||
"spacing": "named token scale",
|
"spacing": "no named scale",
|
||||||
"framework": "React 19 + TanStack Start + Vite 8",
|
"framework": "React 19 + TanStack Start + Vite 8",
|
||||||
"preserve": ["deck data model", "profile binding", "WebMCP contracts"],
|
"preserve": ["routes", "information architecture", "read-only behavior"]
|
||||||
"override": "User requested TweetDeck-like full UI redesign instead of Garden reader"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
|
||||||
"categories": { "correctness": "off" },
|
|
||||||
"jsPlugins": ["@shadcn/lint"],
|
|
||||||
"rules": {
|
|
||||||
"shadcn/no-raw-colors": "error"
|
|
||||||
},
|
|
||||||
"ignorePatterns": ["src/routeTree.gen.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,52 +1,41 @@
|
|||||||
# Twitter Lite
|
# Twitter Lite
|
||||||
|
|
||||||
Twitter Lite is a personal research deck for Twitter and Mastodon. Create
|
Twitter Lite is an intentional, read-only X reader. It shows content only after
|
||||||
multiple named decks and arrange up to six columns per deck. Each column is
|
you enter a user handle, profile URL, search query, or list URL, follow a
|
||||||
bound to a connection account, so platforms and multiple accounts work side by side.
|
deliberate post detail link, or manually open a valid
|
||||||
|
`/:handle/status/:tweetId` URL.
|
||||||
|
|
||||||
## Scope
|
## Scope
|
||||||
|
|
||||||
- Multiple deck profiles with creation, selection, renaming, and deletion
|
- User timelines and raw X search syntax
|
||||||
- Twitter search, user timeline, and list columns with independent relay accounts
|
- Popular (`Top`) and chronological (`Latest`) search
|
||||||
- Mastodon OAuth, multiple accounts, search, user, list, and hashtag columns
|
- Optional `filter:follows` search
|
||||||
- Native X search syntax, Top/Latest ranking, and optional `filter:follows`
|
- Authenticated account list selection and list timelines from a deliberate URL or ID
|
||||||
- List discovery for the profile selected in the column editor
|
- Infinite cursor pagination with explicit retry
|
||||||
- Column editing, ordering, deletion/undo, manual refresh, and cursor pagination
|
- Deliberate post detail pages with the visible conversation
|
||||||
- Platform logos in column headers distinguish Twitter and Mastodon at a glance
|
- Infinite conversation loading with explicit continuation retry
|
||||||
- SQLite-backed shared decks, revision conflicts, and device-local active selection
|
- Read-only cards for text, media, quotes, articles, and quiet engagement counts
|
||||||
- Temporary views for AI exploration, with explicit save and temporary copies
|
|
||||||
- Server-only encrypted Mastodon credentials and configurable Tailscale owner access
|
|
||||||
- Read-only cards with original-post links, text, media, and quotes
|
|
||||||
- Experimental WebMCP tools to manage decks and read or paginate their columns
|
|
||||||
- Prototype: chat with a resident home Codex beside a live deck, reuse existing
|
|
||||||
decks and write cited Markdown research reports on the host
|
|
||||||
- Saved chat history with deck, account and citation restoration across devices
|
|
||||||
and backend restarts
|
|
||||||
|
|
||||||
Both `/` and `/deck` open the deck workspace. A shared sidebar also opens
|
It intentionally has no home feed, recommendations, trends, notifications,
|
||||||
the article reader at `/inbox`. This UI-only prototype shows articles inferred
|
history, account directory, or write actions.
|
||||||
from past reading, searches, and research, with no manual interest settings.
|
|
||||||
Articles are fictional samples; search and article selection work locally.
|
|
||||||
On mobile, the article list and reader switch views. The shared sidebar’s bottom
|
|
||||||
avatar opens connected-account management from either workspace.
|
|
||||||
|
|
||||||
The shared sidebar also contains `/support` (communication support) and `/journal`
|
Post detail pages show only the selected post and its visible conversation;
|
||||||
(notes and health records). These use fictional conversations and local session
|
they do not add related-post recommendations or an account-discovery surface.
|
||||||
state to preview reply review, scheduling, deferral, recording, and corrections.
|
|
||||||
See [execution support](docs/execution-support.md) for scope and limitations.
|
|
||||||
|
|
||||||
The former SNS reader, search,
|
## Routes
|
||||||
list, user-profile, and conversation routes have been removed. Original-post
|
|
||||||
links on post cards open their source site; SNS reply threads are not rendered
|
|
||||||
inside the app.
|
|
||||||
|
|
||||||
Bluesky/Threads/Nostr connectors are not implemented yet. An external browser
|
- `/` shows the empty user input.
|
||||||
agent can also create and read decks through WebMCP.
|
- `/:handle` shows a user timeline.
|
||||||
|
- `/search?q=<query>&product=<Top|Latest>&following=<boolean>` shows search results.
|
||||||
|
- `/i/lists` shows the authenticated account's lists.
|
||||||
|
- `/i/lists/:listId` shows a list timeline.
|
||||||
|
- `/:handle/status/:tweetId` shows one selected post and its visible conversation.
|
||||||
|
|
||||||
## Requirements and setup
|
## Requirements and setup
|
||||||
|
|
||||||
Use Nix, or Node.js `>=22.12.0` with pnpm `11.9.0`. The committed `.npmrc`
|
Use Nix, or Node.js `>=22.12.0` with pnpm `11.9.0`. The committed `.npmrc`
|
||||||
routes the `@yuta` scope to the public Gitea Packages registry.
|
routes the `@yuta` scope to the public Gitea Packages registry, where Bird
|
||||||
|
`0.10.0` provides the required Top and Latest search interface.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
nix develop -c pnpm install --frozen-lockfile
|
nix develop -c pnpm install --frozen-lockfile
|
||||||
@@ -54,215 +43,48 @@ cp .env.example .env.local
|
|||||||
```
|
```
|
||||||
|
|
||||||
The Nix development shell installs Hallmark's agent skill for the supported
|
The Nix development shell installs Hallmark's agent skill for the supported
|
||||||
local agent targets. Set the runtime configuration in `.env.local` for Vite
|
local agent targets.
|
||||||
development, or export it before running the production server. In addition to
|
|
||||||
the relay URL, configure the Serve origin, owner login, and an absolute SQLite
|
Set `TWITTER_RELAY_BASE_URL` in `.env.local` for Vite development, and set
|
||||||
path from `.env.example`. Mastodon needs an allowed instance and a runtime
|
`BIRD_PROFILE_NAME` when the relay has multiple profiles. Export the same
|
||||||
encryption key file; see [storage, OAuth and restore](docs/storage-and-oauth.md).
|
values in the process environment before `start` or `test:live`:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
export TWITTER_RELAY_BASE_URL=http://127.0.0.1:6900
|
export TWITTER_RELAY_BASE_URL=http://127.0.0.1:6900
|
||||||
|
export BIRD_PROFILE_NAME=
|
||||||
```
|
```
|
||||||
|
|
||||||
The app discovers available account profiles through the relay's `/profiles`
|
Both values are read by server-only code at runtime; neither value nor Bird is
|
||||||
endpoint. Select a profile for each column. There is no global account selector,
|
sent to the browser.
|
||||||
profile cookie, or application-level `BIRD_PROFILE_NAME` default. Requests
|
|
||||||
validate that the bound profile still exists before fetching posts or lists.
|
|
||||||
Bird and relay credentials stay on the server; saved deck definitions include
|
|
||||||
stable connection IDs. The connection metadata resolves Twitter IDs to relay
|
|
||||||
profiles; Mastodon credentials never go to the browser.
|
|
||||||
|
|
||||||
## Commands
|
## Commands
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
nix develop -c pnpm dev
|
nix develop -c pnpm dev
|
||||||
nix develop -c pnpm dev:tailscale
|
nix develop -c pnpm dev:tailscale
|
||||||
nix develop -c pnpm generate:e2e-openapi
|
|
||||||
nix develop -c pnpm lint
|
|
||||||
nix develop -c pnpm lint:ui
|
|
||||||
nix develop -c pnpm typecheck
|
|
||||||
nix develop -c pnpm knip
|
nix develop -c pnpm knip
|
||||||
nix develop -c pnpm test
|
nix develop -c pnpm test
|
||||||
nix develop -c pnpm test:e2e
|
nix develop -c pnpm test:e2e
|
||||||
nix develop -c pnpm test:live
|
nix develop -c pnpm test:live
|
||||||
nix develop -c pnpm build
|
nix develop -c pnpm build
|
||||||
nix develop -c pnpm start
|
nix develop -c pnpm start
|
||||||
nix develop -c pnpm db:generate
|
|
||||||
nix develop -c pnpm codex:serve
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Home Codex research prototype
|
`test:e2e` is intentionally Nix-only and uses the system Chromium supplied by
|
||||||
|
the dev shell. Browser tests are organized under `e2e/`: page object models
|
||||||
|
and fixtures are shared by integration flows and Axe checks for WCAG 2.0/2.1
|
||||||
|
A and AA. `test:live` is an explicit, opt-in smoke test that performs exactly
|
||||||
|
one read-only Top search using the configured relay.
|
||||||
|
|
||||||
Run `codex login` as the host user, then keep `pnpm codex:serve` running separately
|
Development binds to `127.0.0.1` by default. `dev:tailscale` binds to
|
||||||
from the web server. It starts a resident app-server at `ws://127.0.0.1:4500`
|
`0.0.0.0`, so it exposes the app on LAN interfaces as well as Tailscale. Use it
|
||||||
using that user's existing Codex login. The launcher passes a small environment
|
only on a trusted network and obtain the Tailscale address with
|
||||||
allowlist, without the app's database, relay or SNS secret settings. Configured
|
`tailscale ip -4`.
|
||||||
MCP servers are disabled for this process without changing the user's settings.
|
|
||||||
The prototype was developed against Codex CLI 0.156.1; its WebSocket and dynamic
|
|
||||||
tool APIs are experimental.
|
|
||||||
|
|
||||||
Configure the web app with these values in `.env.local` (absolute report path):
|
|
||||||
|
|
||||||
```dotenv
|
|
||||||
TWITTER_LITE_CODEX_URL=ws://127.0.0.1:4500
|
|
||||||
TWITTER_LITE_CODEX_MODEL=gpt-6-astra
|
|
||||||
TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
|
|
||||||
```
|
|
||||||
|
|
||||||
Use the chat on the left while browsing horizontally scrollable deck columns on
|
|
||||||
the right. Messages continue the same Codex thread and include the currently
|
|
||||||
open deck as context. The account selector controls which connections Codex can
|
|
||||||
use. It can inspect saved deck definitions and reuse them as temporary views,
|
|
||||||
as well as create new views. `list_lists(connectionId)` discovers existing
|
|
||||||
Twitter and Mastodon lists for a selected connected account; returned list IDs
|
|
||||||
can be reused in list columns. It uses the same catalog as the manual editor
|
|
||||||
(Twitter requests up to 100 lists; list discovery is not paginated).
|
|
||||||
The default prompt asks Codex to inspect existing decks and the selected
|
|
||||||
accounts' lists before planning new searches, then read relevant list columns
|
|
||||||
for evidence. Follow-ups can reuse catalogs already fetched in the conversation.
|
|
||||||
Manual deck creation and column editing remain
|
|
||||||
available. The backend handles tools even when the browser is closed.
|
|
||||||
Use **新しいチャット** to leave the current conversation and start a fresh Codex
|
|
||||||
thread with your next message. The open deck and host reports remain available.
|
|
||||||
If a turn is running, stop it first. The conversation reset is shared across
|
|
||||||
open devices. **チャット履歴** reopens saved conversations with their account
|
|
||||||
selection, deck and citations; the next message resumes the same Codex thread.
|
|
||||||
SQLite stores conversation snapshots and the active conversation selection.
|
|
||||||
Each turn is limited to 6 columns, 12 upstream requests shared between list
|
|
||||||
discovery and post retrieval (at most 20 posts per fetch), and 15 minutes.
|
|
||||||
The prototype accepts up to 100 messages per backend process.
|
|
||||||
SSE pushes conversation messages, tool activity and generated deck updates to
|
|
||||||
open browsers, without polling.
|
|
||||||
Codex replies render as Markdown, including tables, lists and code. Clicking a
|
|
||||||
cited post link scrolls to its card and briefly highlights it. Loaded cards take
|
|
||||||
priority; otherwise the app shows the post captured during research in a column
|
|
||||||
with matching source and account settings, creating a temporary citation deck
|
|
||||||
when needed. These captured posts are labeled and do not change feed pagination
|
|
||||||
or reveal sensitive content automatically. Other links still open externally;
|
|
||||||
Ctrl/Cmd-click on a citation also opens the original site.
|
|
||||||
Citation metadata stays with the saved conversation across reconnects,
|
|
||||||
follow-up messages and server restarts. Markdown HTML is not executed and
|
|
||||||
Markdown images are rendered as links.
|
|
||||||
Reopening the page receives the latest state and restores the temporary deck.
|
|
||||||
Later updates modify the same temporary view; they do not overwrite saved decks
|
|
||||||
or switch away from another deck you are reading. Use the existing save button
|
|
||||||
to persist a deck. The agent and visible columns currently fetch posts separately.
|
|
||||||
|
|
||||||
Codex writes `<report root>/<run ID>/report.md` using its workspace file tools.
|
|
||||||
The UI displays its host path after validating the file. A conversation or deck
|
|
||||||
edit can finish without producing a report. Citation quality is model output,
|
|
||||||
not independently verified. Report contents remain on the host filesystem;
|
|
||||||
the app DB stores the conversation, thread ID, deck context and citation metadata.
|
|
||||||
|
|
||||||
Browser disconnection does not cancel research; reconnecting restores the latest
|
|
||||||
state through `/api/research/events`, under the same owner access checks as the
|
|
||||||
rest of the app. After a backend restart, unfinished turns appear as interrupted;
|
|
||||||
sending another message resumes the same thread. Before starting that message,
|
|
||||||
the backend checks the resumed thread and interrupts any orphaned active turn.
|
|
||||||
It does not automatically rerun interrupted requests. Files already written remain.
|
|
||||||
Cancellation is explicit. The launcher and report directory must
|
|
||||||
run under a user able to write those files. NixOS DynamicUser service integration
|
|
||||||
and dedicated service credentials are outside this prototype.
|
|
||||||
|
|
||||||
`test:e2e` uses the system Chromium supplied by the Nix dev shell. Playwright
|
|
||||||
integration and Axe accessibility tests live under `e2e/`. A standalone mock
|
|
||||||
HTTP relay exercises the production server-function boundary without contacting
|
|
||||||
X or a personal relay. Orval generates API fixture types from a pinned
|
|
||||||
[twitter-openapi specification](https://github.com/fa0311/twitter-openapi/commit/590dae5c9f8575abc91d3774946bfe6f23960aba).
|
|
||||||
Generated files are committed; run `generate:e2e-openapi` only when changing
|
|
||||||
the pin or selected operations. Runtime requests use Bird.
|
|
||||||
|
|
||||||
`test:live` is an explicit, opt-in smoke test that performs one read-only Top
|
|
||||||
search. For this standalone probe only, `BIRD_PROFILE_NAME` selects the account
|
|
||||||
and `TWITTER_LITE_LIVE_QUERY` overrides the search text.
|
|
||||||
|
|
||||||
## Deck workspace
|
|
||||||
|
|
||||||
The interface uses shadcn/ui's Base UI components and Tailwind CSS v4, with a
|
|
||||||
collapsible sidebar based on
|
|
||||||
[sidebar-09](https://github.com/shadcn-ui/ui/tree/98a1fe67b439324ddc857f47fbdce056600a4329/apps/v4/registry/bases/base/blocks/sidebar-09).
|
|
||||||
The workspace retains compact column headers and independently scrolling post
|
|
||||||
columns. On narrow screens, the sidebar opens as a sheet. Add/edit forms use
|
|
||||||
shadcn dialogs with Escape handling and focus restoration. Column menus contain
|
|
||||||
editing, ordering, and deletion; refresh stays available directly in each header.
|
|
||||||
|
|
||||||
Shared UI components live in `src/components/ui`; `components.json` configures
|
|
||||||
the registry and theme entrypoint. Chat uses MessageScroller, Message, Bubble,
|
|
||||||
Marker and InputGroup while retaining the existing Codex transport and saved
|
|
||||||
conversation model. The icon rail switches between chat and deck management;
|
|
||||||
closing the mobile sheet or crossing the desktop breakpoint preserves chat
|
|
||||||
drafts, selected accounts and live deck updates. Theme colors are declared in
|
|
||||||
`src/ui.css`.
|
|
||||||
|
|
||||||
`pnpm lint` runs Biome and the UI checks. `pnpm lint:ui` runs
|
|
||||||
[@shadcn/lint](https://github.com/shadcn-ui/lint) through Oxlint. The
|
|
||||||
`shadcn/no-raw-colors` rule in `.oxlintrc.json` requires theme colors in JSX and
|
|
||||||
class helpers, including shared UI components. Layout values remain available
|
|
||||||
for the sidebar and deck. Biome continues to handle formatting and general
|
|
||||||
code checks. Knip checks application usage while retaining the public exports
|
|
||||||
of registry components for composition. Additional design rules can be configured
|
|
||||||
in `.oxlintrc.json`;
|
|
||||||
see the [available rules](https://github.com/shadcn-ui/lint#rules).
|
|
||||||
|
|
||||||
Create a deck for an investigation, then add columns for each perspective.
|
|
||||||
Choose a connected account and one of its supported sources. Account
|
|
||||||
changes affect only the edited column. Matching source conditions and accounts
|
|
||||||
share the query cache; different profiles never share posts or cursors.
|
|
||||||
|
|
||||||
Saved decks live on the server and refresh across devices on focus and while
|
|
||||||
visible. Conflicting revisions are rejected. Only the active deck is rendered
|
|
||||||
and fetched; posts and cursors are not archived. The active selection stays
|
|
||||||
local to the device.
|
|
||||||
|
|
||||||
AI-created decks open as temporary views reconstructed from their saved chat
|
|
||||||
on another device or after reload. Save a view to add it to the independent deck
|
|
||||||
library, or make a temporary copy of a saved deck to experiment.
|
|
||||||
Other unsaved temporary edits disappear on reload or navigation, including OAuth redirects.
|
|
||||||
Existing version-2 browser decks have an explicit import action; invalid older
|
|
||||||
data is left untouched. See [the deck model and persistence contract](docs/research-decks.md).
|
|
||||||
|
|
||||||
## WebMCP
|
|
||||||
|
|
||||||
A WebMCP-enabled browser exposes `list_connections`, `list_decks`, `get_deck`,
|
|
||||||
`set_deck`, `save_deck`, `select_deck`, `delete_deck`, `get_column_posts`, and
|
|
||||||
`load_more_column` on both deck routes. Discover connection IDs first.
|
|
||||||
`set_deck` creates a temporary view when `deckId` is omitted. `save_deck`
|
|
||||||
persists it. Replacing or deleting a saved deck requires its `expectedRevision`.
|
|
||||||
|
|
||||||
Enable `chrome://flags/#enable-webmcp-testing`, restart Chrome, and open the
|
|
||||||
local app. Use the
|
|
||||||
[Model Context Tool Inspector](https://developer.chrome.com/docs/ai/webmcp#imitate_agent_chat_with_the_inspector_extension)
|
|
||||||
to invoke tools. Registration uses native `document.modelContext` through
|
|
||||||
`usewebmcp`; there is no polyfill or external MCP transport. Unsupported
|
|
||||||
browsers retain the manual deck UI. See [tool contracts and verification](docs/webmcp-prototype.md).
|
|
||||||
|
|
||||||
Development and `dev:tailscale` both bind to `127.0.0.1`. Native WebMCP needs a secure context;
|
|
||||||
use a Tailscale Serve HTTPS origin for remote access, and allow its exact
|
|
||||||
hostname through `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` in the Vite process
|
|
||||||
environment. HTTP and HTTPS origins have separate localStorage.
|
|
||||||
|
|
||||||
Set `TWITTER_LITE_ORIGIN` to the exact public HTTPS origin (no trailing slash).
|
|
||||||
The default `TWITTER_LITE_AUTH_MODE=tailscale` requires
|
|
||||||
`TWITTER_LITE_ALLOWED_LOGIN` to be your Tailscale login. The app requires
|
|
||||||
Serve's `Tailscale-User-Login` header and rejects other users. Keep the backend
|
|
||||||
on localhost: the trusted Serve proxy supplies identity. Tagged clients do not
|
|
||||||
provide user identity. Missing configuration fails closed; direct browser access
|
|
||||||
to localhost does not supply the required identity. Playwright supplies an
|
|
||||||
explicit fixture identity to its isolated test server.
|
|
||||||
|
|
||||||
For a private, tailnet-only reverse proxy such as Traefik, explicitly set
|
|
||||||
`TWITTER_LITE_AUTH_MODE=none` to disable application identity checks. This mode
|
|
||||||
does not require `TWITTER_LITE_ALLOWED_LOGIN` or Tailscale identity headers;
|
|
||||||
anyone who can reach that proxy can use the app and its connected accounts and
|
|
||||||
Codex. Bind the backend to loopback or its Tailscale address and restrict proxy
|
|
||||||
access to the tailnet.
|
|
||||||
Both modes require the exact configured `Origin` for state-changing requests,
|
|
||||||
including chat and deck mutations. Missing origin or an unknown auth mode
|
|
||||||
fails closed. Mastodon OAuth uses the configured public origin for its callback.
|
|
||||||
|
|
||||||
## NixOS service
|
## NixOS service
|
||||||
|
|
||||||
The flake provides a production package and a NixOS module:
|
The flake provides both a production package and a NixOS module. Import the
|
||||||
|
module and configure the relay:
|
||||||
|
|
||||||
```nix
|
```nix
|
||||||
{
|
{
|
||||||
@@ -278,10 +100,7 @@ The flake provides a production package and a NixOS module:
|
|||||||
services.twitter-lite = {
|
services.twitter-lite = {
|
||||||
enable = true;
|
enable = true;
|
||||||
relayBaseUrl = "http://127.0.0.1:6900";
|
relayBaseUrl = "http://127.0.0.1:6900";
|
||||||
publicOrigin = "https://home.example-tailnet.ts.net";
|
# profileName = "default";
|
||||||
allowedLogin = "your-tailscale-login";
|
|
||||||
mastodonOrigins = [ "https://fedi.yutakobayashi.com" ];
|
|
||||||
credentialKeyFile = "/var/lib/secrets/twitter-lite-key";
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
@@ -290,15 +109,15 @@ The flake provides a production package and a NixOS module:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
The service listens on `127.0.0.1:3000`. Set
|
The service listens on `127.0.0.1:3000` by default. Set
|
||||||
`services.twitter-lite.port` to change the port; the host remains loopback.
|
`services.twitter-lite.host` or `services.twitter-lite.port` to change the
|
||||||
The module reserves `/var/lib/twitter-lite` with mode 0700 for persistent state.
|
listener. The package can also be built directly with `nix build`.
|
||||||
`credentialKeyFile` can reference a runtime secret file for SNS credentials;
|
|
||||||
systemd loads it as a credential, separate from the database and Nix store.
|
|
||||||
Profiles are selected in column definitions, not service options.
|
|
||||||
The package can also be built directly with `nix build`.
|
|
||||||
|
|
||||||
## Reliability
|
## Reliability
|
||||||
|
|
||||||
Bird uses X's internal GraphQL operations through the configured relay. Query
|
Bird uses X's internal GraphQL operations through the configured relay. Query
|
||||||
IDs and response shapes can change without notice.
|
IDs and response shapes can change without notice.
|
||||||
|
|
||||||
|
Conversation pages use Bird's current per-page chronological ordering. Keeping
|
||||||
|
X's original ranked branch order is deferred until Bird exposes that order
|
||||||
|
without expanding the relay surface.
|
||||||
|
|||||||
+3
-19
@@ -8,25 +8,9 @@
|
|||||||
"!!**/test-results"
|
"!!**/test-results"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"formatter": {
|
"formatter": { "enabled": true, "indentStyle": "space" },
|
||||||
"enabled": true,
|
"linter": { "enabled": true, "rules": { "recommended": true } },
|
||||||
"indentStyle": "space"
|
|
||||||
},
|
|
||||||
"linter": {
|
|
||||||
"enabled": true,
|
|
||||||
"rules": {
|
|
||||||
"recommended": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"javascript": {
|
"javascript": {
|
||||||
"formatter": {
|
"formatter": { "quoteStyle": "single", "semicolons": "asNeeded" }
|
||||||
"quoteStyle": "single",
|
|
||||||
"semicolons": "asNeeded"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"css": {
|
|
||||||
"parser": {
|
|
||||||
"tailwindDirectives": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://ui.shadcn.com/schema.json",
|
|
||||||
"style": "base-nova",
|
|
||||||
"rsc": false,
|
|
||||||
"tsx": true,
|
|
||||||
"tailwind": {
|
|
||||||
"config": "",
|
|
||||||
"css": "src/ui.css",
|
|
||||||
"baseColor": "neutral",
|
|
||||||
"cssVariables": true
|
|
||||||
},
|
|
||||||
"iconLibrary": "lucide",
|
|
||||||
"aliases": {
|
|
||||||
"components": "#/components",
|
|
||||||
"utils": "#/lib/utils",
|
|
||||||
"ui": "#/components/ui",
|
|
||||||
"lib": "#/lib",
|
|
||||||
"hooks": "#/hooks"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
# Execution support prototype
|
|
||||||
|
|
||||||
The shared sidebar opens `/support` (連絡) and `/journal` (記録), alongside
|
|
||||||
リーダー and Twitter Lite. These are UI-only prototypes with fictional contacts
|
|
||||||
and in-memory state. Reloading or leaving the route resets the prototype state.
|
|
||||||
No messages, calendar events, medical records, or Rensheng pages are written.
|
|
||||||
|
|
||||||
## Reference and scope
|
|
||||||
|
|
||||||
The functional reference is the user's life brief
|
|
||||||
`briefs/2026-09-25-executive-support-design.md`, together with the public
|
|
||||||
[Beeper Copilot concept](https://beeper-copilot-lp.vercel.app/).
|
|
||||||
The prototype adopts the execution flows, not private facts from the life repo
|
|
||||||
or the reference site's deployment and privacy claims.
|
|
||||||
|
|
||||||
- Communication: unified conversations, a maximum of three initial actions,
|
|
||||||
deferral, waiting, dismissal, and a full list; source messages, summaries,
|
|
||||||
editable reply styles, explicit review, and simulated sending.
|
|
||||||
- Scheduling: choosing a candidate and reviewing a simulated calendar entry.
|
|
||||||
- Context: person notes with links back to the sample conversation and a local
|
|
||||||
record of the simulated outcome. No permanent trait or goal is inferred.
|
|
||||||
- Journal: free notes, resumption points, user-entered medication and weight
|
|
||||||
records; occurrence and recording times, append-only corrections, and a
|
|
||||||
selectable summary preview for a consultation.
|
|
||||||
|
|
||||||
The intended memory boundary remains Rensheng: execution events can eventually
|
|
||||||
be compiled into durable context after source comparison and user correction.
|
|
||||||
This prototype neither implements that compiler nor creates a second personal
|
|
||||||
context database. Missing records remain unknown; there are no medication,
|
|
||||||
dose, weight-target, or treatment recommendations.
|
|
||||||
|
|
||||||
The UI uses existing shadcn Base UI components and neutral theme tokens.
|
|
||||||
Shared account management continues to use the existing connection system;
|
|
||||||
the new communication and journal prototypes do not consume those accounts.
|
|
||||||
@@ -1,288 +0,0 @@
|
|||||||
# Home-agent research
|
|
||||||
|
|
||||||
## Product boundary
|
|
||||||
|
|
||||||
The user starts a research task from the deck workspace. A home agent chooses
|
|
||||||
sources, opens a temporary deck, reads posts and writes a cited Markdown report
|
|
||||||
on the host. Twitter Lite provides the connected-account and deck tools; the
|
|
||||||
agent owns research and report writing.
|
|
||||||
|
|
||||||
SQLite stores conversation snapshots and the selected conversation alongside
|
|
||||||
saved deck definitions and account credentials. Reports remain host Markdown;
|
|
||||||
their contents are not copied into the DB. Adding a temporary deck to the saved
|
|
||||||
deck library remains an explicit user action.
|
|
||||||
|
|
||||||
## Proposed first implementation
|
|
||||||
|
|
||||||
1. Add a topic and connected-account selection form to the deck workspace.
|
|
||||||
2. Start one home Codex task with a dedicated output directory.
|
|
||||||
3. Supply tools for connection discovery, temporary deck creation and bounded
|
|
||||||
post retrieval using the existing validators and platform services.
|
|
||||||
4. Save conversation state and the latest generated deck in SQLite. SSE
|
|
||||||
sends the current snapshot on connection and pushes subsequent changes.
|
|
||||||
Reopened pages restore the temporary view; later definitions update the same
|
|
||||||
view. Closing that view does not delete the report or stop the agent.
|
|
||||||
5. Have the agent write `report.md` in its per-task directory with original post
|
|
||||||
URLs, collection limits and failed sources. Show progress and the output
|
|
||||||
location in the app. No report-history UI or scheduled execution yet.
|
|
||||||
|
|
||||||
Following the user's WebSocket question, the proposed transport is a persistent
|
|
||||||
`codex app-server --listen ws://127.0.0.1:4500` connected to the Node backend,
|
|
||||||
with dynamic tools handled by that backend. WebSocket transport is currently
|
|
||||||
experimental in the official documentation. Native browser WebMCP is not a remote
|
|
||||||
MCP endpoint: reuse application operations rather than assuming that host Codex
|
|
||||||
can directly invoke a user's browser tools. No externally exposed Codex socket
|
|
||||||
is necessary.
|
|
||||||
|
|
||||||
## Decisions
|
|
||||||
|
|
||||||
- Confirmed: use home Codex, rather than a separate OpenAI API integration.
|
|
||||||
- Confirmed: report artifacts are host Markdown files written by the agent.
|
|
||||||
- Prototyping: resident app-server over loopback WebSocket, using the existing
|
|
||||||
Codex login and model `gpt-6-astra`. No NixOS service migration in this step.
|
|
||||||
- Configure a dedicated report root and Codex authentication store. Preserve
|
|
||||||
refreshed authentication for the service; do not put credentials in prompts
|
|
||||||
or copy application secrets into the child environment.
|
|
||||||
- Keep manual execution bounded and cancellable. After restart, unfinished
|
|
||||||
conversations restore as interrupted. The next user message resumes the same
|
|
||||||
Codex thread after stopping any surviving orphan turn. No automatic rerun or
|
|
||||||
durable job queue is added.
|
|
||||||
|
|
||||||
## Conversation workspace
|
|
||||||
|
|
||||||
The next iteration places a persistent chat beside the horizontally scrollable
|
|
||||||
deck. The browser displays user messages, public Codex agent messages and tool
|
|
||||||
activity from app-server events. Each follow-up continues the existing thread
|
|
||||||
and supplies the deck currently open in that browser. Internal reasoning is not
|
|
||||||
part of this transcript.
|
|
||||||
|
|
||||||
The agent can list and inspect saved decks within the selected account scope,
|
|
||||||
then reuse their columns in a temporary view. Saved definitions remain unchanged
|
|
||||||
until the user saves a view. Existing manual creation, selection, column editing
|
|
||||||
and saving stay available alongside the chat.
|
|
||||||
|
|
||||||
`list_lists(connectionId)` also exposes the manual editor's Twitter and Mastodon
|
|
||||||
list catalogs. Discovery is read-only and checks the selected connected account
|
|
||||||
before contacting either provider. Returned list IDs can be used directly in
|
|
||||||
list-column sources. Discovery and post retrieval share the per-turn budget of
|
|
||||||
12 upstream calls, including failures. Twitter requests up to 100 entries through
|
|
||||||
the existing catalog service; discovery has no pagination yet.
|
|
||||||
For Twitter, the agent prefers the selected connected account named `account2`
|
|
||||||
for new columns and retrieval, resolving its ID through `list_connections`.
|
|
||||||
It uses another selected account when `account2` is unavailable, lacks access
|
|
||||||
(for example to a private list), or the user explicitly requests it. Existing
|
|
||||||
columns retain their account bindings.
|
|
||||||
|
|
||||||
The default agent instructions require this discovery at the start of research,
|
|
||||||
before planning new searches. Relevant existing lists become candidate sources;
|
|
||||||
their posts are retrieved through the regular column tool. Catalogs already read
|
|
||||||
in the conversation can be reused, and explicit user instructions take priority.
|
|
||||||
|
|
||||||
A conversational turn need not produce a research report: discussing a query or
|
|
||||||
editing a deck is a valid completed turn. Reports, when requested, remain host
|
|
||||||
Markdown files. SSE snapshots include the conversation and latest generated
|
|
||||||
deck so reopening a page restores both without restarting work or polling.
|
|
||||||
|
|
||||||
The chat header can reset an idle conversation. The next message starts a new
|
|
||||||
Codex thread while retaining the browser's current deck as context. Reset pushes
|
|
||||||
an empty conversation to every subscriber, preserves host reports and does not
|
|
||||||
delete deck definitions. Active turns must be stopped first; a stale reset must
|
|
||||||
not clear a newer conversation started on another device. The history selector
|
|
||||||
can reopen previous conversations while idle, restoring the generated deck (or
|
|
||||||
last supplied deck context), selected accounts and citations. Selection is shared
|
|
||||||
through SSE. Stale selections are rejected just like stale resets.
|
|
||||||
|
|
||||||
`research_sessions` stores the full public conversation snapshot and summary
|
|
||||||
metadata; `research_state` stores the selected conversation, including an explicit
|
|
||||||
blank selection for new chat. State is written before starting Codex and before
|
|
||||||
publishing updates. DB write failures stop research and surface a save error.
|
|
||||||
On restore, formerly active sessions become interrupted. `thread/resume` restores
|
|
||||||
Codex's persisted dynamic tools. Recovery suppresses old turn notifications and
|
|
||||||
tool calls, interrupts a still-running old turn, then starts the new message.
|
|
||||||
|
|
||||||
## Markdown and source navigation
|
|
||||||
|
|
||||||
Assistant messages use react-markdown with remark-gfm. Public tool messages and
|
|
||||||
user input remain plain text. Markdown links retain their original URLs; a
|
|
||||||
regular click on a known post navigates within the deck, while modified clicks
|
|
||||||
and unrelated URLs retain external navigation.
|
|
||||||
|
|
||||||
Successful agent post fetches capture the exact column definition and a public
|
|
||||||
post projection in the saved conversation. The projection excludes raw
|
|
||||||
provider responses, HTML, media and account credentials. References are retained
|
|
||||||
across turns, updated per source/account/post identity and retained in chat history.
|
|
||||||
The agent is instructed to cite exact returned post URLs in Markdown.
|
|
||||||
|
|
||||||
Navigation prefers a loaded card, then a workspace column with the same source
|
|
||||||
and connection. Missing sources open a one-column temporary deck. An unloaded
|
|
||||||
reference is displayed as a labeled research-time post without altering the
|
|
||||||
query cache or pagination. Cards receive focus, scroll into view and briefly
|
|
||||||
highlight; reduced-motion settings are respected and sensitive content stays
|
|
||||||
collapsed.
|
|
||||||
|
|
||||||
## Verification
|
|
||||||
|
|
||||||
- Protocol tests for dynamic-tool requests, failures, cancellation and process
|
|
||||||
exit, with no real model usage in ordinary tests.
|
|
||||||
- Tool tests for selected connection scope, source validation, pagination limits
|
|
||||||
and temporary-only deck creation.
|
|
||||||
- Browser test: start task, show generated temporary deck, retain manual save,
|
|
||||||
display progress and completion or failure.
|
|
||||||
- Opt-in real home Codex run: retrieve real posts and verify a readable report
|
|
||||||
exists at the reported host location with original-source links.
|
|
||||||
|
|
||||||
## Deployment boundary
|
|
||||||
|
|
||||||
The currently used UM790-Pro runs the development server. The existing dotnix
|
|
||||||
Twitter Lite service is configured on B450M-Pro4 with obsolete options and a
|
|
||||||
different public route. Do not apply that configuration to this task implicitly.
|
|
||||||
Service migration and backup scheduling need a concrete host configuration;
|
|
||||||
they are separate from validating this first agent workflow.
|
|
||||||
|
|
||||||
## References
|
|
||||||
|
|
||||||
- [Codex App Server](https://learn.chatgpt.com/docs/app-server)
|
|
||||||
- [Codex authentication](https://learn.chatgpt.com/docs/auth)
|
|
||||||
- [Existing WebMCP contract](../webmcp-prototype.md)
|
|
||||||
|
|
||||||
## Web-to-resident-Codex examples inspected
|
|
||||||
|
|
||||||
Research on 2026-09-24; README and implementation inspection only, not runtime
|
|
||||||
validation or adoption of these projects.
|
|
||||||
|
|
||||||
- [Redex](https://github.com/ladnir/redex/tree/a8032c49d1c9cc79db9679ad06b94a72defe3ec7):
|
|
||||||
its Python HTTP/SSE bridge connects to a standalone Codex app-server through
|
|
||||||
WebSocket. `src/redex/app_server.py` initializes the connection and sends
|
|
||||||
`thread/resume` then `turn/start`; `src/redex/bridge.py` has a long-lived
|
|
||||||
`LiveEventHub` separate from browser SSE connections. Desktop shared-runtime
|
|
||||||
integration in this project's README requires its Codex fork; standalone
|
|
||||||
WebSocket usage does not. The bridge suppresses the Origin header on its
|
|
||||||
server-side connection because Codex rejects browser-style Origin headers.
|
|
||||||
- [Pedregoneric/codex-webui](https://github.com/Pedregoneric/codex-webui/blob/5cbc718004c77657812f7151ae708e68cc6b398c/server.js):
|
|
||||||
a small personal/Tailscale-oriented example. One `CodexBridge` owns a long-lived
|
|
||||||
stdio child. Browser SSE close removes that subscriber, without killing Codex;
|
|
||||||
gateway shutdown does kill the child. This demonstrates that browser lifetime
|
|
||||||
independence is not itself a WebSocket feature. Its authentication is separate
|
|
||||||
from the existing Tailscale identity boundary used by Twitter Lite.
|
|
||||||
- [OpenAI's Codex Web architecture](https://openai.com/index/unlocking-the-codex-harness/):
|
|
||||||
the February 2026 engineering article describes HTTP/SSE from browser to
|
|
||||||
backend, and a worker maintaining a long-lived app-server connection. The
|
|
||||||
backend owns task state so browser disconnection does not stop work. This is an
|
|
||||||
architectural reference, not evidence of today's exact hosted implementation.
|
|
||||||
- [nathan-chappell/codex_web_ui](https://github.com/nathan-chappell/codex_web_ui/tree/79be149c427040d7fbb94246d841f705ab53ce9e):
|
|
||||||
the launcher starts a detached app-server on a private Unix socket. Its
|
|
||||||
TypeScript bridge performs a WebSocket upgrade over that socket. Browser
|
|
||||||
commands use HTTP RPC and events use SSE. Disconnecting an SSE subscriber does
|
|
||||||
not stop the bridge or Codex. Relevant files: `bin/codex-web-ui.js`,
|
|
||||||
`server/codexBridge.ts`, `server/appApi.ts`, `server/eventHub.ts`.
|
|
||||||
- [seo-rii/codex-webui](https://github.com/seo-rii/codex-webui/tree/2619d78c55c6095aa8b9a7a1412fd0c7abf5e564):
|
|
||||||
the Rust gateway connects directly over Unix-socket WebSocket in current code,
|
|
||||||
despite older docs mentioning a proxy. It separates browser disconnect from
|
|
||||||
gateway-restart handoff and normal shutdown. Request-ID deduplication avoids
|
|
||||||
executing replayed mutations twice. Its dynamic-tool response handling is a
|
|
||||||
useful reference, but we did not find custom SNS-style tool registration to
|
|
||||||
reuse. Relevant files: `backend/src/codex_app_server.rs`,
|
|
||||||
`backend/src/ws_transport_support.rs`, `backend/src/runtime_request_support.rs`.
|
|
||||||
|
|
||||||
The implementation should distinguish three events: browser disconnection,
|
|
||||||
Twitter Lite backend restart, and Codex process restart. A WebSocket connection
|
|
||||||
alone does not guarantee recovery across any of them. Agent tool requests should
|
|
||||||
be handled by the backend so research can continue without the initiating tab.
|
|
||||||
|
|
||||||
## Prototype verification
|
|
||||||
|
|
||||||
- Implemented a loopback WebSocket client, background run controller, bounded
|
|
||||||
account/deck/post tools, and a sidebar research dialog. No schema migrations.
|
|
||||||
- 261 unit/component tests passed (one existing opt-in live test skipped).
|
|
||||||
- Relevant Playwright coverage: 17 desktop cases, 6 mobile WebMCP cases, and
|
|
||||||
11 mobile deck/research cases passed. The new sidebar action initially
|
|
||||||
overlapped another mobile control; it now uses the existing compact pattern.
|
|
||||||
- Typecheck, lint, knip, and production build passed.
|
|
||||||
- A real Codex 0.156.1 / gpt-6-astra run started from the browser. The browser
|
|
||||||
was closed, reopened, and observed the task continuing to completion.
|
|
||||||
Local verification supplied the trusted Serve identity and origin headers;
|
|
||||||
the tagged host cannot authenticate as the owner through Serve itself.
|
|
||||||
- Codex generated two temporary columns, retrieved 20 Twitter posts and zero
|
|
||||||
Mastodon results, and wrote a Japanese report with original post links and
|
|
||||||
explicit limits on interpreting the empty Mastodon search. The report is
|
|
||||||
under the ignored `.data/research/<run ID>/report.md` directory.
|
|
||||||
- Reopening the run's generated deck produced two temporary columns. Saved
|
|
||||||
user decks were not replaced, and the report was not inserted into SQLite.
|
|
||||||
- After replacing polling with SSE, six desktop/mobile E2E cases passed for
|
|
||||||
initial snapshots, reconnect snapshots, owner checks and the unconfigured UI.
|
|
||||||
- A second real run pushed a one-column deck to the page. After closing and
|
|
||||||
reopening the browser, the latest deck restored automatically and grew to two
|
|
||||||
columns through SSE. Codex then completed `report.md`. Same-view updates,
|
|
||||||
preserving saved decks, ordered asynchronous updates and late start responses
|
|
||||||
are also covered by component/controller tests.
|
|
||||||
- The actual Codex launcher was restarted successfully with configured MCP
|
|
||||||
servers disabled; WebSocket `config/read` confirmed all seven disabled. Nix
|
|
||||||
wrapper config overrides must precede the `app-server` subcommand.
|
|
||||||
|
|
||||||
## Conversation workspace verification
|
|
||||||
|
|
||||||
- 270 unit/component tests and 40 desktop/mobile Playwright cases passed.
|
|
||||||
Typecheck, lint, knip and production build passed.
|
|
||||||
- Browser coverage includes conversation/deck restoration from SSE snapshots,
|
|
||||||
manual deck editing and saving, narrow viewports and existing WebMCP tools.
|
|
||||||
Readiness checks wait for usable controls rather than network idleness because
|
|
||||||
the event stream intentionally stays connected.
|
|
||||||
- A real three-message Codex conversation called `list_decks`, reused a manually
|
|
||||||
created column from the current-deck context, and edited that column after the
|
|
||||||
browser was closed and reopened. The app-server thread ID and generated deck
|
|
||||||
ID stayed unchanged; the deck advanced from version 1 to 2.
|
|
||||||
- The live database had no saved decks, which Codex reported correctly. Saved
|
|
||||||
deck discovery/reuse with populated records is covered by isolated tool tests.
|
|
||||||
The live check did not add or change saved deck records or create a report.
|
|
||||||
|
|
||||||
## List discovery verification
|
|
||||||
|
|
||||||
- 279 unit/component tests passed (one opt-in live test skipped), with typecheck,
|
|
||||||
lint and production build passing. Tool tests cover both platforms, selected
|
|
||||||
account scope, empty lists, upstream failures, shared request limits and using
|
|
||||||
discovered IDs to create and fetch list columns.
|
|
||||||
- A real browser-initiated Codex run discovered 54 lists for Twitter account1
|
|
||||||
and zero for Mastodon, then opened a temporary list column. Reopening the page
|
|
||||||
restored that deck and the conversation. Twitter account2 initially returned
|
|
||||||
an upstream `Dependency: Unspecified` error; a direct retry through the same
|
|
||||||
Bird catalog API returned three lists. A follow-up message in the same Codex
|
|
||||||
conversation then retried `list_lists` successfully and also reported three.
|
|
||||||
|
|
||||||
## New-chat verification
|
|
||||||
|
|
||||||
- 284 unit/component tests and eight desktop/mobile research E2E cases passed,
|
|
||||||
along with typecheck, lint and production build.
|
|
||||||
- A real Codex check on a separate development server reset a completed chat
|
|
||||||
across two browser pages, cleared the draft and retained the current deck.
|
|
||||||
The next message used a different thread ID, contained only the new user
|
|
||||||
message and received the current deck context. The separate server avoided
|
|
||||||
interrupting research already running in the public workspace.
|
|
||||||
|
|
||||||
## Markdown citation verification
|
|
||||||
|
|
||||||
- The full suite passed 306 unit/component tests, with one opt-in test skipped.
|
|
||||||
Typecheck, lint, knip and production build passed. Follow-up card tests verify
|
|
||||||
re-scrolling when a captured post is replaced by its loaded feed result.
|
|
||||||
- 42 desktop/mobile E2E cases passed, including Markdown tables and emphasis,
|
|
||||||
navigating to an offscreen column, captured-post display, focus/highlight,
|
|
||||||
accessibility and existing manual deck/WebMCP operations.
|
|
||||||
- A real Codex run on a separate development server fetched 20 Twitter posts,
|
|
||||||
cited two in a Markdown response, and navigated from a citation to its card.
|
|
||||||
Closing and reopening the page preserved working citation navigation.
|
|
||||||
- react-markdown 10.1.0 and remark-gfm 4.0.1 were added with the user's approval.
|
|
||||||
The pnpm dependency hash was updated and the x86_64-linux Nix package built.
|
|
||||||
|
|
||||||
## Conversation persistence verification
|
|
||||||
|
|
||||||
- SQLite repository tests reopen file-backed databases and verify conversation,
|
|
||||||
deck, account, citation and active-selection restoration, plus transaction rollback.
|
|
||||||
- Runner tests recreate the service against the same database, resume its thread,
|
|
||||||
reject stale history switches, interrupt orphan turns and reject late orphan
|
|
||||||
events. Failed writes prevent new execution or stop further tool calls.
|
|
||||||
- 52 desktop/mobile E2E cases passed. The final focused research suite passed
|
|
||||||
120 tests; typecheck, lint, knip and Nix packaging passed.
|
|
||||||
- An actual Codex run captured 20 Twitter posts. A fresh Node process restored
|
|
||||||
that conversation and used the same Codex thread and dynamic tools to add a
|
|
||||||
second column, retaining all citations. Separate desktop/mobile browser
|
|
||||||
contexts restored the saved chat, navigated citations, shared history selection
|
|
||||||
through SSE and retained blank-new-chat selection across reload.
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
# Mastodon複数アカウント・デッキ端末間共有の実装計画
|
|
||||||
|
|
||||||
状態: 機能実装・検証済み。2026-09-24に現行コード・公式仕様・Elkを調査。Drizzle ORM 0.45.3＋Drizzle Kit 0.31.11＋better-sqlite3 13.0.3と、Tailscale Serveの本人情報による利用制限を採用。実機確認の範囲と運用上の引き継ぎは以下に記録する。
|
|
||||||
|
|
||||||
## 実装・検証記録（2026-09-24）
|
|
||||||
|
|
||||||
- T0〜T6の機能を実装。ユーザーのブラウザでTailscale経由のMastodon認可・callback復帰を確認。
|
|
||||||
- サーバーはタグ付き端末なので、本人loginはSelf.UserIDから推測せず実際のユーザー情報で設定。タグ付き端末からの本人情報なしアクセスは引き続き拒否。
|
|
||||||
- 単体・統合202件、Playwrightの共有デッキ／WebMCP／アクセス制限38件と接続管理／callback4件を検証。
|
|
||||||
- 別ブラウザから保存済み認可を再利用し、実Mastodonを20件→40件へページ送り。同じ一時ビューでTwitter20件を取得。ブラウザエラーなし。確認用ビューは永続保存していない。
|
|
||||||
- Nixパッケージ単体で起動・3マイグレーション・DB書込・バックアップを確認。依存hash更新済み。
|
|
||||||
- 実アカウントでの接続はMastodon1件。同一インスタンスの複数アカウント・別インスタンス・再接続・解除・401競合・429はテストで検証し、実アカウントを増減させる破壊的試験は行っていない。
|
|
||||||
- NixOSサービスの実機デプロイは行わず、モジュール・永続ディレクトリ・credential設定と運用手順を用意。試用用devサーバーを稼働。
|
|
||||||
|
|
||||||
## 前提と到達点
|
|
||||||
|
|
||||||
- 自分専用。自宅の1台でアプリを稼働し、複数の自分の端末からTailscale ServeのHTTPSで利用する。
|
|
||||||
- 同じデッキにTwitterとMastodonを並べ、各カラムに接続アカウントを固定できる。
|
|
||||||
- 端末AでOAuth接続とデッキ作成を済ませれば、端末Bでも同じ接続・デッキを使える。
|
|
||||||
- デッキ定義・カラム順序・接続一覧を共有する。開いているデッキ、スクロール位置、編集中のフォームは端末ローカルとする案。
|
|
||||||
- AIが調査ごとに作るデッキは一時ビューとして開き、必要なものだけ保存済みデッキにする。一時ビューは端末間共有の対象外。
|
|
||||||
- 投稿の収集アーカイブ、AIサマリー、オフライン編集、他人との共同編集はこの増分に含めない。
|
|
||||||
|
|
||||||
## 推奨構成
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
flowchart LR
|
|
||||||
A[PC / スマホ] --> B[Tailscale Serve HTTPS]
|
|
||||||
B --> C[Twitter Lite / localhost]
|
|
||||||
C --> D[(SQLite / 自宅のローカルディスク)]
|
|
||||||
C --> E[Twitter Safe Relay]
|
|
||||||
C --> F[Mastodon各インスタンス]
|
|
||||||
```
|
|
||||||
|
|
||||||
SQLiteを採用する案。端末が増えても、各端末がSQLを実行するのではなく、同じアプリサーバーへアクセスする。デッキ設定とOAuth情報の小さな更新には単一サーバーのSQLiteで始められると判断する。DBファイルを端末間コピーしたり、NAS上のファイルを複数サーバーから直接開いたりしない。
|
|
||||||
|
|
||||||
| 候補 | 今回の評価 |
|
|
||||||
| --- | --- |
|
|
||||||
| SQLite | 推奨。別DBサービス不要。ローカルディスク、短いトランザクション、マイグレーション、復元試験を用意する |
|
|
||||||
| PostgreSQL | 複数アプリサーバーや大量の並列収集へ進む時に再評価。現時点では運用対象が増える |
|
|
||||||
| ブラウザDB＋同期基盤 | 採用しない。今回必要なのはオンラインで同じサーバー状態を読むこと。オフライン同期エンジンを導入する必要はない |
|
|
||||||
|
|
||||||
SQLiteは同時書き込みが1つという制約がある。複数サーバー・高い書き込み並列度ではclient/server DBを検討する。[SQLiteの用途](https://www.sqlite.org/whentouse.html)
|
|
||||||
|
|
||||||
## 認証と保存の境界
|
|
||||||
|
|
||||||
アプリの利用許可とSNSアカウントのOAuthを分ける。最初は単一の私用ワークスペースとし、アプリ内のユーザー登録・パスワード管理は作らない。
|
|
||||||
|
|
||||||
Tailscale Serveの本人情報を利用する場合は、自分のloginを許可し、バックエンドをlocalhostに束縛する。現在の試用用 `0.0.0.0` 起動を、そのまま本人情報ヘッダーを信頼する本番構成に持ち込まない。タグ付き端末のアクセスには通常のユーザー情報ヘッダーが付かないため、最初の実機確認に含める。Serveからの経路、利用許可、変更リクエストのOrigin検証を共通化する。[Tailscale Serve identity headers](https://tailscale.com/docs/features/tailscale-serve#identity-headers)
|
|
||||||
|
|
||||||
OAuth callbackは固定のHTTPS URLにする。認可後に戻る主体はブラウザなので、その端末がtailnetへ到達できる構成を実機検証する。callbackのためにFunnelでアプリ全体を公開する方針は取らない。
|
|
||||||
|
|
||||||
## 保存モデル案
|
|
||||||
|
|
||||||
| 保存対象 | 主な内容 |
|
|
||||||
| --- | --- |
|
|
||||||
| `decks` | ID、名前、revision、更新日時 |
|
|
||||||
| `deck_columns` | ID、deck ID、並び順、connection ID、名前、platform固有のsource JSON |
|
|
||||||
| `connections` | ID、platform、接続先origin、外部アカウントIDまたはrelay profile参照、表示名、接続状態 |
|
|
||||||
| `connection_credentials` | connection ID、暗号化したアクセストークン、鍵の識別子。通常の接続一覧とは分離 |
|
|
||||||
| `oauth_apps` | インスタンスorigin、callback・scope構成、client ID、暗号化したclient secret |
|
|
||||||
| `oauth_attempts` | 短時間有効なstate、開始ブラウザとの束縛、接続先、PKCE verifier、期限、一度限りの消費状態 |
|
|
||||||
|
|
||||||
単一利用者なので、この段階ではusers/organizations/roles等のテーブルを作らない。
|
|
||||||
|
|
||||||
カラムの現行 `profileName` を `connectionId` へ変更する。Twitterはconnectionにrelay profile名を保持し、トークンは引き続きrelay側で管理する。Mastodonは接続インスタンスoriginと `verify_credentials` のaccount IDで重複を判定する。表示handleを主キーにしない。同じインスタンスに別アカウントを追加でき、再接続時には既存のconnection IDを維持する。
|
|
||||||
|
|
||||||
DBには秘密を暗号化して保存し、暗号鍵はDB外の実行時credentialファイルから読む。鍵やtokenをNix store・Git・ブラウザ・SSR payload・WebMCPに含めない。DBと鍵の両方が揃って復元できる手順を用意する。
|
|
||||||
|
|
||||||
## PR単位のタスク
|
|
||||||
|
|
||||||
| ID | タスク | 依存 | 完了条件 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| T0 | 実行環境とアクセス経路を固定 | なし | 本番HTTPS origin/callback候補を決め、PC・スマホから同じ利用者として接続。Serve以外からのヘッダー偽装を許さない構成を確認。対象Mastodonのバージョン・OAuthメタデータも調べる |
|
|
||||||
| T1 | SQLiteと永続ディレクトリを導入 | T0 | 現行Node/Nixで動くdriver・migration方式を実証。`StateDirectory`等でDBを永続化。再起動・アプリ更新後も残り、バックアップから復元できる。依存追加時はflakeのpnpm hash更新まで行う |
|
|
||||||
| T2 | connectionモデルへTwitterを移行 | T1 | relay profile一覧から接続を作り、カラム・取得・キャッシュ・ページ送りがconnection IDを使う。2つのTwitter接続を混ぜずに並列表示。不明・削除済みの接続はエラーとして残す |
|
|
||||||
| T3 | デッキをサーバー保存し端末間共有 | T1,T2 | PCで作ったデッキが別ブラウザコンテキストに表示。revision競合で上書きを拒否。WebMCPも同じ保存処理を使う。既存localStorageからの明示インポートを提供し、重複取り込みと既存DBの破壊を防ぐ |
|
|
||||||
| T4 | Mastodon OAuthとトークン保管 | T0,T1,T2 | 接続先登録→認可→callback→本人確認→暗号化保存。同一インスタンス2アカウント・別インスタンス・再接続・解除が動く。拒否/state不一致・期限切れ・再利用を検証 |
|
|
||||||
| T5 | Mastodon取得と投稿正規化 | T4 | ユーザー投稿・リスト・ハッシュタグのカラムを実装し、全文検索を別の能力として扱う。CW・sensitiveメディア・boost・HTML本文を安全に表示。元投稿URLと取得インスタンスのローカルIDを区別 |
|
|
||||||
| T6 | 複数接続UIとWebMCPを統合 | T3,T5 | 接続管理から追加・再接続・解除。カラムは接続に応じたsourceを選べる。Twitter/Mastodonを同じデッキに並べ、AIも接続一覧を発見して作成・取得できる |
|
|
||||||
| T7 | 2端末・障害・運用の通し検証 | T3,T4,T6 | 端末AのOAuth接続を端末Bで再認可せず利用。編集競合・接続失効・429・再起動・DB復元の検証。UI/API/WebMCP/ログにトークンが出ないことを確認 |
|
|
||||||
|
|
||||||
各PRに必要な単体・統合テストを含める。T7までテストを先送りしない。
|
|
||||||
|
|
||||||
推奨順序: `T0 → T1 → T2 → T3` で既存Twitterの端末間共有を先に完成。T3とT4は保存モデル確定後に並列作業可能。その後 `T4 → T5 → T6 → T7`。
|
|
||||||
|
|
||||||
### T3: 同期の具体的な範囲
|
|
||||||
|
|
||||||
- 保存済みデッキはDBを正本にし、クライアントキャッシュへ読み込む。保存中・保存失敗を区別し、サーバーが受理していない編集を「保存済み」と表示しない。
|
|
||||||
- デッキ単位のrevisionを比較して、名前・カラム・順序を1トランザクションで更新。同じrevisionへの2回目の更新は競合として返す。
|
|
||||||
- 初期案はフォーカス復帰時と表示中の軽い定期再取得。SSE/WebSocket/CRDTは導入しない。編集中の内容は自動更新で消さず、競合時に再読み込みを案内する。
|
|
||||||
- 選択中デッキIDは端末ローカル。PCで別デッキを開いたためにスマホの画面まで勝手に切り替わる挙動を避ける。別端末から削除されたデッキを表示中なら、残りのデッキへ移動し通知する。
|
|
||||||
- `get_deck`等はrevisionを返し、既存デッキを置換する `set_deck` は期待revisionを指定する。投稿読取ツールにはDB内の秘密を含めない。
|
|
||||||
- localStorageインポートは一度限りの移行機能。DB完成後にlocalStorageへ書き戻す二重運用はしない。
|
|
||||||
|
|
||||||
### T3/T6: AIが作る一時ビューと保存
|
|
||||||
|
|
||||||
- 一時ビューと保存済みデッキは同じカラム定義・描画・接続参照を使う。別のプラットフォーム抽象や投稿取得経路は作らない。
|
|
||||||
- AIによる新規作成は既定で一時ビュー。タブ内のメモリで保持し、DBへは書かない。複数の一時ビューを切り替えられ、UIに「一時」と「デッキとして保存」を表示する。再読み込みやタブを閉じると失われることを画面で明示する。
|
|
||||||
- 保存操作は新規デッキをサーバーに作成する。成功後にその一時ビューを保存済みデッキへ置き換え、他の端末にも見えるようにする。失敗時は一時ビューを残し、再試行できる。二重クリック・同じ保存要求の再送で重複デッキを作らない。
|
|
||||||
- 保存済みデッキから一時コピーを作って、AIが検索語・カラムを組み替えて試せる。元デッキは変更しない。初期実装では保存先は新規デッキとし、元デッキへのマージ機能は作らない。
|
|
||||||
- WebMCPは一時ビューの作成・読取・編集・破棄と、明示的な保存を扱う。既存の保存済みデッキ更新には引き続き期待revisionを要求する。ツールの結果は一時か保存済みかを明示し、保存先を推測させない。
|
|
||||||
- 一時ビューにも通常のカラム数制限と接続の検証を適用する。投稿内容や認証情報の保存は行わず、保存するのは名前・カラム・検索条件等の定義のみ。
|
|
||||||
- 検証: AIの一時作成でDB件数が増えない、ページ送りできる、複数ビューを切り替えられる、保存後は別ブラウザから取得できる、保存失敗で内容を失わない、保存再送が重複しない、一時コピーの編集で元デッキを変更しない。
|
|
||||||
|
|
||||||
### T4: OAuthの具体的な範囲
|
|
||||||
|
|
||||||
- 初期対象はMastodon 4.3以降を提案。Authorization Code＋PKCE S256とstateを使い、旧版互換の分岐は作らない。Mastodonはconfidential clientを前提にしているためclient secretも必要。[OAuth仕様](https://docs.joinmastodon.org/spec/oauth/)
|
|
||||||
- `POST /api/v1/apps`でインスタンスごとに登録。callback・scope構成と合わせて再利用する。[アプリ登録API](https://docs.joinmastodon.org/methods/apps/)
|
|
||||||
- 閲覧用scopeに絞る。候補は `read:accounts read:statuses read:lists read:search`。実装したカラムのAPI要件と照合する。同一インスタンスへの別アカウント追加は `force_login=true` を使う。[OAuth API](https://docs.joinmastodon.org/methods/oauth/)
|
|
||||||
- state/verifierは開始ブラウザに束縛し、期限付き・一度限りで検証。token交換と `verify_credentials` はサーバーで実施し、戻り先URLにtokenを含めない。[本人確認API](https://docs.joinmastodon.org/methods/accounts/#verify-account-credentials)
|
|
||||||
- 接続解除・401からの再接続を実装。通常のMastodon tokenは自動失効しないため、汎用refresh token基盤を先に作らない。[OAuth tokens](https://docs.joinmastodon.org/api/oauth-tokens/)
|
|
||||||
- 接続先入力をサーバーがfetchするため、origin・DNS解決先・redirectを検証する。初期は設定したインスタンスの許可リストに限定する案。OAuthやページ送りを家のLANへの汎用HTTP転送にしない。
|
|
||||||
|
|
||||||
### T5/T6: プラットフォーム抽象化
|
|
||||||
|
|
||||||
- 共通化するのはconnection参照、取得結果、エラー、継続ページの境界。全SNSへTwitterのTop/Latestや検索構文を要求しない。
|
|
||||||
- source schemaはplatformとkindで分岐。MastodonのリストID・アカウントIDは接続インスタンスの文脈を持つ。接続変更時はリストを選び直す。
|
|
||||||
- 投稿の同一性にはcanonical URIを使い、取得先のローカルstatus IDはAPI操作用に保持する。boostのwrapperと元投稿を区別する。
|
|
||||||
- HTML本文は許可する要素・URLを制限して処理。CW・sensitiveを初期表示で尊重し、全文を単に既存のtextへ詰めない。
|
|
||||||
- Mastodonの全文検索はインスタンスの検索環境次第。明示的な検索エラーと正常な空レスポンスを区別する。ただし4.5.3では検索バックエンド無効時も空配列を返すため、0件だけで全文検索への対応可否は判定できない。画面にも検索範囲が接続先の設定に依存することを表示する。[検索API](https://docs.joinmastodon.org/methods/search/)、[4.5.3の検索処理](https://github.com/mastodon/mastodon/blob/v4.5.3/app/services/search_service.rb)
|
|
||||||
- ホームタイムライン、通知、Streamingは最初のカラムが動いてから別タスク。既存の調査カラムと手動ページ送りを先に完成する。
|
|
||||||
|
|
||||||
## Elkから参考にする範囲
|
|
||||||
|
|
||||||
調査対象commit: `8a90074fca9f316a0c71f7249b1a31f21829a987`。
|
|
||||||
|
|
||||||
- インスタンス別のOAuth app登録・再利用: [server/utils/shared.ts](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/server/utils/shared.ts)
|
|
||||||
- 認可URLと複数アカウント追加: [server/api/[server]/login.ts](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/server/api/%5Bserver%5D/login.ts)
|
|
||||||
- アカウント本人確認・インスタンスと表示ドメインの区別: [app/composables/users.ts](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/app/composables/users.ts)
|
|
||||||
|
|
||||||
ElkはOAuth app情報をサーバーに持つが、ユーザーtokenはcallback URLを経由してブラウザへ渡し、IndexedDBの `elk-users` に保存する。今回のサーバーtoken保管・端末間同期は別実装にする。[callback](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/server/api/%5Bserver%5D/oauth/%5Borigin%5D.ts)、[ユーザー保存](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/app/plugins/0.setup-users.ts)
|
|
||||||
|
|
||||||
Elkのグローバルなcurrent accountの切り替えも、そのままカラムごとの並列取得には使わない。各カラムはconnection IDから独立したリクエスト文脈を得る。[Mastodonクライアント](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/app/composables/masto/masto.ts)
|
|
||||||
|
|
||||||
## 後続タスク
|
|
||||||
|
|
||||||
- Bluesky: 接続・認可方式を別途調査し、MastodonのOAuth仕様を流用しない。
|
|
||||||
- Threads: アプリ登録・利用可能な読み取り権限・検索範囲を実機確認してからスコープを決める。
|
|
||||||
- Nostr: relay集合・署名/鍵の扱いを別に設計し、OAuthに無理に合わせない。
|
|
||||||
- AIサマリー/並列収集: 投稿snapshotと取得日時・クエリ・接続文脈を保存する別のデータモデルを追加する。今回は設定同期のDBに投稿アーカイブを混ぜない。
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
# shadcn workspace migration
|
|
||||||
|
|
||||||
## Target
|
|
||||||
|
|
||||||
Replace the custom workspace UI with the Base UI version of shadcn sidebar-09
|
|
||||||
at commit 98a1fe67b439324ddc857f47fbdce056600a4329. Preserve its icon rail,
|
|
||||||
contextual second sidebar and SidebarInset. Adapt the rail to research chat and
|
|
||||||
deck management, keeping the research panel mounted so SSE state remains live.
|
|
||||||
On small screens, use the sidebar Sheet and keep all actions reachable.
|
|
||||||
|
|
||||||
Use official MessageScroller, Message, Bubble and Marker for the existing Codex
|
|
||||||
conversation. Keep transport, history, retry, stop, account selection, Markdown
|
|
||||||
and citation navigation. Use shadcn primitives for forms, dialogs, menus and
|
|
||||||
post metadata throughout the app. Use Tailwind v4 and shared shadcn semantic
|
|
||||||
tokens; remove legacy control styles that override primitives.
|
|
||||||
|
|
||||||
Install @shadcn/lint with an executable design-token policy alongside Biome.
|
|
||||||
Update README and Nix dependency hash as needed.
|
|
||||||
|
|
||||||
## Verification
|
|
||||||
|
|
||||||
- Typecheck, Biome, design lint, unit suite, production build, unused-code check.
|
|
||||||
- Browser integration suite: decks, source editing, connections, conversation,
|
|
||||||
citation navigation, menus and keyboard focus.
|
|
||||||
- Render desktop plus 320/375/414/768 px: rail collapse, mobile Sheet, independent
|
|
||||||
column scrolling, chat composer visibility, no document horizontal overflow.
|
|
||||||
- Inspect screenshots and run Axe on relevant states.
|
|
||||||
|
|
||||||
## Status
|
|
||||||
|
|
||||||
Completed on 2026-09-28.
|
|
||||||
|
|
||||||
- SidebarProvider, nested icon/context Sidebars and SidebarInset now implement
|
|
||||||
the referenced sidebar-09 structure; the mobile Sheet keeps its content mounted.
|
|
||||||
- Research state and deck-dialog drafts live above the responsive shell. Closing
|
|
||||||
or resizing the sidebar preserves drafts, selected accounts and retry identity.
|
|
||||||
- MessageScroller, Message, Bubble/BubbleContent, Marker/MarkerContent, InputGroup
|
|
||||||
and Collapsible replace the chat UI. Markdown list markers and headings remain
|
|
||||||
visible after Tailwind's reset; citation highlighting uses theme tokens.
|
|
||||||
- Forms, dialogs, dropdown menus, avatars, badges and empty states use Base UI
|
|
||||||
shadcn components. No backend transport, storage or access contracts changed.
|
|
||||||
- @shadcn/lint runs in pnpm lint and rejects raw palette colors. Nix dependency
|
|
||||||
hash and README/deck docs are updated.
|
|
||||||
|
|
||||||
Verification: 336 unit tests passed (one explicit live-relay test skipped), all
|
|
||||||
56 desktop/mobile E2E tests passed. After the final isolated chat styling fixes,
|
|
||||||
all 10 research E2E tests and 22 related unit tests passed again. Typecheck,
|
|
||||||
Biome/design lint, Knip, production build and the Nix package build passed.
|
|
||||||
Browser checks covered 320/375/414/768px, rendered chat and post screenshots,
|
|
||||||
Axe, dialog focus restoration, breakpoint draft preservation and closed-sidebar
|
|
||||||
SSE deck updates. Automated browser tests use mock relay/research data.
|
|
||||||
A subsequent dev-server smoke check through the Tailscale HTTPS URL confirmed
|
|
||||||
the real relay displayed 14 posts across six columns without UI alerts.
|
|
||||||
No production deployment was performed.
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
# Research decks
|
|
||||||
|
|
||||||
## Workspace
|
|
||||||
|
|
||||||
Both `/` and `/deck` render the research workspace. A collapsible shadcn/ui
|
|
||||||
sidebar based on `sidebar-09` shares its navigation rail with the article reader
|
|
||||||
at `/inbox`. Within Twitter Lite, it switches between research chat and deck management.
|
|
||||||
Deck management switches decks and adds columns. The avatar at the bottom of the
|
|
||||||
shared sidebar opens connected-account management in a dialog from either workspace.
|
|
||||||
Up to six ordered columns scroll independently; only the active deck
|
|
||||||
mounts and fetches its columns. On mobile, the sidebar opens as a sheet.
|
|
||||||
shadcn Base UI dialogs handle creation and editing, with Escape and focus
|
|
||||||
restoration. Column menus offer editing, ordering, and deletion; refresh and
|
|
||||||
pagination are manual. The adjacent chat uses MessageScroller, Message, Bubble,
|
|
||||||
Marker and InputGroup with the existing research backend.
|
|
||||||
|
|
||||||
Twitter and Mastodon can appear together, with different accounts in each
|
|
||||||
column. Original-post links open their source site. Separate reader, search,
|
|
||||||
list, user-profile, and conversation pages are not provided.
|
|
||||||
|
|
||||||
## Definitions and connections
|
|
||||||
|
|
||||||
`src/features/decks/model.ts` validates deck IDs, titles, ordered columns, and
|
|
||||||
unique column IDs within each deck. Each column contains `id`, `title`,
|
|
||||||
`connectionId`, and a platform-specific `source`.
|
|
||||||
|
|
||||||
| Platform | Source kind | Conditions |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| Twitter | `search` | Native `query`, `product` (`Top`/`Latest`), `following` |
|
|
||||||
| Twitter | `user` | `target`: handle or X/Twitter profile URL |
|
|
||||||
| Twitter | `list` | `target`: numeric list ID or X/Twitter list URL |
|
|
||||||
| Mastodon | `search` | `query`; results depend on the instance's search configuration |
|
|
||||||
| Mastodon | `user` | `target`: account handle or the connected instance's numeric account ID |
|
|
||||||
| Mastodon | `list` | `target`: numeric list ID for the connected account |
|
|
||||||
| Mastodon | `hashtag` | `target`: tag without `#`, containing letters, numbers, or underscores |
|
|
||||||
|
|
||||||
`connectionId` is the account binding, distinct from a deck's name. Twitter
|
|
||||||
connections resolve to profiles discovered from the configured relay.
|
|
||||||
Mastodon connections identify accounts by instance origin and remote account
|
|
||||||
ID; OAuth tokens stay encrypted on the server. The connection manager supports
|
|
||||||
adding, reconnecting, and disconnecting Mastodon accounts. See
|
|
||||||
[storage and OAuth](storage-and-oauth.md) for configuration and recovery.
|
|
||||||
|
|
||||||
The editor discovers lists for the selected account. Changing accounts clears
|
|
||||||
target-based conditions so an instance-local ID is not reused accidentally.
|
|
||||||
Searches can retain conditions between accounts on the same platform. There is
|
|
||||||
no global account selector or fallback to another account. Missing or
|
|
||||||
disconnected bindings produce errors.
|
|
||||||
|
|
||||||
The complete source and connection ID form query-cache identity. Equal
|
|
||||||
conditions on the same connection share pages; different connections retain
|
|
||||||
separate results and cursors. Deck synchronization does not poll post feeds.
|
|
||||||
|
|
||||||
## Implementation boundaries
|
|
||||||
|
|
||||||
- `column-editor.tsx` owns the title, connection binding, and final submission.
|
|
||||||
- `column-source-editor.tsx` dispatches by platform and defines rebinding rules.
|
|
||||||
- `twitter-source-editor.tsx` and `mastodon-source-editor.tsx` own each
|
|
||||||
platform's source selection, fields, and account-specific list discovery.
|
|
||||||
- `use-research-feed.ts` dispatches requests and keys the cache by connection
|
|
||||||
and source. Server functions resolve credentials and fetch upstream pages.
|
|
||||||
- `platforms/types.ts` defines normalized `ResearchPost` and `ResearchPage`
|
|
||||||
records consumed by cards and column tools, without raw provider responses
|
|
||||||
or credentials.
|
|
||||||
|
|
||||||
Twitter posts use `twitter:<id>` keys. Mastodon posts use canonical status URIs
|
|
||||||
for keys and retain the fetched instance's native status ID separately. Boosts
|
|
||||||
keep the wrapper identity and identify the boosting account. Mastodon HTML is
|
|
||||||
sanitized on the server; cards honor content warnings and sensitive media.
|
|
||||||
|
|
||||||
## Saved decks and temporary views
|
|
||||||
|
|
||||||
SQLite is authoritative for saved definitions. Creating a named deck through
|
|
||||||
the UI saves it; subsequent saved-deck edits and deletions use a revision check
|
|
||||||
in a transaction. A stale revision is rejected. Save failures remain visible
|
|
||||||
and do not report unsaved edits as persisted.
|
|
||||||
|
|
||||||
Saved decks refresh on focus and every five seconds while visible. Refresh is
|
|
||||||
held while an editor is open. Active selection is a local preference under
|
|
||||||
`twitter-lite-active-deck`; selecting a deck does not switch another device's
|
|
||||||
view. Deleting the active deck selects a remaining one. When none remain, the
|
|
||||||
app opens an empty temporary view.
|
|
||||||
|
|
||||||
WebMCP-created views are temporary by default. Temporary copies of saved decks
|
|
||||||
also remain in this tab's memory. Editing them does not write to SQLite. The
|
|
||||||
explicit save action replaces a temporary view with a shared saved deck,
|
|
||||||
preserving its ID for idempotent retries. Failed saves retain temporary
|
|
||||||
content. Temporary views disappear on reload or navigation, including OAuth
|
|
||||||
redirects. Only definitions are saved: posts, cursors, and scroll positions
|
|
||||||
are not archived.
|
|
||||||
|
|
||||||
Research chats separately retain the agent-generated deck and last supplied
|
|
||||||
deck context. Reopening a saved chat reconstructs a temporary view, including
|
|
||||||
on another device or after a server restart. Chat citations retain a limited
|
|
||||||
post projection for source navigation; this does not persist the deck's feed
|
|
||||||
cache, pagination cursors, scroll positions or unsent manual edits.
|
|
||||||
|
|
||||||
The UI offers an explicit, one-time import of valid version-2 data from
|
|
||||||
`twitter-lite-research-deck` in localStorage. It resolves old relay profile
|
|
||||||
names to connection IDs and creates new saved deck IDs transactionally. A
|
|
||||||
server marker prevents repeated imports; different content after the first
|
|
||||||
import is rejected. The browser copy is removed only after success. Invalid
|
|
||||||
or unsupported data is left untouched. HTTP and HTTPS have separate browser
|
|
||||||
storage, but authorized devices read the same server-backed decks.
|
|
||||||
|
|
||||||
## WebMCP
|
|
||||||
|
|
||||||
Use `list_connections` to discover bindings, then `set_deck` to create a
|
|
||||||
temporary view. This example uses IDs returned by discovery:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"title": "WebMCPの反応",
|
|
||||||
"columns": [
|
|
||||||
{
|
|
||||||
"title": "Twitter",
|
|
||||||
"connectionId": "twitter-connection-id",
|
|
||||||
"source": { "platform": "twitter", "kind": "search", "query": "WebMCP lang:ja" }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Mastodon",
|
|
||||||
"connectionId": "mastodon-connection-id",
|
|
||||||
"source": { "platform": "mastodon", "kind": "hashtag", "target": "WebMCP" }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Read the returned deck ID and call `save_deck` only when the view should be
|
|
||||||
shared. Replacing a saved deck requires its `deckId` and `expectedRevision`;
|
|
||||||
include every column to retain. Post loading is asynchronous and can fail
|
|
||||||
independently of saving. See [all tool contracts](webmcp-prototype.md).
|
|
||||||
|
|
||||||
## Verification
|
|
||||||
|
|
||||||
Unit tests exercise source normalization, account-specific caches, OAuth,
|
|
||||||
credential storage, revisions, import, and temporary-view behavior. Playwright
|
|
||||||
uses an isolated SQLite database and mock relay through real server functions
|
|
||||||
to exercise shared decks across browser contexts, editing, persistence,
|
|
||||||
pagination, and native WebMCP. Deterministic automated tests do not require
|
|
||||||
live SNS credentials.
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
# Shared storage and Mastodon OAuth
|
|
||||||
|
|
||||||
Twitter Lite runs as a single personal server behind Tailscale Serve. The
|
|
||||||
backend binds to loopback and accepts only the configured Tailscale login.
|
|
||||||
Browser requests that change state must have the configured Origin. OAuth
|
|
||||||
callbacks also pass the owner check; the browser must be able to reach the
|
|
||||||
tailnet HTTPS address after Mastodon authorization.
|
|
||||||
|
|
||||||
## Runtime configuration
|
|
||||||
|
|
||||||
| Variable | Value |
|
|
||||||
| --- | --- |
|
|
||||||
| `TWITTER_LITE_ORIGIN` | Exact Serve HTTPS origin, without a trailing slash |
|
|
||||||
| `TWITTER_LITE_ALLOWED_LOGIN` | Owner's Tailscale login |
|
|
||||||
| `TWITTER_LITE_DB_PATH` | Absolute path to the SQLite database on local disk |
|
|
||||||
| `TWITTER_LITE_MASTODON_ORIGINS` | Comma-separated approved HTTPS instance origins |
|
|
||||||
| `TWITTER_LITE_CREDENTIAL_KEY_FILE` | Runtime file containing 32 random bytes encoded as base64 |
|
|
||||||
|
|
||||||
The credential key is required for Mastodon, but not for Twitter-only use.
|
|
||||||
Generate it once, keep it outside Git and the Nix store, and retain it when
|
|
||||||
updating the application. For example, with an existing private directory:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
umask 077
|
|
||||||
nix develop -c node --input-type=module -e 'import {randomBytes} from "node:crypto"; import {writeFileSync} from "node:fs"; writeFileSync("/absolute/private/credential-key", randomBytes(32).toString("base64") + "\n", {flag: "wx", mode: 0o600})'
|
|
||||||
```
|
|
||||||
|
|
||||||
The command refuses to replace an existing file. Losing the key makes saved
|
|
||||||
SNS credentials unreadable. A separate protected backup of the key is needed
|
|
||||||
alongside database backups.
|
|
||||||
|
|
||||||
## Database and migrations
|
|
||||||
|
|
||||||
Drizzle ORM 0.45.3, Drizzle Kit 0.31.11 and better-sqlite3 13.0.3 are pinned.
|
|
||||||
The driver ships native prebuilds; dependency install scripts remain disabled.
|
|
||||||
Both the actual Nix Node runtime and the built Nix package have been exercised
|
|
||||||
with SQLite operations and the packaged backup command.
|
|
||||||
|
|
||||||
`drizzle/` contains generated SQL and metadata. `pnpm db:generate` generates
|
|
||||||
SQL and bundles it into TypeScript for the server. Commit both artifacts with
|
|
||||||
schema changes. The server applies pending migrations under an immediate
|
|
||||||
transaction before serving an authorized application request. It enables WAL,
|
|
||||||
foreign keys and a five-second busy timeout. Deployment does not depend on a
|
|
||||||
particular working directory or a separate migration command.
|
|
||||||
|
|
||||||
Deck definitions, ordered columns, connection metadata, OAuth applications
|
|
||||||
and short-lived OAuth attempts live in SQLite. Tokens, client secrets and
|
|
||||||
PKCE verifiers are authenticated encrypted envelopes in separate fields.
|
|
||||||
Their associated data binds each secret to its record and purpose. Public
|
|
||||||
connection responses never select those fields.
|
|
||||||
|
|
||||||
## Backups and restore
|
|
||||||
|
|
||||||
Use the live SQLite backup API instead of copying only the main file while WAL
|
|
||||||
is active. The destination must be an absolute path that does not already
|
|
||||||
exist; backups are mode 0600 and pass a SQLite integrity check.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
TWITTER_LITE_DB_PATH=/absolute/workspace.sqlite \
|
|
||||||
nix develop -c pnpm db:backup /absolute/backups/workspace-2026-09-24.sqlite
|
|
||||||
```
|
|
||||||
|
|
||||||
The Nix package exposes the same operation as `twitter-lite-backup`:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
TWITTER_LITE_DB_PATH=/var/lib/twitter-lite/workspace.sqlite \
|
|
||||||
twitter-lite-backup /absolute/backups/workspace-2026-09-24.sqlite
|
|
||||||
```
|
|
||||||
|
|
||||||
Run it as an identity that can read the database and write the backup directory.
|
|
||||||
On NixOS the application uses `DynamicUser`, `StateDirectory=twitter-lite` and
|
|
||||||
mode 0700. The runtime key is passed with systemd `LoadCredential`.
|
|
||||||
|
|
||||||
For restore, stop the service first. Preserve the current state directory as
|
|
||||||
a separate recovery copy, then restore the verified backup as
|
|
||||||
`workspace.sqlite` in a clean state directory with the service's ownership and
|
|
||||||
permissions. Do not leave old `-wal` or `-shm` sidecars beside a restored main
|
|
||||||
database. Restore the matching credential key separately, then start the
|
|
||||||
service and verify decks and account access. Do not attempt to restore a newer
|
|
||||||
schema into an older application version.
|
|
||||||
|
|
||||||
## OAuth and instance support
|
|
||||||
|
|
||||||
Initial support targets Mastodon 4.3+ with PKCE S256. The first configured
|
|
||||||
instance, `https://fedi.yutakobayashi.com`, reported 4.5.3 and S256 on 2026-09-24.
|
|
||||||
Only configured HTTPS origins with public DNS addresses are accepted; server
|
|
||||||
requests pin the resolved address and refuse redirects.
|
|
||||||
|
|
||||||
Each instance/callback/scope combination has an OAuth application. Authorization
|
|
||||||
uses `read:accounts read:statuses read:lists read:search`, PKCE, a ten-minute
|
|
||||||
one-use state and an HttpOnly browser-binding cookie. Tokens are exchanged and
|
|
||||||
account identity is verified on the server. The callback URL never contains an
|
|
||||||
access token. Same-instance accounts remain separate; reconnecting preserves
|
|
||||||
the connection ID only for the same account.
|
|
||||||
|
|
||||||
An expired token marks its connection unavailable until reconnected. Disconnect
|
|
||||||
first revokes the token using the original OAuth application, then removes the
|
|
||||||
local credential while retaining the connection reference used by saved decks.
|
|
||||||
|
|
||||||
Search results depend on the instance's backend and indexing. A successful
|
|
||||||
empty response does not prove full-text search is enabled: Mastodon 4.5.3 also
|
|
||||||
returns empty status results when its search backend is disabled.
|
|
||||||
@@ -175,14 +175,10 @@ None of these functions exposes the Bird client, arbitrary method names, arbitra
|
|||||||
|
|
||||||
### Search Flow
|
### Search Flow
|
||||||
|
|
||||||
1. Keep the raw query and structured author, period, language, content, and
|
1. Trim and validate the raw query.
|
||||||
exclusion controls in typed URL search parameters.
|
2. Append `filter:follows` when the following toggle is enabled and the operator is not already present.
|
||||||
2. Compile selected controls into a deterministic advanced search expression
|
3. Fetch one page with `getAllSearchResults(query, { product, cursor, maxPages: 1 })`.
|
||||||
using `from:`, `since:`, `until:`, `lang:`, and `filter:` operators.
|
4. Return normalized tweets and the next cursor.
|
||||||
3. Trim and validate the compiled query, including its 512-character limit.
|
|
||||||
4. Append `filter:follows` when the following toggle is enabled and the operator is not already present.
|
|
||||||
5. Fetch one page with `getAllSearchResults(query, { product, cursor, maxPages: 1 })`.
|
|
||||||
6. Return normalized tweets and the next cursor.
|
|
||||||
|
|
||||||
Advanced X search grammar remains available because the raw query is otherwise passed unchanged.
|
Advanced X search grammar remains available because the raw query is otherwise passed unchanged.
|
||||||
|
|
||||||
@@ -211,11 +207,7 @@ The selected layout is **Focused Tabs**:
|
|||||||
- no content on first load;
|
- no content on first load;
|
||||||
- results directly below the submitted controls.
|
- results directly below the submitted controls.
|
||||||
|
|
||||||
The User tab contains one target input and a Display button. The Search tab
|
The User tab contains one target input and a Display button. The Search tab contains a query input, a Popular/Latest segmented control, a Following only checkbox, and a Search button.
|
||||||
contains a query input; buttons that open inline author, period, language,
|
|
||||||
content-type, and exclusion controls; removable active-condition chips; a
|
|
||||||
collapsible compiled-query preview; a Popular/Latest segmented control; a
|
|
||||||
Following only checkbox; and a Search button.
|
|
||||||
|
|
||||||
Submitting a user target normalizes it to a handle and navigates to `/:handle`.
|
Submitting a user target normalizes it to a handle and navigates to `/:handle`.
|
||||||
Submitting a search updates the route's typed search parameters. Changing tabs
|
Submitting a search updates the route's typed search parameters. Changing tabs
|
||||||
@@ -352,9 +344,7 @@ The work is complete when:
|
|||||||
target or query, following a post detail link, or manually opening a valid
|
target or query, following a post detail link, or manually opening a valid
|
||||||
status URL.
|
status URL.
|
||||||
3. A valid handle or profile URL loads that user's posts.
|
3. A valid handle or profile URL loads that user's posts.
|
||||||
4. Search supports Top, Latest, the follows filter, and button-driven author,
|
4. Search supports Top, Latest, and the follows filter.
|
||||||
period, language, content-type, reply, and repost conditions while preserving
|
|
||||||
raw advanced search syntax.
|
|
||||||
5. Infinite scrolling continues cursor pages without a fixed limit and without duplicate posts.
|
5. Infinite scrolling continues cursor pages without a fixed limit and without duplicate posts.
|
||||||
6. Relay credentials and Bird remain server-only.
|
6. Relay credentials and Bird remain server-only.
|
||||||
7. No excluded discovery or mutation feature is reachable.
|
7. No excluded discovery or mutation feature is reachable.
|
||||||
|
|||||||
@@ -1,126 +0,0 @@
|
|||||||
# WebMCP prototype
|
|
||||||
|
|
||||||
## Registration
|
|
||||||
|
|
||||||
The deck workspace exposes nine React-owned tools on `/` and `/deck`.
|
|
||||||
`usewebmcp` handles native browser registration and cleanup. Tools become
|
|
||||||
available after saved decks load. Connection discovery may still be pending;
|
|
||||||
`list_connections` then returns `connections: null`.
|
|
||||||
|
|
||||||
Registration uses `document.modelContext`; there is no polyfill or external
|
|
||||||
MCP transport. Unsupported browsers retain the manual interface. All server
|
|
||||||
operations use the same access controls and persistence rules as the UI.
|
|
||||||
|
|
||||||
## Workspace tools
|
|
||||||
|
|
||||||
| Tool | Input | Behavior |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| `list_connections` | `{}` | Return connection IDs, platforms, origins, account IDs, display names, and states; never credentials |
|
|
||||||
| `list_decks` | `{}` | Return saved decks and this tab's temporary views, `activeDeckId`, and `storageError` |
|
|
||||||
| `get_deck` | Optional `deckId` | Read the named or active view, including `persisted` and saved `revision` |
|
|
||||||
| `set_deck` | Optional `deckId` and `expectedRevision`, required `title` and `columns` | Without an ID, create a temporary view; with an ID, replace and activate that existing view |
|
|
||||||
| `save_deck` | `deckId` | Explicitly persist a temporary view; an already saved deck is unchanged |
|
|
||||||
| `select_deck` | `deckId` | Activate a view; selection remains device-local |
|
|
||||||
| `delete_deck` | `deckId`, optional `expectedRevision` | Discard a temporary view or delete a saved deck for all devices |
|
|
||||||
|
|
||||||
Read tools return the workspace's current client snapshot, not a fresh server
|
|
||||||
request. Saved definitions refresh on focus and while visible, except during
|
|
||||||
editing. Replacing or deleting a saved deck requires `expectedRevision` from
|
|
||||||
the definition being edited. A stale revision fails without overwriting the
|
|
||||||
server. Use the UI's reload action after a conflict when a fresh definition
|
|
||||||
is needed.
|
|
||||||
|
|
||||||
`set_deck` accepts at most six columns, each with a title, `connectionId` from
|
|
||||||
discovery, and a source. Connections must be connected and match the source
|
|
||||||
platform. Optional column IDs preserve identity; omitted IDs are generated.
|
|
||||||
Include every retained column: omitted columns are removed, and an empty array
|
|
||||||
clears the view. A supplied deck ID must already exist.
|
|
||||||
|
|
||||||
Twitter sources support `search`, `user`, and `list`. `platform` defaults to
|
|
||||||
`twitter`; search requires `query` and defaults `product` to `Latest` and
|
|
||||||
`following` to false. User/list targets accept handles or profile URLs and
|
|
||||||
numeric list IDs or list URLs, respectively.
|
|
||||||
|
|
||||||
Mastodon requires `platform: "mastodon"` and supports `search` (`query`),
|
|
||||||
`user` (handle or instance-local account ID), `list` (account-local numeric
|
|
||||||
list ID), and `hashtag` (tag without `#`). It does not accept Twitter ranking
|
|
||||||
or following controls. Search availability and coverage depend on the
|
|
||||||
instance; an empty successful result does not prove full-text support.
|
|
||||||
|
|
||||||
## Mutation results and persistence
|
|
||||||
|
|
||||||
`set_deck` returns `deck`, its actual `persisted` flag, and
|
|
||||||
`posts: "loading-asynchronously"`. A new view exists only in tab memory until
|
|
||||||
`save_deck` succeeds. Temporary views disappear on reload or navigation,
|
|
||||||
including OAuth redirects. Saving keeps the ID, allowing an identical create
|
|
||||||
request to be retried without duplicate decks. Failed saves keep temporary
|
|
||||||
content; rejected updates do not replace the accepted saved definition.
|
|
||||||
|
|
||||||
Successful mutations close unsaved editor forms. Deleting the active view
|
|
||||||
selects a remaining one; deleting the last opens an empty temporary view.
|
|
||||||
There is no tool-level deletion undo. Column requests may fail independently
|
|
||||||
after a definition is applied or saved. Existing browser decks are imported
|
|
||||||
only through the explicit UI import action, not through a tool side effect.
|
|
||||||
|
|
||||||
## Column tools
|
|
||||||
|
|
||||||
`get_column_posts` accepts `columnId`, `offset` (default 0, nonnegative integer),
|
|
||||||
and `limit` (default 20, integer 1–50). It reads already loaded posts without a
|
|
||||||
network request. Only columns mounted in the active view are available;
|
|
||||||
select the view and allow it to render first.
|
|
||||||
|
|
||||||
`load_more_column` accepts `columnId` and fetches or retries one continuation
|
|
||||||
using the column's connection. Wait for initial loading or refresh to finish.
|
|
||||||
Concurrent pagination joins the existing request. If the view or column
|
|
||||||
changes during pagination, execution fails rather than returning results under
|
|
||||||
the changed identity. At the end, no posts are appended and `hasMore` is false.
|
|
||||||
|
|
||||||
Both return:
|
|
||||||
|
|
||||||
- `column`: ID, title, connection ID, and source
|
|
||||||
- `status`: `loading`, `ready`, or `error`, with `loading` and `error` details
|
|
||||||
- `posts`: normalized records with original URLs, text, author, and available
|
|
||||||
media, quotes, content warnings, or boost information
|
|
||||||
- `loadedCount`, `offset`, and `nextOffset` for slices of deduplicated posts
|
|
||||||
- `hasMore`: whether the feed has an upstream continuation
|
|
||||||
|
|
||||||
Continuation returns up to 20 newly appended posts. Use `nextOffset` with
|
|
||||||
`get_column_posts` for additional already loaded records; use
|
|
||||||
`load_more_column` for another upstream page. These are cache snapshots, not
|
|
||||||
archived evidence.
|
|
||||||
|
|
||||||
## Errors and annotations
|
|
||||||
|
|
||||||
Results are JSON in an MCP text content block. Execution failures set
|
|
||||||
`isError: true` with `code`, `message`, and `retryable: false`. Schema and
|
|
||||||
connection-validation failures use `invalid-input`; other execution failures
|
|
||||||
use `tool-error`. Column snapshots expose upstream errors separately in their
|
|
||||||
`error` field. Empty successful queries are not errors.
|
|
||||||
|
|
||||||
`list_connections`, `list_decks`, `get_deck`, and `get_column_posts` have
|
|
||||||
`readOnlyHint: true`. `delete_deck` has `destructiveHint: true`; tools returning
|
|
||||||
external posts mark them untrusted. Annotations describe behavior and do not
|
|
||||||
grant authorization. No tool posts to or modifies an SNS account.
|
|
||||||
|
|
||||||
## Browser setup and verification
|
|
||||||
|
|
||||||
```sh
|
|
||||||
nix develop -c pnpm test
|
|
||||||
nix develop -c pnpm typecheck
|
|
||||||
nix develop -c pnpm test:e2e e2e/integrations/webmcp.test.ts
|
|
||||||
```
|
|
||||||
|
|
||||||
E2E tests enable Chromium WebMCP/testing flags and invoke actual registered
|
|
||||||
tools through `navigator.modelContextTesting`. Mock relay responses pass
|
|
||||||
through real server functions and isolated database state.
|
|
||||||
|
|
||||||
For interactive testing, enable `chrome://flags/#enable-webmcp-testing`,
|
|
||||||
restart Chrome, and use Model Context Tool Inspector. Reload after changing
|
|
||||||
browser support. Native WebMCP requires a secure context; use the configured
|
|
||||||
Tailscale Serve HTTPS origin for remote access. Development also requires
|
|
||||||
allowing its exact hostname through `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS`.
|
|
||||||
The app's owner check still applies; direct localhost access does not supply
|
|
||||||
Serve identity. See [runtime access configuration](storage-and-oauth.md).
|
|
||||||
|
|
||||||
No production origin-trial token or external MCP-client bridge is configured.
|
|
||||||
Browser cancellation does not guarantee cancellation of a shared feed request.
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { defineConfig } from 'drizzle-kit'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
dialect: 'sqlite',
|
|
||||||
schema: './src/features/storage/schema.ts',
|
|
||||||
out: './drizzle',
|
|
||||||
})
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
CREATE TABLE `connection_credentials` (
|
|
||||||
`connection_id` text PRIMARY KEY NOT NULL,
|
|
||||||
`encrypted_token` text NOT NULL,
|
|
||||||
`updated_at` integer NOT NULL,
|
|
||||||
FOREIGN KEY (`connection_id`) REFERENCES `connections`(`id`) ON UPDATE no action ON DELETE cascade
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE TABLE `connections` (
|
|
||||||
`id` text PRIMARY KEY NOT NULL,
|
|
||||||
`platform` text NOT NULL,
|
|
||||||
`origin` text NOT NULL,
|
|
||||||
`account_id` text,
|
|
||||||
`relay_profile` text,
|
|
||||||
`display_name` text NOT NULL,
|
|
||||||
`status` text NOT NULL,
|
|
||||||
`created_at` integer NOT NULL,
|
|
||||||
`updated_at` integer NOT NULL
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE UNIQUE INDEX `connections_account` ON `connections` (`platform`,`origin`,`account_id`);--> statement-breakpoint
|
|
||||||
CREATE UNIQUE INDEX `connections_relay_profile` ON `connections` (`origin`,`relay_profile`);--> statement-breakpoint
|
|
||||||
CREATE TABLE `deck_columns` (
|
|
||||||
`id` text NOT NULL,
|
|
||||||
`deck_id` text NOT NULL,
|
|
||||||
`position` integer NOT NULL,
|
|
||||||
`connection_id` text NOT NULL,
|
|
||||||
`title` text NOT NULL,
|
|
||||||
`source` text NOT NULL,
|
|
||||||
PRIMARY KEY(`deck_id`, `id`),
|
|
||||||
FOREIGN KEY (`deck_id`) REFERENCES `decks`(`id`) ON UPDATE no action ON DELETE cascade,
|
|
||||||
FOREIGN KEY (`connection_id`) REFERENCES `connections`(`id`) ON UPDATE no action ON DELETE restrict,
|
|
||||||
CONSTRAINT "deck_columns_valid_position" CHECK("deck_columns"."position" >= 0)
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE UNIQUE INDEX `deck_columns_position` ON `deck_columns` (`deck_id`,`position`);--> statement-breakpoint
|
|
||||||
CREATE TABLE `decks` (
|
|
||||||
`id` text PRIMARY KEY NOT NULL,
|
|
||||||
`title` text NOT NULL,
|
|
||||||
`revision` integer DEFAULT 1 NOT NULL,
|
|
||||||
`created_at` integer NOT NULL,
|
|
||||||
`updated_at` integer NOT NULL,
|
|
||||||
CONSTRAINT "decks_positive_revision" CHECK("decks"."revision" >= 1)
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE TABLE `oauth_apps` (
|
|
||||||
`id` text PRIMARY KEY NOT NULL,
|
|
||||||
`origin` text NOT NULL,
|
|
||||||
`redirect_uri` text NOT NULL,
|
|
||||||
`scopes` text NOT NULL,
|
|
||||||
`client_id` text NOT NULL,
|
|
||||||
`encrypted_client_secret` text NOT NULL,
|
|
||||||
`created_at` integer NOT NULL
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE UNIQUE INDEX `oauth_apps_configuration` ON `oauth_apps` (`origin`,`redirect_uri`,`scopes`);--> statement-breakpoint
|
|
||||||
CREATE TABLE `oauth_attempts` (
|
|
||||||
`state_hash` text PRIMARY KEY NOT NULL,
|
|
||||||
`browser_hash` text NOT NULL,
|
|
||||||
`app_id` text NOT NULL,
|
|
||||||
`encrypted_verifier` text NOT NULL,
|
|
||||||
`connection_id` text,
|
|
||||||
`expires_at` integer NOT NULL,
|
|
||||||
`consumed_at` integer,
|
|
||||||
FOREIGN KEY (`app_id`) REFERENCES `oauth_apps`(`id`) ON UPDATE no action ON DELETE cascade,
|
|
||||||
FOREIGN KEY (`connection_id`) REFERENCES `connections`(`id`) ON UPDATE no action ON DELETE cascade
|
|
||||||
);
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
ALTER TABLE `connection_credentials` ADD `app_id` text REFERENCES oauth_apps(id);
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
CREATE TABLE `legacy_imports` (
|
|
||||||
`id` text PRIMARY KEY NOT NULL,
|
|
||||||
`payload_hash` text NOT NULL,
|
|
||||||
`deck_ids` text NOT NULL,
|
|
||||||
`created_at` integer NOT NULL
|
|
||||||
);
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
CREATE TABLE `research_sessions` (
|
|
||||||
`id` text PRIMARY KEY NOT NULL,
|
|
||||||
`title` text NOT NULL,
|
|
||||||
`status` text NOT NULL,
|
|
||||||
`updated_at` integer NOT NULL,
|
|
||||||
`snapshot` text NOT NULL
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE TABLE `research_state` (
|
|
||||||
`id` integer PRIMARY KEY NOT NULL,
|
|
||||||
`active_session_id` text,
|
|
||||||
FOREIGN KEY (`active_session_id`) REFERENCES `research_sessions`(`id`) ON UPDATE no action ON DELETE set null,
|
|
||||||
CONSTRAINT "research_state_singleton" CHECK("research_state"."id" = 1)
|
|
||||||
);
|
|
||||||
@@ -1,424 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "6",
|
|
||||||
"dialect": "sqlite",
|
|
||||||
"id": "42951f9a-6025-4e73-9155-764d25514ba8",
|
|
||||||
"prevId": "00000000-0000-0000-0000-000000000000",
|
|
||||||
"tables": {
|
|
||||||
"connection_credentials": {
|
|
||||||
"name": "connection_credentials",
|
|
||||||
"columns": {
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_token": {
|
|
||||||
"name": "encrypted_token",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"connection_credentials_connection_id_connections_id_fk": {
|
|
||||||
"name": "connection_credentials_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"connections": {
|
|
||||||
"name": "connections",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"platform": {
|
|
||||||
"name": "platform",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"account_id": {
|
|
||||||
"name": "account_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"relay_profile": {
|
|
||||||
"name": "relay_profile",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"display_name": {
|
|
||||||
"name": "display_name",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"status": {
|
|
||||||
"name": "status",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"connections_account": {
|
|
||||||
"name": "connections_account",
|
|
||||||
"columns": ["platform", "origin", "account_id"],
|
|
||||||
"isUnique": true
|
|
||||||
},
|
|
||||||
"connections_relay_profile": {
|
|
||||||
"name": "connections_relay_profile",
|
|
||||||
"columns": ["origin", "relay_profile"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"deck_columns": {
|
|
||||||
"name": "deck_columns",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"deck_id": {
|
|
||||||
"name": "deck_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"position": {
|
|
||||||
"name": "position",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"source": {
|
|
||||||
"name": "source",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"deck_columns_position": {
|
|
||||||
"name": "deck_columns_position",
|
|
||||||
"columns": ["deck_id", "position"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {
|
|
||||||
"deck_columns_deck_id_decks_id_fk": {
|
|
||||||
"name": "deck_columns_deck_id_decks_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "decks",
|
|
||||||
"columnsFrom": ["deck_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"deck_columns_connection_id_connections_id_fk": {
|
|
||||||
"name": "deck_columns_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {
|
|
||||||
"deck_columns_deck_id_id_pk": {
|
|
||||||
"columns": ["deck_id", "id"],
|
|
||||||
"name": "deck_columns_deck_id_id_pk"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"deck_columns_valid_position": {
|
|
||||||
"name": "deck_columns_valid_position",
|
|
||||||
"value": "\"deck_columns\".\"position\" >= 0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"decks": {
|
|
||||||
"name": "decks",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"revision": {
|
|
||||||
"name": "revision",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false,
|
|
||||||
"default": 1
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"decks_positive_revision": {
|
|
||||||
"name": "decks_positive_revision",
|
|
||||||
"value": "\"decks\".\"revision\" >= 1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"oauth_apps": {
|
|
||||||
"name": "oauth_apps",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"redirect_uri": {
|
|
||||||
"name": "redirect_uri",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"scopes": {
|
|
||||||
"name": "scopes",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"client_id": {
|
|
||||||
"name": "client_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_client_secret": {
|
|
||||||
"name": "encrypted_client_secret",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"oauth_apps_configuration": {
|
|
||||||
"name": "oauth_apps_configuration",
|
|
||||||
"columns": ["origin", "redirect_uri", "scopes"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"oauth_attempts": {
|
|
||||||
"name": "oauth_attempts",
|
|
||||||
"columns": {
|
|
||||||
"state_hash": {
|
|
||||||
"name": "state_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"browser_hash": {
|
|
||||||
"name": "browser_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_verifier": {
|
|
||||||
"name": "encrypted_verifier",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"expires_at": {
|
|
||||||
"name": "expires_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"consumed_at": {
|
|
||||||
"name": "consumed_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"oauth_attempts_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "oauth_attempts_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"oauth_attempts_connection_id_connections_id_fk": {
|
|
||||||
"name": "oauth_attempts_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"views": {},
|
|
||||||
"enums": {},
|
|
||||||
"_meta": {
|
|
||||||
"schemas": {},
|
|
||||||
"tables": {},
|
|
||||||
"columns": {}
|
|
||||||
},
|
|
||||||
"internal": {
|
|
||||||
"indexes": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,440 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "6",
|
|
||||||
"dialect": "sqlite",
|
|
||||||
"id": "1455820b-8aec-4fcb-9790-c7d9f1fd908c",
|
|
||||||
"prevId": "42951f9a-6025-4e73-9155-764d25514ba8",
|
|
||||||
"tables": {
|
|
||||||
"connection_credentials": {
|
|
||||||
"name": "connection_credentials",
|
|
||||||
"columns": {
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_token": {
|
|
||||||
"name": "encrypted_token",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"connection_credentials_connection_id_connections_id_fk": {
|
|
||||||
"name": "connection_credentials_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"connection_credentials_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "connection_credentials_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"connections": {
|
|
||||||
"name": "connections",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"platform": {
|
|
||||||
"name": "platform",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"account_id": {
|
|
||||||
"name": "account_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"relay_profile": {
|
|
||||||
"name": "relay_profile",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"display_name": {
|
|
||||||
"name": "display_name",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"status": {
|
|
||||||
"name": "status",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"connections_account": {
|
|
||||||
"name": "connections_account",
|
|
||||||
"columns": ["platform", "origin", "account_id"],
|
|
||||||
"isUnique": true
|
|
||||||
},
|
|
||||||
"connections_relay_profile": {
|
|
||||||
"name": "connections_relay_profile",
|
|
||||||
"columns": ["origin", "relay_profile"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"deck_columns": {
|
|
||||||
"name": "deck_columns",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"deck_id": {
|
|
||||||
"name": "deck_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"position": {
|
|
||||||
"name": "position",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"source": {
|
|
||||||
"name": "source",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"deck_columns_position": {
|
|
||||||
"name": "deck_columns_position",
|
|
||||||
"columns": ["deck_id", "position"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {
|
|
||||||
"deck_columns_deck_id_decks_id_fk": {
|
|
||||||
"name": "deck_columns_deck_id_decks_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "decks",
|
|
||||||
"columnsFrom": ["deck_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"deck_columns_connection_id_connections_id_fk": {
|
|
||||||
"name": "deck_columns_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {
|
|
||||||
"deck_columns_deck_id_id_pk": {
|
|
||||||
"columns": ["deck_id", "id"],
|
|
||||||
"name": "deck_columns_deck_id_id_pk"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"deck_columns_valid_position": {
|
|
||||||
"name": "deck_columns_valid_position",
|
|
||||||
"value": "\"deck_columns\".\"position\" >= 0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"decks": {
|
|
||||||
"name": "decks",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"revision": {
|
|
||||||
"name": "revision",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false,
|
|
||||||
"default": 1
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"decks_positive_revision": {
|
|
||||||
"name": "decks_positive_revision",
|
|
||||||
"value": "\"decks\".\"revision\" >= 1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"oauth_apps": {
|
|
||||||
"name": "oauth_apps",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"redirect_uri": {
|
|
||||||
"name": "redirect_uri",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"scopes": {
|
|
||||||
"name": "scopes",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"client_id": {
|
|
||||||
"name": "client_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_client_secret": {
|
|
||||||
"name": "encrypted_client_secret",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"oauth_apps_configuration": {
|
|
||||||
"name": "oauth_apps_configuration",
|
|
||||||
"columns": ["origin", "redirect_uri", "scopes"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"oauth_attempts": {
|
|
||||||
"name": "oauth_attempts",
|
|
||||||
"columns": {
|
|
||||||
"state_hash": {
|
|
||||||
"name": "state_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"browser_hash": {
|
|
||||||
"name": "browser_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_verifier": {
|
|
||||||
"name": "encrypted_verifier",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"expires_at": {
|
|
||||||
"name": "expires_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"consumed_at": {
|
|
||||||
"name": "consumed_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"oauth_attempts_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "oauth_attempts_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"oauth_attempts_connection_id_connections_id_fk": {
|
|
||||||
"name": "oauth_attempts_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"views": {},
|
|
||||||
"enums": {},
|
|
||||||
"_meta": {
|
|
||||||
"schemas": {},
|
|
||||||
"tables": {},
|
|
||||||
"columns": {}
|
|
||||||
},
|
|
||||||
"internal": {
|
|
||||||
"indexes": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,478 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "6",
|
|
||||||
"dialect": "sqlite",
|
|
||||||
"id": "ebfb67e2-a014-4d40-89e3-30c9b55cf047",
|
|
||||||
"prevId": "1455820b-8aec-4fcb-9790-c7d9f1fd908c",
|
|
||||||
"tables": {
|
|
||||||
"connection_credentials": {
|
|
||||||
"name": "connection_credentials",
|
|
||||||
"columns": {
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_token": {
|
|
||||||
"name": "encrypted_token",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"connection_credentials_connection_id_connections_id_fk": {
|
|
||||||
"name": "connection_credentials_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"connection_credentials_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "connection_credentials_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"connections": {
|
|
||||||
"name": "connections",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"platform": {
|
|
||||||
"name": "platform",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"account_id": {
|
|
||||||
"name": "account_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"relay_profile": {
|
|
||||||
"name": "relay_profile",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"display_name": {
|
|
||||||
"name": "display_name",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"status": {
|
|
||||||
"name": "status",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"connections_account": {
|
|
||||||
"name": "connections_account",
|
|
||||||
"columns": ["platform", "origin", "account_id"],
|
|
||||||
"isUnique": true
|
|
||||||
},
|
|
||||||
"connections_relay_profile": {
|
|
||||||
"name": "connections_relay_profile",
|
|
||||||
"columns": ["origin", "relay_profile"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"deck_columns": {
|
|
||||||
"name": "deck_columns",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"deck_id": {
|
|
||||||
"name": "deck_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"position": {
|
|
||||||
"name": "position",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"source": {
|
|
||||||
"name": "source",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"deck_columns_position": {
|
|
||||||
"name": "deck_columns_position",
|
|
||||||
"columns": ["deck_id", "position"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {
|
|
||||||
"deck_columns_deck_id_decks_id_fk": {
|
|
||||||
"name": "deck_columns_deck_id_decks_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "decks",
|
|
||||||
"columnsFrom": ["deck_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"deck_columns_connection_id_connections_id_fk": {
|
|
||||||
"name": "deck_columns_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {
|
|
||||||
"deck_columns_deck_id_id_pk": {
|
|
||||||
"columns": ["deck_id", "id"],
|
|
||||||
"name": "deck_columns_deck_id_id_pk"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"deck_columns_valid_position": {
|
|
||||||
"name": "deck_columns_valid_position",
|
|
||||||
"value": "\"deck_columns\".\"position\" >= 0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"decks": {
|
|
||||||
"name": "decks",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"revision": {
|
|
||||||
"name": "revision",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false,
|
|
||||||
"default": 1
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"decks_positive_revision": {
|
|
||||||
"name": "decks_positive_revision",
|
|
||||||
"value": "\"decks\".\"revision\" >= 1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"legacy_imports": {
|
|
||||||
"name": "legacy_imports",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"payload_hash": {
|
|
||||||
"name": "payload_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"deck_ids": {
|
|
||||||
"name": "deck_ids",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"oauth_apps": {
|
|
||||||
"name": "oauth_apps",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"redirect_uri": {
|
|
||||||
"name": "redirect_uri",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"scopes": {
|
|
||||||
"name": "scopes",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"client_id": {
|
|
||||||
"name": "client_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_client_secret": {
|
|
||||||
"name": "encrypted_client_secret",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"oauth_apps_configuration": {
|
|
||||||
"name": "oauth_apps_configuration",
|
|
||||||
"columns": ["origin", "redirect_uri", "scopes"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"oauth_attempts": {
|
|
||||||
"name": "oauth_attempts",
|
|
||||||
"columns": {
|
|
||||||
"state_hash": {
|
|
||||||
"name": "state_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"browser_hash": {
|
|
||||||
"name": "browser_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_verifier": {
|
|
||||||
"name": "encrypted_verifier",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"expires_at": {
|
|
||||||
"name": "expires_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"consumed_at": {
|
|
||||||
"name": "consumed_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"oauth_attempts_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "oauth_attempts_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"oauth_attempts_connection_id_connections_id_fk": {
|
|
||||||
"name": "oauth_attempts_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"views": {},
|
|
||||||
"enums": {},
|
|
||||||
"_meta": {
|
|
||||||
"schemas": {},
|
|
||||||
"tables": {},
|
|
||||||
"columns": {}
|
|
||||||
},
|
|
||||||
"internal": {
|
|
||||||
"indexes": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,562 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "6",
|
|
||||||
"dialect": "sqlite",
|
|
||||||
"id": "d021bc5b-2422-467a-ab92-2493da6e642a",
|
|
||||||
"prevId": "ebfb67e2-a014-4d40-89e3-30c9b55cf047",
|
|
||||||
"tables": {
|
|
||||||
"connection_credentials": {
|
|
||||||
"name": "connection_credentials",
|
|
||||||
"columns": {
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_token": {
|
|
||||||
"name": "encrypted_token",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"connection_credentials_connection_id_connections_id_fk": {
|
|
||||||
"name": "connection_credentials_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"connection_credentials_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "connection_credentials_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "connection_credentials",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"connections": {
|
|
||||||
"name": "connections",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"platform": {
|
|
||||||
"name": "platform",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"account_id": {
|
|
||||||
"name": "account_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"relay_profile": {
|
|
||||||
"name": "relay_profile",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"display_name": {
|
|
||||||
"name": "display_name",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"status": {
|
|
||||||
"name": "status",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"connections_account": {
|
|
||||||
"name": "connections_account",
|
|
||||||
"columns": ["platform", "origin", "account_id"],
|
|
||||||
"isUnique": true
|
|
||||||
},
|
|
||||||
"connections_relay_profile": {
|
|
||||||
"name": "connections_relay_profile",
|
|
||||||
"columns": ["origin", "relay_profile"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"deck_columns": {
|
|
||||||
"name": "deck_columns",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"deck_id": {
|
|
||||||
"name": "deck_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"position": {
|
|
||||||
"name": "position",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"source": {
|
|
||||||
"name": "source",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"deck_columns_position": {
|
|
||||||
"name": "deck_columns_position",
|
|
||||||
"columns": ["deck_id", "position"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {
|
|
||||||
"deck_columns_deck_id_decks_id_fk": {
|
|
||||||
"name": "deck_columns_deck_id_decks_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "decks",
|
|
||||||
"columnsFrom": ["deck_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"deck_columns_connection_id_connections_id_fk": {
|
|
||||||
"name": "deck_columns_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "deck_columns",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "restrict",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {
|
|
||||||
"deck_columns_deck_id_id_pk": {
|
|
||||||
"columns": ["deck_id", "id"],
|
|
||||||
"name": "deck_columns_deck_id_id_pk"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"deck_columns_valid_position": {
|
|
||||||
"name": "deck_columns_valid_position",
|
|
||||||
"value": "\"deck_columns\".\"position\" >= 0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"decks": {
|
|
||||||
"name": "decks",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"revision": {
|
|
||||||
"name": "revision",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false,
|
|
||||||
"default": 1
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"decks_positive_revision": {
|
|
||||||
"name": "decks_positive_revision",
|
|
||||||
"value": "\"decks\".\"revision\" >= 1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"legacy_imports": {
|
|
||||||
"name": "legacy_imports",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"payload_hash": {
|
|
||||||
"name": "payload_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"deck_ids": {
|
|
||||||
"name": "deck_ids",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"oauth_apps": {
|
|
||||||
"name": "oauth_apps",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"origin": {
|
|
||||||
"name": "origin",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"redirect_uri": {
|
|
||||||
"name": "redirect_uri",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"scopes": {
|
|
||||||
"name": "scopes",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"client_id": {
|
|
||||||
"name": "client_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_client_secret": {
|
|
||||||
"name": "encrypted_client_secret",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"created_at": {
|
|
||||||
"name": "created_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {
|
|
||||||
"oauth_apps_configuration": {
|
|
||||||
"name": "oauth_apps_configuration",
|
|
||||||
"columns": ["origin", "redirect_uri", "scopes"],
|
|
||||||
"isUnique": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"oauth_attempts": {
|
|
||||||
"name": "oauth_attempts",
|
|
||||||
"columns": {
|
|
||||||
"state_hash": {
|
|
||||||
"name": "state_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"browser_hash": {
|
|
||||||
"name": "browser_hash",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"app_id": {
|
|
||||||
"name": "app_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"encrypted_verifier": {
|
|
||||||
"name": "encrypted_verifier",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"connection_id": {
|
|
||||||
"name": "connection_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"expires_at": {
|
|
||||||
"name": "expires_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"consumed_at": {
|
|
||||||
"name": "consumed_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"oauth_attempts_app_id_oauth_apps_id_fk": {
|
|
||||||
"name": "oauth_attempts_app_id_oauth_apps_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "oauth_apps",
|
|
||||||
"columnsFrom": ["app_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
},
|
|
||||||
"oauth_attempts_connection_id_connections_id_fk": {
|
|
||||||
"name": "oauth_attempts_connection_id_connections_id_fk",
|
|
||||||
"tableFrom": "oauth_attempts",
|
|
||||||
"tableTo": "connections",
|
|
||||||
"columnsFrom": ["connection_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "cascade",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"research_sessions": {
|
|
||||||
"name": "research_sessions",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"title": {
|
|
||||||
"name": "title",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"status": {
|
|
||||||
"name": "status",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"updated_at": {
|
|
||||||
"name": "updated_at",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"snapshot": {
|
|
||||||
"name": "snapshot",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {}
|
|
||||||
},
|
|
||||||
"research_state": {
|
|
||||||
"name": "research_state",
|
|
||||||
"columns": {
|
|
||||||
"id": {
|
|
||||||
"name": "id",
|
|
||||||
"type": "integer",
|
|
||||||
"primaryKey": true,
|
|
||||||
"notNull": true,
|
|
||||||
"autoincrement": false
|
|
||||||
},
|
|
||||||
"active_session_id": {
|
|
||||||
"name": "active_session_id",
|
|
||||||
"type": "text",
|
|
||||||
"primaryKey": false,
|
|
||||||
"notNull": false,
|
|
||||||
"autoincrement": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
|
||||||
"research_state_active_session_id_research_sessions_id_fk": {
|
|
||||||
"name": "research_state_active_session_id_research_sessions_id_fk",
|
|
||||||
"tableFrom": "research_state",
|
|
||||||
"tableTo": "research_sessions",
|
|
||||||
"columnsFrom": ["active_session_id"],
|
|
||||||
"columnsTo": ["id"],
|
|
||||||
"onDelete": "set null",
|
|
||||||
"onUpdate": "no action"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"compositePrimaryKeys": {},
|
|
||||||
"uniqueConstraints": {},
|
|
||||||
"checkConstraints": {
|
|
||||||
"research_state_singleton": {
|
|
||||||
"name": "research_state_singleton",
|
|
||||||
"value": "\"research_state\".\"id\" = 1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"views": {},
|
|
||||||
"enums": {},
|
|
||||||
"_meta": {
|
|
||||||
"schemas": {},
|
|
||||||
"tables": {},
|
|
||||||
"columns": {}
|
|
||||||
},
|
|
||||||
"internal": {
|
|
||||||
"indexes": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "7",
|
|
||||||
"dialect": "sqlite",
|
|
||||||
"entries": [
|
|
||||||
{
|
|
||||||
"idx": 0,
|
|
||||||
"version": "6",
|
|
||||||
"when": 1790234301369,
|
|
||||||
"tag": "0000_aspiring_bloodstorm",
|
|
||||||
"breakpoints": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idx": 1,
|
|
||||||
"version": "6",
|
|
||||||
"when": 1790234518415,
|
|
||||||
"tag": "0001_many_fat_cobra",
|
|
||||||
"breakpoints": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idx": 2,
|
|
||||||
"version": "6",
|
|
||||||
"when": 1790234736939,
|
|
||||||
"tag": "0002_fine_master_chief",
|
|
||||||
"breakpoints": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idx": 3,
|
|
||||||
"version": "6",
|
|
||||||
"when": 1790242505709,
|
|
||||||
"tag": "0003_romantic_scrambler",
|
|
||||||
"breakpoints": true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { expect, test } from '../fixtures'
|
||||||
|
|
||||||
|
test('home page has no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
homePage,
|
||||||
|
}) => {
|
||||||
|
await homePage.goTo()
|
||||||
|
await expect(homePage.articlesLocator).toHaveCount(0)
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { expect, test } from '../fixtures'
|
||||||
|
|
||||||
|
test('list picker has no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
listsPage,
|
||||||
|
}) => {
|
||||||
|
await listsPage.goTo()
|
||||||
|
await expect(listsPage.articlesLocator).toHaveCount(0)
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
test('list timeline has no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
listsPage,
|
||||||
|
}) => {
|
||||||
|
await listsPage.goTo()
|
||||||
|
await listsPage.openList(/My E2E List.*10 メンバー/)
|
||||||
|
await expect(listsPage.endOfFeedLocator).toBeVisible()
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { expect, test } from '../fixtures'
|
||||||
|
|
||||||
|
test('empty search page has no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
searchPage,
|
||||||
|
}) => {
|
||||||
|
await searchPage.goTo()
|
||||||
|
await expect(searchPage.articlesLocator).toHaveCount(0)
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
test('search results have no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
searchPage,
|
||||||
|
}) => {
|
||||||
|
await searchPage.goTo()
|
||||||
|
await searchPage.search('AI lang:ja')
|
||||||
|
await expect(searchPage.endOfFeedLocator).toBeVisible()
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { expect, test } from '../fixtures'
|
||||||
|
|
||||||
|
test('conversation has no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
threadPage,
|
||||||
|
}) => {
|
||||||
|
await threadPage.goTo('yuta', '1001')
|
||||||
|
await expect(threadPage.endOfFeedLocator).toBeVisible()
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { expect, test } from '../fixtures'
|
||||||
|
|
||||||
|
test('user timeline has no accessibility violations', async ({
|
||||||
|
a11y,
|
||||||
|
userPage,
|
||||||
|
}) => {
|
||||||
|
await userPage.goTo('yuta')
|
||||||
|
await expect(userPage.endOfFeedLocator).toBeVisible()
|
||||||
|
|
||||||
|
const result = await a11y().analyze()
|
||||||
|
expect(result.violations).toEqual([])
|
||||||
|
})
|
||||||
+23
-27
@@ -1,38 +1,34 @@
|
|||||||
import { basename, dirname, isAbsolute } from 'node:path'
|
|
||||||
import AxeBuilder from '@axe-core/playwright'
|
import AxeBuilder from '@axe-core/playwright'
|
||||||
import { test as base } from '@playwright/test'
|
import { test as base } from '@playwright/test'
|
||||||
import { openDatabase } from '../src/features/storage/database.server'
|
import { HomePage } from './models/HomePage'
|
||||||
|
import { ListsPage } from './models/ListsPage'
|
||||||
|
import { SearchPage } from './models/SearchPage'
|
||||||
|
import { ThreadPage } from './models/ThreadPage'
|
||||||
|
import { UserPage } from './models/UserPage'
|
||||||
|
|
||||||
export const test = base.extend<{
|
type Fixtures = {
|
||||||
a11y: () => AxeBuilder
|
a11y: () => AxeBuilder
|
||||||
resetDecks: undefined
|
homePage: HomePage
|
||||||
}>({
|
listsPage: ListsPage
|
||||||
resetDecks: [
|
searchPage: SearchPage
|
||||||
// biome-ignore lint/correctness/noEmptyPattern: Playwright requires destructured fixture arguments.
|
threadPage: ThreadPage
|
||||||
async ({}, use) => {
|
userPage: UserPage
|
||||||
const path = process.env.TWITTER_LITE_E2E_DB_PATH
|
}
|
||||||
if (
|
|
||||||
!path ||
|
export const test = base.extend<Fixtures>({
|
||||||
!isAbsolute(path) ||
|
|
||||||
!basename(dirname(path)).startsWith('twitter-lite-e2e-') ||
|
|
||||||
basename(path) !== 'workspace.sqlite'
|
|
||||||
)
|
|
||||||
throw new Error('Isolated E2E database is required.')
|
|
||||||
const database = openDatabase(path).$client
|
|
||||||
database.pragma('foreign_keys = ON')
|
|
||||||
database.exec('DELETE FROM decks; DELETE FROM legacy_imports;')
|
|
||||||
database.close()
|
|
||||||
await use(undefined)
|
|
||||||
},
|
|
||||||
{ auto: true },
|
|
||||||
],
|
|
||||||
a11y: async ({ page }, use) => {
|
a11y: async ({ page }, use) => {
|
||||||
await use(() =>
|
const makeAxeBuilder = () =>
|
||||||
new AxeBuilder({ page })
|
new AxeBuilder({ page })
|
||||||
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
|
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
|
||||||
.disableRules(['meta-viewport']),
|
.disableRules(['meta-viewport'])
|
||||||
)
|
|
||||||
|
await use(makeAxeBuilder)
|
||||||
},
|
},
|
||||||
|
homePage: ({ page }, use) => use(new HomePage(page)),
|
||||||
|
listsPage: ({ page }, use) => use(new ListsPage(page)),
|
||||||
|
searchPage: ({ page }, use) => use(new SearchPage(page)),
|
||||||
|
threadPage: ({ page }, use) => use(new ThreadPage(page)),
|
||||||
|
userPage: ({ page }, use) => use(new UserPage(page)),
|
||||||
})
|
})
|
||||||
|
|
||||||
export { expect } from '@playwright/test'
|
export { expect } from '@playwright/test'
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
import type { TweetLegacy } from '../generated/twitter-openapi/client.ts'
|
|
||||||
|
|
||||||
interface TweetLegacyFixtureOptions {
|
|
||||||
conversationId?: string
|
|
||||||
inReplyTo?: string
|
|
||||||
replyCount?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export const tweetLegacyFixture = (
|
|
||||||
id: string,
|
|
||||||
text: string,
|
|
||||||
{
|
|
||||||
conversationId = id,
|
|
||||||
inReplyTo,
|
|
||||||
replyCount = 1,
|
|
||||||
}: TweetLegacyFixtureOptions = {},
|
|
||||||
): TweetLegacy => ({
|
|
||||||
bookmark_count: 0,
|
|
||||||
bookmarked: false,
|
|
||||||
conversation_id_str: conversationId,
|
|
||||||
created_at: 'Mon Jul 13 00:00:00 +0000 2026',
|
|
||||||
display_text_range: [0, text.length],
|
|
||||||
favorite_count: 3,
|
|
||||||
favorited: false,
|
|
||||||
full_text: text,
|
|
||||||
id_str: id,
|
|
||||||
...(inReplyTo ? { in_reply_to_status_id_str: inReplyTo } : {}),
|
|
||||||
is_quote_status: false,
|
|
||||||
lang: 'ja',
|
|
||||||
quote_count: 0,
|
|
||||||
reply_count: replyCount,
|
|
||||||
retweet_count: 2,
|
|
||||||
retweeted: false,
|
|
||||||
user_id_str: '42',
|
|
||||||
})
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,63 +0,0 @@
|
|||||||
import { expect, test } from '../fixtures'
|
|
||||||
|
|
||||||
test('owner can open the app but missing or foreign identity is forbidden', async ({
|
|
||||||
request,
|
|
||||||
}) => {
|
|
||||||
expect((await request.get('/')).status()).toBe(200)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await request.get('/', { headers: { 'Tailscale-User-Login': '' } })
|
|
||||||
).status(),
|
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await request.get('/', {
|
|
||||||
headers: { 'Tailscale-User-Login': '[email protected]' },
|
|
||||||
})
|
|
||||||
).status(),
|
|
||||||
).toBe(403)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('mutations require exact Origin even with same-origin Fetch Metadata', async ({
|
|
||||||
request,
|
|
||||||
}) => {
|
|
||||||
expect((await request.post('/')).status()).toBe(403)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await request.post('/', {
|
|
||||||
headers: {
|
|
||||||
Origin: 'https://other.invalid',
|
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
).status(),
|
|
||||||
).toBe(403)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('server functions also reject foreign identity and cross-site calls', async ({
|
|
||||||
page,
|
|
||||||
request,
|
|
||||||
}) => {
|
|
||||||
const serverRequest = page.waitForRequest((request) =>
|
|
||||||
request.url().includes('/_serverFn/'),
|
|
||||||
)
|
|
||||||
await page.goto('/')
|
|
||||||
const url = (await serverRequest).url()
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await request.get(url, {
|
|
||||||
headers: {
|
|
||||||
'Tailscale-User-Login': '[email protected]',
|
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
).status(),
|
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await request.get(url, {
|
|
||||||
headers: { 'Sec-Fetch-Site': 'cross-site' },
|
|
||||||
})
|
|
||||||
).status(),
|
|
||||||
).toBe(403)
|
|
||||||
})
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
import { expect, test } from '../fixtures'
|
|
||||||
|
|
||||||
test('opens account management after hydration without inheriting real OAuth configuration', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '名前を変更', includeHidden: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
const manage = page.getByRole('button', { name: '接続アカウントを管理' })
|
|
||||||
if (!(await manage.isVisible())) {
|
|
||||||
await page.getByRole('button', { name: 'サイドバーを切り替え' }).click()
|
|
||||||
}
|
|
||||||
await expect(manage).toBeEnabled()
|
|
||||||
await manage.click()
|
|
||||||
const dialog = page.getByRole('dialog', { name: '接続アカウント' })
|
|
||||||
await expect(dialog).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
dialog.getByText('利用するMastodonサーバーがまだ設定されていません。'),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
dialog.getByRole('button', { name: 'Mastodonで認可する' }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await expect(dialog).toHaveCount(0)
|
|
||||||
await expect(manage).toBeFocused()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('opens account management from the inbox footer and restores focus on close', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/inbox')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const manage = page.getByRole('button', { name: '接続アカウントを管理' })
|
|
||||||
await expect(manage).toBeVisible()
|
|
||||||
await manage.click()
|
|
||||||
const dialog = page.getByRole('dialog', { name: '接続アカウント' })
|
|
||||||
await expect(dialog).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
dialog.getByText('利用するMastodonサーバーがまだ設定されていません。'),
|
|
||||||
).toBeVisible()
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await expect(dialog).toHaveCount(0)
|
|
||||||
await expect(manage).toBeFocused()
|
|
||||||
await expect(page.getByRole('textbox', { name: '記事を検索' })).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('rejects an unbound OAuth callback without contacting an instance', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/oauth/mastodon/callback?state=invalid&code=not-a-real-code')
|
|
||||||
await expect(page).toHaveURL(/\/\?mastodon=failed$/)
|
|
||||||
await expect(page.getByRole('alert')).toContainText(
|
|
||||||
'Mastodonの認可を完了できませんでした。',
|
|
||||||
)
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '名前を変更', includeHidden: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
const manage = page.getByRole('button', { name: '接続アカウントを管理' })
|
|
||||||
if (!(await manage.isVisible())) {
|
|
||||||
await page.getByRole('button', { name: 'サイドバーを切り替え' }).click()
|
|
||||||
}
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '接続アカウントを管理' }),
|
|
||||||
).toBeEnabled()
|
|
||||||
})
|
|
||||||
@@ -1,420 +0,0 @@
|
|||||||
import type { Page } from '@playwright/test'
|
|
||||||
import { expect, test } from '../fixtures'
|
|
||||||
import { closeMobileSidebar, showDeckManagement } from '../workspace'
|
|
||||||
|
|
||||||
async function addColumn(
|
|
||||||
page: Page,
|
|
||||||
title: string,
|
|
||||||
query: string,
|
|
||||||
profile = 'e2e',
|
|
||||||
kind = 'search',
|
|
||||||
) {
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'カラムを追加', exact: true }).click()
|
|
||||||
const editor = page.getByRole('form', { name: 'カラムを追加', exact: true })
|
|
||||||
await editor.getByLabel('カラム名', { exact: true }).fill(title)
|
|
||||||
await editor
|
|
||||||
.getByRole('combobox', { name: '接続プロファイル', exact: true })
|
|
||||||
.selectOption({ label: profile })
|
|
||||||
await editor
|
|
||||||
.getByRole('combobox', { name: 'カラムの種類', exact: true })
|
|
||||||
.selectOption(kind)
|
|
||||||
await editor
|
|
||||||
.getByLabel(
|
|
||||||
kind === 'search'
|
|
||||||
? 'Twitterの検索条件'
|
|
||||||
: kind === 'user'
|
|
||||||
? 'ユーザー'
|
|
||||||
: 'リスト',
|
|
||||||
{ exact: true },
|
|
||||||
)
|
|
||||||
.fill(query)
|
|
||||||
await editor.getByRole('button', { name: '追加して検索' }).click()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(
|
|
||||||
page
|
|
||||||
.getByRole('region', { name: title, exact: true })
|
|
||||||
.locator('article')
|
|
||||||
.first(),
|
|
||||||
).toBeVisible()
|
|
||||||
}
|
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
await page.goto('/')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'デッキとして保存', exact: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'デッキとして保存', exact: true })
|
|
||||||
.click()
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await expect(page.getByText('サーバーに保存・端末間で共有')).toBeVisible()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('binds identical searches to independent profiles through paging, editing and reload', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await addColumn(page, '通常の接続', 'same-query')
|
|
||||||
await addColumn(page, '別の接続', 'same-query', 'alternate')
|
|
||||||
const first = page.getByRole('region', { name: '通常の接続', exact: true })
|
|
||||||
const second = page.getByRole('region', { name: '別の接続', exact: true })
|
|
||||||
await expect(
|
|
||||||
first.getByText('Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
second.getByText('alternate · Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await first.getByRole('button', { name: '続きを読み込む' }).click()
|
|
||||||
await expect(first.locator('article')).toHaveCount(2)
|
|
||||||
await expect(second.locator('article')).toHaveCount(1)
|
|
||||||
await second.getByRole('button', { name: '続きを読み込む' }).click()
|
|
||||||
await expect(
|
|
||||||
second.getByText('alternate · Latest · all page 2'),
|
|
||||||
).toBeVisible()
|
|
||||||
await second.getByRole('button', { name: '別の接続の操作' }).click()
|
|
||||||
await page.getByRole('menuitem', { name: '編集', exact: true }).click()
|
|
||||||
await page
|
|
||||||
.getByRole('combobox', { name: '接続プロファイル', exact: true })
|
|
||||||
.selectOption({ label: 'e2e' })
|
|
||||||
await page.getByRole('button', { name: '変更を保存' }).click()
|
|
||||||
await expect(
|
|
||||||
second.getByText('Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(second.getByText('alternate · Latest · all page 1')).toHaveCount(
|
|
||||||
0,
|
|
||||||
)
|
|
||||||
await page.reload()
|
|
||||||
await expect(
|
|
||||||
second.getByText('Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(first.locator('article')).toHaveCount(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('creates, switches, renames and deletes persisted deck profiles', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.getByRole('button', { name: '名前を変更' }).click()
|
|
||||||
await page.getByLabel('調査テーマ・デッキ名').fill('最初の調査')
|
|
||||||
await page.getByRole('button', { name: '名前を保存' }).click()
|
|
||||||
await addColumn(page, '最初の観点', 'first-deck')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'デッキを作成', exact: true }).click()
|
|
||||||
await page.getByLabel('新しいデッキ名').fill('別の調査')
|
|
||||||
await page.getByRole('button', { name: '作成', exact: true }).click()
|
|
||||||
await expect(page.locator('.deck-column')).toHaveCount(0)
|
|
||||||
await addColumn(page, '別の観点', 'second-deck', 'alternate')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page
|
|
||||||
.getByLabel('デッキプロファイル', { exact: true })
|
|
||||||
.selectOption({ label: '最初の調査' })
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['最初の観点'])
|
|
||||||
await page.reload()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('最初の調査')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page
|
|
||||||
.getByLabel('デッキプロファイル', { exact: true })
|
|
||||||
.selectOption({ label: '別の調査' })
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['別の観点'])
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'デッキを削除', exact: true }).click()
|
|
||||||
await page.getByRole('button', { name: '削除する', exact: true }).click()
|
|
||||||
await page.reload()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('最初の調査')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await expect(
|
|
||||||
page.getByLabel('デッキプロファイル', { exact: true }).locator('option'),
|
|
||||||
).toHaveCount(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('reads user and list timelines within columns and reorders, deletes and restores them', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await addColumn(page, 'アカウント', 'yuta', 'alternate', 'user')
|
|
||||||
await addColumn(page, 'リストの投稿', '1234567890', 'e2e', 'list')
|
|
||||||
const user = page.getByRole('region', { name: 'アカウント', exact: true })
|
|
||||||
const list = page.getByRole('region', { name: 'リストの投稿', exact: true })
|
|
||||||
await expect(user.getByText('alternate profile page 1')).toBeVisible()
|
|
||||||
await expect(list.getByText('list page 1')).toBeVisible()
|
|
||||||
await list.getByRole('button', { name: '続きを読み込む' }).click()
|
|
||||||
await expect(list.getByText('list page 2')).toBeVisible()
|
|
||||||
await list.getByRole('button', { name: 'リストの投稿の操作' }).click()
|
|
||||||
await page.getByRole('menuitem', { name: 'リストの投稿を左へ' }).click()
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText([
|
|
||||||
'リストの投稿',
|
|
||||||
'アカウント',
|
|
||||||
])
|
|
||||||
await list.getByRole('button', { name: 'リストの投稿の操作' }).click()
|
|
||||||
await page.getByRole('menuitem', { name: 'リストの投稿を削除' }).click()
|
|
||||||
await page.getByRole('button', { name: '元に戻す' }).click()
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText([
|
|
||||||
'リストの投稿',
|
|
||||||
'アカウント',
|
|
||||||
])
|
|
||||||
await page.reload()
|
|
||||||
await expect(user.getByText('alternate profile page 1')).toBeVisible()
|
|
||||||
await expect(list.getByText('list page 1')).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps other columns usable when pagination fails and retries that column', async ({
|
|
||||||
page,
|
|
||||||
}, testInfo) => {
|
|
||||||
await addColumn(page, '失敗する検索', `retry-deck-${testInfo.project.name}`)
|
|
||||||
await addColumn(page, '別の検索', 'independent-deck')
|
|
||||||
const failed = page.getByRole('region', { name: '失敗する検索', exact: true })
|
|
||||||
const other = page.getByRole('region', { name: '別の検索', exact: true })
|
|
||||||
await failed.getByRole('button', { name: '続きを読み込む' }).click()
|
|
||||||
await expect(failed.getByRole('alert')).toBeVisible()
|
|
||||||
await expect(failed.locator('article')).toHaveCount(1)
|
|
||||||
await other.getByRole('button', { name: '続きを読み込む' }).click()
|
|
||||||
await expect(other.locator('article')).toHaveCount(2)
|
|
||||||
await failed.getByRole('button', { name: '再試行' }).click()
|
|
||||||
await expect(failed.locator('article')).toHaveCount(2)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps the deck and editor accessible within narrow viewports', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}, testInfo) => {
|
|
||||||
await addColumn(page, '日本語の反応', 'WebMCP lang:ja')
|
|
||||||
await addColumn(page, '海外の反応', 'WebMCP lang:en', 'alternate')
|
|
||||||
await addColumn(page, '公式アカウント', 'OpenAI', 'e2e', 'user')
|
|
||||||
for (const width of [320, 375, 414, 768]) {
|
|
||||||
await page.setViewportSize({ width, height: 900 })
|
|
||||||
expect(
|
|
||||||
await page.evaluate(
|
|
||||||
() => document.documentElement.scrollWidth > innerWidth,
|
|
||||||
),
|
|
||||||
).toBe(false)
|
|
||||||
expect(
|
|
||||||
await page.evaluate(
|
|
||||||
() => document.documentElement.scrollHeight <= innerHeight,
|
|
||||||
),
|
|
||||||
).toBe(true)
|
|
||||||
const board = await page.locator('.deck-board').boundingBox()
|
|
||||||
expect(board).not.toBeNull()
|
|
||||||
expect((board?.y ?? 0) + (board?.height ?? 0)).toBeLessThanOrEqual(901)
|
|
||||||
}
|
|
||||||
await page.setViewportSize({
|
|
||||||
width: testInfo.project.name === 'desktop' ? 1440 : 393,
|
|
||||||
height: 900,
|
|
||||||
})
|
|
||||||
await expect(
|
|
||||||
page.getByRole('navigation', { name: 'カラム一覧' }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await expect(
|
|
||||||
page.getByRole('heading', { name: '公式アカウント', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await page.screenshot({
|
|
||||||
path: testInfo.outputPath('deck-populated.png'),
|
|
||||||
fullPage: true,
|
|
||||||
})
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'カラムを追加', exact: true }).click()
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await page.screenshot({
|
|
||||||
path: testInfo.outputPath('deck.png'),
|
|
||||||
fullPage: true,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
test('closes the column editor with Escape and restores focus without applying edits', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await showDeckManagement(page)
|
|
||||||
const opener = page.getByRole('button', { name: 'カラムを追加', exact: true })
|
|
||||||
await opener.click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('dialog', { name: 'カラムを追加', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page.getByLabel('カラム名', { exact: true }).fill('キャンセルする観点')
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('dialog', { name: 'カラムを追加', exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await expect(opener).toBeFocused()
|
|
||||||
await expect(page.locator('.deck-column')).toHaveCount(0)
|
|
||||||
await opener.click()
|
|
||||||
await expect(page.getByLabel('カラム名', { exact: true })).toHaveValue('')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('does not overwrite unreadable storage on reload', async ({ page }) => {
|
|
||||||
await page.evaluate(() =>
|
|
||||||
localStorage.setItem('twitter-lite-research-deck', '{broken'),
|
|
||||||
)
|
|
||||||
await page.reload()
|
|
||||||
await expect(page.getByRole('alert')).toContainText('読み込めませんでした')
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() =>
|
|
||||||
localStorage.getItem('twitter-lite-research-deck'),
|
|
||||||
),
|
|
||||||
).toBe('{broken')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('selects a list from the column profile catalog and refreshes it on profile change', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'カラムを追加', exact: true }).click()
|
|
||||||
await page.getByLabel('カラム名', { exact: true }).fill('購読リスト')
|
|
||||||
await page
|
|
||||||
.getByRole('combobox', { name: '接続プロファイル', exact: true })
|
|
||||||
.selectOption({ label: 'e2e' })
|
|
||||||
await page
|
|
||||||
.getByRole('combobox', { name: 'カラムの種類', exact: true })
|
|
||||||
.selectOption('list')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'My E2E List', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page
|
|
||||||
.getByRole('combobox', { name: '接続プロファイル', exact: true })
|
|
||||||
.selectOption({ label: 'alternate' })
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'My E2E List', exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'Alternate List', exact: true })
|
|
||||||
.click()
|
|
||||||
await expect(page.getByLabel('リスト', { exact: true })).toHaveValue(
|
|
||||||
'1234567890',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: '追加して検索' }).click()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(
|
|
||||||
page
|
|
||||||
.getByRole('region', { name: '購読リスト', exact: true })
|
|
||||||
.getByText('list page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps an open draft through remote edits and rejects its stale save', async ({
|
|
||||||
page,
|
|
||||||
browser,
|
|
||||||
baseURL,
|
|
||||||
}) => {
|
|
||||||
const other = await browser.newContext({
|
|
||||||
baseURL,
|
|
||||||
extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
|
|
||||||
})
|
|
||||||
try {
|
|
||||||
const device = await other.newPage()
|
|
||||||
await device.goto('/')
|
|
||||||
await page.getByRole('button', { name: '名前を変更' }).click()
|
|
||||||
await page.getByLabel('調査テーマ・デッキ名').fill('編集中の名前')
|
|
||||||
await device.getByRole('button', { name: '名前を変更' }).click()
|
|
||||||
await device.getByLabel('調査テーマ・デッキ名').fill('別の端末の変更')
|
|
||||||
await device.getByRole('button', { name: '名前を保存' }).click()
|
|
||||||
await expect(device.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'別の端末の変更',
|
|
||||||
)
|
|
||||||
await page.evaluate(() => window.dispatchEvent(new Event('focus')))
|
|
||||||
await expect(page.getByLabel('調査テーマ・デッキ名')).toHaveValue(
|
|
||||||
'編集中の名前',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: '名前を保存' }).click()
|
|
||||||
await expect(page.getByRole('alert')).toContainText(
|
|
||||||
'別の端末で変更されました',
|
|
||||||
)
|
|
||||||
await expect(page.getByLabel('調査テーマ・デッキ名')).toHaveValue(
|
|
||||||
'編集中の名前',
|
|
||||||
)
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await page.getByRole('button', { name: '最新のデッキを再読み込み' }).click()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'別の端末の変更',
|
|
||||||
)
|
|
||||||
} finally {
|
|
||||||
await other.close()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
test('imports old browser decks explicitly and avoids duplicate imports after retry', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const legacy = {
|
|
||||||
version: 2,
|
|
||||||
activeDeckId: 'old',
|
|
||||||
decks: [
|
|
||||||
{
|
|
||||||
id: 'old',
|
|
||||||
title: '以前の調査',
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
id: 'a',
|
|
||||||
title: '以前の観点',
|
|
||||||
profileName: 'e2e',
|
|
||||||
source: {
|
|
||||||
platform: 'twitter',
|
|
||||||
kind: 'search',
|
|
||||||
query: 'WebMCP',
|
|
||||||
product: 'Latest',
|
|
||||||
following: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
await page.evaluate(
|
|
||||||
(legacy) =>
|
|
||||||
localStorage.setItem(
|
|
||||||
'twitter-lite-research-deck',
|
|
||||||
JSON.stringify(legacy),
|
|
||||||
),
|
|
||||||
legacy,
|
|
||||||
)
|
|
||||||
await page.reload()
|
|
||||||
await showDeckManagement(page)
|
|
||||||
const selector = page.getByLabel('デッキプロファイル', { exact: true })
|
|
||||||
await expect(selector.locator('option')).toHaveCount(1)
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await page.getByRole('button', { name: '旧デッキを取り込む' }).click()
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await expect(selector.locator('option')).toHaveCount(2)
|
|
||||||
await selector.selectOption({ label: '以前の調査' })
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(
|
|
||||||
page.getByText('Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page.evaluate(
|
|
||||||
(legacy) =>
|
|
||||||
localStorage.setItem(
|
|
||||||
'twitter-lite-research-deck',
|
|
||||||
JSON.stringify(legacy),
|
|
||||||
),
|
|
||||||
legacy,
|
|
||||||
)
|
|
||||||
await page.reload()
|
|
||||||
await page.getByRole('button', { name: '旧デッキを取り込む' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '旧デッキを取り込む' }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await expect(selector.locator('option')).toHaveCount(2)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('preserves a new deck dialog and its draft across the mobile breakpoint', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'デッキを作成', exact: true }).click()
|
|
||||||
const dialog = page.getByRole('dialog', { name: 'デッキを作成', exact: true })
|
|
||||||
await dialog.getByLabel('新しいデッキ名').fill('画面を回転しても残る調査')
|
|
||||||
for (const width of [1024, 375, 1024]) {
|
|
||||||
await page.setViewportSize({ width, height: 900 })
|
|
||||||
await expect(dialog).toHaveCount(1)
|
|
||||||
await expect(dialog).toBeVisible()
|
|
||||||
await expect(dialog.getByLabel('新しいデッキ名')).toHaveValue(
|
|
||||||
'画面を回転しても残る調査',
|
|
||||||
)
|
|
||||||
await expect(page.locator('#new-deck-title')).toHaveCount(1)
|
|
||||||
}
|
|
||||||
await dialog.getByRole('button', { name: '作成', exact: true }).click()
|
|
||||||
await expect(dialog).toHaveCount(0)
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'画面を回転しても残る調査',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
import { expect, test } from '../fixtures'
|
|
||||||
|
|
||||||
test('selects articles and keeps the reader focused on their content', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/inbox')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const rows = page.locator('.inbox-article-row')
|
|
||||||
await expect(rows).toHaveCount(9)
|
|
||||||
const articleTitle = 'エージェントに渡す文脈は、短くてもよい'
|
|
||||||
await rows.filter({ hasText: articleTitle }).click()
|
|
||||||
const reader = page.getByRole('article', { name: articleTitle, exact: true })
|
|
||||||
await expect(reader).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
reader.getByRole('heading', { name: articleTitle, exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
reader.getByText(
|
|
||||||
'まず目的を一文で書き、次に変えてはいけない条件を添える。',
|
|
||||||
{ exact: false },
|
|
||||||
),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(page.getByText('FOR YOU', { exact: true })).toHaveCount(0)
|
|
||||||
await expect(page.getByText('モック', { exact: true })).toHaveCount(0)
|
|
||||||
await expect(
|
|
||||||
page.getByText('この記事が届いた理由', { exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: /あなたへ|あとで読む|未読のみ/ }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
const back = page.getByRole('button', { name: '記事一覧に戻る' })
|
|
||||||
if (await back.isVisible()) await back.click()
|
|
||||||
await rows
|
|
||||||
.filter({ hasText: '3カラムの余白が、情報を読むリズムをつくる' })
|
|
||||||
.click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('article', {
|
|
||||||
name: '3カラムの余白が、情報を読むリズムをつくる',
|
|
||||||
exact: true,
|
|
||||||
}),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('recovers from empty search and shares navigation with Twitter Lite', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/inbox')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const rows = page.locator('.inbox-article-row')
|
|
||||||
await page
|
|
||||||
.getByRole('textbox', { name: '記事を検索' })
|
|
||||||
.fill('存在しない検索語xyz')
|
|
||||||
await expect(rows).toHaveCount(0)
|
|
||||||
await expect(
|
|
||||||
page.getByText('記事がありません', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page.getByRole('button', { name: '検索をクリア' }).click()
|
|
||||||
await expect(rows).toHaveCount(9)
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '興味を編集', exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await page.getByRole('link', { name: 'Twitter Lite', exact: true }).click()
|
|
||||||
await expect(page).toHaveURL(/\/deck$/)
|
|
||||||
await page.getByRole('link', { name: 'リーダー', exact: true }).click()
|
|
||||||
await expect(page).toHaveURL(/\/inbox$/)
|
|
||||||
await expect(rows).toHaveCount(9)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps article navigation readable without horizontal overflow', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}, testInfo) => {
|
|
||||||
await page.goto('/inbox')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
for (const width of [320, 375, 414, 768]) {
|
|
||||||
await page.setViewportSize({ width, height: 850 })
|
|
||||||
await expect(
|
|
||||||
page.getByRole('textbox', { name: '記事を検索' }),
|
|
||||||
).toBeVisible()
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.locator('.inbox-article-row').first().click()
|
|
||||||
const reader = page.getByRole('article', {
|
|
||||||
name: 'ブラウザを見ながら考える。AIエージェントとの新しい開発の進め方',
|
|
||||||
exact: true,
|
|
||||||
})
|
|
||||||
await expect(reader).toBeVisible()
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.screenshot({
|
|
||||||
path: testInfo.outputPath(`inbox-reader-${width}.png`),
|
|
||||||
})
|
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
const back = page.getByRole('button', { name: '記事一覧に戻る' })
|
|
||||||
if (await back.isVisible()) await back.click()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -0,0 +1,192 @@
|
|||||||
|
import { expect, test } from '../fixtures'
|
||||||
|
|
||||||
|
let consoleErrors: string[]
|
||||||
|
let pageErrors: string[]
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
consoleErrors = []
|
||||||
|
pageErrors = []
|
||||||
|
page.on('console', (message) => {
|
||||||
|
if (message.type() === 'error') consoleErrors.push(message.text())
|
||||||
|
})
|
||||||
|
page.on('pageerror', (error) => pageErrors.push(error.message))
|
||||||
|
})
|
||||||
|
|
||||||
|
test.afterEach(() => {
|
||||||
|
expect(consoleErrors, 'browser console errors').toEqual([])
|
||||||
|
expect(pageErrors, 'uncaught browser errors').toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
test('requires intent and infinitely loads a user timeline', async ({
|
||||||
|
homePage,
|
||||||
|
page,
|
||||||
|
userPage,
|
||||||
|
}) => {
|
||||||
|
await homePage.goTo()
|
||||||
|
await expect(page).toHaveURL(/\/$/)
|
||||||
|
await expect(page.locator('meta[name="referrer"]')).toHaveAttribute(
|
||||||
|
'content',
|
||||||
|
'no-referrer',
|
||||||
|
)
|
||||||
|
await expect(homePage.articlesLocator).toHaveCount(0)
|
||||||
|
await expect(homePage.ambientLinksLocator).toHaveCount(0)
|
||||||
|
|
||||||
|
await homePage.displayUser('@yuta')
|
||||||
|
|
||||||
|
await expect(page).toHaveURL(/\/yuta$/)
|
||||||
|
await expect(page.getByText('user page 1')).toBeVisible()
|
||||||
|
await expect(page.getByText('user page 2')).toBeVisible()
|
||||||
|
await expect(userPage.endOfFeedLocator).toBeVisible()
|
||||||
|
await expect(page).toHaveScreenshot('mist-user.png', {
|
||||||
|
animations: 'disabled',
|
||||||
|
fullPage: true,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test('selects an authenticated list and infinitely loads its timeline', async ({
|
||||||
|
listsPage,
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await listsPage.goTo()
|
||||||
|
await expect(listsPage.articlesLocator).toHaveCount(0)
|
||||||
|
|
||||||
|
await listsPage.openList(/My E2E List.*10 メンバー/)
|
||||||
|
|
||||||
|
await expect(page).toHaveURL(/\/i\/lists\/1234567890$/)
|
||||||
|
await expect(page.getByText('list page 1')).toBeVisible()
|
||||||
|
await expect(page.getByText('list page 2')).toBeVisible()
|
||||||
|
await expect(listsPage.endOfFeedLocator).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('opens a card detail and infinitely loads its conversation', async ({
|
||||||
|
page,
|
||||||
|
threadPage,
|
||||||
|
userPage,
|
||||||
|
}) => {
|
||||||
|
await userPage.goTo('yuta')
|
||||||
|
await userPage.openPostDetails('user page 1')
|
||||||
|
|
||||||
|
await expect(page).toHaveURL(/\/yuta\/status\/1001$/)
|
||||||
|
await expect(threadPage.headingLocator).toBeVisible()
|
||||||
|
await expect(threadPage.selectedPostLabelLocator).toBeVisible()
|
||||||
|
await expect(page.getByText('user page 1')).toHaveCount(1)
|
||||||
|
await expect(page.getByText('thread root')).toBeVisible()
|
||||||
|
await expect(page.getByText('thread page 1')).toBeVisible()
|
||||||
|
await expect(page.getByText('thread page 2')).toBeVisible()
|
||||||
|
await expect(threadPage.endOfFeedLocator).toBeVisible()
|
||||||
|
await expect(page).toHaveScreenshot('mist-thread.png', {
|
||||||
|
animations: 'disabled',
|
||||||
|
fullPage: true,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test('resolves a reply root and retries only the failed continuation', async ({
|
||||||
|
page,
|
||||||
|
threadPage,
|
||||||
|
}) => {
|
||||||
|
await threadPage.goTo('yuta', '2001')
|
||||||
|
|
||||||
|
await expect(page.getByText('retry focal')).toHaveCount(1)
|
||||||
|
await expect(page.getByText('thread root')).toBeVisible()
|
||||||
|
await expect(page.getByText('thread page 1')).toBeVisible()
|
||||||
|
await expect(threadPage.continuationErrorLocator).toHaveCount(1)
|
||||||
|
await expect(page.getByText('retry focal')).toHaveCount(1)
|
||||||
|
|
||||||
|
await threadPage.retryContinuation()
|
||||||
|
|
||||||
|
await expect(page.getByText('thread page 2')).toBeVisible()
|
||||||
|
await expect(threadPage.continuationErrorLocator).toHaveCount(0)
|
||||||
|
await expect(threadPage.endOfFeedLocator).toBeVisible()
|
||||||
|
await expect(threadPage.mutationButtonsLocator).toHaveCount(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('ends a thread without loading a continuation when there are no replies', async ({
|
||||||
|
page,
|
||||||
|
threadPage,
|
||||||
|
}) => {
|
||||||
|
await threadPage.goTo('yuta', '3001')
|
||||||
|
|
||||||
|
await expect(page.getByText('no replies')).toHaveCount(1)
|
||||||
|
await expect(page.getByText('thread root')).toBeVisible()
|
||||||
|
await expect(threadPage.endOfFeedLocator).toBeVisible()
|
||||||
|
await expect(threadPage.continuationErrorLocator).toHaveCount(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('searches Top posts from followed accounts', async ({
|
||||||
|
page,
|
||||||
|
searchPage,
|
||||||
|
}) => {
|
||||||
|
await searchPage.goTo()
|
||||||
|
await expect(searchPage.articlesLocator).toHaveCount(0)
|
||||||
|
await searchPage.searchTopFromFollowing('AI lang:ja')
|
||||||
|
await expect(searchPage.followingOnlyLocator).toBeChecked()
|
||||||
|
|
||||||
|
await expect(page).toHaveURL(/following=true/)
|
||||||
|
await expect(page.getByText('Top · follows page 1')).toBeVisible()
|
||||||
|
await expect(page.getByText('Top · follows page 2')).toBeVisible()
|
||||||
|
await expect(searchPage.endOfFeedLocator).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('retains the first page through a pagination error and retries explicitly', async ({
|
||||||
|
page,
|
||||||
|
searchPage,
|
||||||
|
}, testInfo) => {
|
||||||
|
await searchPage.goTo()
|
||||||
|
await expect(searchPage.articlesLocator).toHaveCount(0)
|
||||||
|
await searchPage.search(`retry-${testInfo.project.name}`)
|
||||||
|
|
||||||
|
await expect(page.getByText('Latest · all page 1')).toBeVisible()
|
||||||
|
await expect(searchPage.continuationErrorLocator).toHaveCount(1)
|
||||||
|
await expect(page.getByText('Latest · all page 1')).toBeVisible()
|
||||||
|
await expect(page.getByText('Latest · all page 2')).toHaveCount(0)
|
||||||
|
|
||||||
|
await searchPage.retryContinuation()
|
||||||
|
|
||||||
|
await expect(page.getByText('Latest · all page 2')).toBeVisible()
|
||||||
|
await expect(searchPage.continuationErrorLocator).toHaveCount(0)
|
||||||
|
await expect(searchPage.endOfFeedLocator).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('keeps keyboard focus intentional and discovery or mutation controls absent', async ({
|
||||||
|
searchPage,
|
||||||
|
}) => {
|
||||||
|
await searchPage.goTo()
|
||||||
|
|
||||||
|
await searchPage.tabTo(
|
||||||
|
searchPage.page.getByRole('link', { name: 'ユーザー' }),
|
||||||
|
)
|
||||||
|
await searchPage.tabTo(searchPage.page.getByRole('link', { name: '検索' }))
|
||||||
|
await searchPage.tabTo(searchPage.page.getByRole('link', { name: 'リスト' }))
|
||||||
|
await searchPage.tabTo(searchPage.queryInputLocator)
|
||||||
|
await expect(searchPage.latestRankingLocator).toBeChecked()
|
||||||
|
await searchPage.tabTo(searchPage.latestRankingLocator)
|
||||||
|
await searchPage.tabTo(searchPage.followingOnlyLocator)
|
||||||
|
await searchPage.tabTo(searchPage.searchButtonLocator)
|
||||||
|
|
||||||
|
await expect(searchPage.ambientLinksLocator).toHaveCount(0)
|
||||||
|
await expect(searchPage.mutationButtonsLocator).toHaveCount(0)
|
||||||
|
await expect(searchPage.mutationLinksLocator).toHaveCount(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('removes loading rail animation for reduced motion', async ({
|
||||||
|
page,
|
||||||
|
searchPage,
|
||||||
|
}, testInfo) => {
|
||||||
|
await page.emulateMedia({ reducedMotion: 'reduce' })
|
||||||
|
await searchPage.goTo()
|
||||||
|
await expect(searchPage.articlesLocator).toHaveCount(0)
|
||||||
|
await searchPage.search(`slow-${testInfo.project.name}`)
|
||||||
|
|
||||||
|
const rail = searchPage.loadingRailLocator
|
||||||
|
await expect(rail).toBeVisible()
|
||||||
|
await expect
|
||||||
|
.poll(() =>
|
||||||
|
rail.evaluate((element) =>
|
||||||
|
getComputedStyle(element, '::after').getPropertyValue('animation-name'),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.toBe('none')
|
||||||
|
|
||||||
|
await expect(page.getByText('Latest · all page 2')).toBeVisible()
|
||||||
|
await expect(searchPage.endOfFeedLocator).toBeVisible()
|
||||||
|
})
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@@ -1,351 +0,0 @@
|
|||||||
import type { DeckColumn } from '../../src/features/decks/model'
|
|
||||||
import type { ResearchRun } from '../../src/features/research/model'
|
|
||||||
import { expect, test } from '../fixtures'
|
|
||||||
import {
|
|
||||||
closeMobileSidebar,
|
|
||||||
showDeckManagement,
|
|
||||||
showResearch,
|
|
||||||
} from '../workspace'
|
|
||||||
|
|
||||||
test('pushes the current research snapshot on each SSE connection', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/')
|
|
||||||
const snapshots = await page.evaluate(async () => {
|
|
||||||
const connect = () =>
|
|
||||||
new Promise<unknown>((resolve, reject) => {
|
|
||||||
const events = new EventSource('/api/research/events')
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
events.close()
|
|
||||||
reject(new Error('SSE timed out'))
|
|
||||||
}, 5000)
|
|
||||||
events.onmessage = (event) => {
|
|
||||||
clearTimeout(timer)
|
|
||||||
events.close()
|
|
||||||
resolve(JSON.parse(event.data))
|
|
||||||
}
|
|
||||||
events.onerror = () => {
|
|
||||||
clearTimeout(timer)
|
|
||||||
events.close()
|
|
||||||
reject(new Error('SSE failed'))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return [await connect(), await connect()]
|
|
||||||
})
|
|
||||||
expect(snapshots).toEqual([
|
|
||||||
{ configured: false, run: null, history: [] },
|
|
||||||
{ configured: false, run: null, history: [] },
|
|
||||||
])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('restores the conversation and growing temporary deck from reconnect snapshots', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'カラムを追加', exact: true }).click()
|
|
||||||
const accounts = page.getByRole('combobox', {
|
|
||||||
name: '接続プロファイル',
|
|
||||||
exact: true,
|
|
||||||
})
|
|
||||||
await accounts.selectOption({ label: 'e2e' })
|
|
||||||
const connectionId = await accounts.inputValue()
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
const run: ResearchRun = {
|
|
||||||
id: '36ad8cc7-318c-46ae-94fa-28d30336f027',
|
|
||||||
threadId: 'conversation-test',
|
|
||||||
connectionIds: [connectionId],
|
|
||||||
topic: '既存の観点を使って調査して',
|
|
||||||
status: 'running',
|
|
||||||
startedAt: Date.now(),
|
|
||||||
deckVersion: 1,
|
|
||||||
citations: [],
|
|
||||||
message: '既存の検索条件を再利用しています。',
|
|
||||||
messages: [
|
|
||||||
{ id: 'user-1', role: 'user', text: '既存の観点を使って調査して' },
|
|
||||||
{ id: 'tool-1', role: 'tool', text: 'list_decks: 完了' },
|
|
||||||
{
|
|
||||||
id: 'assistant-1',
|
|
||||||
role: 'assistant',
|
|
||||||
text: '既存の検索条件を再利用しています。',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
deck: {
|
|
||||||
id: 'generated-plan',
|
|
||||||
title: '会話からの調査',
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
id: 'one',
|
|
||||||
title: '最初の観点',
|
|
||||||
connectionId,
|
|
||||||
source: {
|
|
||||||
platform: 'twitter',
|
|
||||||
kind: 'search',
|
|
||||||
query: 'WebMCP',
|
|
||||||
product: 'Latest',
|
|
||||||
following: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
await page.route('**/api/research/events', (route) =>
|
|
||||||
route.fulfill({
|
|
||||||
contentType: 'text/event-stream',
|
|
||||||
body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
await page.reload()
|
|
||||||
await showResearch(page)
|
|
||||||
const conversation = page.getByRole('log', { name: '調査の会話' })
|
|
||||||
await expect(conversation).toContainText('既存の観点を使って調査して')
|
|
||||||
await expect(conversation).toContainText('list_decks: 完了')
|
|
||||||
await expect(conversation).toContainText('既存の検索条件を再利用しています。')
|
|
||||||
await expect(
|
|
||||||
conversation.locator('[data-slot="bubble-content"]'),
|
|
||||||
).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['最初の観点'])
|
|
||||||
run.deckVersion = 2
|
|
||||||
run.status = 'complete'
|
|
||||||
run.messages.push({
|
|
||||||
id: 'assistant-2',
|
|
||||||
role: 'assistant',
|
|
||||||
text: '比較する観点を追加しました。',
|
|
||||||
})
|
|
||||||
run.deck?.columns.push({
|
|
||||||
id: 'two',
|
|
||||||
title: '比較の観点',
|
|
||||||
connectionId,
|
|
||||||
source: {
|
|
||||||
platform: 'twitter',
|
|
||||||
kind: 'search',
|
|
||||||
query: 'WebMCP lang:ja',
|
|
||||||
product: 'Latest',
|
|
||||||
following: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
await page.reload()
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(conversation).toContainText('既存の観点を使って調査して')
|
|
||||||
await expect(conversation).toContainText('比較する観点を追加しました。')
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText([
|
|
||||||
'最初の観点',
|
|
||||||
'比較の観点',
|
|
||||||
])
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'デッキとして保存', exact: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
await showResearch(page)
|
|
||||||
const accountPicker = page.getByRole('button', {
|
|
||||||
name: '接続アカウント · 1件',
|
|
||||||
})
|
|
||||||
await accountPicker.click()
|
|
||||||
await expect(accountPicker).toHaveAttribute('aria-expanded', 'true')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('checkbox', { name: 'e2e · Twitter' }),
|
|
||||||
).toBeChecked()
|
|
||||||
await accountPicker.click()
|
|
||||||
await expect(accountPicker).toHaveAttribute('aria-expanded', 'false')
|
|
||||||
await page.getByLabel('メッセージ', { exact: true }).fill('この観点を詳しく')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '送信', exact: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'サイドバーを閉じる', exact: true })
|
|
||||||
.click()
|
|
||||||
run.deckVersion = 3
|
|
||||||
if (run.deck) run.deck.title = '閉じている間に更新された調査'
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'閉じている間に更新された調査',
|
|
||||||
{ timeout: 15000 },
|
|
||||||
)
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(page.getByLabel('メッセージ', { exact: true })).toHaveValue(
|
|
||||||
'この観点を詳しく',
|
|
||||||
)
|
|
||||||
await page.setViewportSize({ width: 600, height: 900 })
|
|
||||||
await expect(
|
|
||||||
page.locator('[data-sidebar="sidebar"][data-mobile="true"]'),
|
|
||||||
).toHaveCount(1)
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(page.getByLabel('メッセージ', { exact: true })).toHaveValue(
|
|
||||||
'この観点を詳しく',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: '接続アカウント · 1件' }).click()
|
|
||||||
await page.getByRole('checkbox', { name: 'e2e · Twitter' }).uncheck()
|
|
||||||
await page.setViewportSize({ width: 1100, height: 900 })
|
|
||||||
await expect(
|
|
||||||
page.locator('[data-sidebar="sidebar"][data-mobile="true"]'),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(page.getByLabel('メッセージ', { exact: true })).toHaveValue(
|
|
||||||
'この観点を詳しく',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: '接続アカウント · 0件' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('checkbox', { name: 'e2e · Twitter' }),
|
|
||||||
).not.toBeChecked()
|
|
||||||
await page.setViewportSize({ width: 600, height: 900 })
|
|
||||||
await expect(
|
|
||||||
page.locator('[data-sidebar="sidebar"][data-mobile="true"]'),
|
|
||||||
).toHaveCount(1)
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(page.getByLabel('メッセージ', { exact: true })).toHaveValue(
|
|
||||||
'この観点を詳しく',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: '接続アカウント · 0件' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('checkbox', { name: 'e2e · Twitter' }),
|
|
||||||
).not.toBeChecked()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('rejects a different tailnet owner at the SSE endpoint', async ({
|
|
||||||
request,
|
|
||||||
}) => {
|
|
||||||
const response = await request.get('/api/research/events', {
|
|
||||||
headers: { 'Tailscale-User-Login': '[email protected]' },
|
|
||||||
})
|
|
||||||
expect(response.status()).toBe(403)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('renders Markdown and reveals an unloaded citation in an offscreen deck column', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
await page.emulateMedia({ reducedMotion: 'reduce' })
|
|
||||||
await page.goto('/')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'カラムを追加', exact: true }).click()
|
|
||||||
const accounts = page.getByRole('combobox', {
|
|
||||||
name: '接続プロファイル',
|
|
||||||
exact: true,
|
|
||||||
})
|
|
||||||
await accounts.selectOption({ label: 'e2e' })
|
|
||||||
const connectionId = await accounts.inputValue()
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
const source: DeckColumn = {
|
|
||||||
id: 'citation-column-2',
|
|
||||||
title: '引用の観点',
|
|
||||||
connectionId,
|
|
||||||
source: {
|
|
||||||
platform: 'twitter',
|
|
||||||
kind: 'search',
|
|
||||||
query: 'citation-query-2',
|
|
||||||
product: 'Latest',
|
|
||||||
following: false,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
const columns: DeckColumn[] = ['概要', '比較'].map((title, index) => ({
|
|
||||||
id: `citation-column-${index}`,
|
|
||||||
title,
|
|
||||||
connectionId,
|
|
||||||
source: {
|
|
||||||
platform: 'twitter',
|
|
||||||
kind: 'search',
|
|
||||||
query: `citation-query-${index}`,
|
|
||||||
product: 'Latest',
|
|
||||||
following: false,
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
columns.push(source)
|
|
||||||
const run: ResearchRun = {
|
|
||||||
id: '973ae084-18ed-4674-8899-c75851e51d1b',
|
|
||||||
topic: '引用を確認',
|
|
||||||
status: 'complete',
|
|
||||||
startedAt: Date.now(),
|
|
||||||
deckVersion: 1,
|
|
||||||
message: '',
|
|
||||||
deck: { id: 'citation-deck', title: '引用付きの調査', columns },
|
|
||||||
messages: [
|
|
||||||
{
|
|
||||||
id: 'answer',
|
|
||||||
role: 'assistant',
|
|
||||||
text: '## 調査結果\n\n**重要な発見**です。\n\n- [根拠の投稿](https://x.com/author/status/123456789?s=20)\n\n| 観点 | 結果 |\n| --- | --- |\n| 投稿 | 確認済み |\n\n`コード`も表示します。',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
citations: [
|
|
||||||
{
|
|
||||||
column: source,
|
|
||||||
post: {
|
|
||||||
key: 'twitter:123456789',
|
|
||||||
nativeId: '123456789',
|
|
||||||
platform: 'twitter',
|
|
||||||
url: 'https://twitter.com/author/status/123456789',
|
|
||||||
text: 'AIが調査時に取得した引用本文',
|
|
||||||
author: { name: '引用元の著者', handle: 'author' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
await page.route('**/api/research/events', (route) =>
|
|
||||||
route.fulfill({
|
|
||||||
contentType: 'text/event-stream',
|
|
||||||
body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
await page.reload()
|
|
||||||
await showResearch(page)
|
|
||||||
const chat = page.getByRole('log', { name: '調査の会話' })
|
|
||||||
await expect(chat.getByRole('heading', { name: '調査結果' })).toBeVisible()
|
|
||||||
await expect(chat.getByRole('heading', { name: '調査結果' })).toHaveCSS(
|
|
||||||
'font-weight',
|
|
||||||
'600',
|
|
||||||
)
|
|
||||||
await expect(chat.locator('ul')).toHaveCSS('list-style-type', 'disc')
|
|
||||||
await expect(
|
|
||||||
chat.locator('strong').filter({ hasText: '重要な発見' }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(chat.getByRole('table')).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
page.getByText('AIが調査時に取得した引用本文', { exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await chat.getByRole('link', { name: '根拠の投稿' }).click()
|
|
||||||
const card = page.locator(
|
|
||||||
'.research-post[data-post-url="https://twitter.com/author/status/123456789"]',
|
|
||||||
)
|
|
||||||
await expect(card).toBeVisible()
|
|
||||||
await expect(card).toHaveClass(/citation-highlight/)
|
|
||||||
await expect(card).toBeFocused()
|
|
||||||
await expect(card).toContainText('調査時に取得した投稿')
|
|
||||||
await expect(card).toContainText('AIが調査時に取得した引用本文')
|
|
||||||
expect(
|
|
||||||
await page.locator('.deck-board').evaluate((element) => element.scrollLeft),
|
|
||||||
).toBeGreaterThan(0)
|
|
||||||
expect(page.context().pages()).toHaveLength(1)
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('explains unconfigured Codex and prevents starting research without affecting the deck', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/')
|
|
||||||
const heading = page.getByRole('heading', { level: 1 })
|
|
||||||
await expect(heading).toBeVisible()
|
|
||||||
const originalTitle = await heading.textContent()
|
|
||||||
await showResearch(page)
|
|
||||||
const panel = page.getByRole('complementary', { name: '調査チャット' })
|
|
||||||
await expect(panel).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
panel.getByText('自宅のCodexへの接続が設定されていません。'),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
panel.getByRole('button', { name: '送信', exact: true }),
|
|
||||||
).toBeDisabled()
|
|
||||||
await expect(panel.getByLabel('メッセージ', { exact: true })).toBeDisabled()
|
|
||||||
const accessibility = await a11y().analyze()
|
|
||||||
expect(accessibility.violations).toEqual([])
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(heading).toHaveText(originalTitle ?? '')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'デッキを作成', exact: true }).click()
|
|
||||||
await page.getByLabel('新しいデッキ名').fill('手動の調査')
|
|
||||||
await page.getByRole('button', { name: '作成', exact: true }).click()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(heading).toHaveText('手動の調査')
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(panel).toBeVisible()
|
|
||||||
})
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
import { expect, test } from '../fixtures'
|
|
||||||
|
|
||||||
const reviewSubject = '来週のレビュー、日程を決める'
|
|
||||||
const coffeeSubject = '久しぶりに、お茶でも'
|
|
||||||
|
|
||||||
test('reviews an edited reply and keeps the simulated result in history', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/support')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const rows = page.locator('.support-row')
|
|
||||||
await expect(rows).toHaveCount(3)
|
|
||||||
await rows.filter({ hasText: reviewSubject }).click()
|
|
||||||
await page.getByRole('button', { name: '丁寧に', exact: true }).click()
|
|
||||||
const reply = page.getByRole('textbox', { name: '返信', exact: true })
|
|
||||||
await expect(reply).toHaveValue(/資料をご共有/)
|
|
||||||
const edited = '資料を確認しました。初回の導線について当日お話しします。'
|
|
||||||
await reply.fill(edited)
|
|
||||||
const slot = '10月5日（月）14:00–14:30'
|
|
||||||
await page.getByRole('combobox', { name: '日程候補' }).selectOption(slot)
|
|
||||||
await page.getByRole('button', { name: '返信に入れる' }).click()
|
|
||||||
await expect(reply).toHaveValue(`${edited}\n\n${slot}はいかがでしょうか。`)
|
|
||||||
await page.getByRole('button', { name: '送信内容を確認' }).click()
|
|
||||||
const dialog = page.getByRole('dialog', { name: '送信内容の確認' })
|
|
||||||
await expect(dialog).toContainText(edited)
|
|
||||||
await expect(dialog).toContainText(slot)
|
|
||||||
await expect(dialog).toContainText('外部には送信されません')
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await dialog.getByRole('button', { name: '戻る', exact: true }).click()
|
|
||||||
await expect(reply).toHaveValue(new RegExp(edited))
|
|
||||||
await page.getByRole('button', { name: '送信内容を確認' }).click()
|
|
||||||
await dialog.getByRole('button', { name: '送信を試す' }).click()
|
|
||||||
await expect(dialog).toHaveCount(0)
|
|
||||||
await expect(rows.filter({ hasText: reviewSubject })).toHaveCount(0)
|
|
||||||
await page.getByRole('button', { name: '履歴', exact: true }).click()
|
|
||||||
await rows.filter({ hasText: reviewSubject }).click()
|
|
||||||
await expect(page.locator('.support-outcome')).toContainText(edited)
|
|
||||||
await expect(page.locator('.support-outcome')).toContainText(slot)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('defers a conversation and restores it to the current queue', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/support')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const rows = page.locator('.support-row')
|
|
||||||
await rows.filter({ hasText: coffeeSubject }).click()
|
|
||||||
await page
|
|
||||||
.getByRole('textbox', { name: '返信', exact: true })
|
|
||||||
.fill('土曜の予定を確認してから返事するね。')
|
|
||||||
await page.getByRole('button', { name: '今は置いておく' }).click()
|
|
||||||
await expect(rows.filter({ hasText: coffeeSubject })).toHaveCount(0)
|
|
||||||
await page.getByRole('button', { name: 'あとで', exact: true }).click()
|
|
||||||
await rows.filter({ hasText: coffeeSubject }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('textbox', { name: '返信', exact: true }),
|
|
||||||
).toHaveValue('土曜の予定を確認してから返事するね。')
|
|
||||||
await page.getByRole('button', { name: '今に戻す' }).click()
|
|
||||||
const back = page.getByRole('button', { name: '連絡一覧に戻る' })
|
|
||||||
if (await back.isVisible()) await back.click()
|
|
||||||
await expect(rows.filter({ hasText: coffeeSubject })).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '今', exact: true }),
|
|
||||||
).toHaveAttribute('aria-pressed', 'true')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps corrections as new records and summarizes only selected current facts', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/journal')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '記録する', exact: true }),
|
|
||||||
).toBeDisabled()
|
|
||||||
await page
|
|
||||||
.getByRole('textbox', { name: '記録内容' })
|
|
||||||
.fill('次はレビュー資料の導線を確認する')
|
|
||||||
await page.getByRole('button', { name: '記録する', exact: true }).click()
|
|
||||||
await expect(page.getByRole('article', { name: 'メモの記録' })).toContainText(
|
|
||||||
'発生日時: 不明',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: '体重', exact: true }).click()
|
|
||||||
await page.getByRole('spinbutton', { name: '体重', exact: true }).fill('65.2')
|
|
||||||
await page.getByRole('textbox', { name: '記録元' }).fill('自宅の体重計')
|
|
||||||
await page.getByRole('button', { name: '記録する', exact: true }).click()
|
|
||||||
await page
|
|
||||||
.getByRole('article', { name: '体重の記録' })
|
|
||||||
.getByRole('button', { name: '訂正する' })
|
|
||||||
.click()
|
|
||||||
const correction = page.getByRole('dialog', { name: '記録を訂正' })
|
|
||||||
await correction
|
|
||||||
.getByRole('spinbutton', { name: '体重', exact: true })
|
|
||||||
.fill('65.8')
|
|
||||||
await correction.getByRole('button', { name: '訂正を追加' }).click()
|
|
||||||
const weights = page.getByRole('article', { name: '体重の記録' })
|
|
||||||
await expect(weights).toHaveCount(2)
|
|
||||||
await expect(weights.filter({ hasText: '65.2 kg' })).toContainText('訂正前')
|
|
||||||
await expect(weights.filter({ hasText: '65.8 kg' })).toContainText('訂正')
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: '記録をまとめる', exact: true })
|
|
||||||
.click()
|
|
||||||
const review = page.getByRole('dialog', { name: '記録をまとめる' })
|
|
||||||
const summary = review.getByRole('textbox', { name: '記録のまとめ' })
|
|
||||||
await expect(summary).toHaveValue(/65.8 kg/)
|
|
||||||
await expect(summary).not.toHaveValue(/65.2 kg/)
|
|
||||||
await expect(summary).toHaveValue(/記録元: 自宅の体重計/)
|
|
||||||
await expect(summary).toHaveValue(/発生日時が不明の記録: 2件/)
|
|
||||||
await review.getByRole('checkbox', { name: /次はレビュー資料/ }).uncheck()
|
|
||||||
await expect(summary).not.toHaveValue(/次はレビュー資料/)
|
|
||||||
await expect(summary).toHaveValue(/記録のない期間の服薬・体重は不明/)
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('fits communication and journal interactions in narrow screens', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}) => {
|
|
||||||
for (const width of [320, 375, 768]) {
|
|
||||||
await page.setViewportSize({ width, height: 850 })
|
|
||||||
await page.goto('/support')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.locator('.support-row').first().click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('textbox', { name: '返信', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
const back = page.getByRole('button', { name: '連絡一覧に戻る' })
|
|
||||||
if (await back.isVisible()) await back.click()
|
|
||||||
await page.getByRole('link', { name: '記録', exact: true }).click()
|
|
||||||
await page.getByRole('button', { name: '体重', exact: true }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('spinbutton', { name: '体重', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,329 +0,0 @@
|
|||||||
import type { Page } from '@playwright/test'
|
|
||||||
import Database from 'better-sqlite3'
|
|
||||||
import { expect, test } from '../fixtures'
|
|
||||||
|
|
||||||
type NativeTesting = {
|
|
||||||
listTools(): { name: string }[]
|
|
||||||
executeTool(name: string, input: string): Promise<string | null>
|
|
||||||
}
|
|
||||||
type ToolResult = {
|
|
||||||
content: { type: string; text: string }[]
|
|
||||||
isError?: boolean
|
|
||||||
}
|
|
||||||
test.use({
|
|
||||||
launchOptions: {
|
|
||||||
executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
|
|
||||||
args: ['--enable-blink-features=WebMCP,WebMCPTesting'],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
async function toolNames(page: Page) {
|
|
||||||
return page.evaluate(() =>
|
|
||||||
(
|
|
||||||
navigator as Navigator & { modelContextTesting: NativeTesting }
|
|
||||||
).modelContextTesting
|
|
||||||
.listTools()
|
|
||||||
.map((tool) => tool.name)
|
|
||||||
.sort(),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
async function executeTool(
|
|
||||||
page: Page,
|
|
||||||
name: string,
|
|
||||||
input: Record<string, unknown> = {},
|
|
||||||
): Promise<ToolResult> {
|
|
||||||
const result = await page.evaluate(
|
|
||||||
({ name, input }) =>
|
|
||||||
(
|
|
||||||
navigator as Navigator & { modelContextTesting: NativeTesting }
|
|
||||||
).modelContextTesting.executeTool(name, JSON.stringify(input)),
|
|
||||||
{ name, input },
|
|
||||||
)
|
|
||||||
expect(result).not.toBeNull()
|
|
||||||
return JSON.parse(result ?? '{}')
|
|
||||||
}
|
|
||||||
function decoded(result: ToolResult) {
|
|
||||||
return JSON.parse(result.content[0]?.text ?? '{}')
|
|
||||||
}
|
|
||||||
const column = (title: string, connectionId: string) => ({
|
|
||||||
title,
|
|
||||||
connectionId,
|
|
||||||
source: { kind: 'search', query: 'WebMCP' },
|
|
||||||
})
|
|
||||||
function savedCount() {
|
|
||||||
const db = new Database(process.env.TWITTER_LITE_E2E_DB_PATH ?? '', {
|
|
||||||
readonly: true,
|
|
||||||
})
|
|
||||||
try {
|
|
||||||
return db.prepare('SELECT count(*) AS count FROM decks').get()
|
|
||||||
} finally {
|
|
||||||
db.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let accounts: Record<string, string>
|
|
||||||
let pageErrors: string[]
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
pageErrors = []
|
|
||||||
page.on('pageerror', (error) => pageErrors.push(error.message))
|
|
||||||
await page.goto('/')
|
|
||||||
await expect
|
|
||||||
.poll(() => toolNames(page))
|
|
||||||
.toEqual([
|
|
||||||
'delete_deck',
|
|
||||||
'get_column_posts',
|
|
||||||
'get_deck',
|
|
||||||
'list_connections',
|
|
||||||
'list_decks',
|
|
||||||
'load_more_column',
|
|
||||||
'save_deck',
|
|
||||||
'select_deck',
|
|
||||||
'set_deck',
|
|
||||||
])
|
|
||||||
await expect
|
|
||||||
.poll(
|
|
||||||
async () =>
|
|
||||||
decoded(await executeTool(page, 'list_connections')).connections
|
|
||||||
?.length,
|
|
||||||
)
|
|
||||||
.toBe(2)
|
|
||||||
accounts = Object.fromEntries(
|
|
||||||
decoded(await executeTool(page, 'list_connections')).connections.map(
|
|
||||||
(connection: { displayName: string; id: string }) => [
|
|
||||||
connection.displayName,
|
|
||||||
connection.id,
|
|
||||||
],
|
|
||||||
),
|
|
||||||
)
|
|
||||||
})
|
|
||||||
test.afterEach(() => expect(pageErrors).toEqual([]))
|
|
||||||
|
|
||||||
test('creates temporary research, edits it, persists explicitly and reopens it on another device', async ({
|
|
||||||
page,
|
|
||||||
browser,
|
|
||||||
baseURL,
|
|
||||||
}) => {
|
|
||||||
const created = await executeTool(page, 'set_deck', {
|
|
||||||
title: 'WebMCPの反応',
|
|
||||||
columns: [
|
|
||||||
{ ...column('日本語', accounts.e2e ?? ''), id: 'new' },
|
|
||||||
column('別の接続', accounts.alternate ?? ''),
|
|
||||||
],
|
|
||||||
})
|
|
||||||
expect(created.isError).not.toBe(true)
|
|
||||||
const deck = decoded(created).deck
|
|
||||||
expect(deck.persisted).toBe(false)
|
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
|
||||||
await expect(
|
|
||||||
page.getByText('alternate · Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page
|
|
||||||
.getByRole('region', { name: '日本語', exact: true })
|
|
||||||
.getByRole('button', { name: '日本語の操作' })
|
|
||||||
.click()
|
|
||||||
await page.getByRole('menuitem', { name: '編集', exact: true }).click()
|
|
||||||
const replaced = await executeTool(page, 'set_deck', {
|
|
||||||
deckId: deck.id,
|
|
||||||
title: '更新した調査',
|
|
||||||
columns: [deck.columns[1]],
|
|
||||||
})
|
|
||||||
expect(replaced.isError).not.toBe(true)
|
|
||||||
await expect(page.getByRole('dialog')).toHaveCount(0)
|
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(savedCount()).toEqual({ count: 1 })
|
|
||||||
const other = await browser.newContext({
|
|
||||||
baseURL,
|
|
||||||
extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
|
|
||||||
})
|
|
||||||
try {
|
|
||||||
const device = await other.newPage()
|
|
||||||
await device.goto('/')
|
|
||||||
await expect(device.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'更新した調査',
|
|
||||||
)
|
|
||||||
await expect(
|
|
||||||
device.getByText('alternate · Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
} finally {
|
|
||||||
await other.close()
|
|
||||||
}
|
|
||||||
await page.reload()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'更新した調査',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('requires revisions for saved mutations and rejects stale overwrites', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const deck = decoded(
|
|
||||||
await executeTool(page, 'set_deck', { title: '保存済み', columns: [] }),
|
|
||||||
).deck
|
|
||||||
await executeTool(page, 'save_deck', { deckId: deck.id })
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await executeTool(page, 'set_deck', {
|
|
||||||
deckId: deck.id,
|
|
||||||
title: '変更',
|
|
||||||
columns: [],
|
|
||||||
})
|
|
||||||
).isError,
|
|
||||||
).toBe(true)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await executeTool(page, 'set_deck', {
|
|
||||||
deckId: deck.id,
|
|
||||||
expectedRevision: 1,
|
|
||||||
title: '変更',
|
|
||||||
columns: [],
|
|
||||||
})
|
|
||||||
).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await executeTool(page, 'set_deck', {
|
|
||||||
deckId: deck.id,
|
|
||||||
expectedRevision: 1,
|
|
||||||
title: '古い変更',
|
|
||||||
columns: [],
|
|
||||||
})
|
|
||||||
).isError,
|
|
||||||
).toBe(true)
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('変更')
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await executeTool(page, 'delete_deck', {
|
|
||||||
deckId: deck.id,
|
|
||||||
expectedRevision: 1,
|
|
||||||
})
|
|
||||||
).isError,
|
|
||||||
).toBe(true)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await executeTool(page, 'delete_deck', {
|
|
||||||
deckId: deck.id,
|
|
||||||
expectedRevision: 2,
|
|
||||||
})
|
|
||||||
).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps temporary views independent and loses only unsaved views on reload', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const first = decoded(
|
|
||||||
await executeTool(page, 'set_deck', { title: '一時の調査A', columns: [] }),
|
|
||||||
).deck
|
|
||||||
const second = decoded(
|
|
||||||
await executeTool(page, 'set_deck', { title: '一時の調査B', columns: [] }),
|
|
||||||
).deck
|
|
||||||
await executeTool(page, 'select_deck', { deckId: first.id })
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'一時の調査A',
|
|
||||||
)
|
|
||||||
await executeTool(page, 'delete_deck', { deckId: second.id })
|
|
||||||
expect(
|
|
||||||
decoded(await executeTool(page, 'list_decks')).decks.some(
|
|
||||||
(deck: { id: string }) => deck.id === second.id,
|
|
||||||
),
|
|
||||||
).toBe(false)
|
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
|
||||||
await page.reload()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('新しい調査')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('rejects invalid input without changing the active view', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await executeTool(page, 'set_deck', {
|
|
||||||
title: '残す調査',
|
|
||||||
columns: [column('残す観点', accounts.e2e ?? '')],
|
|
||||||
})
|
|
||||||
const duplicate = { ...column('不正', accounts.e2e ?? ''), id: 'duplicate' }
|
|
||||||
for (const columns of [
|
|
||||||
[duplicate, duplicate],
|
|
||||||
[column('不明', 'missing')],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
...column('不正', accounts.e2e ?? ''),
|
|
||||||
source: { kind: 'list', target: 'invalid' },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
]) {
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'set_deck', { title: '変更しない', columns }))
|
|
||||||
.isError,
|
|
||||||
).toBe(true)
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['残す観点'])
|
|
||||||
}
|
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps failed temporary saves visible and allows retry without duplicate decks', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const deck = decoded(
|
|
||||||
await executeTool(page, 'set_deck', { title: '未保存の調査', columns: [] }),
|
|
||||||
).deck
|
|
||||||
await page.route('**/_serverFn/**', (route) =>
|
|
||||||
route.request().method() === 'POST' ? route.abort() : route.continue(),
|
|
||||||
)
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
|
||||||
).toBe(true)
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'未保存の調査',
|
|
||||||
)
|
|
||||||
expect(decoded(await executeTool(page, 'get_deck')).deck.persisted).toBe(
|
|
||||||
false,
|
|
||||||
)
|
|
||||||
await page.unroute('**/_serverFn/**')
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(savedCount()).toEqual({ count: 1 })
|
|
||||||
})
|
|
||||||
|
|
||||||
test('reads and pages bound accounts without mixing sibling columns', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const deck = decoded(
|
|
||||||
await executeTool(page, 'set_deck', {
|
|
||||||
title: '接続を比較',
|
|
||||||
columns: [
|
|
||||||
column('通常', accounts.e2e ?? ''),
|
|
||||||
column('別の接続', accounts.alternate ?? ''),
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
).deck
|
|
||||||
await expect(
|
|
||||||
page.getByText('alternate · Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
const id = deck.columns[1].id
|
|
||||||
const loaded = decoded(
|
|
||||||
await executeTool(page, 'get_column_posts', { columnId: id }),
|
|
||||||
)
|
|
||||||
expect(loaded.column.connectionId).toBe(accounts.alternate)
|
|
||||||
expect(loaded.posts.map((post: { text: string }) => post.text)).toEqual([
|
|
||||||
'alternate · Latest · all page 1',
|
|
||||||
])
|
|
||||||
const more = decoded(
|
|
||||||
await executeTool(page, 'load_more_column', { columnId: id }),
|
|
||||||
)
|
|
||||||
expect(more).toMatchObject({ loadedCount: 2, offset: 1, hasMore: false })
|
|
||||||
expect(more.posts.map((post: { text: string }) => post.text)).toEqual([
|
|
||||||
'alternate · Latest · all page 2',
|
|
||||||
])
|
|
||||||
await expect(
|
|
||||||
page.getByRole('region', { name: '通常', exact: true }).locator('article'),
|
|
||||||
).toHaveCount(1)
|
|
||||||
await executeTool(page, 'set_deck', { title: '別の一時ビュー', columns: [] })
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'get_column_posts', { columnId: id })).isError,
|
|
||||||
).toBe(true)
|
|
||||||
})
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { expect, test } from '../fixtures'
|
|
||||||
import { closeMobileSidebar, showResearch } from '../workspace'
|
|
||||||
|
|
||||||
test('keeps the sidebar, composer and deck reachable at compact widths', async ({
|
|
||||||
page,
|
|
||||||
a11y,
|
|
||||||
}, testInfo) => {
|
|
||||||
await page.goto('/')
|
|
||||||
for (const width of [320, 375, 414, 768]) {
|
|
||||||
await page.setViewportSize({ width, height: 850 })
|
|
||||||
await showResearch(page)
|
|
||||||
const chat = page.getByRole('complementary', { name: '調査チャット' })
|
|
||||||
await expect(chat).toBeVisible()
|
|
||||||
const composer = chat.getByRole('textbox', {
|
|
||||||
name: 'メッセージ',
|
|
||||||
exact: true,
|
|
||||||
})
|
|
||||||
await expect(composer).toBeVisible()
|
|
||||||
const bounds = await composer.boundingBox()
|
|
||||||
if (!bounds) throw new Error('Composer must have a visible bounding box')
|
|
||||||
expect(bounds.x).toBeGreaterThanOrEqual(0)
|
|
||||||
expect(bounds.x + bounds.width).toBeLessThanOrEqual(width)
|
|
||||||
expect(bounds.y + bounds.height).toBeLessThanOrEqual(850)
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.screenshot({
|
|
||||||
path: testInfo.outputPath(`workspace-${width}.png`),
|
|
||||||
})
|
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
}
|
|
||||||
await page.getByRole('button', { name: 'サイドバーを切り替え' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('complementary', { name: '調査チャット' }),
|
|
||||||
).toBeHidden()
|
|
||||||
await page.getByRole('button', { name: '調査チャット', exact: true }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('complementary', { name: '調査チャット' }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
+13
-21
@@ -1,5 +1,4 @@
|
|||||||
import { createServer } from 'node:http'
|
import { createServer } from 'node:http'
|
||||||
import { tweetLegacyFixture } from './fixtures/twitter.ts'
|
|
||||||
|
|
||||||
const portValue = process.env.TWITTER_LITE_MOCK_RELAY_PORT
|
const portValue = process.env.TWITTER_LITE_MOCK_RELAY_PORT
|
||||||
const port = Number(portValue)
|
const port = Number(portValue)
|
||||||
@@ -31,11 +30,15 @@ const tweetResult = (
|
|||||||
{ conversationId = id, inReplyTo, replyCount = 1 } = {},
|
{ conversationId = id, inReplyTo, replyCount = 1 } = {},
|
||||||
) => ({
|
) => ({
|
||||||
rest_id: id,
|
rest_id: id,
|
||||||
legacy: tweetLegacyFixture(id, text, {
|
legacy: {
|
||||||
conversationId,
|
full_text: text,
|
||||||
inReplyTo,
|
created_at: 'Mon Jul 13 00:00:00 +0000 2026',
|
||||||
replyCount,
|
reply_count: replyCount,
|
||||||
}),
|
retweet_count: 2,
|
||||||
|
favorite_count: 3,
|
||||||
|
conversation_id_str: conversationId,
|
||||||
|
...(inReplyTo ? { in_reply_to_status_id_str: inReplyTo } : {}),
|
||||||
|
},
|
||||||
core: {
|
core: {
|
||||||
user_results: {
|
user_results: {
|
||||||
result: {
|
result: {
|
||||||
@@ -96,11 +99,6 @@ const timeline = (entries) => ({ instructions: [{ entries }] })
|
|||||||
|
|
||||||
const server = createServer(async (request, response) => {
|
const server = createServer(async (request, response) => {
|
||||||
const url = new URL(request.url ?? '/', `http://127.0.0.1:${port}`)
|
const url = new URL(request.url ?? '/', `http://127.0.0.1:${port}`)
|
||||||
if (request.method === 'GET' && url.pathname === '/profiles') {
|
|
||||||
send(response, { profiles: ['e2e', 'alternate'] })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const operation = [
|
const operation = [
|
||||||
'UserByScreenName',
|
'UserByScreenName',
|
||||||
'UserTweets',
|
'UserTweets',
|
||||||
@@ -122,8 +120,7 @@ const server = createServer(async (request, response) => {
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const profileName = request.headers['x-profile-name']
|
if (request.headers['x-profile-name'] !== 'e2e') {
|
||||||
if (profileName !== 'e2e' && profileName !== 'alternate') {
|
|
||||||
fail(response, 403, 'invalid profile')
|
fail(response, 403, 'invalid profile')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -169,12 +166,10 @@ const server = createServer(async (request, response) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const secondPage = variables.cursor === 'user-next'
|
const secondPage = variables.cursor === 'user-next'
|
||||||
const firstPageText =
|
|
||||||
profileName === 'alternate' ? 'alternate profile page 1' : 'user page 1'
|
|
||||||
const entries = secondPage
|
const entries = secondPage
|
||||||
? [tweet('1010', 'user page 2')]
|
? [tweet('1010', 'user page 2')]
|
||||||
: [
|
: [
|
||||||
tweet('1001', firstPageText, 'yuta', {
|
tweet('1001', 'user page 1', 'yuta', {
|
||||||
conversationId: '1000',
|
conversationId: '1000',
|
||||||
}),
|
}),
|
||||||
cursor('user-next'),
|
cursor('user-next'),
|
||||||
@@ -218,10 +213,7 @@ const server = createServer(async (request, response) => {
|
|||||||
itemContent: {
|
itemContent: {
|
||||||
list: {
|
list: {
|
||||||
id_str: '1234567890',
|
id_str: '1234567890',
|
||||||
name:
|
name: 'My E2E List',
|
||||||
profileName === 'alternate'
|
|
||||||
? 'Alternate List'
|
|
||||||
: 'My E2E List',
|
|
||||||
description: 'Accounts selected for testing',
|
description: 'Accounts selected for testing',
|
||||||
member_count: 10,
|
member_count: 10,
|
||||||
mode: 'Public',
|
mode: 'Public',
|
||||||
@@ -459,7 +451,7 @@ const server = createServer(async (request, response) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const follows = rawQuery.includes('filter:follows') ? 'follows' : 'all'
|
const follows = rawQuery.includes('filter:follows') ? 'follows' : 'all'
|
||||||
const label = `${profileName === 'alternate' ? 'alternate · ' : ''}${variables.product} · ${follows}`
|
const label = `${variables.product} · ${follows}`
|
||||||
const id = encodeURIComponent(rawQuery)
|
const id = encodeURIComponent(rawQuery)
|
||||||
const entries = secondPage
|
const entries = secondPage
|
||||||
? [tweet(`s-${id}-2`, `${label} page 2`)]
|
? [tweet(`s-${id}-2`, `${label} page 2`)]
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { expect, type Locator, type Page } from '@playwright/test'
|
||||||
|
|
||||||
|
export class Base {
|
||||||
|
readonly ambientLinksLocator: Locator
|
||||||
|
readonly articlesLocator: Locator
|
||||||
|
readonly continuationErrorLocator: Locator
|
||||||
|
readonly endOfFeedLocator: Locator
|
||||||
|
readonly loadingRailLocator: Locator
|
||||||
|
readonly mutationButtonsLocator: Locator
|
||||||
|
readonly mutationLinksLocator: Locator
|
||||||
|
|
||||||
|
constructor(readonly page: Page) {
|
||||||
|
const ambientLinkNames = /ホーム|おすすめ|トレンド|通知|履歴/
|
||||||
|
const mutationControlNames =
|
||||||
|
/投稿する|返信|いいね|再投稿|フォロー|ブックマーク/
|
||||||
|
|
||||||
|
this.ambientLinksLocator = page.getByRole('link', {
|
||||||
|
name: ambientLinkNames,
|
||||||
|
})
|
||||||
|
this.articlesLocator = page.locator('article')
|
||||||
|
this.continuationErrorLocator = page
|
||||||
|
.getByRole('alert')
|
||||||
|
.filter({ hasText: '続きの投稿を取得できませんでした。' })
|
||||||
|
this.endOfFeedLocator = page.getByText('これ以上の投稿はありません。')
|
||||||
|
this.loadingRailLocator = page.locator('.loading-rail')
|
||||||
|
this.mutationButtonsLocator = page.getByRole('button', {
|
||||||
|
name: mutationControlNames,
|
||||||
|
})
|
||||||
|
this.mutationLinksLocator = page.getByRole('link', {
|
||||||
|
name: mutationControlNames,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async navigateTo(path: string) {
|
||||||
|
await this.page.goto(path)
|
||||||
|
await this.page.waitForLoadState('networkidle')
|
||||||
|
}
|
||||||
|
|
||||||
|
async tabTo(target: Locator) {
|
||||||
|
await this.page.keyboard.press('Tab')
|
||||||
|
await expect(target).toBeFocused()
|
||||||
|
}
|
||||||
|
|
||||||
|
async retryContinuation() {
|
||||||
|
await this.continuationErrorLocator
|
||||||
|
.getByRole('button', { name: '再試行' })
|
||||||
|
.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import type { Locator, Page } from '@playwright/test'
|
||||||
|
import { Base } from './Base'
|
||||||
|
|
||||||
|
export class HomePage extends Base {
|
||||||
|
readonly handleInputLocator: Locator
|
||||||
|
readonly submitButtonLocator: Locator
|
||||||
|
|
||||||
|
constructor(page: Page) {
|
||||||
|
super(page)
|
||||||
|
this.handleInputLocator = page.getByLabel('ハンドルまたはプロフィール URL')
|
||||||
|
this.submitButtonLocator = page.getByRole('button', { name: '表示' })
|
||||||
|
}
|
||||||
|
|
||||||
|
async goTo() {
|
||||||
|
await this.navigateTo('/')
|
||||||
|
}
|
||||||
|
|
||||||
|
async displayUser(handle: string) {
|
||||||
|
await this.handleInputLocator.fill(handle)
|
||||||
|
await this.submitButtonLocator.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { Base } from './Base'
|
||||||
|
|
||||||
|
export class ListsPage extends Base {
|
||||||
|
async goTo() {
|
||||||
|
await this.navigateTo('/i/lists')
|
||||||
|
}
|
||||||
|
|
||||||
|
async openList(name: RegExp | string) {
|
||||||
|
await this.page.getByRole('link', { name }).click()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import type { Locator, Page } from '@playwright/test'
|
||||||
|
import { Base } from './Base'
|
||||||
|
|
||||||
|
export class SearchPage extends Base {
|
||||||
|
readonly followingOnlyLocator: Locator
|
||||||
|
readonly latestRankingLocator: Locator
|
||||||
|
readonly queryInputLocator: Locator
|
||||||
|
readonly searchButtonLocator: Locator
|
||||||
|
readonly topRankingLocator: Locator
|
||||||
|
|
||||||
|
constructor(page: Page) {
|
||||||
|
super(page)
|
||||||
|
this.followingOnlyLocator = page.getByLabel('フォロー中のみ')
|
||||||
|
this.latestRankingLocator = page.getByLabel('最新順')
|
||||||
|
this.queryInputLocator = page.getByLabel('検索語')
|
||||||
|
this.searchButtonLocator = page.getByRole('button', { name: '検索' })
|
||||||
|
this.topRankingLocator = page.getByLabel('人気順')
|
||||||
|
}
|
||||||
|
|
||||||
|
async goTo() {
|
||||||
|
await this.navigateTo('/search?q=&product=Latest&following=false')
|
||||||
|
}
|
||||||
|
|
||||||
|
async search(query: string) {
|
||||||
|
await this.queryInputLocator.fill(query)
|
||||||
|
await this.searchButtonLocator.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
async searchTopFromFollowing(query: string) {
|
||||||
|
await this.queryInputLocator.fill(query)
|
||||||
|
await this.topRankingLocator.check()
|
||||||
|
await this.followingOnlyLocator.check()
|
||||||
|
await this.searchButtonLocator.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import type { Locator, Page } from '@playwright/test'
|
||||||
|
import { Base } from './Base'
|
||||||
|
|
||||||
|
export class ThreadPage extends Base {
|
||||||
|
readonly headingLocator: Locator
|
||||||
|
readonly selectedPostLabelLocator: Locator
|
||||||
|
|
||||||
|
constructor(page: Page) {
|
||||||
|
super(page)
|
||||||
|
this.headingLocator = page.getByRole('heading', { name: '会話' })
|
||||||
|
this.selectedPostLabelLocator = page.getByText('表示中の投稿')
|
||||||
|
}
|
||||||
|
|
||||||
|
async goTo(handle: string, tweetId: string) {
|
||||||
|
await this.navigateTo(`/${handle}/status/${tweetId}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { Base } from './Base'
|
||||||
|
|
||||||
|
export class UserPage extends Base {
|
||||||
|
async goTo(handle: string) {
|
||||||
|
await this.navigateTo(`/${handle}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
async openPostDetails(postText: string) {
|
||||||
|
await this.page
|
||||||
|
.getByRole('article')
|
||||||
|
.filter({ hasText: postText })
|
||||||
|
.getByRole('link', { name: '詳細・スレッド' })
|
||||||
|
.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
import { expect, type Page } from '@playwright/test'
|
|
||||||
|
|
||||||
export async function showDeckManagement(page: Page) {
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '名前を変更', includeHidden: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
const navigation = page.getByRole('button', {
|
|
||||||
name: 'デッキ管理',
|
|
||||||
exact: true,
|
|
||||||
})
|
|
||||||
if (!(await navigation.isVisible())) {
|
|
||||||
await page.getByRole('button', { name: 'サイドバーを切り替え' }).click()
|
|
||||||
}
|
|
||||||
await navigation.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function showResearch(page: Page) {
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: '名前を変更', includeHidden: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
const navigation = page.getByRole('button', {
|
|
||||||
name: '調査チャット',
|
|
||||||
exact: true,
|
|
||||||
})
|
|
||||||
if (!(await navigation.isVisible())) {
|
|
||||||
await page.getByRole('button', { name: 'サイドバーを切り替え' }).click()
|
|
||||||
}
|
|
||||||
await navigation.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function closeMobileSidebar(page: Page) {
|
|
||||||
const sheet = page.locator('[data-mobile="true"][data-sidebar="sidebar"]')
|
|
||||||
if (await sheet.isVisible()) {
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'サイドバーを閉じる', exact: true })
|
|
||||||
.click()
|
|
||||||
await expect(sheet).toBeHidden()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Generated
+3
-3
@@ -74,11 +74,11 @@
|
|||||||
},
|
},
|
||||||
"nixpkgs_2": {
|
"nixpkgs_2": {
|
||||||
"locked": {
|
"locked": {
|
||||||
"lastModified": 1783776592,
|
"lastModified": 1784796856,
|
||||||
"narHash": "sha256-UgCQzxeWI75XM8G+hPrPh+MKzEPjG3SpAj7dtqSbksA=",
|
"narHash": "sha256-wWFrV5/Qbm+lyt5x20E/bSbfJiGKMo4RCxZV8cl/WZI=",
|
||||||
"owner": "NixOS",
|
"owner": "NixOS",
|
||||||
"repo": "nixpkgs",
|
"repo": "nixpkgs",
|
||||||
"rev": "e7a3ca8092b61ff85b6a45bf863ea2b2d6a661b3",
|
"rev": "e2587caef70cea85dd97d7daab492899902dbf5d",
|
||||||
"type": "github"
|
"type": "github"
|
||||||
},
|
},
|
||||||
"original": {
|
"original": {
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
inherit (finalAttrs) pname version src;
|
inherit (finalAttrs) pname version src;
|
||||||
pnpm = pkgs.pnpm_11;
|
pnpm = pkgs.pnpm_11;
|
||||||
fetcherVersion = 4;
|
fetcherVersion = 4;
|
||||||
hash = "sha256-+DqNt+58TrI0W8SU//JNdYYJtCdKNIG7gfWRxno36QQ=";
|
hash = "sha256-ai71NY11VUogMi8SX45LrEYRy5amSMbYbnSwko4O72A=";
|
||||||
};
|
};
|
||||||
|
|
||||||
nativeBuildInputs = with pkgs; [
|
nativeBuildInputs = with pkgs; [
|
||||||
@@ -44,8 +44,6 @@
|
|||||||
cp -r .output/. $out/lib/twitter-lite/
|
cp -r .output/. $out/lib/twitter-lite/
|
||||||
makeWrapper ${nixpkgs.lib.getExe pkgs.nodejs_22} $out/bin/twitter-lite \
|
makeWrapper ${nixpkgs.lib.getExe pkgs.nodejs_22} $out/bin/twitter-lite \
|
||||||
--add-flags "$out/lib/twitter-lite/server/index.mjs"
|
--add-flags "$out/lib/twitter-lite/server/index.mjs"
|
||||||
makeWrapper ${nixpkgs.lib.getExe pkgs.nodejs_22} $out/bin/twitter-lite-backup \
|
|
||||||
--add-flags "$out/lib/twitter-lite/server/tools/backup-database.js"
|
|
||||||
runHook postInstall
|
runHook postInstall
|
||||||
'';
|
'';
|
||||||
|
|
||||||
@@ -115,29 +113,17 @@
|
|||||||
description = "Base URL of the Twitter relay.";
|
description = "Base URL of the Twitter relay.";
|
||||||
};
|
};
|
||||||
|
|
||||||
publicOrigin = lib.mkOption {
|
profileName = lib.mkOption {
|
||||||
type = lib.types.nonEmptyStr;
|
type = lib.types.nullOr lib.types.nonEmptyStr;
|
||||||
example = "https://home.example-tailnet.ts.net";
|
|
||||||
description = "Exact Tailscale Serve HTTPS origin, without a trailing slash.";
|
|
||||||
};
|
|
||||||
|
|
||||||
allowedLogin = lib.mkOption {
|
|
||||||
type = lib.types.nonEmptyStr;
|
|
||||||
description = "Tailscale login allowed to access this personal workspace.";
|
|
||||||
};
|
|
||||||
|
|
||||||
credentialKeyFile = lib.mkOption {
|
|
||||||
type = lib.types.nullOr lib.types.str;
|
|
||||||
default = null;
|
default = null;
|
||||||
example = "/var/lib/secrets/twitter-lite-key";
|
example = "default";
|
||||||
description = "Runtime file containing the base64-encoded 32-byte credential encryption key. Never put this key in the Nix store.";
|
description = "Relay profile to use when the relay has multiple profiles.";
|
||||||
};
|
};
|
||||||
|
|
||||||
mastodonOrigins = lib.mkOption {
|
host = lib.mkOption {
|
||||||
type = lib.types.listOf lib.types.nonEmptyStr;
|
type = lib.types.nonEmptyStr;
|
||||||
default = [ ];
|
default = "127.0.0.1";
|
||||||
example = [ "https://mastodon.social" ];
|
description = "Address on which Twitter Lite listens.";
|
||||||
description = "Allowed Mastodon HTTPS origins, without trailing slashes.";
|
|
||||||
};
|
};
|
||||||
|
|
||||||
port = lib.mkOption {
|
port = lib.mkOption {
|
||||||
@@ -153,23 +139,14 @@
|
|||||||
after = [ "network.target" ];
|
after = [ "network.target" ];
|
||||||
wantedBy = [ "multi-user.target" ];
|
wantedBy = [ "multi-user.target" ];
|
||||||
environment = {
|
environment = {
|
||||||
HOST = "127.0.0.1";
|
HOST = cfg.host;
|
||||||
PORT = toString cfg.port;
|
PORT = toString cfg.port;
|
||||||
TWITTER_RELAY_BASE_URL = cfg.relayBaseUrl;
|
TWITTER_RELAY_BASE_URL = cfg.relayBaseUrl;
|
||||||
TWITTER_LITE_ORIGIN = cfg.publicOrigin;
|
} // lib.optionalAttrs (cfg.profileName != null) {
|
||||||
TWITTER_LITE_ALLOWED_LOGIN = cfg.allowedLogin;
|
BIRD_PROFILE_NAME = cfg.profileName;
|
||||||
TWITTER_LITE_DB_PATH = "/var/lib/twitter-lite/workspace.sqlite";
|
|
||||||
TWITTER_LITE_MASTODON_ORIGINS = lib.concatStringsSep "," cfg.mastodonOrigins;
|
|
||||||
} // lib.optionalAttrs (cfg.credentialKeyFile != null) {
|
|
||||||
TWITTER_LITE_CREDENTIAL_KEY_FILE = "%d/credential-key";
|
|
||||||
};
|
};
|
||||||
serviceConfig = {
|
serviceConfig = {
|
||||||
DynamicUser = true;
|
DynamicUser = true;
|
||||||
StateDirectory = "twitter-lite";
|
|
||||||
StateDirectoryMode = "0700";
|
|
||||||
UMask = "0077";
|
|
||||||
LoadCredential = lib.optional (cfg.credentialKeyFile != null)
|
|
||||||
"credential-key:${cfg.credentialKeyFile}";
|
|
||||||
ExecStart = lib.getExe cfg.package;
|
ExecStart = lib.getExe cfg.package;
|
||||||
Restart = "on-failure";
|
Restart = "on-failure";
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,75 +0,0 @@
|
|||||||
import { defineConfig, defineTransformer } from 'orval'
|
|
||||||
|
|
||||||
const selectedTag = 'twitter-lite-e2e'
|
|
||||||
const selectedOperationIds = new Set([
|
|
||||||
'getUserByScreenName',
|
|
||||||
'getUserTweets',
|
|
||||||
'getTweetDetail',
|
|
||||||
'getSearchTimeline',
|
|
||||||
'getListLatestTweetsTimeline',
|
|
||||||
])
|
|
||||||
|
|
||||||
const selectE2eOperations = defineTransformer((document) => {
|
|
||||||
const foundOperationIds = new Set<string>()
|
|
||||||
|
|
||||||
for (const pathItem of Object.values(document.paths ?? {})) {
|
|
||||||
if (!pathItem || typeof pathItem !== 'object') continue
|
|
||||||
|
|
||||||
for (const candidate of Object.values(pathItem)) {
|
|
||||||
if (
|
|
||||||
!candidate ||
|
|
||||||
typeof candidate !== 'object' ||
|
|
||||||
Array.isArray(candidate) ||
|
|
||||||
!('operationId' in candidate)
|
|
||||||
) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const operation = candidate as {
|
|
||||||
operationId?: string
|
|
||||||
tags?: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
operation.operationId &&
|
|
||||||
selectedOperationIds.has(operation.operationId)
|
|
||||||
) {
|
|
||||||
foundOperationIds.add(operation.operationId)
|
|
||||||
operation.tags = [...(operation.tags ?? []), selectedTag]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const missingOperationIds = [...selectedOperationIds].filter(
|
|
||||||
(operationId) => !foundOperationIds.has(operationId),
|
|
||||||
)
|
|
||||||
if (missingOperationIds.length > 0) {
|
|
||||||
throw new Error(
|
|
||||||
`twitter-openapi is missing selected operations: ${missingOperationIds.join(', ')}`,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return document
|
|
||||||
})
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
twitterOpenApi: {
|
|
||||||
input: {
|
|
||||||
target:
|
|
||||||
'https://raw.githubusercontent.com/fa0311/twitter-openapi/590dae5c9f8575abc91d3774946bfe6f23960aba/dist/docs/openapi-3.0.yaml',
|
|
||||||
filters: {
|
|
||||||
mode: 'include',
|
|
||||||
tags: [selectedTag],
|
|
||||||
},
|
|
||||||
override: {
|
|
||||||
transformer: selectE2eOperations,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
clean: true,
|
|
||||||
client: 'fetch',
|
|
||||||
mode: 'single',
|
|
||||||
target: './e2e/generated/twitter-openapi/client.ts',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
+4
-44
@@ -6,89 +6,49 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=22.12.0"
|
"node": ">=22.12.0"
|
||||||
},
|
},
|
||||||
"knip": {
|
|
||||||
"ignoreBinaries": [
|
|
||||||
"codex"
|
|
||||||
],
|
|
||||||
"ignore": [
|
|
||||||
"e2e/generated/**"
|
|
||||||
],
|
|
||||||
"ignoreIssues": {
|
|
||||||
"src/components/ui/**": [
|
|
||||||
"exports"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"imports": {
|
"imports": {
|
||||||
"#/*": "./src/*"
|
"#/*": "./src/*"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"codex:serve": "node scripts/serve-codex.mjs",
|
|
||||||
"db:generate": "drizzle-kit generate && node scripts/bundle-migrations.mjs && biome format --write src/features/storage/migrations.generated.ts",
|
|
||||||
"db:backup": "tsx scripts/backup-database.ts",
|
|
||||||
"dev": "vite dev --host 127.0.0.1 --port 3000",
|
"dev": "vite dev --host 127.0.0.1 --port 3000",
|
||||||
"dev:tailscale": "vite dev --host 127.0.0.1 --port 3000",
|
"dev:tailscale": "vite dev --host 0.0.0.0 --port 3000",
|
||||||
"generate:e2e-openapi": "orval --config orval.config.ts --formatter biome --fail-on-warnings",
|
|
||||||
"generate-routes": "node scripts/generate-routes.mjs",
|
"generate-routes": "node scripts/generate-routes.mjs",
|
||||||
"check:routes": "pnpm generate-routes && git diff --exit-code -- src/routeTree.gen.ts",
|
"check:routes": "pnpm generate-routes && git diff --exit-code -- src/routeTree.gen.ts",
|
||||||
"build": "vite build && node scripts/build-tools.mjs",
|
"build": "vite build",
|
||||||
"start": "HOST=127.0.0.1 node .output/server/index.mjs",
|
"start": "HOST=127.0.0.1 node .output/server/index.mjs",
|
||||||
"typecheck": "tsc --noEmit",
|
"typecheck": "tsc --noEmit",
|
||||||
"lint": "biome check . && pnpm lint:ui",
|
"lint": "biome check .",
|
||||||
"knip": "knip",
|
"knip": "knip",
|
||||||
"format": "biome check --write .",
|
"format": "biome check --write .",
|
||||||
"test": "vitest run",
|
"test": "vitest run",
|
||||||
"test:watch": "vitest",
|
"test:watch": "vitest",
|
||||||
"test:e2e": "playwright test",
|
"test:e2e": "playwright test",
|
||||||
"test:live": "TWITTER_LITE_LIVE=1 vitest run tests/live/relay.test.ts",
|
"test:live": "TWITTER_LITE_LIVE=1 vitest run tests/live/relay.test.ts"
|
||||||
"lint:ui": "oxlint src"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@base-ui/react": "1.8.0",
|
|
||||||
"@shadcn/react": "^0.3.1",
|
|
||||||
"@tanstack/react-query": "5.101.2",
|
"@tanstack/react-query": "5.101.2",
|
||||||
"@tanstack/react-router": "1.170.17",
|
"@tanstack/react-router": "1.170.17",
|
||||||
"@tanstack/react-router-ssr-query": "1.167.1",
|
"@tanstack/react-router-ssr-query": "1.167.1",
|
||||||
"@tanstack/react-start": "1.168.27",
|
"@tanstack/react-start": "1.168.27",
|
||||||
"@yuta/bird": "0.10.1",
|
"@yuta/bird": "0.10.1",
|
||||||
"better-sqlite3": "13.0.3",
|
|
||||||
"class-variance-authority": "0.7.1",
|
|
||||||
"cn": "^0.4.0",
|
|
||||||
"drizzle-orm": "0.45.3",
|
|
||||||
"lucide-react": "1.48.0",
|
|
||||||
"nitro": "3.0.260610-beta",
|
"nitro": "3.0.260610-beta",
|
||||||
"react": "19.2.7",
|
"react": "19.2.7",
|
||||||
"react-dom": "19.2.7",
|
"react-dom": "19.2.7",
|
||||||
"react-markdown": "10.1.0",
|
|
||||||
"remark-gfm": "4.0.1",
|
|
||||||
"sanitize-html": "2.17.7",
|
|
||||||
"shadcn": "4.21.0",
|
|
||||||
"tw-animate-css": "1.4.0",
|
|
||||||
"usewebmcp": "5.1.0",
|
|
||||||
"zod": "4.4.3"
|
"zod": "4.4.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@axe-core/playwright": "4.11.1",
|
"@axe-core/playwright": "4.11.1",
|
||||||
"@biomejs/biome": "2.5.3",
|
"@biomejs/biome": "2.5.3",
|
||||||
"@playwright/test": "1.61.1",
|
"@playwright/test": "1.61.1",
|
||||||
"@shadcn/lint": "^0.2.0",
|
|
||||||
"@tailwindcss/vite": "^4.3.3",
|
|
||||||
"@testing-library/dom": "10.4.1",
|
"@testing-library/dom": "10.4.1",
|
||||||
"@testing-library/jest-dom": "6.9.1",
|
"@testing-library/jest-dom": "6.9.1",
|
||||||
"@testing-library/react": "16.3.2",
|
"@testing-library/react": "16.3.2",
|
||||||
"@types/better-sqlite3": "9.6.0",
|
|
||||||
"@types/node": "26.1.1",
|
"@types/node": "26.1.1",
|
||||||
"@types/react": "19.2.17",
|
"@types/react": "19.2.17",
|
||||||
"@types/react-dom": "19.2.3",
|
"@types/react-dom": "19.2.3",
|
||||||
"@types/sanitize-html": "2.16.1",
|
|
||||||
"@vitejs/plugin-react": "6.0.3",
|
"@vitejs/plugin-react": "6.0.3",
|
||||||
"drizzle-kit": "0.31.11",
|
|
||||||
"jsdom": "29.1.1",
|
"jsdom": "29.1.1",
|
||||||
"knip": "6.27.0",
|
"knip": "6.27.0",
|
||||||
"orval": "8.24.0",
|
|
||||||
"oxlint": "^1.85.0",
|
|
||||||
"tailwindcss": "^4.3.3",
|
|
||||||
"tsx": "4.23.12",
|
|
||||||
"typescript": "7.0.2",
|
"typescript": "7.0.2",
|
||||||
"vite": "8.1.4",
|
"vite": "8.1.4",
|
||||||
"vitest": "4.1.10"
|
"vitest": "4.1.10"
|
||||||
|
|||||||
+3
-11
@@ -1,15 +1,8 @@
|
|||||||
import { mkdtempSync } from 'node:fs'
|
|
||||||
import { tmpdir } from 'node:os'
|
|
||||||
import { join } from 'node:path'
|
|
||||||
import { defineConfig, devices } from '@playwright/test'
|
import { defineConfig, devices } from '@playwright/test'
|
||||||
|
|
||||||
const appPort = 4173
|
const appPort = 4173
|
||||||
const relayPort = 6911
|
const relayPort = 6911
|
||||||
const chromiumExecutable = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE
|
const chromiumExecutable = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE
|
||||||
const databasePath =
|
|
||||||
process.env.TWITTER_LITE_E2E_DB_PATH ??
|
|
||||||
join(mkdtempSync(join(tmpdir(), 'twitter-lite-e2e-')), 'workspace.sqlite')
|
|
||||||
process.env.TWITTER_LITE_E2E_DB_PATH = databasePath
|
|
||||||
|
|
||||||
if (!chromiumExecutable) {
|
if (!chromiumExecutable) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
@@ -23,21 +16,20 @@ export default defineConfig({
|
|||||||
workers: 1,
|
workers: 1,
|
||||||
use: {
|
use: {
|
||||||
baseURL: `http://127.0.0.1:${appPort}`,
|
baseURL: `http://127.0.0.1:${appPort}`,
|
||||||
extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
|
|
||||||
launchOptions: { executablePath: chromiumExecutable },
|
launchOptions: { executablePath: chromiumExecutable },
|
||||||
screenshot: 'only-on-failure',
|
screenshot: 'only-on-failure',
|
||||||
trace: 'retain-on-failure',
|
trace: 'retain-on-failure',
|
||||||
},
|
},
|
||||||
webServer: [
|
webServer: [
|
||||||
{
|
{
|
||||||
command: `TWITTER_LITE_MOCK_RELAY_PORT=${relayPort} pnpm exec tsx e2e/mock-relay.mjs`,
|
command: `TWITTER_LITE_MOCK_RELAY_PORT=${relayPort} node e2e/mock-relay.mjs`,
|
||||||
port: relayPort,
|
port: relayPort,
|
||||||
reuseExistingServer: false,
|
reuseExistingServer: false,
|
||||||
timeout: 120_000,
|
timeout: 120_000,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
command: `TWITTER_LITE_CODEX_URL= TWITTER_LITE_REPORT_ROOT= TWITTER_LITE_CODEX_MODEL= TWITTER_LITE_MASTODON_ORIGINS= TWITTER_LITE_CREDENTIAL_KEY_FILE= TWITTER_LITE_DB_PATH=${databasePath} TWITTER_LITE_ORIGIN=http://127.0.0.1:${appPort} [email protected] TWITTER_RELAY_BASE_URL=http://127.0.0.1:${relayPort} BIRD_PROFILE_NAME=e2e pnpm exec vite dev --host 127.0.0.1 --port ${appPort} --strictPort`,
|
command: `TWITTER_RELAY_BASE_URL=http://127.0.0.1:${relayPort} BIRD_PROFILE_NAME=e2e pnpm exec vite dev --host 127.0.0.1 --port ${appPort} --strictPort`,
|
||||||
port: appPort,
|
url: `http://127.0.0.1:${appPort}`,
|
||||||
reuseExistingServer: false,
|
reuseExistingServer: false,
|
||||||
timeout: 120_000,
|
timeout: 120_000,
|
||||||
},
|
},
|
||||||
|
|||||||
Generated
+39
-5498
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,2 @@
|
|||||||
allowBuilds:
|
allowBuilds:
|
||||||
better-sqlite3: false
|
|
||||||
esbuild: true
|
esbuild: true
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
import { backupDatabase } from '../src/features/storage/backup.server'
|
|
||||||
|
|
||||||
const source = process.env.TWITTER_LITE_DB_PATH
|
|
||||||
const destination = process.argv[2]
|
|
||||||
if (!source || !destination || process.argv.length !== 3) {
|
|
||||||
console.error(
|
|
||||||
'Usage: TWITTER_LITE_DB_PATH=/absolute/app.db pnpm db:backup /absolute/backup.db',
|
|
||||||
)
|
|
||||||
process.exitCode = 1
|
|
||||||
} else {
|
|
||||||
await backupDatabase(source, destination)
|
|
||||||
console.log(`Backup verified: ${destination}`)
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { build } from 'vite'
|
|
||||||
|
|
||||||
await build({
|
|
||||||
configFile: false,
|
|
||||||
build: {
|
|
||||||
ssr: 'scripts/backup-database.ts',
|
|
||||||
outDir: '.output/server/tools',
|
|
||||||
rollupOptions: { external: ['better-sqlite3'] },
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { writeFileSync } from 'node:fs'
|
|
||||||
import { readMigrationFiles } from 'drizzle-orm/migrator'
|
|
||||||
|
|
||||||
const migrations = readMigrationFiles({
|
|
||||||
migrationsFolder: new URL('../drizzle', import.meta.url).pathname,
|
|
||||||
})
|
|
||||||
writeFileSync(
|
|
||||||
new URL('../src/features/storage/migrations.generated.ts', import.meta.url),
|
|
||||||
`// Generated by pnpm db:generate. Do not edit.\nexport const migrations = ${JSON.stringify(migrations, null, 2)}\n`,
|
|
||||||
)
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
import { spawn, spawnSync } from 'node:child_process'
|
|
||||||
import { mkdir } from 'node:fs/promises'
|
|
||||||
import { homedir } from 'node:os'
|
|
||||||
import { resolve } from 'node:path'
|
|
||||||
|
|
||||||
// This process is independent of Vite / the web backend. Keep it running while
|
|
||||||
// restarting the app. Codex owns its own login and refreshes that login normally.
|
|
||||||
const reportRoot = resolve(
|
|
||||||
process.env.TWITTER_LITE_REPORT_ROOT || '.data/research',
|
|
||||||
)
|
|
||||||
const endpoint = new URL(
|
|
||||||
process.env.TWITTER_LITE_CODEX_URL || 'ws://127.0.0.1:4500',
|
|
||||||
)
|
|
||||||
if (
|
|
||||||
endpoint.protocol !== 'ws:' ||
|
|
||||||
endpoint.hostname !== '127.0.0.1' ||
|
|
||||||
endpoint.username ||
|
|
||||||
endpoint.password
|
|
||||||
) {
|
|
||||||
throw new Error('The prototype Codex endpoint must be ws://127.0.0.1:<port>.')
|
|
||||||
}
|
|
||||||
await mkdir(reportRoot, { recursive: true, mode: 0o700 })
|
|
||||||
const env = {
|
|
||||||
HOME: homedir(),
|
|
||||||
PATH: process.env.PATH,
|
|
||||||
CODEX_HOME: process.env.CODEX_HOME || resolve(homedir(), '.codex'),
|
|
||||||
}
|
|
||||||
for (const name of [
|
|
||||||
'LANG',
|
|
||||||
'LC_ALL',
|
|
||||||
'SSL_CERT_FILE',
|
|
||||||
'SSL_CERT_DIR',
|
|
||||||
'NIX_SSL_CERT_FILE',
|
|
||||||
'TMPDIR',
|
|
||||||
]) {
|
|
||||||
if (process.env[name]) env[name] = process.env[name]
|
|
||||||
}
|
|
||||||
// Enumerate the effective config, including CLI-wrapper and project settings.
|
|
||||||
// Keep this output private: MCP transport settings can contain credentials.
|
|
||||||
const configured = spawnSync('codex', ['mcp', 'list', '--json'], {
|
|
||||||
cwd: reportRoot,
|
|
||||||
env,
|
|
||||||
encoding: 'utf8',
|
|
||||||
timeout: 15_000,
|
|
||||||
maxBuffer: 4 * 1024 * 1024,
|
|
||||||
})
|
|
||||||
let mcpOverrides
|
|
||||||
try {
|
|
||||||
if (configured.error || configured.status !== 0) throw new Error()
|
|
||||||
const servers = JSON.parse(configured.stdout)
|
|
||||||
if (!Array.isArray(servers)) throw new Error()
|
|
||||||
mcpOverrides = servers.flatMap((server) => {
|
|
||||||
if (
|
|
||||||
typeof server?.name !== 'string' ||
|
|
||||||
!/^[A-Za-z0-9_-]+$/.test(server.name)
|
|
||||||
)
|
|
||||||
throw new Error()
|
|
||||||
return ['-c', `mcp_servers.${server.name}.enabled=false`]
|
|
||||||
})
|
|
||||||
} catch {
|
|
||||||
throw new Error(
|
|
||||||
'Could not inspect Codex MCP configuration safely. Check codex mcp list locally.',
|
|
||||||
)
|
|
||||||
}
|
|
||||||
const child = spawn(
|
|
||||||
'codex',
|
|
||||||
[
|
|
||||||
// Keep overrides before the subcommand so they merge with wrapper settings.
|
|
||||||
'-c',
|
|
||||||
'shell_environment_policy.inherit="none"',
|
|
||||||
'-c',
|
|
||||||
'features.multi_agent=false',
|
|
||||||
'-c',
|
|
||||||
'features.hooks=false',
|
|
||||||
'-c',
|
|
||||||
'web_search="disabled"',
|
|
||||||
...mcpOverrides,
|
|
||||||
'app-server',
|
|
||||||
'--listen',
|
|
||||||
endpoint.origin,
|
|
||||||
],
|
|
||||||
{ cwd: reportRoot, env, stdio: 'inherit' },
|
|
||||||
)
|
|
||||||
child.on('error', () => {
|
|
||||||
console.error(
|
|
||||||
'Could not start Codex. Install codex and run codex login first.',
|
|
||||||
)
|
|
||||||
process.exitCode = 1
|
|
||||||
})
|
|
||||||
child.on('exit', (code) => {
|
|
||||||
process.exitCode = code ?? 1
|
|
||||||
})
|
|
||||||
for (const signal of ['SIGINT', 'SIGTERM'])
|
|
||||||
process.on(signal, () => child.kill(signal))
|
|
||||||
+29
-129
@@ -1,136 +1,36 @@
|
|||||||
import { Columns3, MessageSquare, PanelLeftClose } from 'lucide-react'
|
import { Link } from '@tanstack/react-router'
|
||||||
import { type CSSProperties, type ReactNode, useState } from 'react'
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
useSidebar,
|
|
||||||
} from '#/components/ui/sidebar'
|
|
||||||
import { TooltipProvider } from '#/components/ui/tooltip'
|
|
||||||
import { WorkspaceNavigation } from '#/components/workspace-navigation'
|
|
||||||
|
|
||||||
type ShellProps = {
|
export function AppShell({
|
||||||
hasTemporaryDecks: boolean
|
active,
|
||||||
sidebar: ReactNode
|
|
||||||
researchChat: (closeMobileSidebar: () => void) => ReactNode
|
|
||||||
children: ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AppShell(props: ShellProps) {
|
|
||||||
return (
|
|
||||||
<TooltipProvider delay={800}>
|
|
||||||
<SidebarProvider
|
|
||||||
className="workspace h-dvh min-h-0 overflow-hidden"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
'--sidebar-width': '25rem',
|
|
||||||
'--sidebar-width-icon': '4rem',
|
|
||||||
} as CSSProperties
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Workspace {...props} />
|
|
||||||
</SidebarProvider>
|
|
||||||
</TooltipProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Workspace({
|
|
||||||
sidebar,
|
|
||||||
researchChat,
|
|
||||||
children,
|
children,
|
||||||
hasTemporaryDecks,
|
}: {
|
||||||
}: ShellProps) {
|
active?: 'user' | 'search' | 'list'
|
||||||
const [panel, setPanel] = useState<'chat' | 'decks'>('chat')
|
children: React.ReactNode
|
||||||
const { setOpen, setOpenMobile, isMobile } = useSidebar()
|
}) {
|
||||||
const navigation = [
|
|
||||||
{ id: 'chat', title: '調査チャット', icon: MessageSquare },
|
|
||||||
{ id: 'decks', title: 'デッキ管理', icon: Columns3 },
|
|
||||||
] as const
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<main className="app">
|
||||||
<Sidebar
|
<header className="app-header">
|
||||||
collapsible="icon"
|
<p className="brand">Twitter Lite</p>
|
||||||
className="overflow-hidden *:data-[sidebar=sidebar]:flex-row"
|
<nav aria-label="閲覧方法" className="tabs">
|
||||||
>
|
<Link aria-current={active === 'user' ? 'page' : undefined} to="/">
|
||||||
<WorkspaceNavigation
|
ユーザー
|
||||||
hasTemporaryDecks={hasTemporaryDecks}
|
</Link>
|
||||||
footer={
|
<Link
|
||||||
<SidebarMenuItem>
|
aria-current={active === 'search' ? 'page' : undefined}
|
||||||
<SidebarMenuButton
|
search={{ q: '', product: 'Latest', following: false }}
|
||||||
aria-label="サイドバーを閉じる"
|
to="/search"
|
||||||
tooltip={{ children: 'サイドバーを閉じる', hidden: false }}
|
|
||||||
onClick={() =>
|
|
||||||
isMobile ? setOpenMobile(false) : setOpen(false)
|
|
||||||
}
|
|
||||||
className="size-10 justify-center p-0"
|
|
||||||
>
|
|
||||||
<PanelLeftClose />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{navigation.map((item) => (
|
|
||||||
<SidebarMenuItem key={item.id}>
|
|
||||||
<SidebarMenuButton
|
|
||||||
aria-label={item.title}
|
|
||||||
tooltip={{ children: item.title, hidden: false }}
|
|
||||||
isActive={panel === item.id}
|
|
||||||
onClick={() => {
|
|
||||||
setPanel(item.id)
|
|
||||||
if (isMobile) setOpenMobile(true)
|
|
||||||
else setOpen(true)
|
|
||||||
}}
|
|
||||||
className="size-10 justify-center p-0"
|
|
||||||
>
|
|
||||||
<item.icon />
|
|
||||||
<span className="sr-only">{item.title}</span>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</WorkspaceNavigation>
|
|
||||||
<Sidebar
|
|
||||||
collapsible="none"
|
|
||||||
className="min-w-0 flex-1 group-data-[collapsible=icon]:hidden"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
panel === 'chat' ? 'flex min-h-0 flex-1 flex-col' : 'hidden'
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{researchChat(() => setOpenMobile(false))}
|
検索
|
||||||
</div>
|
</Link>
|
||||||
<section
|
<Link
|
||||||
aria-label="デッキ管理"
|
aria-current={active === 'list' ? 'page' : undefined}
|
||||||
className={
|
to="/i/lists"
|
||||||
panel === 'decks'
|
|
||||||
? 'flex min-h-0 flex-1 flex-col overflow-y-auto p-4'
|
|
||||||
: 'hidden'
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<h2 className="mb-4 text-base font-semibold">デッキ</h2>
|
リスト
|
||||||
<div className="flex flex-col gap-4">{sidebar}</div>
|
</Link>
|
||||||
</section>
|
</nav>
|
||||||
</Sidebar>
|
</header>
|
||||||
</Sidebar>
|
<section className="reader">{children}</section>
|
||||||
<SidebarInset className="min-w-0 overflow-hidden">
|
</main>
|
||||||
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-3">
|
|
||||||
<SidebarTrigger aria-label="サイドバーを切り替え" />
|
|
||||||
<span className="text-sm font-medium">Twitter Lite</span>
|
|
||||||
<span className="ml-auto text-xs text-muted-foreground">
|
|
||||||
調査ワークスペース
|
|
||||||
</span>
|
|
||||||
</header>
|
|
||||||
<section
|
|
||||||
className="reader flex min-h-0 min-w-0 flex-1 flex-col"
|
|
||||||
aria-label="デッキ"
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</section>
|
|
||||||
</SidebarInset>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,54 +0,0 @@
|
|||||||
import { cn } from 'cn'
|
|
||||||
import { Icon } from './icon'
|
|
||||||
import { Button } from './ui/button'
|
|
||||||
import {
|
|
||||||
DialogClose,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
Dialog as DialogRoot,
|
|
||||||
DialogTitle,
|
|
||||||
} from './ui/dialog'
|
|
||||||
|
|
||||||
export function Dialog({
|
|
||||||
title,
|
|
||||||
onClose,
|
|
||||||
children,
|
|
||||||
className,
|
|
||||||
}: {
|
|
||||||
title: string
|
|
||||||
className?: string
|
|
||||||
onClose: () => void
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<DialogRoot
|
|
||||||
open
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
if (!open) onClose()
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
className={cn('max-h-[calc(100dvh-2rem)] overflow-y-auto', className)}
|
|
||||||
aria-describedby={undefined}
|
|
||||||
>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{title}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<DialogClose
|
|
||||||
render={
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="absolute right-2 top-2"
|
|
||||||
aria-label="閉じる"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Icon name="close" />
|
|
||||||
</DialogClose>
|
|
||||||
{children}
|
|
||||||
</DialogContent>
|
|
||||||
</DialogRoot>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
const paths = {
|
|
||||||
columns: 'M3 4h7v16H3z M14 4h7v16h-7z',
|
|
||||||
hashtag: 'M10 3 8 21 M17 3l-2 18 M4 9h16 M3 15h16',
|
|
||||||
search: 'M21 21l-5-5 M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0',
|
|
||||||
user: 'M20 21v-2a7 7 0 0 0-14 0v2 M17 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0',
|
|
||||||
list: 'M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01',
|
|
||||||
plus: 'M12 5v14 M5 12h14',
|
|
||||||
close: 'M6 6l12 12 M18 6 6 18',
|
|
||||||
refresh: 'M20 7v5h-5 M4 17v-5h5 M6 6a8 8 0 0 1 14 6 M4 12a8 8 0 0 0 14 6',
|
|
||||||
more: 'M5 12h.01 M12 12h.01 M19 12h.01',
|
|
||||||
arrow: 'M7 17 17 7 M7 7h10v10',
|
|
||||||
edit: 'm16 3 5 5-12 12H4v-5z M14 5l5 5',
|
|
||||||
trash: 'M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7',
|
|
||||||
} as const
|
|
||||||
|
|
||||||
export function Icon({ name }: { name: keyof typeof paths }) {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.8"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d={paths[name]} />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
import type { ReactNode } from 'react'
|
|
||||||
|
|
||||||
const URL = /(https?:\/\/[^\s]+)/g
|
|
||||||
const HTML_ENTITY = /&(?:#(\d+)|#x([\da-f]+)|amp|apos|gt|lt|quot);/gi
|
|
||||||
const NAMED_ENTITIES: Record<string, string> = {
|
|
||||||
'&': '&',
|
|
||||||
''': "'",
|
|
||||||
'>': '>',
|
|
||||||
'<': '<',
|
|
||||||
'"': '"',
|
|
||||||
}
|
|
||||||
function decodeHtmlEntities(text: string): string {
|
|
||||||
return text.replace(HTML_ENTITY, (entity, decimal, hexadecimal) => {
|
|
||||||
if (!decimal && !hexadecimal) {
|
|
||||||
return NAMED_ENTITIES[entity.toLowerCase()] ?? entity
|
|
||||||
}
|
|
||||||
|
|
||||||
const codePoint = Number.parseInt(decimal ?? hexadecimal, decimal ? 10 : 16)
|
|
||||||
return codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : entity
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function linkedText(text: string): ReactNode[] {
|
|
||||||
const decoded = decodeHtmlEntities(text)
|
|
||||||
const parts: ReactNode[] = []
|
|
||||||
let cursor = 0
|
|
||||||
for (const match of decoded.matchAll(URL)) {
|
|
||||||
const href = match[0]
|
|
||||||
const start = match.index
|
|
||||||
if (start > cursor) parts.push(decoded.slice(cursor, start))
|
|
||||||
parts.push(
|
|
||||||
<a
|
|
||||||
href={href}
|
|
||||||
key={`link-${start}`}
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{href}
|
|
||||||
</a>,
|
|
||||||
)
|
|
||||||
cursor = start + href.length
|
|
||||||
}
|
|
||||||
if (cursor < decoded.length) parts.push(decoded.slice(cursor))
|
|
||||||
return parts
|
|
||||||
}
|
|
||||||
|
|
||||||
export function PostText({ text }: { text: string }) {
|
|
||||||
return <>{linkedText(text)}</>
|
|
||||||
}
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function Avatar({
|
|
||||||
className,
|
|
||||||
size = 'default',
|
|
||||||
...props
|
|
||||||
}: AvatarPrimitive.Root.Props & {
|
|
||||||
size?: 'default' | 'sm' | 'lg'
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<AvatarPrimitive.Root
|
|
||||||
data-slot="avatar"
|
|
||||||
data-size={size}
|
|
||||||
className={cn(
|
|
||||||
'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
|
||||||
return (
|
|
||||||
<AvatarPrimitive.Image
|
|
||||||
data-slot="avatar-image"
|
|
||||||
className={cn(
|
|
||||||
'aspect-square size-full rounded-full object-cover',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AvatarFallback({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: AvatarPrimitive.Fallback.Props) {
|
|
||||||
return (
|
|
||||||
<AvatarPrimitive.Fallback
|
|
||||||
data-slot="avatar-fallback"
|
|
||||||
className={cn(
|
|
||||||
'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
data-slot="avatar-badge"
|
|
||||||
className={cn(
|
|
||||||
'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
|
|
||||||
'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
|
|
||||||
'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
|
|
||||||
'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="avatar-group"
|
|
||||||
className={cn(
|
|
||||||
'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AvatarGroupCount({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="avatar-group-count"
|
|
||||||
className={cn(
|
|
||||||
'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Avatar,
|
|
||||||
AvatarBadge,
|
|
||||||
AvatarFallback,
|
|
||||||
AvatarGroup,
|
|
||||||
AvatarGroupCount,
|
|
||||||
AvatarImage,
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
|
|
||||||
const badgeVariants = cva(
|
|
||||||
'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
|
||||||
secondary:
|
|
||||||
'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
|
|
||||||
destructive:
|
|
||||||
'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
|
|
||||||
outline:
|
|
||||||
'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
|
|
||||||
ghost:
|
|
||||||
'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
|
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function Badge({
|
|
||||||
className,
|
|
||||||
variant = 'default',
|
|
||||||
render,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'span',
|
|
||||||
props: mergeProps<'span'>(
|
|
||||||
{
|
|
||||||
className: cn(badgeVariants({ variant }), className),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'badge',
|
|
||||||
variant,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Badge, badgeVariants }
|
|
||||||
@@ -1,127 +0,0 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="bubble-group"
|
|
||||||
className={cn('flex min-w-0 flex-col gap-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const bubbleVariants = cva(
|
|
||||||
'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default:
|
|
||||||
'*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',
|
|
||||||
secondary:
|
|
||||||
'*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
|
|
||||||
muted:
|
|
||||||
'*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',
|
|
||||||
tinted:
|
|
||||||
'*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',
|
|
||||||
outline:
|
|
||||||
'*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30',
|
|
||||||
ghost:
|
|
||||||
'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50',
|
|
||||||
destructive:
|
|
||||||
'*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function Bubble({
|
|
||||||
variant = 'default',
|
|
||||||
align = 'start',
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> &
|
|
||||||
VariantProps<typeof bubbleVariants> & {
|
|
||||||
align?: 'start' | 'end'
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="bubble"
|
|
||||||
data-variant={variant}
|
|
||||||
data-align={align}
|
|
||||||
className={cn(bubbleVariants({ variant }), className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function BubbleContent({
|
|
||||||
className,
|
|
||||||
render,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'div'>) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'div',
|
|
||||||
props: mergeProps<'div'>(
|
|
||||||
{
|
|
||||||
className: cn(
|
|
||||||
'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50',
|
|
||||||
className,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'bubble-content',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const bubbleReactionsVariants = cva(
|
|
||||||
'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
side: {
|
|
||||||
top: 'top-0 -translate-y-3/4',
|
|
||||||
bottom: 'bottom-0 translate-y-3/4',
|
|
||||||
},
|
|
||||||
align: {
|
|
||||||
start: 'left-3',
|
|
||||||
end: 'right-3',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
side: 'bottom',
|
|
||||||
align: 'end',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function BubbleReactions({
|
|
||||||
side = 'bottom',
|
|
||||||
align = 'end',
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & {
|
|
||||||
align?: 'start' | 'end'
|
|
||||||
side?: 'top' | 'bottom'
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="bubble-reactions"
|
|
||||||
data-align={align}
|
|
||||||
data-side={side}
|
|
||||||
className={cn(bubbleReactionsVariants({ side, align }), className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Bubble, BubbleContent, BubbleGroup, BubbleReactions }
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { Button as ButtonPrimitive } from '@base-ui/react/button'
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
|
|
||||||
const buttonVariants = cva(
|
|
||||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
|
|
||||||
outline:
|
|
||||||
'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
|
|
||||||
secondary:
|
|
||||||
'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
||||||
ghost:
|
|
||||||
'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
|
|
||||||
destructive:
|
|
||||||
'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
|
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default:
|
|
||||||
'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
||||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
||||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
||||||
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
||||||
icon: 'size-8',
|
|
||||||
'icon-xs':
|
|
||||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
||||||
'icon-sm':
|
|
||||||
'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
|
||||||
'icon-lg': 'size-9',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
size: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function Button({
|
|
||||||
className,
|
|
||||||
variant = 'default',
|
|
||||||
size = 'default',
|
|
||||||
...props
|
|
||||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
|
||||||
return (
|
|
||||||
<ButtonPrimitive
|
|
||||||
data-slot="button"
|
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Button, buttonVariants }
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import { CheckIcon } from 'lucide-react'
|
|
||||||
|
|
||||||
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
|
||||||
return (
|
|
||||||
<CheckboxPrimitive.Root
|
|
||||||
data-slot="checkbox"
|
|
||||||
className={cn(
|
|
||||||
'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<CheckboxPrimitive.Indicator
|
|
||||||
data-slot="checkbox-indicator"
|
|
||||||
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
|
||||||
>
|
|
||||||
<CheckIcon />
|
|
||||||
</CheckboxPrimitive.Indicator>
|
|
||||||
</CheckboxPrimitive.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Checkbox }
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
|
|
||||||
|
|
||||||
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
|
|
||||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
|
|
||||||
return (
|
|
||||||
<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
|
|
||||||
return (
|
|
||||||
<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Collapsible, CollapsibleContent, CollapsibleTrigger }
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import { XIcon } from 'lucide-react'
|
|
||||||
import type * as React from 'react'
|
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
|
||||||
|
|
||||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
|
||||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
|
||||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
|
||||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
|
||||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogOverlay({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: DialogPrimitive.Backdrop.Props) {
|
|
||||||
return (
|
|
||||||
<DialogPrimitive.Backdrop
|
|
||||||
data-slot="dialog-overlay"
|
|
||||||
className={cn(
|
|
||||||
'fixed inset-0 isolate z-50 bg-overlay duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogContent({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
showCloseButton = true,
|
|
||||||
...props
|
|
||||||
}: DialogPrimitive.Popup.Props & {
|
|
||||||
showCloseButton?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<DialogPortal>
|
|
||||||
<DialogOverlay />
|
|
||||||
<DialogPrimitive.Popup
|
|
||||||
data-slot="dialog-content"
|
|
||||||
className={cn(
|
|
||||||
'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
{showCloseButton && (
|
|
||||||
<DialogPrimitive.Close
|
|
||||||
data-slot="dialog-close"
|
|
||||||
render={
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="absolute top-2 right-2"
|
|
||||||
size="icon-sm"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XIcon />
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
</DialogPrimitive.Close>
|
|
||||||
)}
|
|
||||||
</DialogPrimitive.Popup>
|
|
||||||
</DialogPortal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="dialog-header"
|
|
||||||
className={cn('flex flex-col gap-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogFooter({
|
|
||||||
className,
|
|
||||||
showCloseButton = false,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & {
|
|
||||||
showCloseButton?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="dialog-footer"
|
|
||||||
className={cn(
|
|
||||||
'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
{showCloseButton && (
|
|
||||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
|
||||||
Close
|
|
||||||
</DialogPrimitive.Close>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
|
||||||
return (
|
|
||||||
<DialogPrimitive.Title
|
|
||||||
data-slot="dialog-title"
|
|
||||||
className={cn('text-base leading-none font-medium', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogDescription({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: DialogPrimitive.Description.Props) {
|
|
||||||
return (
|
|
||||||
<DialogPrimitive.Description
|
|
||||||
data-slot="dialog-description"
|
|
||||||
className={cn(
|
|
||||||
'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Dialog,
|
|
||||||
DialogClose,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogPortal,
|
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
|
||||||
}
|
|
||||||
@@ -1,271 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { Menu as MenuPrimitive } from '@base-ui/react/menu'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import { CheckIcon, ChevronRightIcon } from 'lucide-react'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
|
||||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
|
||||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
|
||||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuContent({
|
|
||||||
align = 'start',
|
|
||||||
alignOffset = 0,
|
|
||||||
side = 'bottom',
|
|
||||||
sideOffset = 4,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.Popup.Props &
|
|
||||||
Pick<
|
|
||||||
MenuPrimitive.Positioner.Props,
|
|
||||||
'align' | 'alignOffset' | 'side' | 'sideOffset'
|
|
||||||
>) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.Portal>
|
|
||||||
<MenuPrimitive.Positioner
|
|
||||||
className="isolate z-50 outline-none"
|
|
||||||
align={align}
|
|
||||||
alignOffset={alignOffset}
|
|
||||||
side={side}
|
|
||||||
sideOffset={sideOffset}
|
|
||||||
>
|
|
||||||
<MenuPrimitive.Popup
|
|
||||||
data-slot="dropdown-menu-content"
|
|
||||||
className={cn(
|
|
||||||
'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</MenuPrimitive.Positioner>
|
|
||||||
</MenuPrimitive.Portal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
|
||||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuLabel({
|
|
||||||
className,
|
|
||||||
inset,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.GroupLabel.Props & {
|
|
||||||
inset?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.GroupLabel
|
|
||||||
data-slot="dropdown-menu-label"
|
|
||||||
data-inset={inset}
|
|
||||||
className={cn(
|
|
||||||
'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuItem({
|
|
||||||
className,
|
|
||||||
inset,
|
|
||||||
variant = 'default',
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.Item.Props & {
|
|
||||||
inset?: boolean
|
|
||||||
variant?: 'default' | 'destructive'
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.Item
|
|
||||||
data-slot="dropdown-menu-item"
|
|
||||||
data-inset={inset}
|
|
||||||
data-variant={variant}
|
|
||||||
className={cn(
|
|
||||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
|
||||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSubTrigger({
|
|
||||||
className,
|
|
||||||
inset,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
|
||||||
inset?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.SubmenuTrigger
|
|
||||||
data-slot="dropdown-menu-sub-trigger"
|
|
||||||
data-inset={inset}
|
|
||||||
className={cn(
|
|
||||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<ChevronRightIcon className="ml-auto" />
|
|
||||||
</MenuPrimitive.SubmenuTrigger>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSubContent({
|
|
||||||
align = 'start',
|
|
||||||
alignOffset = -3,
|
|
||||||
side = 'right',
|
|
||||||
sideOffset = 0,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuContent
|
|
||||||
data-slot="dropdown-menu-sub-content"
|
|
||||||
className={cn(
|
|
||||||
'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
align={align}
|
|
||||||
alignOffset={alignOffset}
|
|
||||||
side={side}
|
|
||||||
sideOffset={sideOffset}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuCheckboxItem({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
checked,
|
|
||||||
inset,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.CheckboxItem.Props & {
|
|
||||||
inset?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.CheckboxItem
|
|
||||||
data-slot="dropdown-menu-checkbox-item"
|
|
||||||
data-inset={inset}
|
|
||||||
className={cn(
|
|
||||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
checked={checked}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
|
||||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
|
||||||
>
|
|
||||||
<MenuPrimitive.CheckboxItemIndicator>
|
|
||||||
<CheckIcon />
|
|
||||||
</MenuPrimitive.CheckboxItemIndicator>
|
|
||||||
</span>
|
|
||||||
{children}
|
|
||||||
</MenuPrimitive.CheckboxItem>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.RadioGroup
|
|
||||||
data-slot="dropdown-menu-radio-group"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuRadioItem({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
inset,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.RadioItem.Props & {
|
|
||||||
inset?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.RadioItem
|
|
||||||
data-slot="dropdown-menu-radio-item"
|
|
||||||
data-inset={inset}
|
|
||||||
className={cn(
|
|
||||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
|
||||||
data-slot="dropdown-menu-radio-item-indicator"
|
|
||||||
>
|
|
||||||
<MenuPrimitive.RadioItemIndicator>
|
|
||||||
<CheckIcon />
|
|
||||||
</MenuPrimitive.RadioItemIndicator>
|
|
||||||
</span>
|
|
||||||
{children}
|
|
||||||
</MenuPrimitive.RadioItem>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSeparator({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.Separator.Props) {
|
|
||||||
return (
|
|
||||||
<MenuPrimitive.Separator
|
|
||||||
data-slot="dropdown-menu-separator"
|
|
||||||
className={cn('-mx-1 my-1 h-px bg-border', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuShortcut({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'span'>) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
data-slot="dropdown-menu-shortcut"
|
|
||||||
className={cn(
|
|
||||||
'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuCheckboxItem,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuGroup,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuPortal,
|
|
||||||
DropdownMenuRadioGroup,
|
|
||||||
DropdownMenuRadioItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuShortcut,
|
|
||||||
DropdownMenuSub,
|
|
||||||
DropdownMenuSubContent,
|
|
||||||
DropdownMenuSubTrigger,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
}
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
|
|
||||||
function Empty({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="empty"
|
|
||||||
className={cn(
|
|
||||||
'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="empty-header"
|
|
||||||
className={cn('flex max-w-sm flex-col items-center gap-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const emptyMediaVariants = cva(
|
|
||||||
'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'bg-transparent',
|
|
||||||
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function EmptyMedia({
|
|
||||||
className,
|
|
||||||
variant = 'default',
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="empty-icon"
|
|
||||||
data-variant={variant}
|
|
||||||
className={cn(emptyMediaVariants({ variant, className }))}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="empty-title"
|
|
||||||
className={cn('text-sm font-medium tracking-tight', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="empty-description"
|
|
||||||
className={cn(
|
|
||||||
'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="empty-content"
|
|
||||||
className={cn(
|
|
||||||
'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Empty,
|
|
||||||
EmptyContent,
|
|
||||||
EmptyDescription,
|
|
||||||
EmptyHeader,
|
|
||||||
EmptyMedia,
|
|
||||||
EmptyTitle,
|
|
||||||
}
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
|
||||||
import { Input } from '#/components/ui/input.tsx'
|
|
||||||
import { Textarea } from '#/components/ui/textarea.tsx'
|
|
||||||
|
|
||||||
function InputGroup({ className, ...props }: React.ComponentProps<'fieldset'>) {
|
|
||||||
return (
|
|
||||||
<fieldset
|
|
||||||
data-slot="input-group"
|
|
||||||
className={cn(
|
|
||||||
'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const inputGroupAddonVariants = cva(
|
|
||||||
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
align: {
|
|
||||||
'inline-start':
|
|
||||||
'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
|
|
||||||
'inline-end':
|
|
||||||
'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
|
|
||||||
'block-start':
|
|
||||||
'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
|
|
||||||
'block-end':
|
|
||||||
'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
align: 'inline-start',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function InputGroupAddon({
|
|
||||||
className,
|
|
||||||
align = 'inline-start',
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'fieldset'> &
|
|
||||||
VariantProps<typeof inputGroupAddonVariants>) {
|
|
||||||
return (
|
|
||||||
// biome-ignore lint/a11y/useKeyWithClickEvents: Pointer convenience only; the text control remains independently keyboard-focusable.
|
|
||||||
<fieldset
|
|
||||||
data-slot="input-group-addon"
|
|
||||||
data-align={align}
|
|
||||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
|
||||||
onClick={(e) => {
|
|
||||||
if ((e.target as HTMLElement).closest('button')) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
e.currentTarget.parentElement?.querySelector('input')?.focus()
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const inputGroupButtonVariants = cva(
|
|
||||||
'flex items-center gap-2 text-sm shadow-none',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
size: {
|
|
||||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
||||||
sm: '',
|
|
||||||
'icon-xs':
|
|
||||||
'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
|
|
||||||
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
size: 'xs',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function InputGroupButton({
|
|
||||||
className,
|
|
||||||
type = 'button',
|
|
||||||
variant = 'ghost',
|
|
||||||
size = 'xs',
|
|
||||||
...props
|
|
||||||
}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
|
|
||||||
VariantProps<typeof inputGroupButtonVariants> & {
|
|
||||||
type?: 'button' | 'submit' | 'reset'
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
type={type}
|
|
||||||
data-size={size}
|
|
||||||
variant={variant}
|
|
||||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function InputGroupInput({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'input'>) {
|
|
||||||
return (
|
|
||||||
<Input
|
|
||||||
data-slot="input-group-control"
|
|
||||||
className={cn(
|
|
||||||
'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function InputGroupTextarea({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'textarea'>) {
|
|
||||||
return (
|
|
||||||
<Textarea
|
|
||||||
data-slot="input-group-control"
|
|
||||||
className={cn(
|
|
||||||
'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
InputGroup,
|
|
||||||
InputGroupAddon,
|
|
||||||
InputGroupButton,
|
|
||||||
InputGroupInput,
|
|
||||||
InputGroupText,
|
|
||||||
InputGroupTextarea,
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import { Input as InputPrimitive } from '@base-ui/react/input'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
|
||||||
return (
|
|
||||||
<InputPrimitive
|
|
||||||
type={type}
|
|
||||||
data-slot="input"
|
|
||||||
className={cn(
|
|
||||||
'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Input }
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function Label({ className, ...props }: React.ComponentProps<'label'>) {
|
|
||||||
return (
|
|
||||||
// biome-ignore lint/a11y/noLabelWithoutControl: Association and content are supplied by the caller through props.
|
|
||||||
<label
|
|
||||||
data-slot="label"
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Label }
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
const markerVariants = cva(
|
|
||||||
"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: '',
|
|
||||||
separator:
|
|
||||||
'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border',
|
|
||||||
border: 'border-b border-border pb-2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function Marker({
|
|
||||||
className,
|
|
||||||
variant = 'default',
|
|
||||||
render,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'div',
|
|
||||||
props: mergeProps<'div'>(
|
|
||||||
{
|
|
||||||
className: cn(markerVariants({ variant, className })),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'marker',
|
|
||||||
variant,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
data-slot="marker-icon"
|
|
||||||
aria-hidden="true"
|
|
||||||
className={cn(
|
|
||||||
"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
data-slot="marker-content"
|
|
||||||
className={cn(
|
|
||||||
'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Marker, MarkerContent, MarkerIcon, markerVariants }
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import {
|
|
||||||
MessageScroller as MessageScrollerPrimitive,
|
|
||||||
useMessageScroller,
|
|
||||||
useMessageScrollerScrollable,
|
|
||||||
useMessageScrollerVisibility,
|
|
||||||
} from '@shadcn/react/message-scroller'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import { ArrowDownIcon } from 'lucide-react'
|
|
||||||
import type * as React from 'react'
|
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
|
||||||
|
|
||||||
function MessageScrollerProvider(
|
|
||||||
props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,
|
|
||||||
) {
|
|
||||||
return <MessageScrollerPrimitive.Provider {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageScroller({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<MessageScrollerPrimitive.Root
|
|
||||||
data-slot="message-scroller"
|
|
||||||
className={cn(
|
|
||||||
'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageScrollerViewport({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
|
|
||||||
return (
|
|
||||||
<MessageScrollerPrimitive.Viewport
|
|
||||||
data-slot="message-scroller-viewport"
|
|
||||||
className={cn(
|
|
||||||
'size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageScrollerContent({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
|
|
||||||
return (
|
|
||||||
<MessageScrollerPrimitive.Content
|
|
||||||
data-slot="message-scroller-content"
|
|
||||||
className={cn('flex h-max min-h-full flex-col gap-6', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageScrollerItem({
|
|
||||||
className,
|
|
||||||
scrollAnchor = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
|
|
||||||
return (
|
|
||||||
<MessageScrollerPrimitive.Item
|
|
||||||
data-slot="message-scroller-item"
|
|
||||||
scrollAnchor={scrollAnchor}
|
|
||||||
className={cn(
|
|
||||||
'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageScrollerButton({
|
|
||||||
direction = 'end',
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
render,
|
|
||||||
variant = 'secondary',
|
|
||||||
size = 'icon-sm',
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
|
|
||||||
Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
|
|
||||||
return (
|
|
||||||
<MessageScrollerPrimitive.Button
|
|
||||||
data-slot="message-scroller-button"
|
|
||||||
data-direction={direction}
|
|
||||||
data-variant={variant}
|
|
||||||
data-size={size}
|
|
||||||
direction={direction}
|
|
||||||
className={cn(
|
|
||||||
'absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
render={render ?? <Button variant={variant} size={size} />}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children ?? (
|
|
||||||
<>
|
|
||||||
<ArrowDownIcon />
|
|
||||||
<span className="sr-only">
|
|
||||||
{direction === 'end' ? 'Scroll to end' : 'Scroll to start'}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</MessageScrollerPrimitive.Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
MessageScroller,
|
|
||||||
MessageScrollerButton,
|
|
||||||
MessageScrollerContent,
|
|
||||||
MessageScrollerItem,
|
|
||||||
MessageScrollerProvider,
|
|
||||||
MessageScrollerViewport,
|
|
||||||
useMessageScroller,
|
|
||||||
useMessageScrollerScrollable,
|
|
||||||
useMessageScrollerVisibility,
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="message-group"
|
|
||||||
className={cn('flex min-w-0 flex-col gap-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Message({
|
|
||||||
className,
|
|
||||||
align = 'start',
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="message"
|
|
||||||
data-align={align}
|
|
||||||
className={cn(
|
|
||||||
'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="message-avatar"
|
|
||||||
className={cn(
|
|
||||||
'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageContent({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="message-content"
|
|
||||||
className={cn(
|
|
||||||
'flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="message-header"
|
|
||||||
className={cn(
|
|
||||||
'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="message-footer"
|
|
||||||
className={cn(
|
|
||||||
'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Message,
|
|
||||||
MessageAvatar,
|
|
||||||
MessageContent,
|
|
||||||
MessageFooter,
|
|
||||||
MessageGroup,
|
|
||||||
MessageHeader,
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import { cn } from 'cn'
|
|
||||||
import { ChevronDownIcon } from 'lucide-react'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
|
|
||||||
size?: 'sm' | 'default'
|
|
||||||
}
|
|
||||||
|
|
||||||
function NativeSelect({
|
|
||||||
className,
|
|
||||||
size = 'default',
|
|
||||||
...props
|
|
||||||
}: NativeSelectProps) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'group/native-select relative w-fit has-[select:disabled]:opacity-50',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
data-slot="native-select-wrapper"
|
|
||||||
data-size={size}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
data-slot="native-select"
|
|
||||||
data-size={size}
|
|
||||||
className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
<ChevronDownIcon
|
|
||||||
className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="native-select-icon"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function NativeSelectOption({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'option'>) {
|
|
||||||
return (
|
|
||||||
<option
|
|
||||||
data-slot="native-select-option"
|
|
||||||
className={cn('bg-[Canvas] text-[CanvasText]', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function NativeSelectOptGroup({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'optgroup'>) {
|
|
||||||
return (
|
|
||||||
<optgroup
|
|
||||||
data-slot="native-select-optgroup"
|
|
||||||
className={cn('bg-[Canvas] text-[CanvasText]', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
|
|
||||||
function Separator({
|
|
||||||
className,
|
|
||||||
orientation = 'horizontal',
|
|
||||||
...props
|
|
||||||
}: SeparatorPrimitive.Props) {
|
|
||||||
return (
|
|
||||||
<SeparatorPrimitive
|
|
||||||
data-slot="separator"
|
|
||||||
orientation={orientation}
|
|
||||||
className={cn(
|
|
||||||
'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Separator }
|
|
||||||
@@ -1,133 +0,0 @@
|
|||||||
import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import { XIcon } from 'lucide-react'
|
|
||||||
import type * as React from 'react'
|
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
|
||||||
|
|
||||||
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
|
||||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
|
||||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
|
||||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
|
||||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
|
||||||
return (
|
|
||||||
<SheetPrimitive.Backdrop
|
|
||||||
data-slot="sheet-overlay"
|
|
||||||
className={cn(
|
|
||||||
'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetContent({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
side = 'right',
|
|
||||||
showCloseButton = true,
|
|
||||||
keepMounted = false,
|
|
||||||
...props
|
|
||||||
}: SheetPrimitive.Popup.Props & {
|
|
||||||
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
||||||
showCloseButton?: boolean
|
|
||||||
keepMounted?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<SheetPortal keepMounted={keepMounted}>
|
|
||||||
<SheetOverlay />
|
|
||||||
<SheetPrimitive.Popup
|
|
||||||
data-slot="sheet-content"
|
|
||||||
data-side={side}
|
|
||||||
className={cn(
|
|
||||||
'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
{showCloseButton && (
|
|
||||||
<SheetPrimitive.Close
|
|
||||||
data-slot="sheet-close"
|
|
||||||
render={
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="absolute top-3 right-3"
|
|
||||||
size="icon-sm"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XIcon />
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
</SheetPrimitive.Close>
|
|
||||||
)}
|
|
||||||
</SheetPrimitive.Popup>
|
|
||||||
</SheetPortal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sheet-header"
|
|
||||||
className={cn('flex flex-col gap-0.5 p-4', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sheet-footer"
|
|
||||||
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
|
||||||
return (
|
|
||||||
<SheetPrimitive.Title
|
|
||||||
data-slot="sheet-title"
|
|
||||||
className={cn('text-base font-medium text-foreground', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetDescription({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: SheetPrimitive.Description.Props) {
|
|
||||||
return (
|
|
||||||
<SheetPrimitive.Description
|
|
||||||
data-slot="sheet-description"
|
|
||||||
className={cn('text-sm text-muted-foreground', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Sheet,
|
|
||||||
SheetClose,
|
|
||||||
SheetContent,
|
|
||||||
SheetDescription,
|
|
||||||
SheetFooter,
|
|
||||||
SheetHeader,
|
|
||||||
SheetTitle,
|
|
||||||
SheetTrigger,
|
|
||||||
}
|
|
||||||
@@ -1,716 +0,0 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
import { PanelLeftIcon } from 'lucide-react'
|
|
||||||
import * as React from 'react'
|
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
|
||||||
import { Input } from '#/components/ui/input.tsx'
|
|
||||||
import { Separator } from '#/components/ui/separator.tsx'
|
|
||||||
import {
|
|
||||||
Sheet,
|
|
||||||
SheetContent,
|
|
||||||
SheetDescription,
|
|
||||||
SheetHeader,
|
|
||||||
SheetTitle,
|
|
||||||
} from '#/components/ui/sheet.tsx'
|
|
||||||
import { Skeleton } from '#/components/ui/skeleton.tsx'
|
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from '#/components/ui/tooltip.tsx'
|
|
||||||
import { useIsMobile } from '#/hooks/use-mobile.ts'
|
|
||||||
|
|
||||||
const SIDEBAR_WIDTH = '16rem'
|
|
||||||
const SIDEBAR_WIDTH_MOBILE = 'min(25rem, 100vw)'
|
|
||||||
const SIDEBAR_WIDTH_ICON = '3rem'
|
|
||||||
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
|
|
||||||
|
|
||||||
type SidebarContextProps = {
|
|
||||||
state: 'expanded' | 'collapsed'
|
|
||||||
open: boolean
|
|
||||||
setOpen: (open: boolean) => void
|
|
||||||
openMobile: boolean
|
|
||||||
setOpenMobile: (open: boolean) => void
|
|
||||||
isMobile: boolean
|
|
||||||
toggleSidebar: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
|
||||||
|
|
||||||
function useSidebar() {
|
|
||||||
const context = React.useContext(SidebarContext)
|
|
||||||
if (!context) {
|
|
||||||
throw new Error('useSidebar must be used within a SidebarProvider.')
|
|
||||||
}
|
|
||||||
|
|
||||||
return context
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarProvider({
|
|
||||||
defaultOpen = true,
|
|
||||||
open: openProp,
|
|
||||||
onOpenChange: setOpenProp,
|
|
||||||
className,
|
|
||||||
style,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & {
|
|
||||||
defaultOpen?: boolean
|
|
||||||
open?: boolean
|
|
||||||
onOpenChange?: (open: boolean) => void
|
|
||||||
}) {
|
|
||||||
const isMobile = useIsMobile()
|
|
||||||
const [openMobile, setOpenMobile] = React.useState(false)
|
|
||||||
|
|
||||||
// This is the internal state of the sidebar.
|
|
||||||
// We use openProp and setOpenProp for control from outside the component.
|
|
||||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
|
||||||
const open = openProp ?? _open
|
|
||||||
const setOpen = React.useCallback(
|
|
||||||
(value: boolean | ((value: boolean) => boolean)) => {
|
|
||||||
const openState = typeof value === 'function' ? value(open) : value
|
|
||||||
if (setOpenProp) {
|
|
||||||
setOpenProp(openState)
|
|
||||||
} else {
|
|
||||||
_setOpen(openState)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[setOpenProp, open],
|
|
||||||
)
|
|
||||||
|
|
||||||
// Helper to toggle the sidebar.
|
|
||||||
const toggleSidebar = React.useCallback(() => {
|
|
||||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
|
||||||
}, [isMobile, setOpen])
|
|
||||||
|
|
||||||
// Adds a keyboard shortcut to toggle the sidebar.
|
|
||||||
React.useEffect(() => {
|
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
|
||||||
if (
|
|
||||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
|
||||||
(event.metaKey || event.ctrlKey)
|
|
||||||
) {
|
|
||||||
event.preventDefault()
|
|
||||||
toggleSidebar()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('keydown', handleKeyDown)
|
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
||||||
}, [toggleSidebar])
|
|
||||||
|
|
||||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
|
||||||
// This makes it easier to style the sidebar with Tailwind classes.
|
|
||||||
const state = open ? 'expanded' : 'collapsed'
|
|
||||||
|
|
||||||
const contextValue = React.useMemo<SidebarContextProps>(
|
|
||||||
() => ({
|
|
||||||
state,
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
isMobile,
|
|
||||||
openMobile,
|
|
||||||
setOpenMobile,
|
|
||||||
toggleSidebar,
|
|
||||||
}),
|
|
||||||
[state, open, setOpen, isMobile, openMobile, toggleSidebar],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarContext.Provider value={contextValue}>
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-wrapper"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
'--sidebar-width': SIDEBAR_WIDTH,
|
|
||||||
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
|
|
||||||
...style,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
className={cn(
|
|
||||||
'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</SidebarContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Sidebar({
|
|
||||||
side = 'left',
|
|
||||||
variant = 'sidebar',
|
|
||||||
collapsible = 'offcanvas',
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
dir,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & {
|
|
||||||
side?: 'left' | 'right'
|
|
||||||
variant?: 'sidebar' | 'floating' | 'inset'
|
|
||||||
collapsible?: 'offcanvas' | 'icon' | 'none'
|
|
||||||
}) {
|
|
||||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
|
||||||
|
|
||||||
if (collapsible === 'none') {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar"
|
|
||||||
className={cn(
|
|
||||||
'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMobile) {
|
|
||||||
return (
|
|
||||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
|
||||||
<SheetContent
|
|
||||||
keepMounted
|
|
||||||
dir={dir}
|
|
||||||
data-sidebar="sidebar"
|
|
||||||
data-slot="sidebar"
|
|
||||||
data-mobile="true"
|
|
||||||
className="w-(--sidebar-width)! max-w-none! bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
side={side}
|
|
||||||
>
|
|
||||||
<SheetHeader className="sr-only">
|
|
||||||
<SheetTitle>ワークスペース</SheetTitle>
|
|
||||||
<SheetDescription>調査チャットとデッキ管理</SheetDescription>
|
|
||||||
</SheetHeader>
|
|
||||||
<div className="flex h-full w-full flex-row">{children}</div>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="group peer hidden text-sidebar-foreground md:block"
|
|
||||||
data-state={state}
|
|
||||||
data-collapsible={state === 'collapsed' ? collapsible : ''}
|
|
||||||
data-variant={variant}
|
|
||||||
data-side={side}
|
|
||||||
data-slot="sidebar"
|
|
||||||
>
|
|
||||||
{/* This is what handles the sidebar gap on desktop */}
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-gap"
|
|
||||||
className={cn(
|
|
||||||
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
|
|
||||||
'group-data-[collapsible=offcanvas]:w-0',
|
|
||||||
'group-data-[side=right]:rotate-180',
|
|
||||||
variant === 'floating' || variant === 'inset'
|
|
||||||
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
|
|
||||||
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-container"
|
|
||||||
data-side={side}
|
|
||||||
className={cn(
|
|
||||||
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
|
|
||||||
// Adjust the padding for floating and inset variants.
|
|
||||||
variant === 'floating' || variant === 'inset'
|
|
||||||
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
|
|
||||||
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
data-sidebar="sidebar"
|
|
||||||
data-slot="sidebar-inner"
|
|
||||||
className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarTrigger({
|
|
||||||
className,
|
|
||||||
onClick,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Button>) {
|
|
||||||
const { toggleSidebar } = useSidebar()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
data-sidebar="trigger"
|
|
||||||
data-slot="sidebar-trigger"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className={cn(className)}
|
|
||||||
onClick={(event) => {
|
|
||||||
onClick?.(event)
|
|
||||||
toggleSidebar()
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<PanelLeftIcon />
|
|
||||||
<span className="sr-only">Toggle Sidebar</span>
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
|
|
||||||
const { toggleSidebar } = useSidebar()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
data-sidebar="rail"
|
|
||||||
data-slot="sidebar-rail"
|
|
||||||
aria-label="Toggle Sidebar"
|
|
||||||
tabIndex={-1}
|
|
||||||
onClick={toggleSidebar}
|
|
||||||
title="Toggle Sidebar"
|
|
||||||
className={cn(
|
|
||||||
'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
|
|
||||||
'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
|
|
||||||
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
|
|
||||||
'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
|
|
||||||
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
|
|
||||||
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
|
|
||||||
return (
|
|
||||||
<main
|
|
||||||
data-slot="sidebar-inset"
|
|
||||||
className={cn(
|
|
||||||
'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarInput({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Input>) {
|
|
||||||
return (
|
|
||||||
<Input
|
|
||||||
data-slot="sidebar-input"
|
|
||||||
data-sidebar="input"
|
|
||||||
className={cn('h-8 w-full bg-background shadow-none', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-header"
|
|
||||||
data-sidebar="header"
|
|
||||||
className={cn('flex flex-col gap-2 p-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-footer"
|
|
||||||
data-sidebar="footer"
|
|
||||||
className={cn('flex flex-col gap-2 p-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarSeparator({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Separator>) {
|
|
||||||
return (
|
|
||||||
<Separator
|
|
||||||
data-slot="sidebar-separator"
|
|
||||||
data-sidebar="separator"
|
|
||||||
className={cn('mx-2 w-auto bg-sidebar-border', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-content"
|
|
||||||
data-sidebar="content"
|
|
||||||
className={cn(
|
|
||||||
'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-group"
|
|
||||||
data-sidebar="group"
|
|
||||||
className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroupLabel({
|
|
||||||
className,
|
|
||||||
render,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'div',
|
|
||||||
props: mergeProps<'div'>(
|
|
||||||
{
|
|
||||||
className: cn(
|
|
||||||
'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
|
|
||||||
className,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'sidebar-group-label',
|
|
||||||
sidebar: 'group-label',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroupAction({
|
|
||||||
className,
|
|
||||||
render,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'button',
|
|
||||||
props: mergeProps<'button'>(
|
|
||||||
{
|
|
||||||
className: cn(
|
|
||||||
'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
|
|
||||||
className,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'sidebar-group-action',
|
|
||||||
sidebar: 'group-action',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroupContent({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-group-content"
|
|
||||||
data-sidebar="group-content"
|
|
||||||
className={cn('w-full text-sm', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
|
|
||||||
return (
|
|
||||||
<ul
|
|
||||||
data-slot="sidebar-menu"
|
|
||||||
data-sidebar="menu"
|
|
||||||
className={cn('flex w-full min-w-0 flex-col gap-0', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
data-slot="sidebar-menu-item"
|
|
||||||
data-sidebar="menu-item"
|
|
||||||
className={cn('group/menu-item relative', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const sidebarMenuButtonVariants = cva(
|
|
||||||
'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
|
|
||||||
outline:
|
|
||||||
'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default: 'h-8 text-sm',
|
|
||||||
sm: 'h-7 text-xs',
|
|
||||||
lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
size: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
function SidebarMenuButton({
|
|
||||||
render,
|
|
||||||
isActive = false,
|
|
||||||
variant = 'default',
|
|
||||||
size = 'default',
|
|
||||||
tooltip,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'button'> &
|
|
||||||
React.ComponentProps<'button'> & {
|
|
||||||
isActive?: boolean
|
|
||||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
|
||||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
|
||||||
const { isMobile, state } = useSidebar()
|
|
||||||
const comp = useRender({
|
|
||||||
defaultTagName: 'button',
|
|
||||||
props: mergeProps<'button'>(
|
|
||||||
{
|
|
||||||
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render: !tooltip ? render : <TooltipTrigger render={render} />,
|
|
||||||
state: {
|
|
||||||
slot: 'sidebar-menu-button',
|
|
||||||
sidebar: 'menu-button',
|
|
||||||
size,
|
|
||||||
active: isActive,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!tooltip) {
|
|
||||||
return comp
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof tooltip === 'string') {
|
|
||||||
tooltip = {
|
|
||||||
children: tooltip,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip>
|
|
||||||
{comp}
|
|
||||||
<TooltipContent
|
|
||||||
side="right"
|
|
||||||
align="center"
|
|
||||||
hidden={state !== 'collapsed' || isMobile}
|
|
||||||
{...tooltip}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuAction({
|
|
||||||
className,
|
|
||||||
render,
|
|
||||||
showOnHover = false,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'button'> &
|
|
||||||
React.ComponentProps<'button'> & {
|
|
||||||
showOnHover?: boolean
|
|
||||||
}) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'button',
|
|
||||||
props: mergeProps<'button'>(
|
|
||||||
{
|
|
||||||
className: cn(
|
|
||||||
'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
|
|
||||||
showOnHover &&
|
|
||||||
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
|
|
||||||
className,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'sidebar-menu-action',
|
|
||||||
sidebar: 'menu-action',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuBadge({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-menu-badge"
|
|
||||||
data-sidebar="menu-badge"
|
|
||||||
className={cn(
|
|
||||||
'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSkeleton({
|
|
||||||
className,
|
|
||||||
showIcon = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'> & {
|
|
||||||
showIcon?: boolean
|
|
||||||
}) {
|
|
||||||
// Random width between 50 to 90%.
|
|
||||||
const [width] = React.useState(() => {
|
|
||||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-menu-skeleton"
|
|
||||||
data-sidebar="menu-skeleton"
|
|
||||||
className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{showIcon && (
|
|
||||||
<Skeleton
|
|
||||||
className="size-4 rounded-md"
|
|
||||||
data-sidebar="menu-skeleton-icon"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Skeleton
|
|
||||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
|
||||||
data-sidebar="menu-skeleton-text"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
'--skeleton-width': width,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
|
|
||||||
return (
|
|
||||||
<ul
|
|
||||||
data-slot="sidebar-menu-sub"
|
|
||||||
data-sidebar="menu-sub"
|
|
||||||
className={cn(
|
|
||||||
'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSubItem({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'li'>) {
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
data-slot="sidebar-menu-sub-item"
|
|
||||||
data-sidebar="menu-sub-item"
|
|
||||||
className={cn('group/menu-sub-item relative', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSubButton({
|
|
||||||
render,
|
|
||||||
size = 'md',
|
|
||||||
isActive = false,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'a'> &
|
|
||||||
React.ComponentProps<'a'> & {
|
|
||||||
size?: 'sm' | 'md'
|
|
||||||
isActive?: boolean
|
|
||||||
}) {
|
|
||||||
return useRender({
|
|
||||||
defaultTagName: 'a',
|
|
||||||
props: mergeProps<'a'>(
|
|
||||||
{
|
|
||||||
className: cn(
|
|
||||||
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
|
|
||||||
className,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
props,
|
|
||||||
),
|
|
||||||
render,
|
|
||||||
state: {
|
|
||||||
slot: 'sidebar-menu-sub-button',
|
|
||||||
sidebar: 'menu-sub-button',
|
|
||||||
size,
|
|
||||||
active: isActive,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarFooter,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupAction,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarInput,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuAction,
|
|
||||||
SidebarMenuBadge,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSkeleton,
|
|
||||||
SidebarMenuSub,
|
|
||||||
SidebarMenuSubButton,
|
|
||||||
SidebarMenuSubItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarRail,
|
|
||||||
SidebarSeparator,
|
|
||||||
SidebarTrigger,
|
|
||||||
useSidebar,
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { cn } from 'cn'
|
|
||||||
|
|
||||||
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="skeleton"
|
|
||||||
className={cn('animate-pulse rounded-md bg-muted', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Skeleton }
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import { cn } from 'cn'
|
|
||||||
import type * as React from 'react'
|
|
||||||
|
|
||||||
function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
|
|
||||||
return (
|
|
||||||
<textarea
|
|
||||||
data-slot="textarea"
|
|
||||||
className={cn(
|
|
||||||
'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Textarea }
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
|
|
||||||
import { cn } from 'cn'
|
|
||||||
|
|
||||||
function TooltipProvider({
|
|
||||||
delay = 0,
|
|
||||||
...props
|
|
||||||
}: TooltipPrimitive.Provider.Props) {
|
|
||||||
return (
|
|
||||||
<TooltipPrimitive.Provider
|
|
||||||
data-slot="tooltip-provider"
|
|
||||||
delay={delay}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
|
||||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
|
||||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipContent({
|
|
||||||
className,
|
|
||||||
side = 'top',
|
|
||||||
sideOffset = 4,
|
|
||||||
align = 'center',
|
|
||||||
alignOffset = 0,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: TooltipPrimitive.Popup.Props &
|
|
||||||
Pick<
|
|
||||||
TooltipPrimitive.Positioner.Props,
|
|
||||||
'align' | 'alignOffset' | 'side' | 'sideOffset'
|
|
||||||
>) {
|
|
||||||
return (
|
|
||||||
<TooltipPrimitive.Portal>
|
|
||||||
<TooltipPrimitive.Positioner
|
|
||||||
align={align}
|
|
||||||
alignOffset={alignOffset}
|
|
||||||
side={side}
|
|
||||||
sideOffset={sideOffset}
|
|
||||||
className="isolate z-50"
|
|
||||||
>
|
|
||||||
<TooltipPrimitive.Popup
|
|
||||||
data-slot="tooltip-content"
|
|
||||||
className={cn(
|
|
||||||
'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
|
||||||
</TooltipPrimitive.Popup>
|
|
||||||
</TooltipPrimitive.Positioner>
|
|
||||||
</TooltipPrimitive.Portal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
import { Link, useLocation } from '@tanstack/react-router'
|
|
||||||
import {
|
|
||||||
Inbox,
|
|
||||||
Layers3,
|
|
||||||
MessagesSquare,
|
|
||||||
NotebookPen,
|
|
||||||
Search,
|
|
||||||
} from 'lucide-react'
|
|
||||||
import { type ReactNode, useState } from 'react'
|
|
||||||
import { Avatar, AvatarFallback } from '#/components/ui/avatar'
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarFooter,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarSeparator,
|
|
||||||
} from '#/components/ui/sidebar'
|
|
||||||
import { ConnectionManagerDialog } from '#/features/connections/connection-manager-dialog'
|
|
||||||
|
|
||||||
type WorkspaceNavigationProps = {
|
|
||||||
children?: ReactNode
|
|
||||||
footer?: ReactNode
|
|
||||||
hasTemporaryDecks?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export function WorkspaceNavigation({
|
|
||||||
children,
|
|
||||||
footer,
|
|
||||||
hasTemporaryDecks,
|
|
||||||
}: WorkspaceNavigationProps) {
|
|
||||||
const [managingAccounts, setManagingAccounts] = useState(false)
|
|
||||||
const pathname = useLocation({ select: (location) => location.pathname })
|
|
||||||
const navigation = [
|
|
||||||
{
|
|
||||||
title: '連絡',
|
|
||||||
to: '/support',
|
|
||||||
icon: MessagesSquare,
|
|
||||||
active: pathname === '/support',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '記録',
|
|
||||||
to: '/journal',
|
|
||||||
icon: NotebookPen,
|
|
||||||
active: pathname === '/journal',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'リーダー',
|
|
||||||
to: '/inbox',
|
|
||||||
icon: Inbox,
|
|
||||||
active: pathname === '/inbox',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Twitter Lite',
|
|
||||||
to: '/deck',
|
|
||||||
icon: Search,
|
|
||||||
active: pathname === '/' || pathname === '/deck',
|
|
||||||
},
|
|
||||||
] as const
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sidebar
|
|
||||||
collapsible="none"
|
|
||||||
className="workspace-navigation w-16! shrink-0 border-r"
|
|
||||||
>
|
|
||||||
<SidebarHeader className="items-center py-4">
|
|
||||||
<div
|
|
||||||
className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
|
|
||||||
role="img"
|
|
||||||
aria-label="ワークスペース"
|
|
||||||
>
|
|
||||||
<Layers3 className="size-5" aria-hidden="true" />
|
|
||||||
</div>
|
|
||||||
</SidebarHeader>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup className="px-3">
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{navigation.map((item) => (
|
|
||||||
<SidebarMenuItem key={item.to}>
|
|
||||||
<SidebarMenuButton
|
|
||||||
aria-label={item.title}
|
|
||||||
aria-current={item.active ? 'page' : undefined}
|
|
||||||
tooltip={{ children: item.title, hidden: false }}
|
|
||||||
isActive={item.active}
|
|
||||||
render={<Link to={item.to} />}
|
|
||||||
className="size-10 justify-center p-0"
|
|
||||||
>
|
|
||||||
<item.icon />
|
|
||||||
<span className="sr-only">{item.title}</span>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
{children && (
|
|
||||||
<>
|
|
||||||
<SidebarSeparator className="mx-3 w-auto" />
|
|
||||||
<SidebarGroup className="px-3">
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>{children}</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</SidebarContent>
|
|
||||||
<SidebarFooter className="items-center px-3 pb-4">
|
|
||||||
{footer && <SidebarMenu>{footer}</SidebarMenu>}
|
|
||||||
<SidebarMenu className="mt-2">
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton
|
|
||||||
aria-label="接続アカウントを管理"
|
|
||||||
tooltip={{ children: '接続アカウントを管理', hidden: false }}
|
|
||||||
className="size-10 justify-center p-0"
|
|
||||||
onClick={() => setManagingAccounts(true)}
|
|
||||||
>
|
|
||||||
<Avatar className="size-8">
|
|
||||||
<AvatarFallback>Y</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarFooter>
|
|
||||||
{managingAccounts && (
|
|
||||||
<ConnectionManagerDialog
|
|
||||||
onClose={() => setManagingAccounts(false)}
|
|
||||||
hasTemporaryDecks={hasTemporaryDecks}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Sidebar>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
type AccessConfig = { origin: string } & (
|
|
||||||
| { mode: 'tailscale'; allowedLogin: string }
|
|
||||||
| { mode: 'none' }
|
|
||||||
)
|
|
||||||
|
|
||||||
export function readAccessConfig(): AccessConfig | null {
|
|
||||||
const origin = process.env.TWITTER_LITE_ORIGIN
|
|
||||||
const mode = process.env.TWITTER_LITE_AUTH_MODE ?? 'tailscale'
|
|
||||||
const allowedLogin = process.env.TWITTER_LITE_ALLOWED_LOGIN
|
|
||||||
if (!origin || (mode !== 'tailscale' && mode !== 'none')) return null
|
|
||||||
try {
|
|
||||||
const url = new URL(origin)
|
|
||||||
const secure = url.protocol === 'https:'
|
|
||||||
const local = url.protocol === 'http:' && url.hostname === '127.0.0.1'
|
|
||||||
if ((!secure && !local) || url.origin !== origin) return null
|
|
||||||
if (mode === 'none') return { origin, mode }
|
|
||||||
if (!allowedLogin?.trim()) return null
|
|
||||||
return { origin, mode, allowedLogin }
|
|
||||||
} catch {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Use loopback behind Serve for identity, or a private network for mode none. */
|
|
||||||
export function checkAccess(
|
|
||||||
request: Request,
|
|
||||||
config: AccessConfig | null,
|
|
||||||
): Response | null {
|
|
||||||
if (!config) {
|
|
||||||
return new Response('Access configuration is required.', { status: 503 })
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
config.mode === 'tailscale' &&
|
|
||||||
request.headers.get('Tailscale-User-Login') !== config.allowedLogin
|
|
||||||
) {
|
|
||||||
return new Response('Forbidden', { status: 403 })
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
!['GET', 'HEAD', 'OPTIONS'].includes(request.method) &&
|
|
||||||
request.headers.get('Origin') !== config.origin
|
|
||||||
) {
|
|
||||||
return new Response('Forbidden', { status: 403 })
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
@@ -1,171 +0,0 @@
|
|||||||
// @vitest-environment node
|
|
||||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
||||||
import { checkAccess, readAccessConfig } from './policy.server'
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
mode: 'tailscale' as const,
|
|
||||||
origin: 'https://deck.invalid',
|
|
||||||
allowedLogin: '[email protected]',
|
|
||||||
}
|
|
||||||
|
|
||||||
beforeEach(() => vi.stubEnv('TWITTER_LITE_AUTH_MODE', undefined))
|
|
||||||
afterEach(() => vi.unstubAllEnvs())
|
|
||||||
|
|
||||||
describe('access boundary', () => {
|
|
||||||
it.each([
|
|
||||||
undefined,
|
|
||||||
'tailscale',
|
|
||||||
])('requires an owner in identity mode: %s', (mode) => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', mode)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
|
|
||||||
expect(readAccessConfig()).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
|
||||||
'',
|
|
||||||
'off',
|
|
||||||
'NONE',
|
|
||||||
])('fails closed for an unknown auth mode: %s', (mode) => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', mode)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
|
|
||||||
expect(
|
|
||||||
checkAccess(new Request(config.origin), readAccessConfig())?.status,
|
|
||||||
).toBe(503)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('allows private-proxy navigation without an identity only when explicitly configured', () => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', 'none')
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
|
|
||||||
const access = readAccessConfig()
|
|
||||||
expect(access).toEqual({ origin: config.origin, mode: 'none' })
|
|
||||||
expect(checkAccess(new Request(config.origin), access)).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('still requires a configured origin without identity authentication', () => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', 'none')
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', '')
|
|
||||||
expect(readAccessConfig()).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
|
||||||
'POST',
|
|
||||||
'PUT',
|
|
||||||
'PATCH',
|
|
||||||
'DELETE',
|
|
||||||
])('requires exact Origin without identity authentication for %s', (method) => {
|
|
||||||
const access = { origin: config.origin, mode: 'none' as const }
|
|
||||||
expect(
|
|
||||||
checkAccess(new Request(config.origin, { method }), access)?.status,
|
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
checkAccess(
|
|
||||||
new Request(config.origin, {
|
|
||||||
method,
|
|
||||||
headers: {
|
|
||||||
Origin: 'https://other.invalid',
|
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
access,
|
|
||||||
)?.status,
|
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
checkAccess(
|
|
||||||
new Request(config.origin, {
|
|
||||||
method,
|
|
||||||
headers: { Origin: config.origin },
|
|
||||||
}),
|
|
||||||
access,
|
|
||||||
),
|
|
||||||
).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('fails closed when the deployment is not configured', () => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', '')
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
|
|
||||||
expect(readAccessConfig()).toBeNull()
|
|
||||||
expect(checkAccess(new Request(config.origin), null)?.status).toBe(503)
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
|
||||||
'',
|
|
||||||
'https://deck.invalid/path',
|
|
||||||
'http://deck.invalid',
|
|
||||||
'not a URL',
|
|
||||||
])('rejects an invalid configured origin: %s', (origin) => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', origin)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
|
|
||||||
expect(readAccessConfig()).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
|
||||||
'https://deck.invalid',
|
|
||||||
'http://127.0.0.1:4173',
|
|
||||||
])('accepts an explicit deployment origin: %s', (origin) => {
|
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', origin)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
|
|
||||||
expect(readAccessConfig()).toEqual({ ...config, origin })
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
|
||||||
undefined,
|
|
||||||
'[email protected]',
|
|
||||||
'[email protected], [email protected]',
|
|
||||||
])('rejects absent, foreign, or ambiguous identities: %s', (login) => {
|
|
||||||
const headers = new Headers()
|
|
||||||
if (login) headers.set('Tailscale-User-Login', login)
|
|
||||||
expect(
|
|
||||||
checkAccess(new Request(config.origin, { headers }), config)?.status,
|
|
||||||
).toBe(403)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('permits owner navigation back from an OAuth provider without Origin', () => {
|
|
||||||
const request = new Request(
|
|
||||||
`${config.origin}/oauth/mastodon/callback?code=code`,
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
'Tailscale-User-Login': config.allowedLogin,
|
|
||||||
'Sec-Fetch-Site': 'cross-site',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
expect(checkAccess(request, config)).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
|
||||||
'POST',
|
|
||||||
'PUT',
|
|
||||||
'PATCH',
|
|
||||||
'DELETE',
|
|
||||||
])('requires exact Origin for %s even with same-origin Fetch Metadata', (method) => {
|
|
||||||
const headers = {
|
|
||||||
'Tailscale-User-Login': config.allowedLogin,
|
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
|
||||||
}
|
|
||||||
expect(
|
|
||||||
checkAccess(new Request(config.origin, { method, headers }), config)
|
|
||||||
?.status,
|
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
checkAccess(
|
|
||||||
new Request(config.origin, {
|
|
||||||
method,
|
|
||||||
headers: { ...headers, Origin: 'https://other.invalid' },
|
|
||||||
}),
|
|
||||||
config,
|
|
||||||
)?.status,
|
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
checkAccess(
|
|
||||||
new Request(config.origin, {
|
|
||||||
method,
|
|
||||||
headers: { ...headers, Origin: config.origin },
|
|
||||||
}),
|
|
||||||
config,
|
|
||||||
),
|
|
||||||
).toBeNull()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
import { useQuery } from '@tanstack/react-query'
|
|
||||||
import { useServerFn } from '@tanstack/react-start'
|
|
||||||
import { Dialog } from '#/components/dialog'
|
|
||||||
import { Button } from '#/components/ui/button'
|
|
||||||
import { ConnectionManager } from './connection-manager'
|
|
||||||
import { loadConnections } from './server-functions'
|
|
||||||
|
|
||||||
export function ConnectionManagerDialog({
|
|
||||||
onClose,
|
|
||||||
hasTemporaryDecks,
|
|
||||||
}: {
|
|
||||||
onClose: () => void
|
|
||||||
hasTemporaryDecks?: boolean
|
|
||||||
}) {
|
|
||||||
const fetchConnections = useServerFn(loadConnections)
|
|
||||||
const connections = useQuery({
|
|
||||||
queryKey: ['connections'],
|
|
||||||
queryFn: () => fetchConnections(),
|
|
||||||
retry: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog title="接続アカウント" onClose={onClose} className="sm:max-w-2xl">
|
|
||||||
{connections.isPending ? (
|
|
||||||
<p role="status">接続アカウントを読み込んでいます…</p>
|
|
||||||
) : connections.isError ? (
|
|
||||||
<div className="grid gap-3">
|
|
||||||
<p role="alert">接続アカウントを取得できませんでした。</p>
|
|
||||||
<Button variant="outline" onClick={() => void connections.refetch()}>
|
|
||||||
再試行
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{connections.data.relayError && (
|
|
||||||
<p role="alert">{connections.data.relayError}</p>
|
|
||||||
)}
|
|
||||||
<ConnectionManager
|
|
||||||
connections={connections.data.connections}
|
|
||||||
onChanged={() => connections.refetch()}
|
|
||||||
hasTemporaryDecks={hasTemporaryDecks}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
.connection-manager {
|
|
||||||
display: grid;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.connection-manager-description,
|
|
||||||
.connection-manager-note {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--muted-foreground);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
.connection-manager-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: grid;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
.connection-manager-list > li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding-block: 0.75rem;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
.connection-manager-account {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.25rem;
|
|
||||||
min-width: 0;
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
}
|
|
||||||
.connection-manager-account > span:not([data-slot="badge"]) {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--muted-foreground);
|
|
||||||
}
|
|
||||||
.connection-manager-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.connection-manager-add {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
.connection-manager-add h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.connection-manager-list > li {
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
||||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
|
||||||
import { beforeEach, expect, it, vi } from 'vitest'
|
|
||||||
import { ConnectionManager } from './connection-manager'
|
|
||||||
import type { Connection } from './model'
|
|
||||||
|
|
||||||
const actions = vi.hoisted(() => ({
|
|
||||||
load: vi.fn(),
|
|
||||||
authorize: vi.fn(),
|
|
||||||
disconnect: vi.fn(),
|
|
||||||
}))
|
|
||||||
vi.mock('@tanstack/react-start', () => ({ useServerFn: (fn: unknown) => fn }))
|
|
||||||
vi.mock('../mastodon/server-functions', () => ({
|
|
||||||
loadMastodonInstances: actions.load,
|
|
||||||
startMastodonOAuth: actions.authorize,
|
|
||||||
disconnectMastodonAccount: actions.disconnect,
|
|
||||||
}))
|
|
||||||
|
|
||||||
const account: Connection = {
|
|
||||||
id: 'mastodon-first',
|
|
||||||
platform: 'mastodon',
|
|
||||||
origin: 'https://mastodon.invalid',
|
|
||||||
accountId: '1',
|
|
||||||
displayName: '@first',
|
|
||||||
status: 'connected',
|
|
||||||
}
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.resetAllMocks()
|
|
||||||
actions.load.mockResolvedValue({
|
|
||||||
origins: ['https://mastodon.invalid', 'https://second.invalid'],
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
function show(
|
|
||||||
connections: Connection[] = [account],
|
|
||||||
onChanged = vi.fn(),
|
|
||||||
hasTemporaryDecks = false,
|
|
||||||
) {
|
|
||||||
return render(
|
|
||||||
<QueryClientProvider
|
|
||||||
client={
|
|
||||||
new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ConnectionManager
|
|
||||||
connections={connections}
|
|
||||||
onChanged={onChanged}
|
|
||||||
hasTemporaryDecks={hasTemporaryDecks}
|
|
||||||
/>
|
|
||||||
</QueryClientProvider>,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
it('shows per-account status and warns about temporary decks without blocking actions', async () => {
|
|
||||||
show(
|
|
||||||
[
|
|
||||||
account,
|
|
||||||
{ ...account, id: 'expired', displayName: '@expired', status: 'expired' },
|
|
||||||
],
|
|
||||||
vi.fn(),
|
|
||||||
true,
|
|
||||||
)
|
|
||||||
expect(screen.getByText('接続済み')).toBeVisible()
|
|
||||||
expect(screen.getByText('再接続が必要')).toBeVisible()
|
|
||||||
expect(screen.getByText(/一時デッキは消えます/)).toBeVisible()
|
|
||||||
expect(
|
|
||||||
await screen.findByRole('button', { name: 'Mastodonで認可する' }),
|
|
||||||
).toBeEnabled()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('uses the selected instance and reports a safe error when authorization fails', async () => {
|
|
||||||
actions.authorize.mockRejectedValue(
|
|
||||||
new Error('private server credential detail'),
|
|
||||||
)
|
|
||||||
show()
|
|
||||||
fireEvent.change(await screen.findByLabelText('Mastodonサーバー'), {
|
|
||||||
target: { value: 'https://second.invalid' },
|
|
||||||
})
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Mastodonで認可する' }))
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(actions.authorize).toHaveBeenCalledWith({
|
|
||||||
data: { origin: 'https://second.invalid' },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
expect(await screen.findByRole('alert')).toHaveTextContent(
|
|
||||||
'認可を開始できませんでした',
|
|
||||||
)
|
|
||||||
expect(screen.queryByText(/private server/)).toBeNull()
|
|
||||||
expect(
|
|
||||||
screen.getByRole('button', { name: 'Mastodonで認可する' }),
|
|
||||||
).toBeEnabled()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('binds reconnect to the selected account rather than whichever instance is selected for addition', async () => {
|
|
||||||
actions.authorize.mockRejectedValue(new Error('offline'))
|
|
||||||
show()
|
|
||||||
await screen.findByLabelText('Mastodonサーバー')
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: '@firstを再接続' }))
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(actions.authorize).toHaveBeenCalledWith({
|
|
||||||
data: { origin: account.origin, connectionId: account.id },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
expect(await screen.findByRole('alert')).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('refreshes the account list after successful disconnect', async () => {
|
|
||||||
const onChanged = vi.fn().mockResolvedValue(undefined)
|
|
||||||
actions.disconnect.mockResolvedValue({ disconnected: true })
|
|
||||||
show([account], onChanged)
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: '@firstの接続を解除' }))
|
|
||||||
await waitFor(() => expect(onChanged).toHaveBeenCalledOnce())
|
|
||||||
expect(actions.disconnect).toHaveBeenCalledWith({
|
|
||||||
data: { connectionId: account.id },
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
it('keeps account controls available after a failed disconnect', async () => {
|
|
||||||
actions.disconnect.mockRejectedValue(new Error('private token'))
|
|
||||||
const onChanged = vi.fn()
|
|
||||||
show([account], onChanged)
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: '@firstの接続を解除' }))
|
|
||||||
expect(await screen.findByRole('alert')).toHaveTextContent(
|
|
||||||
'接続を解除できませんでした',
|
|
||||||
)
|
|
||||||
expect(onChanged).not.toHaveBeenCalled()
|
|
||||||
expect(
|
|
||||||
screen.getByRole('button', { name: '@firstの接続を解除' }),
|
|
||||||
).toBeEnabled()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('does not offer Mastodon reconnect or revoke for Twitter relay accounts', async () => {
|
|
||||||
show([{ ...account, platform: 'twitter', id: 'twitter-first' }])
|
|
||||||
await screen.findByLabelText('Mastodonサーバー')
|
|
||||||
expect(screen.queryByRole('button', { name: '@firstを再接続' })).toBeNull()
|
|
||||||
expect(
|
|
||||||
screen.queryByRole('button', { name: '@firstの接続を解除' }),
|
|
||||||
).toBeNull()
|
|
||||||
})
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
import { useQuery } from '@tanstack/react-query'
|
|
||||||
import { useServerFn } from '@tanstack/react-start'
|
|
||||||
import { useId, useState } from 'react'
|
|
||||||
import { Badge } from '#/components/ui/badge'
|
|
||||||
import { Button } from '#/components/ui/button'
|
|
||||||
import { Label } from '#/components/ui/label'
|
|
||||||
import { NativeSelect, NativeSelectOption } from '#/components/ui/native-select'
|
|
||||||
import {
|
|
||||||
disconnectMastodonAccount,
|
|
||||||
loadMastodonInstances,
|
|
||||||
startMastodonOAuth,
|
|
||||||
} from '../mastodon/server-functions'
|
|
||||||
import type { Connection } from './model'
|
|
||||||
import './connection-manager.css'
|
|
||||||
|
|
||||||
const statusNames = {
|
|
||||||
connected: '接続済み',
|
|
||||||
disconnected: '未接続',
|
|
||||||
expired: '再接続が必要',
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ConnectionManager({
|
|
||||||
connections,
|
|
||||||
onChanged,
|
|
||||||
hasTemporaryDecks = false,
|
|
||||||
}: {
|
|
||||||
connections: Connection[]
|
|
||||||
onChanged: () => unknown
|
|
||||||
hasTemporaryDecks?: boolean
|
|
||||||
}) {
|
|
||||||
const fetchInstances = useServerFn(loadMastodonInstances)
|
|
||||||
const authorize = useServerFn(startMastodonOAuth)
|
|
||||||
const disconnect = useServerFn(disconnectMastodonAccount)
|
|
||||||
const instances = useQuery({
|
|
||||||
queryKey: ['mastodon-instances'],
|
|
||||||
queryFn: () => fetchInstances(),
|
|
||||||
retry: false,
|
|
||||||
})
|
|
||||||
const [selected, setSelected] = useState('')
|
|
||||||
const [busy, setBusy] = useState(false)
|
|
||||||
const [error, setError] = useState<string>()
|
|
||||||
const selectId = useId()
|
|
||||||
const origin = selected || instances.data?.origins[0] || ''
|
|
||||||
|
|
||||||
async function connect(origin: string, connectionId?: string) {
|
|
||||||
setBusy(true)
|
|
||||||
setError(undefined)
|
|
||||||
try {
|
|
||||||
const result = await authorize({
|
|
||||||
data: { origin, ...(connectionId ? { connectionId } : {}) },
|
|
||||||
})
|
|
||||||
window.location.assign(result.authorizationUrl)
|
|
||||||
} catch {
|
|
||||||
setError(
|
|
||||||
'Mastodonの認可を開始できませんでした。接続先を確認して再試行してください。',
|
|
||||||
)
|
|
||||||
} finally {
|
|
||||||
setBusy(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function remove(connectionId: string) {
|
|
||||||
setBusy(true)
|
|
||||||
setError(undefined)
|
|
||||||
try {
|
|
||||||
await disconnect({ data: { connectionId } })
|
|
||||||
try {
|
|
||||||
await onChanged()
|
|
||||||
} catch {
|
|
||||||
setError(
|
|
||||||
'接続は解除しましたが、一覧を更新できませんでした。画面を再読み込みしてください。',
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
setError('接続を解除できませんでした。時間をおいて再試行してください。')
|
|
||||||
} finally {
|
|
||||||
setBusy(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="connection-manager" aria-label="接続アカウント管理">
|
|
||||||
<p className="connection-manager-description">
|
|
||||||
追加したアカウントは、どの端末のカラムからも選べます。
|
|
||||||
</p>
|
|
||||||
{error && <p role="alert">{error}</p>}
|
|
||||||
{connections.length === 0 ? (
|
|
||||||
<p>接続アカウントはまだありません。</p>
|
|
||||||
) : (
|
|
||||||
<ul className="connection-manager-list">
|
|
||||||
{connections.map((connection) => (
|
|
||||||
<li key={connection.id}>
|
|
||||||
<div className="connection-manager-account">
|
|
||||||
<strong>{connection.displayName}</strong>
|
|
||||||
<span>
|
|
||||||
{connection.platform === 'twitter' ? 'Twitter' : 'Mastodon'} ·{' '}
|
|
||||||
{new URL(connection.origin).hostname}
|
|
||||||
</span>
|
|
||||||
<Badge
|
|
||||||
variant={
|
|
||||||
connection.status === 'connected' ? 'secondary' : 'outline'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{statusNames[connection.status]}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
{connection.platform === 'mastodon' && (
|
|
||||||
<div className="connection-manager-actions">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
type="button"
|
|
||||||
disabled={busy}
|
|
||||||
aria-label={`${connection.displayName}を再接続`}
|
|
||||||
onClick={() =>
|
|
||||||
void connect(connection.origin, connection.id)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
再接続
|
|
||||||
</Button>
|
|
||||||
{connection.status !== 'disconnected' && (
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
type="button"
|
|
||||||
disabled={busy}
|
|
||||||
aria-label={`${connection.displayName}の接続を解除`}
|
|
||||||
onClick={() => void remove(connection.id)}
|
|
||||||
>
|
|
||||||
接続解除
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
<form
|
|
||||||
className="connection-manager-add"
|
|
||||||
onSubmit={(event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
if (origin) void connect(origin)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h3>Mastodonアカウントを追加</h3>
|
|
||||||
{instances.isPending ? (
|
|
||||||
<p role="status">接続先を確認しています…</p>
|
|
||||||
) : instances.isError ? (
|
|
||||||
<p role="alert">
|
|
||||||
接続先を取得できませんでした。
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
type="button"
|
|
||||||
onClick={() => void instances.refetch()}
|
|
||||||
>
|
|
||||||
再試行
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
) : instances.data.origins.length === 0 ? (
|
|
||||||
<p>利用するMastodonサーバーがまだ設定されていません。</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Label htmlFor={selectId}>Mastodonサーバー</Label>
|
|
||||||
<NativeSelect
|
|
||||||
className="w-full"
|
|
||||||
id={selectId}
|
|
||||||
value={origin}
|
|
||||||
onChange={(event) => setSelected(event.target.value)}
|
|
||||||
disabled={busy}
|
|
||||||
>
|
|
||||||
{instances.data.origins.map((value) => (
|
|
||||||
<NativeSelectOption key={value} value={value}>
|
|
||||||
{new URL(value).hostname}
|
|
||||||
</NativeSelectOption>
|
|
||||||
))}
|
|
||||||
</NativeSelect>
|
|
||||||
<Button type="submit" disabled={busy || !origin}>
|
|
||||||
Mastodonで認可する
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{hasTemporaryDecks && (
|
|
||||||
<p className="connection-manager-note">
|
|
||||||
認可画面へ移動すると、一時デッキは消えます。残したいデッキは先に保存してください。
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{busy && <p role="status">処理しています…</p>}
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
import {
|
|
||||||
createCipheriv,
|
|
||||||
createDecipheriv,
|
|
||||||
createHash,
|
|
||||||
randomBytes,
|
|
||||||
} from 'node:crypto'
|
|
||||||
import { readFileSync } from 'node:fs'
|
|
||||||
import { z } from 'zod'
|
|
||||||
|
|
||||||
const envelopeSchema = z
|
|
||||||
.object({
|
|
||||||
version: z.literal(1),
|
|
||||||
keyId: z.string(),
|
|
||||||
iv: z.string(),
|
|
||||||
tag: z.string(),
|
|
||||||
ciphertext: z.string(),
|
|
||||||
})
|
|
||||||
.strict()
|
|
||||||
|
|
||||||
function decodeBase64(value: string): Buffer {
|
|
||||||
const result = Buffer.from(value, 'base64')
|
|
||||||
if (result.toString('base64') !== value) throw new Error('Invalid encoding')
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadKey() {
|
|
||||||
const path = process.env.TWITTER_LITE_CREDENTIAL_KEY_FILE
|
|
||||||
if (!path) throw new Error('TWITTER_LITE_CREDENTIAL_KEY_FILE is required.')
|
|
||||||
let encoded: string
|
|
||||||
try {
|
|
||||||
encoded = readFileSync(path, 'utf8').trim()
|
|
||||||
} catch {
|
|
||||||
throw new Error('Could not read TWITTER_LITE_CREDENTIAL_KEY_FILE.')
|
|
||||||
}
|
|
||||||
let key: Buffer
|
|
||||||
try {
|
|
||||||
key = decodeBase64(encoded)
|
|
||||||
if (key.length !== 32) throw new Error('Invalid key length')
|
|
||||||
} catch {
|
|
||||||
throw new Error(
|
|
||||||
'TWITTER_LITE_CREDENTIAL_KEY_FILE must contain 32 random bytes encoded as base64.',
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
key,
|
|
||||||
keyId: createHash('sha256').update(key).digest('hex').slice(0, 32),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function associatedData(context: string, keyId: string) {
|
|
||||||
if (!context) throw new Error('A credential record and purpose are required.')
|
|
||||||
return Buffer.from(
|
|
||||||
JSON.stringify(['twitter-lite-credential', 1, keyId, context]),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Context must identify both record and purpose; persist the returned opaque JSON. */
|
|
||||||
export function encryptCredential(plaintext: string, context: string): string {
|
|
||||||
const { key, keyId } = loadKey()
|
|
||||||
const iv = randomBytes(12)
|
|
||||||
const cipher = createCipheriv('aes-256-gcm', key, iv)
|
|
||||||
cipher.setAAD(associatedData(context, keyId))
|
|
||||||
const ciphertext = Buffer.concat([
|
|
||||||
cipher.update(plaintext, 'utf8'),
|
|
||||||
cipher.final(),
|
|
||||||
])
|
|
||||||
return JSON.stringify({
|
|
||||||
version: 1,
|
|
||||||
keyId,
|
|
||||||
iv: iv.toString('base64'),
|
|
||||||
tag: cipher.getAuthTag().toString('base64'),
|
|
||||||
ciphertext: ciphertext.toString('base64'),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function decryptCredential(serialized: string, context: string): string {
|
|
||||||
const { key, keyId } = loadKey()
|
|
||||||
try {
|
|
||||||
const envelope = envelopeSchema.parse(JSON.parse(serialized))
|
|
||||||
if (envelope.keyId !== keyId) throw new Error('Different key')
|
|
||||||
const iv = decodeBase64(envelope.iv)
|
|
||||||
const tag = decodeBase64(envelope.tag)
|
|
||||||
if (iv.length !== 12 || tag.length !== 16)
|
|
||||||
throw new Error('Invalid envelope')
|
|
||||||
const decipher = createDecipheriv('aes-256-gcm', key, iv)
|
|
||||||
decipher.setAAD(associatedData(context, keyId))
|
|
||||||
decipher.setAuthTag(tag)
|
|
||||||
return Buffer.concat([
|
|
||||||
decipher.update(decodeBase64(envelope.ciphertext)),
|
|
||||||
decipher.final(),
|
|
||||||
]).toString('utf8')
|
|
||||||
} catch {
|
|
||||||
throw new Error(
|
|
||||||
'Credential could not be decrypted. Check the stored credential and encryption key.',
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user