blog: TLSNotary on Mobile (iOS + Android launch) - #64
Open
0xtsukino wants to merge 4 commits into
Open
Conversation
Contributor
Author
|
Depends on two upstream PRs before this can land:
Order doesn't strictly matter on the website side, but the GitHub links in the post 404 until both upstream PRs land in |
0xtsukino
force-pushed
the
blog/mobile-launch
branch
from
June 12, 2026 12:38
00091d8 to
c5bfb7b
Compare
Announces the TLSNotary mobile app for iOS / Android and walks developers through the four-layer host-adapter stack the app sits on (plugin-sdk → host-contracts → host-react-native → consumer app). Two new MDX components: - <MobileAppShowcase /> renders the four user-facing app screens (browse plugins / approve plugin / approve reveal / verified result) as styled HTML phone-frame mockups — no screenshot assets, no light-vs-dark variants to chase, colors mirror the real app. - <MobileFlowDiagram /> is an interactive layered architecture explorer in the same style as <ExtensionFlowDiagram />. Tap a layer to see what lives in it. Takes a `platform` prop so the same component can drive future posts about the extension or CLI variants. The post itself is ~1300 words: walkthrough, architecture, three build-your-own paths (plugin / extension / mobile) routing through the new tlsnotary Claude Code skill.
Mobile app rendering: - Bigger phone frames (280px vs 240px) so the content is readable - Real iOS-style status bar (time + signal bars + battery — no fake emoji icons) - Real navbar on each screen with the app's #243f5f background and white bold title (matches Expo Stack header) - Plugin gallery cards now match the real app's spacing, font sizes, and #243f5f plugin-name color - Success screen now uses the real horizontal banner layout (logo left, name + verified badge stacked right) with the key-result card overlapping the banner by 14px the way the real app does - All padding / typography / button styles aligned to the React Native source (PluginApprovalSheet.tsx, RevealApprovalSheet.tsx, plugin/[id].tsx) How-the-app-is-built section: - Replaced 4 paragraphs of architecture prose with 5 real code snippets pulled straight from app/mobile/components/tlsn/PluginScreen.tsx: MobilePluginHost setup, <NativeProver>, <PluginWebView>, <PluginRenderer>, and the executePlugin() call that ties it together. - Kept the <MobileFlowDiagram /> for the structural overview, but the meat of the section is now "here's what the integration looks like in code", not a wall of text. Also: skills moved from .claude/skills/ to ./skills/ in the tlsn-extension repo; updated the link in this post accordingly.
The previous diagram packed too much into each layer (subtitles + bullet lists). Trimmed to just three boxes (Your Expo app · @tlsn/host-react-native · @tlsn/plugin-sdk) with a single title in each. The detail panel below shows everything else when you tap a box. Dropped the @tlsn/host-contracts row: it's an adapter-author concern, not something a consumer app cares about. Mentioned in the SDK box copy instead if they want to dig. Also updated the surrounding prose to say "small stack" instead of "four-layer stack".
0xtsukino
force-pushed
the
blog/mobile-launch
branch
from
June 12, 2026 12:41
c5bfb7b to
dfd03f8
Compare
…stack diagram - swap MobileAppShowcase for a grid of real iOS app screenshots - replace the interactive MobileFlowDiagram with a static drawio diagram (diagrams/mobile_stack.drawio + light/dark SVG exports) showing the full host-adapter stack, everything visible at once
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Announces the TLSNotary mobile app for iOS and Android, alongside the new dev-onboarding path: ship your own TLSN-powered app on top of
@tlsn/host-react-native(or@tlsn/host-extension, or@tlsn/host-cli).What's in this PR
blog/2026-06-12-mobile-launch/index.md— ~1300 words bytsukino. Sections: intro, walkthrough, architecture, three build-your-own paths, what's next.<MobileAppShowcase />— four phone-frame mockups (browse plugins, approve plugin, approve reveal, verified result) rendered as styled HTML so we get free light/dark mode and no screenshot maintenance. Colors and copy mirror the real React Native screens inapp/mobile/.<MobileFlowDiagram />— interactive four-layer architecture explorer in the same style as the existing<ExtensionFlowDiagram />. Tap a layer (consumer / adapter / contracts / SDK) to see what lives in it. Takes aplatformprop so the same component can drive future posts about the extension or CLI variants.Test plan
npm run build— clean production build, no MDX or broken-link errorsnpm run start— post renders at/blog/2026/06/12/mobile-launch