Component Gallery
A one to one replica of Loca Client components in various states.
The Client is built with Tauri and Svelte, and both it and this page shares one UI package. A state shown here should be identical to the one in the Client.
If anything looks off, please report it as an issue.
Layouts
ChatShellView · default · desktop
Ready
Laptop
12%
Enter your instructions...
Smallest
Off
Balanced
Run the one-line installer from the landing page, then launch Loca from Applications. Want the per-OS steps?
How do I install Loca on macOS?
SettingsShellView · default
General Client
Your Name
Agent Name
Language
Detect My Location
Location
Share Date & Time
Share Operating System
Start at Login
New Session on Launch
Save Sessions
Ready
Laptop
NewCoreWizardView · connectLocal
Welcome to Loca
Loca runs on a Core: the service that powers your models, speech, and tools.
Connecting to the Core on this computer…
NewCoreWizardView · connectLocalError
Welcome to Loca
Could not reach Core: connection timed out
The local Core failed to start: port 7800 is already in use
NewCoreWizardView · remoteAddress
Welcome to Loca
Loca runs on a Core: the service that powers your models, speech, and tools. Connect this device to one to get started.
Enter the address where your Core is running, then check the connection. You can also press the button on the address bar to find a Core on the same network.
New to this? Read the setup guide.
Core Address
NewCoreWizardView · remotePair
Connect to a Remote Core
Nearly there. Give this Core a name you'll recognize, then enter the 6-digit pairing code shown on it.
Name (optional)
Pairing Code
NewCoreWizardView · connecting
Connect to a Remote Core
Enter the address where your Core is running, then check the connection. You can also press the button on the address bar to find a Core on the same network.
New to this? Read the setup guide.
Core Address
NewCoreWizardView · error
Connect to a Remote Core
Enter the address where your Core is running, then check the connection. You can also press the button on the address bar to find a Core on the same network.
New to this? Read the setup guide.
Core Address
Could not reach Core: connection timed out
Chat
UserInputView · empty
Enter your instructions...
Smallest
Off
Balanced
UserInputView · withText
How do I install Loca on macOS?
Smallest
Off
Balanced
UserInputView · voiceReady
Enter your instructions...
Smallest
Off
Balanced
UserInputView · permission
shell wants to run a programgit push origin main
UserInputView · askChoice
Which bowl should I fill?
UserInputView · askDiff
Apply this change?
config.toml
- timeout = 30
- retries = 1
+ timeout = 60
+ retries = 3
UserInputView · askFiles
Which files should I read?
UserInputView · askImage 
Does this look right?
UserInputView · askTable
Confirm the schedule:
| Day | Task | |
|---|---|---|
SessionListView · populated
Sessions
Trip planning for Kyoto User: "What's the best time to visit?" Agent: "Spring or autumn."
Refactor the storage browser User: "Extract a pure View." Agent: "On it, mapping the tree now."
Grocery list User: "Add oat milk." Agent: "Added."
Tuesday 27 May, 14:32 No messages yet
SessionListView · single
Sessions
First conversation User: "Hello." Agent: "Hi, how can I help?"
SessionListView · empty
Sessions
No sessions yet. Start one with the + button above.
UserMessageView · default
How do I install Loca on macOS?
UserMessageView · multiline
Summarize this article.
Then list three follow-up questions I should ask.
UserMessageView · editing
draft message being edited
AgentMessageView · content
Run the one-line installer from the landing page, then launch Loca from Applications. Want the per-OS steps?
AgentMessageView · active
Run the one-line installer from the landing page, then launch Loca from Applications. Want the per-OS steps?
ToolCallView · completed
Arguments
{
"portion": "1 scoop",
"bowl": "kitchen"
} Result
{
"fed": true,
"dispensedGrams": 45
} ToolCallView · running
Closing the garage door
ToolCallView · failed
only http(s) URLs are allowed
ToolCallView · labelled
Arguments
{
"portion": "1 scoop"
} Result
{
"fed": true
} ToolCallView · cancelled
Closing the garage door
ToolCallView · awaiting
Arguments
{
"portion": "1 scoop"
} ToolCallView · memoryResult
Today
# Today - water the plants - call the vet
ErrorMessageView · rateLimit
Rate limit exceeded. Please wait a moment and try again.
ErrorMessageView · withDetail
Server error. Please try again later.
HTTP 503 upstream connect error or disconnect/reset before headers
ErrorMessageView · unknown
An unexpected error occurred. Please try again.
ExpandableMessageView · expanded
Tool-provided content shown inline, expanded by default.
RelevantMemoriesView · found
Installing Loca (0.92)
One-line installer + launch.
Your first chat (0.81)
RelevantMemoriesView · none
No memories matched.
RelevantMemoriesView · error
Couldn't search your memories
Embedding model timed out after 30s.
No memories matched.
RelevantToolsView · twoPhase
Phase 1: Embedding (2)
read_file (0.71),write_file (0.55)
Phase 2: LLM Filter (1)
read_file
Phase 3: Always Available Tools (1)
current_time
Phase 4: MCP Tools (1)
github_search
RelevantToolsView · named
Phase 1: Embedding (0)
No candidates matched.
Phase 2: LLM Filter (0)
No tools survived the filter.
Phase 3: Named Tools (1)
write_memory
RelevantToolsView · emptyPhase
Phase 1: Embedding (1)
read_file (0.71)
Phase 2: LLM Filter (0)
No tools survived the filter.
RelevantToolsView · error
Couldn't filter tools
Embedding model timed out after 30s.
Phase-1 candidates are kept as a fallback so the main model still sees tools.
Phase 1: Embedding (1)
read_file (0.71)
AttachmentListView · documents
report.pdf
notes.md
AttachmentListView · withImage 
report.pdf
AttachmentListView · editable
report.pdf
CoreBarView · idle
Ready
Laptop
CoreBarView · busy
Laptop
CoreBarView · busyExpanded
Laptop
Language Model: 1 working, 1 waiting
Speech: 1 working, 0 waiting
Active sessions: 2
CoreBarView · downloading
Downloading 35%
Laptop
CoreBarView · startingUp
Laptop
CoreBarView · error
Desktop
CoreBarView · errorExpanded
Desktop
Language Model
llama-server: failed to load model: out of memory
Speech
whisper model not found on disk
CoreBarView · reconnecting
Reconnecting
Mac Studio
CoreBarView · disconnected
Mac Studio
CoreBarView · stopped
Laptop
CoreBarView · multiCore
Ready
Desktop
PermissionRequestView · declared
shell wants to run a programgit status
PermissionRequestView · noDetail
model wants to use the language modelPermissionRequestView · undeclared
fetch wants to connect to a serverhttps://api.example.com
This access was not declared by the Extension. Only allow it if you trust this Extension and
the request makes sense for what you asked.AutocorrectAlertView · short
Before Autocorrect: whats the wether like
AutocorrectAlertView · multiline
Before Autocorrect: remind me to:
- buy milk
- call mom
then go for a run
ScheduleConfirmFormView · default
Review Scheduled Prompt
Repeat
Days
Time
Make up a missed run on the next start
ScheduleConfirmFormView · runMissedOn
Review Scheduled Prompt
Repeat
Every minutes
Make up a missed run on the next start
ScheduleConfirmFormView · once
Review Scheduled Prompt
Repeat
When
Make up a missed run on the next start
Settings
SettingsFieldView · boolean
Detect My Location
SettingsFieldView · select
Monitor
SettingsFieldView · text
Your Name
SettingsFieldView · number px
Window Width
SettingsFieldView · slider px
Shadow Size
SettingsFieldView · color
Your Bubble Color
SettingsFieldView · float
Temperature
SettingsFieldView · colorDark
Your Bubble Color
SettingsFieldView · withError
Your Name
Must not be empty
SettingsFieldView · readOnly
Your Name
SettingsFieldView · horizontalReset px
Window Width
CoresFieldView · current This device
Name
Address
https://192.168.1.20:8787
Pairing code
Paired devices
Studio Mac
active now
Work Laptop
last seen 3 minutes ago
Pixel 8
last seen 2 hours ago
CoresFieldView · localNoPassword This device
Name
Address
https://127.0.0.1:7800
Pairing code
Admin password
Paired devices
This Mac
active now
CoresFieldView · localWithPassword This device
Name
Address
https://127.0.0.1:7800
Pairing code
Admin password
Paired devices
This Mac
active now
CoresFieldView · mintedCode This device
Name
Address
https://192.168.1.20:8787
Pairing code
428 913
Enter it on the new device. This code expires in 5 minutes.
Paired devices
Studio Mac
active now
CoresFieldView · noDevices
Name
Address
https://192.168.1.20:8787
Pairing code
Paired devices
No paired devices.
CoresFieldView · devicesLoading
Name
Address
https://192.168.1.20:8787
Pairing code
Paired devices
Loading…
CoresFieldView · devicesError
Name
Address
https://192.168.1.20:8787
Pairing code
Paired devices
Couldn't load paired devices
Could not reach the Core.
CoresFieldView · codeCopied This device
Name
Address
https://192.168.1.20:8787
Pairing code
428 913
Enter it on the new device. This code expires in 5 minutes.
Paired devices
Studio Mac
active now
CoresFieldView · remote
Name
Address
https://core.example.com:8787
Switch to this core to generate pairing keys and manage its devices.
ServicesFieldView · running
Service Name
CPU
RAM
Core Service
0.4%
82 MB
Language Model
Running · 127.0.0.1:7701
12.7%
1.2 GB
Speech
Running · 127.0.0.1:7702
1.1%
210 MB
Total
14.2%
1.5 GB
ServicesFieldView · errored
Service Name
CPU
RAM
Core Service
0.3%
80 MB
Language Model
Error · 127.0.0.1:7701
-
-
Total
0.3%
80 MB
ServicesFieldView · clientOnly
Service Name
CPU
RAM
Main Application
2.0%
320 MB
Total
2.0%
320 MB
ServicesFieldView · empty
Service Name
CPU
RAM
Total
-
-
StorageFieldView · populated
Models 10.9 GB
Qwen2.5-7B-Instruct-Q4_K_M.gguf 4.7 GB
Qwen2.5-1.5B-Instruct-Q4_K_M.gguf 1.1 GB
embeddings 5.1 GB
Sessions 84 MB
Cache 412 MB
embeddings 412 MB
Settings 12 KB
Total 11.4 GB
StorageFieldView · empty
Models 0 B
Cache 0 B
Empty.
Total 0 B
StorageFieldView · loading
Loading…
StorageFieldView · error
Couldn't load storage
Could not reach the Core.
ExtensionsFieldView · none
No extensions installed
Add @npm to search the marketplace.
ExtensionsFieldView · noMatches
No matching extensions
ExtensionsFieldView · npmEmpty
Search the npm marketplace
Type a package name to search.
ExtensionsFieldView · npmNoResults
No npm packages found
ExtensionDetailView · installed
Undeclared Permission Requests
Whether to automatically deny, or ask you, when a tool requests access this extension never declared.
Provides 8
tools (6 enabled). Turn individual
tools on and manage their permissions under Tools.
ExtensionDetailView · singleTool
Undeclared Permission Requests
Whether to automatically deny, or ask you, when a tool requests access this extension never declared.
Provides 1
tool (1 enabled). Turn individual
tools on and manage their permissions under Tools.
ExtensionDetailView · busy
Undeclared Permission Requests
Whether to automatically deny, or ask you, when a tool requests access this extension never declared.
Provides 8
tools (6 enabled). Turn individual
tools on and manage their permissions under Tools.
ExtensionDetailView · drifted
Content Changed Since Install
This extension's files changed on disk, so its tools were disabled. Review the change, then
choose "Review & re-enable" from the extension menu to trust the current contents.Undeclared Permission Requests
Whether to automatically deny, or ask you, when a tool requests access this extension never declared.
Provides 8
tools (0 enabled). Turn individual
tools on and manage their permissions under Tools.
ToolsFieldView · empty
No tools yet
Install an extension or add an MCP server to get tools.
ToolsFieldView · noMatches
No matching tools
ToolsFieldView · loadError
Couldn't load tools
Could not reach the Core.
ToolDetailView · enabled
Enabled
Permissions
Read files at
~/Documents(required) Open the files you ask it to summarize.Network access to
api.example.com:443 Look up reference data while drafting.ToolDetailView · disabled
Enabled
Permissions
Run the
bash command(required) Execute the commands you approve.ToolDetailView · deniedRequired
Enabled
Enabled, but not offered to the agent while a required permission is denied.
Permissions
Write files at
~/Projects(required) Save the edits it makes for you.ToolDetailView · noPermissions This tool needs no special permissions.
Enabled
ToolDetailView · enableBusy This tool needs no special permissions.
Enabled
ToolDetailView · alwaysAvailable This tool needs no special permissions.
Enabled
Always Available
McpDetailView · stdioCustom
Connected
Ready to use its tools and prompts.Connect
Name
Transport
Runtime
Command
Arguments
McpDetailView · stdioDeno
Off
Enable to connect and use its tools and prompts.Connect
Name
Transport
Runtime
Package or Script
Arguments
Full Access
Runs with full access for the widest compatibility. Turn off to choose permissions yourself.
Permissions
McpDetailView · remoteWithToken
Connected
Ready to use its tools and prompts.Connect
Name
Transport
URL
Authentication
Bearer token
McpDetailView · remoteOAuth
Couldn't connect
The server failed to start. See the details below.Connect
Couldn't connect to this server
OAuth sign-in required
Name
Transport
URL
Authentication
Sign in
Authorize in your browser to connect.
McpDetailView · error
Couldn't connect
The server failed to start. See the details below.Connect
Couldn't connect to this server
Connection refused: spawn npx ENOENT
Name
Transport
Runtime
Command
Arguments
McpFieldView · empty
No MCP servers yet
Use the menu to add an MCP server.
McpFieldView · noMatches
No matching servers
McpFieldView · loadError
Couldn't load MCP servers
Could not reach the Core.
MemoryDetailView · knowledge
Enabled
Knowledge
Summarized
Brand and dependency conventions: write the brand as Loca; prefer maintained packages.Title
Content
MemoryDetailView · skill
Enabled
Skill
Summarized
Reads a whole thread and returns a short, structured recap.Title
Description
Suggested Tools
read_session search_messages
Instructions
Bundled Files
recap.md
checklist.md
MemoryDetailView · notSummarized
Enabled
Knowledge
Pending summarization
Won't surface by relevance until summarization finishes.Title
Content
MemoryDetailView · readOnly
Enabled
Knowledge · provided by an extension (read-only)
Summarized
Keep replies concise and concrete.Title
Content
MemoryDetailView · titleError
Enabled
Knowledge
Pending summarization
Won't surface by relevance until summarization finishes.Title
Give this memory a title
Content
MemoryDetailView · contentLoading
Enabled
Knowledge
Pending summarization
Won't surface by relevance until summarization finishes.Title
Content
ModelPresetFieldView · recommended
Model
Quantization
ModelPresetFieldView · betterAvailable
A better model is available for Balanced: Qwen3.6 27B
Model
ModelPresetFieldView · error
Could not reach the Core
SttPresetFieldView · selected
Model
Quantization
SttPresetFieldView · error
Could not load the transcription catalog
TtsPresetFieldView · selected
Model
Quantization
TtsPresetFieldView · error
Could not load the voice catalog
ScheduleEditorView · daily
Repeat
Days
Time
ScheduleEditorView · weekly
Repeat
Days
Time
ScheduleEditorView · once
Repeat
When
ScheduleEditorView · interval
Repeat
Every minutes
ScheduleEditorView · yearly
Repeat
Date
Time
ScheduleEditorView · monthly
Repeat
Day of the month
Time
ScheduleEditorView · disabled
Repeat
Days
Time
ScheduledPromptDetailView · hasRun
Next run in 3 hours Last run 2 days ago
Title
Prompt
Schedule
Repeat
Days
Time
Make up a missed run on the next start
ScheduledPromptDetailView · neverRun
Next run in 1 hour
Title
Prompt
Schedule
Repeat
Every minutes
Make up a missed run on the next start
ScheduledPromptDetailView · disabled
Paused Last run a week ago
Title
Prompt
Schedule
Repeat
Date
Time
Make up a missed run on the next start
SnippetDetailView · filled
Name
Trigger
Placement
Text
SnippetDetailView · empty
Name
Trigger
Placement
Text
SnippetDetailView · error
Name
Trigger
This trigger is already used by another snippet
Placement
Text
CommandPreviewFieldView · short
loca-core serve --port 8787CommandPreviewFieldView · long
deno run -A --unstable-kv jsr:@loca/core --channel stable --models ~/.loca/modelsCommandPreviewFieldView · loading
Loading...QuickSettingsView · default px
Quick Settings
The essentials to get going. Everything here is also in Settings.
Color Mode
Text Size
Window Alignment
Animations
QuickSettingsView · pendingDownloads px
Quick Settings
The essentials to get going. Everything here is also in Settings.
Color Mode
Text Size
Window Alignment
Animations
Objects
ObjectManagerView · populated
Code Search
Searches the codebase for symbols, references, and text matches. Enabled Updated
Built-in extension
filesystem
Local (stdio) Error
node ./server.js
Daily summary
Runs every weekday at 9:00 AM. Enabled
Scheduled prompt
ObjectManagerView · empty
No items yet.
ObjectManagerView · loading
Code Search
Searches the codebase for symbols, references, and text matches. Enabled Updated
Built-in extension
filesystem
Local (stdio) Error
node ./server.js
Daily summary
Runs every weekday at 9:00 AM. Enabled
Scheduled prompt
ObjectManagerView · selected
Code Search
ObjectManagerView · error
Could not reach the Core
ObjectManagerView · filterSort
Code Search
Searches the codebase for symbols, references, and text matches. Enabled Updated
Built-in extension
filesystem
Local (stdio) Error
node ./server.js
Daily summary
Runs every weekday at 9:00 AM. Enabled
Scheduled prompt
ObjectCardView · minimal
Untitled snippet
ObjectCardView · full
Code Search
Searches the codebase for symbols, references, and text matches. Enabled Updated
Built-in extension
ObjectCardView · error
filesystem
Local (stdio) Error
node ./server.js
ObjectDetailHeaderView · titleOnly
My Extension
ObjectDetailHeaderView · withSubtitle
filesystem
Local (stdio)ObjectDetailHeaderView · withBadges
Code Search Enabled Updated
Built-in extensionObjectDetailHeaderView · withActions
Code Search
Built-in extensionObjectDetailScrollView · withDescription
Searches the codebase for symbols, references, and text matches.
Type-specific detail content.
ObjectDetailScrollView · noDescription
Type-specific detail content.
ObjectBadgeView · neutral
Default
ObjectBadgeView · enabled
Enabled
ObjectBadgeView · error
Error
ObjectBadgeView · current
Current
ObjectBadgeView · pending
Pending
Overlays
ConfirmModalView · default
Restart Core?
The Core will restart to apply the update.
ConfirmModalView · destructive
Delete session?
This permanently removes the conversation and its messages.
ConfirmModalView · withDownloads
Download models?
These files are required before the model can run.
llama-server
v0.3.2
12 MB
Qwen2.5-7B-Instruct-Q4_K_M.gguf
Qwen/Qwen2.5-7B-Instruct-GGUF
4.7 GB
Total: 4.7 GB
ConfirmModalView · dontShowAgain
Run this tool?
The assistant wants to run a shell command on this device.
ConfirmModalView · alert
Update available
A new version of the Client is ready to install.
PasswordPromptModalView · default
Admin access required
Enter your admin password to install the Core service.
Admin password
PasswordPromptModalView · error
Admin access required
Admin password
Incorrect password, try again
PasswordPromptModalView · submitting
Admin access required
Admin password
DeletionsModalView · default
Delete model?
Will be deleted
Qwen2.5-7B-Instruct-Q4_K_M.gguf
4.7 GB
Frees 4.7 GB
DeletionsModalView · withSkipped
Delete unused binaries?
Will be deleted
llama-server
12 MB
whisper-server
8 MB
In use, will be kept
tts-server
running
Frees 20 MB
DeletionsModalView · many
Clear download cache?
Will be deleted
Qwen2.5-7B-Instruct-Q4_K_M.gguf
4.7 GB
Qwen2.5-3B-Instruct-Q4_K_M.gguf
2.1 GB
nomic-embed-text-v1.5.gguf
138 MB
llama-server
12 MB
whisper-server
8 MB
ggml-base.en.bin
142 MB
Frees 7.1 GB
DeletionsModalView · noticeOnly
Reset all settings?
This restores every setting to its default. Your sessions and downloaded models are kept.
DeletionsModalView · empty
Nothing to delete
There is nothing to free right now.
DownloadsModalView · active
Downloads
Qwen2.5-0.5B-Instruct-Q8_0.gguf 531 MB
Qwen2.5-7B-Instruct-Q4_K_M.gguf 2.1 GB / 4.7 GB
45%
llama-server 12 MB
nomic-embed-text-v1.5.Q4_K_M.gguf 84 MB
loca-core-speech 38 MB
DownloadsModalView · empty
Downloads
No downloads
Primitives
IconText · status
Summarized
IconText · error
Couldn't complete that action
IconText · header
read_file wants to read a fileAlert · info
Something needs your attention.
Alert · success
Something needs your attention.
Alert · warning
Something needs your attention.
Alert · error
Something needs your attention.
Alert · transparent
Something needs your attention.
Alert · small
Something needs your attention.
Alert · startAligned
Something needs your attention.
Chip · default
default
Chip · subtle
subtle
Chip · accent
accent
Chip · withIcon
tagged
Chip · green
green
Chip · red
red
Chip · small
small
Input · withSuffix seconds
FlushSelect · default
Balanced
Card · default
Card content
Card · raised
Card content
Card · paddingLg
Card content
Card · paddingNone
Card content
Bubble · left
A message bubble.
Bubble · right
A message bubble.
Bubble · center
A message bubble.
Bubble · small
A message bubble.
Bubble · accent
A message bubble.
Bubble · active
A message bubble.
Bubble · progress
A message bubble.
Bubble · indeterminate
A message bubble.
SectionHeader · section
Appearance
SectionHeader · group
General
SubsectionHeader · default
Bundled files
SubsectionHeader · withActions
Permissions
FormField · vertical
Display name
FormField · withDescription
Display name
FormField · horizontal
Compact mode
FormField · withError
Port
Must be between 1 and 65535
HelpText · default
This setting controls how the assistant formats its replies.
HelpText · compact
Applies on the next message.
Expandable · expanded
The disclosed body content.
Expand · open
Revealed content.
Expand · closed
(collapsed: nothing rendered)
Modal · default
Dialog title
A centered dialog over a dimmed backdrop.
ActionSheet · default
Message
Mobile
ChatShellView · default · mobile
Ready
12%
Enter your instructions...
Smallest
Off
Balanced
CoreBarView · busyExpanded · mobile
Language Model: 1 working, 1 waiting
Speech: 1 working, 0 waiting
Active sessions: 2
CoreBarView · errorExpanded · mobile
Language Model
llama-server: failed to load model: out of memory
Speech
whisper model not found on disk
Modal · sheet · mobile
Bottom sheet
On touch every modal presents as a bottom sheet: a grab handle, drag-to-dismiss, and a slide-up transition, inherited from the one shared primitive.
ActionSheet · mobile
Message