Desktop

Kaba’s Desktop — towards a real-time internet, just for you.

Desktop

Out of the box, Kaba’s Desktop includes basic, minimal information. This is meant to be the new front page of the internet, just for you. This helps scale your observable universe, on which you can subsequently train custom models.

A big benefit of your Kaba Desktop is that no API keys are needed. Simply suck in information for your world.

The desktop is the page a new frame opens on: kaba://desktop/.

Open it with
Ctrl/Cmd+T	A new frame starts on the desktop
/desktop in the omnibar	Aliases /h, /home, /cls, /clear
Super+Enter	By default, a new pane on the desktop

[todo: add screenshot of the desktop and of parts the wallpaper, Clock, Weather, Frames and Notifications widgets, and the Console, Saves, Discovery and Edit buttons.]

Widgets

Out of the box there are several Widgets that we’ll cover below. To edit your widgets, just click Edit in the top right of your Kaba Desktop, next to Console, Saves, and Discovery.

• Time
• Weather
• Bookmarks
• Notifications
  • Messages
  • Memories
  • Recent activity
• Frames
• Hacker News
• Space Weather
• GitHub
• Twitter
• Speed Test
• Gitea / Forgejo

Widget	Shows
Time (Clock)	Date and time.
Weather	Current conditions, from Open-Meteo. No API key needed.
Space Weather	Solar activity and geomagnetic conditions.
Notifications	Messages, memories and activity.
Frames	Your saved frames, to reopen with a click.
Discovery	What you did, at a glance: today, this week, this month.
Bookmarks	Quick-launch links you choose.
Hacker News	Top stories.
Speed Test	A quick internet speed test with fallback between providers.
GitHub	Your notifications, read from github.com using your signed-in session.
Gitea / Forgejo	Notifications from your own instance.
Twitter (X)	Your home or mentions feed.
Jellyfin	Now playing, with remote control for your Jellyfin server.

Widgets that show an outside service fetch from that service while they are on your desktop. Remove a widget and those requests stop. The GitHub, Gitea and X widgets read pages using your existing sign-in for that site, in a hidden window; they do not ask for a token.

The other three buttons are shortcuts: Console opens a terminal, Saves opens your saved frames, and Discovery opens Discovery.

It’s easy to add Widgets, too.

Edit mode

Click Edit. While editing:

• each widget shows a dashed border;
• a drag handle lets you reorder widgets and rows;
• you can drag a widget’s edge to resize it;
• a gear opens that widget’s settings;
• an ✕ removes the widget;
• an Add Widget tile appears, showing how many columns are free in the row.

Click Done to finish. The layout and every widget’s settings are saved to your account automatically.

[todo: add screenshot of desktop edit mode and of parts drag handle, gear, remove button, resize edge, Add Widget tile, Done.]

Memories

The Notifications widget surfaces your recent memories alongside messages and activity, so what Kaba has just learned is visible the moment you open a frame. Everything else about memories lives in Hippocampus.

[todo: confirm how memories appear on the desktop and add a screenshot of the Notifications widget and of parts Messages, Memories, Recent activity.]

Frames

The Frames widget shows your saved frames, to reopen with a click. The order is the one you set in Hippocampus: drag frames there and the desktop shows the top ones in that order.

Notifications

One widget for messages, memories and recent activity. It spans the full width by default.

The grid

The desktop is a 12-column grid. A widget spans a number of columns and rows, and rows are 80 px tall with 16 px between them.

Size	Columns	Rows
Small square	3	2
Medium wide	6	2
Full-width banner	12	3

Wallpaper

Set the background image or a solid colour under Settings → Look & Feel. You can upload your own image.

First-run card

A new installation shows a card offering to bring your bookmarks, history and passwords over from another browser. See accounts.

Build a widget

Widgets are self-contained web components. Each one owns its styles, data fetching, refresh timer and settings form, and extends a small base class.

Note

Widgets are compiled into the client. Adding one today means building Kaba from source. A way to install widgets without rebuilding is not available yet.

1. Create the widget

userland/desktop/desktop/widgets/my-widget.js

import { KabaWidget, html, css } from '../widget-base.js';

class MyWidget extends KabaWidget {
  static widgetId = 'my-widget';
  get widgetLabel() { return 'My Widget'; }

  static get styles() {
    return [
      ...super.styles, // keep the base styles: edit overlay, settings panel
      css`
        .wrap {
          height: 100%;
          padding: 20px;
          background: rgba(0, 0, 0, 0.55);
          backdrop-filter: blur(12px);
          border: 1px solid var(--kaba-component-border);
          border-radius: 16px;
          box-sizing: border-box;
        }
      `,
    ];
  }

  // Runs when the widget connects and again after its settings are saved.
  async onWidgetInit() {
    this.requestUpdate();
  }

  renderWidget() {
    return html`<div class="wrap">Hello from ${this.config.myOption}!</div>`;
  }

  // The settings form shown from the gear in edit mode.
  renderConfig() {
    const cfg = this._pendingConfig; // staged values, not this.config
    return html`
      <div class="config-field">
        <span class="config-label">My Option</span>
        <input class="config-input" type="text"
          .value=${cfg.myOption ?? ''}
          @input=${(e) => this._setPending('myOption', e.target.value)} />
      </div>
    `;
  }
}

customElements.define('widget-my-widget', MyWidget);

2. Register it

Add an entry to widget-registry.js:

{
  id: 'my-widget',
  tag: 'widget-my-widget',
  label: 'My Widget',
  description: 'Does something useful.',
  import: './widgets/my-widget.js',
  defaultConfig: { myOption: 'hello' },
  defaultLayout: { colSpan: 4, rowSpan: 2 },
},

The desktop imports the widget on demand, places it on the grid, and adds the edit-mode controls for you.

Widget API

Member	Purpose
this.config	The saved settings. Read-only while rendering.
this._pendingConfig	Staged settings. Bind form inputs to this in renderConfig().
this._setPending(key, value)	Stage a change.
onWidgetInit()	Set up timers and fetch data.
renderWidget()	Return the widget’s content.
renderConfig()	Return the settings form.
widgetLabel	The human-readable name.

Form helpers from the base styles: .config-field, .config-label, .config-input, .config-select, .config-toggle, .config-toggle-label, and .toggle-switch with .toggle-track.

To fetch from another site, use kaba.core.widgetFetch so the request goes through the client rather than being blocked by the page’s origin rules. See the SDK.

Theme tokens

Use the --kaba-* variables so a widget follows the active theme:

--kaba-accent, --kaba-text-white, --kaba-text-muted, --kaba-component-border, --kaba-component-border-strong, --kaba-font-ui, --kaba-font-mono, --kaba-bg-background.