newOS Dev Portal

newOS Component Inventory

Complete documentation of 83 input/output components in the newOS platform.

18
Input Components
31
Output Components
3
Hybrid Components
19
React Hooks
12
API Actions

Input Components

ChatInput685 lines

Main chat input with AI prompts, file attachments, @mentions, web search & swarm toggles

Model/folder/ChatInput.tsx

OneOnOne

Direct messaging component for 1:1 conversations

Model/folder/OneOnOne.tsx

PromptSuggestion

AI prompt suggestion pills

Components/PromptSuggestion.tsx

PostCreate

Create new posts

Model/post/PostCreate.tsx

PostCreatePrompt

Prompt-based post creation

Model/post/PostCreatePrompt.tsx

FolderCreate28,346 bytes

Create new Moods/Spaces - complex multi-step flow

Model/folder/FolderCreate.tsx

FolderCreateAI

AI-assisted mood creation

Model/folder/Views/FolderCreateAI.tsx

Upload

Generic file upload wrapper

Components/Upload.tsx

UploadOverlay

Drag & drop upload overlay

Components/UploadOverlay.tsx

UploadDialog494 lines

File selection dialog with preview, type detection

MediaComponents/UploadDialog.tsx

UploadPicture

Image-specific upload

MediaComponents/UploadPicture.tsx

PicturesWall

Multi-image gallery upload/display

MediaComponents/PicturesWall.tsx

SearchBox

Global search input

Components/SearchBox.tsx

UserSelectBox

User picker/autocomplete

Components/UserSelectBox.tsx

UserFolderSelect

Folder selection for attachments

Components/UserFolderSelect.tsx

PhoneSignIn16,695 bytes

Phone number authentication

Forms/PhoneSignIn.tsx

ConnectDialog

Web3/wallet connection dialog

Components/ConnectDialog.tsx

FolderAttach

Attach posts to folders

Model/folder/FolderAttach.tsx

Output Components

Post

Single post renderer

Model/post/Post.tsx

PostWidget30,260 bytes

Full post card with actions

Model/post/PostWidget.tsx

PostActionPanel

Like, share, save actions

Model/post/PostActionPanel.tsx

PostThinkingClaims

AI reasoning/claims display

Model/post/PostThinkingClaims.tsx

ReasoningV222,992 bytes

AI reasoning chain display

Model/post/ReasoningV2.tsx

VotingPostItem

Post with voting UI

Model/post/VotingPostItem.tsx

Folder42,782 bytes

Main folder/mood view - complex

Model/folder/Folder.tsx

FolderWidget

Folder card widget

Model/folder/FolderWidget.tsx

FolderCore38,412 bytes

Core folder layout

Model/folder/Views/FolderCore.tsx

FolderChat35,767 bytes

Chat view inside folder

Model/folder/Views/FolderChat.tsx

FolderAnalytics

Folder analytics dashboard

Model/folder/Views/FolderAnalytics.tsx

FolderInfoWrapper

Folder metadata display

Model/folder/Views/FolderInfoWrapper.tsx

ContributorsWidgets

Folder contributors display

Model/folder/Views/ContributorsWidgets.tsx

User

Basic user display

Model/user/User.tsx

UserAvatar

User avatar with fallback

Model/user/UserAvatar.tsx

UserCard

User summary card

Model/user/UserCard.tsx

UserCardExtended20,046 bytes

Full user profile card

Model/user/UserCardExtended.tsx

UserChip

Inline user mention chip

Model/user/UserChip.tsx

UserFolders

User's folders list

Model/user/UserFolders.tsx

UsersGrid

Grid of users

Model/user/UsersGrid.tsx

Watts

WATTS token display

Model/user/Watts.tsx

outgraph8,629 bytes

Social graph visualization

Model/user/outgraph.tsx

MediaComponent

Universal media renderer

MediaComponents/MediaComponent.tsx

ImageMediaComponent

Image display with zoom

MediaComponents/ImageMediaComponent.tsx

VideoMediaComponent

Video player

MediaComponents/VideoMediaComponent.tsx

TextMediaComponent13,834 bytes

Rich text renderer

MediaComponents/TextMediaComponent.tsx

UniversalComponent

Auto-detect media type

MediaComponents/UniversalComponent.tsx

ItemGrid12,571 bytes

Main content grid

Components/ItemGrid.tsx

ItemMatrix

Matrix layout component

Components/ItemMatrix.tsx

FlexibleList

Flexible item list

Components/FlexibleList.tsx

LeaderBoard13,260 bytes

Ranking display

Components/LeaderBoard.tsx

Hybrid Components

FolderPostsBulkSelect

Bulk select posts in folder

Model/folder/Views/FolderPostsBulkSelect.tsx

FolderSearchModal

Search within folder

Model/folder/Views/FolderSearchModal.tsx

DownloadFolder

Export folder contents

Model/folder/Views/DownloadFolder.tsx

React Hooks

useProgressiveLiveQuery

Progressive data loading with live updates

hooks/useProgressiveLiveQuery.ts

useRatingStream

Real-time voting/rating stream

hooks/useRatingStream.ts

useChatHistory

Chat message history management

hooks/useChatHistory.ts

useFolderAttachments

Folder attachment state

hooks/useFolderAttachments.ts

useScrollItems

Infinite scroll pagination

hooks/useScrollItems.ts

useAlert

Alert/toast notifications

hooks/useAlert.tsx

useDialog

Modal dialog management

hooks/useDialog.tsx

useFlowSettings

Multi-step flow configuration

hooks/useFlowSettings.tsx

useIsWideScreen

Responsive layout detection

hooks/useIsWideScreen.tsx

useVisibility

Element visibility tracking

hooks/useVisibility.ts

useContentImageUrl

Image URL resolution

hooks/useContentImageUrl.ts

useEmbed

Embed/preview detection

hooks/useEmbed.tsx

useOpenGraph

OpenGraph metadata fetching

hooks/useOpenGraph.tsx

useTypewriter

Typewriter effect

hooks/useTypewriter.tsx

usePresigninRedirect

Pre-auth URL handling

hooks/usePresigninRedirect.tsx

useSubscriberInfo

Subscription status

hooks/useSubscriberInfo.tsx

useRating

User rating actions

hooks/useRating.tsx

useNotificationPrompt

Push notification opt-in

hooks/useNotificationPrompt.ts

usePWAPrompt

PWA install prompt

hooks/usePWAPrompt.ts

API Actions

auth.ts6,028 bytes

Login, logout, token management

newgraph-signals/src/actions/auth.ts

folder.ts31,665 bytes

Mood CRUD, subscriptions

newgraph-signals/src/actions/folder.ts

post.ts18,056 bytes

Post CRUD, attachments

newgraph-signals/src/actions/post.ts

user.ts17,565 bytes

Profile, avatar, following

newgraph-signals/src/actions/user.ts

search.ts

Global search

newgraph-signals/src/actions/search.ts

agent.ts7,333 bytes

AI agent orchestration

newgraph-signals/src/actions/agent.ts

upload

File upload flow

newgraph-signals/src/actions/upload/

payment.ts

Subscription payments

newgraph-signals/src/actions/payment.ts

ratingStream.ts

Real-time voting

newgraph-signals/src/actions/ratingStream.ts

activityStream

Activity feed

newgraph-signals/src/actions/activityStream/

firebase.ts

Push notifications

newgraph-signals/src/actions/firebase.ts

metamask.ts

Web3 wallet connection

newgraph-signals/src/actions/metamask.ts

Core Data Types

// Post with local enhancements
type EnrichedPost = PostReadResponse & {
  uploadState?: PostUploadState;
  thumbUrl?: string;
  aiMeta?: AIMeta;
  reasoning?: string[];
  relativeRating?: number;
};

// Folder/Mood with local state
type EnrichedFolder = MoodReadResponse & 
  FolderVotingState & 
  LocalFolderExhancements;

// Upload state machine
type PostUploadState = {
  status: "preparing" | "created" | "attached" | 
          "upload-requested" | "uploaded";
  filename: string;
  blob: Blob;
  thumb: string;
  foldersToAttach: { id: string }[];
};

// AI response metadata
interface AIMeta {
  model?: { name?: string; provider?: string };
  usage?: { tokens?: { prompt?: number; completion?: number } };
  request?: {
    prompt?: string;
    completion?: string;
    reasoning?: string[];
    references?: string[];
    swarm?: string[];
  };
}